@wordpress/block-library 8.31.0 → 8.33.0

package/src/template-part/edit/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { serialize } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
@@ -11,8 +12,15 @@ import {
 	useHasRecursion,
 	InspectorControls,
 	__experimentalBlockPatternsList as BlockPatternsList,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { PanelBody, Spinner, Modal, MenuItem } from '@wordpress/components';
+import {
+	PanelBody,
+	Spinner,
+	Modal,
+	MenuItem,
+	ToolbarButton,
+} from '@wordpress/components';
 import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
@@ -27,28 +35,26 @@ import TemplatePartSelectionModal from './selection-modal';
 import { TemplatePartAdvancedControls } from './advanced-controls';
 import TemplatePartInnerBlocks from './inner-blocks';
 import { createTemplatePartId } from './utils/create-template-part-id';
-import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
 	useTemplatePartArea,
-	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 
 function ReplaceButton( {
 	isEntityAvailable,
 	area,
-	clientId,
 	templatePartId,
 	isTemplatePartSelectionOpen,
 	setIsTemplatePartSelectionOpen,
 } ) {
+	// This hook fetches patterns, so don't run it unconditionally in the main
+	// edit function!
 	const { templateParts } = useAlternativeTemplateParts(
 		area,
 		templatePartId
 	);
-	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const hasReplacements = !! templateParts.length || !! blockPatterns.length;
+	const hasReplacements = !! templateParts.length;
 	const canReplace =
 		isEntityAvailable &&
 		hasReplacements &&
@@ -71,20 +77,30 @@ function ReplaceButton( {
 	);
 }
 
-function TemplatesList( { availableTemplates, onSelect } ) {
-	const shownTemplates = useAsyncList( availableTemplates );
+function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
+	// This hook fetches patterns, so don't run it unconditionally in the main
+	// edit function!
+	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+	const canReplace =
+		isEntityAvailable &&
+		!! blockPatterns.length &&
+		( area === 'header' || area === 'footer' );
+	const shownTemplates = useAsyncList( blockPatterns );
 
-	if ( ! availableTemplates ) {
+	if ( ! canReplace ) {
 		return null;
 	}
 
 	return (
-		<BlockPatternsList
-			label={ __( 'Templates' ) }
-			blockPatterns={ availableTemplates }
-			shownPatterns={ shownTemplates }
-			onClickPattern={ onSelect }
-		/>
+		<PanelBody title={ __( 'Design' ) }>
+			<BlockPatternsList
+				label={ __( 'Templates' ) }
+				blockPatterns={ blockPatterns }
+				shownPatterns={ shownTemplates }
+				onClickPattern={ onSelect }
+				showTitle={ false }
+			/>
+		</PanelBody>
 	);
 }
 
@@ -94,6 +110,7 @@ export default function TemplatePartEdit( {
 	clientId,
 } ) {
 	const { createSuccessNotice } = useDispatch( noticesStore );
+	const { editEntityRecord } = useDispatch( coreStore );
 	const currentTheme = useSelect(
 		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
 		[]
@@ -104,11 +121,19 @@ export default function TemplatePartEdit( {
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
-	const { isResolved, hasInnerBlocks, isMissing, area } = useSelect(
+	const {
+		isResolved,
+		hasInnerBlocks,
+		isMissing,
+		area,
+		onNavigateToEntityRecord,
+		title,
+		canEditTemplate,
+	} = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { getBlockCount } = select( blockEditorStore );
+			const { getBlockCount, getSettings } = select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -126,6 +151,9 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
+			const _canEditTemplate =
+				select( coreStore ).canUser( 'create', 'templates' ) ?? false;
+
 			return {
 				hasInnerBlocks: getBlockCount( clientId ) > 0,
 				isResolved: hasResolvedEntity,
@@ -134,32 +162,42 @@ export default function TemplatePartEdit( {
 					( ! entityRecord ||
 						Object.keys( entityRecord ).length === 0 ),
 				area: _area,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+				title: entityRecord?.title,
+				canEditTemplate: _canEditTemplate,
 			};
 		},
 		[ templatePartId, attributes.area, clientId ]
 	);
 
-	const { templateParts } = useAlternativeTemplateParts(
-		area,
-		templatePartId
-	);
-	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
-	const hasReplacements = !! templateParts.length || !! blockPatterns.length;
 	const areaObject = useTemplatePartArea( area );
 	const blockProps = useBlockProps();
 	const isPlaceholder = ! slug;
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
 
-	const canReplace =
-		isEntityAvailable &&
-		hasReplacements &&
-		( area === 'header' || area === 'footer' );
-
-	const createFromBlocks = useCreateTemplatePartFromBlocks(
-		area,
-		setAttributes
-	);
+	const onPatternSelect = async ( pattern ) => {
+		await editEntityRecord(
+			'postType',
+			'wp_template_part',
+			templatePartId,
+			{
+				blocks: pattern.blocks,
+				content: serialize( pattern.blocks ),
+			}
+		);
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: template part title. */
+				__( 'Template Part "%s" updated.' ),
+				title || slug
+			),
+			{
+				type: 'snackbar',
+			}
+		);
+	};
 
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
@@ -192,31 +230,25 @@ export default function TemplatePartEdit( {
 		);
 	}
 
-	const partsAsPatterns = templateParts.map( ( templatePart ) =>
-		mapTemplatePartToBlockPattern( templatePart )
-	);
-
-	const onTemplatePartSelect = ( templatePart ) => {
-		setAttributes( {
-			slug: templatePart.slug,
-			theme: templatePart.theme,
-			area: undefined,
-		} );
-		createSuccessNotice(
-			sprintf(
-				/* translators: %s: template part title. */
-				__( 'Template Part "%s" replaced.' ),
-				templatePart.title?.rendered || templatePart.slug
-			),
-			{
-				type: 'snackbar',
-			}
-		);
-	};
-
 	return (
 		<>
 			<RecursionProvider uniqueId={ templatePartId }>
+				{ isEntityAvailable &&
+					onNavigateToEntityRecord &&
+					canEditTemplate && (
+						<BlockControls group="other">
+							<ToolbarButton
+								onClick={ () =>
+									onNavigateToEntityRecord( {
+										postId: templatePartId,
+										postType: 'wp_template_part',
+									} )
+								}
+							>
+								{ __( 'Edit' ) }
+							</ToolbarButton>
+						</BlockControls>
+					) }
 				<InspectorControls group="advanced">
 					<TemplatePartAdvancedControls
 						tagName={ tagName }
@@ -268,31 +300,14 @@ export default function TemplatePartEdit( {
 					} }
 				</BlockSettingsMenuControls>
 
-				{ canReplace &&
-					( partsAsPatterns.length > 0 ||
-						blockPatterns.length > 0 ) && (
-						<InspectorControls>
-							<PanelBody title={ __( 'Replace' ) }>
-								<TemplatesList
-									availableTemplates={ partsAsPatterns }
-									onSelect={ ( pattern ) => {
-										onTemplatePartSelect(
-											pattern.templatePart
-										);
-									} }
-								/>
-								<TemplatesList
-									availableTemplates={ blockPatterns }
-									onSelect={ ( pattern, blocks ) => {
-										createFromBlocks(
-											blocks,
-											pattern.title
-										);
-									} }
-								/>
-							</PanelBody>
-						</InspectorControls>
-					) }
+				<InspectorControls>
+					<TemplatesList
+						area={ area }
+						clientId={ clientId }
+						isEntityAvailable={ isEntityAvailable }
+						onSelect={ ( pattern ) => onPatternSelect( pattern ) }
+					/>
+				</InspectorControls>
 
 				{ isEntityAvailable && (
 					<TemplatePartInnerBlocks

package/src/template-part/edit/inner-blocks.js

@@ -1,29 +1,105 @@
 /**
  * WordPress dependencies
  */
-import { useEntityBlockEditor } from '@wordpress/core-data';
+import { useEntityBlockEditor, store as coreStore } from '@wordpress/core-data';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
 	useSettings,
 	store as blockEditorStore,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+import { parse } from '@wordpress/blocks';
 
-export default function TemplatePartInnerBlocks( {
-	postId: id,
-	hasInnerBlocks,
-	layout,
-	tagName: TagName,
-	blockProps,
-} ) {
+function useRenderAppender( hasInnerBlocks ) {
+	const blockEditingMode = useBlockEditingMode();
+	// Disable appending when the editing mode is 'contentOnly'. This is so that the user can't
+	// append into a template part when editing a page in the site editor. See
+	// DisableNonPageContentBlocks. Ideally instead of (mis)using editing mode there would be a
+	// block editor API for achieving this.
+	if ( blockEditingMode === 'contentOnly' ) {
+		return false;
+	}
+	if ( ! hasInnerBlocks ) {
+		return InnerBlocks.ButtonBlockAppender;
+	}
+}
+
+function useLayout( layout ) {
 	const themeSupportsLayout = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings()?.supportsLayout;
 	}, [] );
 	const [ defaultLayout ] = useSettings( 'layout' );
-	const usedLayout = layout?.inherit ? defaultLayout || {} : layout;
+	if ( themeSupportsLayout ) {
+		return layout?.inherit ? defaultLayout || {} : layout;
+	}
+}
 
+function NonEditableTemplatePartPreview( {
+	postId: id,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
+	useBlockEditingMode( 'disabled' );
+
+	const { content, editedBlocks } = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return {};
+			}
+			const { getEditedEntityRecord } = select( coreStore );
+			const editedRecord = getEditedEntityRecord(
+				'postType',
+				'wp_template_part',
+				id,
+				{ context: 'view' }
+			);
+			return {
+				editedBlocks: editedRecord.blocks,
+				content: editedRecord.content,
+			};
+		},
+		[ id ]
+	);
+
+	const blocks = useMemo( () => {
+		if ( ! id ) {
+			return undefined;
+		}
+
+		if ( editedBlocks ) {
+			return editedBlocks;
+		}
+
+		if ( ! content || typeof content !== 'string' ) {
+			return [];
+		}
+
+		return parse( content );
+	}, [ id, editedBlocks, content ] );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput: () => {},
+		onChange: () => {},
+		renderAppender: false,
+		layout: useLayout( layout ),
+	} );
+
+	return <TagName { ...innerBlocksProps } />;
+}
+
+function EditableTemplatePartInnerBlocks( {
+	postId: id,
+	hasInnerBlocks,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
 		'wp_template_part',
@@ -34,11 +110,48 @@ export default function TemplatePartInnerBlocks( {
 		value: blocks,
 		onInput,
 		onChange,
-		renderAppender: hasInnerBlocks
-			? undefined
-			: InnerBlocks.ButtonBlockAppender,
-		layout: themeSupportsLayout ? usedLayout : undefined,
+		renderAppender: useRenderAppender( hasInnerBlocks ),
+		layout: useLayout( layout ),
 	} );
 
 	return <TagName { ...innerBlocksProps } />;
 }
+
+export default function TemplatePartInnerBlocks( {
+	postId: id,
+	hasInnerBlocks,
+	layout,
+	tagName: TagName,
+	blockProps,
+} ) {
+	const { canViewTemplatePart, canEditTemplatePart } = useSelect(
+		( select ) => {
+			return {
+				canViewTemplatePart:
+					select( coreStore ).canUser( 'read', 'templates' ) ?? false,
+				canEditTemplatePart:
+					select( coreStore ).canUser( 'create', 'templates' ) ??
+					false,
+			};
+		},
+		[]
+	);
+
+	if ( ! canViewTemplatePart ) {
+		return null;
+	}
+
+	const TemplatePartInnerBlocksComponent = canEditTemplatePart
+		? EditableTemplatePartInnerBlocks
+		: NonEditableTemplatePartPreview;
+
+	return (
+		<TemplatePartInnerBlocksComponent
+			postId={ id }
+			hasInnerBlocks={ hasInnerBlocks }
+			layout={ layout }
+			tagName={ TagName }
+			blockProps={ blockProps }
+		/>
+	);
+}

package/src/template-part/edit/selection-modal.js

@@ -18,7 +18,6 @@ import {
 import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
-	useCreateTemplatePartFromBlocks,
 } from './utils/hooks';
 import { mapTemplatePartToBlockPattern } from './utils/map-template-part-to-block-pattern';
 import { searchPatterns } from '../../utils/search-patterns';
@@ -31,11 +30,11 @@ export default function TemplatePartSelectionModal( {
 	clientId,
 } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
-
 	const { templateParts } = useAlternativeTemplateParts(
 		area,
 		templatePartId
 	);
+
 	// We can map template parts to block patters to reuse the BlockPatternsList UI
 	const filteredTemplateParts = useMemo( () => {
 		const partsAsPatterns = templateParts.map( ( templatePart ) =>
@@ -49,7 +48,6 @@ export default function TemplatePartSelectionModal( {
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
-	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
@@ -72,11 +70,6 @@ export default function TemplatePartSelectionModal( {
 		onClose();
 	};
 
-	const createFromBlocks = useCreateTemplatePartFromBlocks(
-		area,
-		setAttributes
-	);
-
 	const hasTemplateParts = !! filteredTemplateParts.length;
 	const hasBlockPatterns = !! filteredBlockPatterns.length;
 
@@ -104,20 +97,6 @@ export default function TemplatePartSelectionModal( {
 				</div>
 			) }
 
-			{ hasBlockPatterns && (
-				<div>
-					<h2>{ __( 'Patterns' ) }</h2>
-					<BlockPatternsList
-						blockPatterns={ filteredBlockPatterns }
-						shownPatterns={ shownBlockPatterns }
-						onClickPattern={ ( pattern, blocks ) => {
-							createFromBlocks( blocks, pattern.title );
-							onClose();
-						} }
-					/>
-				</div>
-			) }
-
 			{ ! hasTemplateParts && ! hasBlockPatterns && (
 				<HStack alignment="center">
 					<p>{ __( 'No results found.' ) }</p>

package/src/template-part/editor.scss

@@ -23,11 +23,17 @@
 	z-index: z-index(".block-library-template-part__selection-search");
 }
 
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
-.is-outline-mode .block-editor-block-list__block:not(.remove-outline).is-reusable {
-	&.is-highlighted,
-	&.is-selected {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+// We don't use .is-outline-mode in this case so colors take effect properly in the block editor.
+// Will be a better result when outlines are not shadows, but outlines, so we can target outline-color, not redefine the entire shadow.
+.block-editor-block-list__block:not(.remove-outline).wp-block-template-part,
+.block-editor-block-list__block:not(.remove-outline).is-reusable {
+	&.is-highlighted::after,
+	&.is-selected::after {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-block-synced-color);
+	}
+
+	&.is-hovered::after {
+		box-shadow: 0 0 0 $border-width var(--wp-block-synced-color);
 	}
 
 	&.block-editor-block-list__block:not([contenteditable]):focus {
@@ -40,3 +46,7 @@
 		}
 	}
 }
+
+.is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.has-editable-outline::after {
+	border: none;
+}

package/src/template-part/index.php

@@ -10,6 +10,8 @@
  *
  * @since 5.9.0
  *
+ * @global WP_Embed $wp_embed WordPress Embed object.
+ *
  * @param array $attributes The block attributes.
  *
  * @return string The render.

package/src/template-part/theme.scss

@@ -1,5 +1,5 @@
 // Same as the group block styles.
-.wp-block-template-part {
+:where(.wp-block-template-part) {
 	&.has-background {
 		// Matches paragraph Block padding
 		padding: $block-bg-padding--v $block-bg-padding--h;

package/src/utils/caption.js

@@ -23,10 +23,8 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import { unlock } from '../lock-unlock';
 
-const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
-
 export function Caption( {
-	key = 'caption',
+	attributeKey = 'caption',
 	attributes,
 	setAttributes,
 	isSelected,
@@ -35,10 +33,16 @@ export function Caption( {
 	label = __( 'Caption text' ),
 	showToolbarButton = true,
 	className,
-	disableEditing,
+	readOnly,
+	tagName = 'figcaption',
+	addLabel = __( 'Add caption' ),
+	removeLabel = __( 'Remove caption' ),
+	icon = captionIcon,
+	...props
 } ) {
-	const caption = attributes[ key ];
+	const caption = attributes[ attributeKey ];
 	const prevCaption = usePrevious( caption );
+	const { PrivateRichText: RichText } = unlock( blockEditorPrivateApis );
 	const isCaptionEmpty = RichText.isEmpty( caption );
 	const isPrevCaptionEmpty = RichText.isEmpty( prevCaption );
 	const [ showCaption, setShowCaption ] = useState( ! isCaptionEmpty );
@@ -74,24 +78,22 @@ export function Caption( {
 						onClick={ () => {
 							setShowCaption( ! showCaption );
 							if ( showCaption && caption ) {
-								setAttributes( { caption: undefined } );
+								setAttributes( {
+									[ attributeKey ]: undefined,
+								} );
 							}
 						} }
-						icon={ captionIcon }
+						icon={ icon }
 						isPressed={ showCaption }
-						label={
-							showCaption
-								? __( 'Remove caption' )
-								: __( 'Add caption' )
-						}
+						label={ showCaption ? removeLabel : addLabel }
 					/>
 				</BlockControls>
 			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
-						identifier={ key }
-						tagName="figcaption"
+						identifier={ attributeKey }
+						tagName={ tagName }
 						className={ classnames(
 							className,
 							__experimentalGetElementClassName( 'caption' )
@@ -101,7 +103,7 @@ export function Caption( {
 						placeholder={ placeholder }
 						value={ caption }
 						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
+							setAttributes( { [ attributeKey ]: value } )
 						}
 						inlineToolbar
 						__unstableOnSplitAtEnd={ () =>
@@ -109,7 +111,8 @@ export function Caption( {
 								createBlock( getDefaultBlockName() )
 							)
 						}
-						disableEditing={ disableEditing }
+						readOnly={ readOnly }
+						{ ...props }
 					/>
 				) }
 		</>

package/src/utils/hooks.js

@@ -67,6 +67,7 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 				onChange( media );
 			},
 			onError: ( message ) => {
+				revokeBlobURL( url );
 				onError( message );
 			},
 		} );

package/src/video/editor.scss

@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-video.wp-block-video {
 	// Show Placeholder style on-select.
 	&.is-selected .components-placeholder {
@@ -9,7 +9,7 @@
 		box-shadow: inset 0 0 0 $border-width $gray-900;
 		border: none;
 
-		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;
 
 		> svg {

package/src/video/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-.wp-block-video {
+:where(.wp-block-video) {
 	margin: 0 0 1em 0;
 }