@wordpress/block-library 7.0.0 → 7.0.2

package/src/page-list/index.php

@@ -178,7 +178,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			$css_class .= ' menu-item-home';
 		}
 
-		$title      = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );
+		$title      = wp_kses_post( $page['title'] );
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
 			__( '%s submenu' ),
@@ -188,8 +188,8 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		$markup .= '<li class="wp-block-pages-list__item' . esc_attr( $css_class ) . '"' . $style_attribute . '>';
 
 		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
-			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
-			'</button>';
+			$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="' . esc_attr( $navigation_child_content_class ) . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . esc_html( $title ) .
+			'</button>' . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
 		} else {
 			$markup .= '<a class="wp-block-pages-list__item__link' . esc_attr( $navigation_child_content_class ) . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
 		}
@@ -197,7 +197,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 		if ( isset( $page['children'] ) ) {
 			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
 				$markup .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
-				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 				$markup .= '</button>';
 			}
 			$markup .= '<ul class="submenu-container';

package/src/post-navigation-link/index.php

@@ -49,13 +49,13 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 		 */
 		if ( ! $attributes['linkLabel'] ) {
 			if ( $label ) {
-				$format = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> %link';
+				$format = '<span class="post-navigation-link__label">' . wp_kses_post( $label ) . '</span> %link';
 			}
 			$link = '%title';
 		} elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) {
 			// If the label link option is enabled and there is a custom label, display it before the title.
 			if ( $label ) {
-				$link = '<span class="post-navigation-link__label">' . esc_html( $label ) . '</span> <span class="post-navigation-link__title">%title</title>';
+				$link = '<span class="post-navigation-link__label">' . wp_kses_post( $label ) . '</span> <span class="post-navigation-link__title">%title</span>';
 			} else {
 				/*
 				 * If the label link option is enabled and there is no custom label,
@@ -64,7 +64,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
 				$link  = sprintf(
 					'<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>',
-					esc_html( $label ),
+					wp_kses_post( $label ),
 					'%title'
 				);
 			}

package/src/search/index.php

@@ -72,6 +72,7 @@ function render_block_core_search( $attributes ) {
 	if ( $show_button ) {
 		$button_internal_markup = '';
 		$button_classes         = $color_classes;
+		$aria_label             = '';
 
 		if ( ! $is_button_inside ) {
 			$button_classes .= ' ' . $border_color_classes;
@@ -81,17 +82,19 @@ function render_block_core_search( $attributes ) {
 				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
+			$aria_label             = sprintf( 'aria-label="%s"', esc_attr( wp_strip_all_tags( $attributes['label'] ) ) );
 			$button_classes        .= ' has-icon';
 			$button_internal_markup =
 				'<svg id="search-icon" class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-			        <path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
-			    </svg>';
+					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+				</svg>';
 		}
 
 		$button_markup = sprintf(
-			'<button type="submit" class="wp-block-search__button %s" %s>%s</button>',
+			'<button type="submit" class="wp-block-search__button %s" %s %s>%s</button>',
 			esc_attr( $button_classes ),
 			$inline_styles['button'],
+			$aria_label,
 			$button_internal_markup
 		);
 	}

package/src/site-logo/index.php

@@ -14,7 +14,7 @@
  */
 function render_block_core_site_logo( $attributes ) {
 	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
-		if ( empty( $attributes['width'] ) || empty( $image ) ) {
+		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}
 		$height = (float) $attributes['width'] / ( (float) $image[1] / (float) $image[2] );

package/src/social-links/deprecated.js

@@ -49,65 +49,6 @@ const migrateWithLayout = ( attributes ) => {
 
 // Social Links block deprecations.
 const deprecated = [
-	// Implement `flex` layout.
-	{
-		attributes: {
-			iconColor: {
-				type: 'string',
-			},
-			customIconColor: {
-				type: 'string',
-			},
-			iconColorValue: {
-				type: 'string',
-			},
-			iconBackgroundColor: {
-				type: 'string',
-			},
-			customIconBackgroundColor: {
-				type: 'string',
-			},
-			iconBackgroundColorValue: {
-				type: 'string',
-			},
-			openInNewTab: {
-				type: 'boolean',
-				default: false,
-			},
-			size: {
-				type: 'string',
-			},
-		},
-		supports: {
-			align: [ 'left', 'center', 'right' ],
-			anchor: true,
-			__experimentalExposeControlsToChildren: true,
-		},
-		isEligible: ( { layout } ) => ! layout,
-		migrate: migrateWithLayout,
-		save( props ) {
-			const {
-				attributes: {
-					iconBackgroundColorValue,
-					iconColorValue,
-					itemsJustification,
-					size,
-				},
-			} = props;
-
-			const className = classNames( size, {
-				'has-icon-color': iconColorValue,
-				'has-icon-background-color': iconBackgroundColorValue,
-				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
-			} );
-
-			return (
-				<ul { ...useBlockProps.save( { className } ) }>
-					<InnerBlocks.Content />
-				</ul>
-			);
-		},
-	},
 	// V1. Remove CSS variable use for colors.
 	{
 		attributes: {

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

@@ -15,22 +15,28 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	Dropdown,
 	ToolbarGroup,
 	ToolbarButton,
 	Spinner,
+	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TemplatePartPlaceholder from './placeholder';
-import TemplatePartSelection from './selection';
+import TemplatePartSelectionModal from './selection-modal';
 import { TemplatePartAdvancedControls } from './advanced-controls';
 import TemplatePartInnerBlocks from './inner-blocks';
 import { createTemplatePartId } from './utils/create-template-part-id';
+import {
+	useAlternativeBlockPatterns,
+	useAlternativeTemplateParts,
+	useTemplatePartArea,
+} from './utils/hooks';
 
 export default function TemplatePartEdit( {
 	attributes,
@@ -39,29 +45,22 @@ export default function TemplatePartEdit( {
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		templatePartId
 	);
+	const [
+		isTemplatePartSelectionOpen,
+		setIsTemplatePartSelectionOpen,
+	] = useState( false );
 
 	// Set the postId block attribute if it did not exist,
 	// but wait until the inner blocks have loaded to allow
 	// new edits to trigger this.
-	const {
-		isResolved,
-		innerBlocks,
-		isMissing,
-		defaultWrapper,
-		area,
-		enableSelection,
-		hasResolvedReplacements,
-	} = useSelect(
+	const { isResolved, innerBlocks, isMissing, area } = useSelect(
 		( select ) => {
-			const {
-				getEditedEntityRecord,
-				getEntityRecords,
-				hasFinishedResolution,
-			} = select( coreStore );
+			const { getEditedEntityRecord, hasFinishedResolution } = select(
+				coreStore
+			);
 			const { getBlocks } = select( blockEditorStore );
 
 			const getEntityArgs = [
@@ -73,20 +72,6 @@ export default function TemplatePartEdit( {
 				? getEditedEntityRecord( ...getEntityArgs )
 				: null;
 			const _area = entityRecord?.area || attributes.area;
-
-			// Check whether other entities exist for switching/selection.
-			const availableReplacementArgs = [
-				'postType',
-				'wp_template_part',
-				_area && 'uncategorized' !== _area && { area: _area },
-			];
-			const matchingReplacements = getEntityRecords(
-				...availableReplacementArgs
-			);
-			const _enableSelection = templatePartId
-				? matchingReplacements?.length > 1
-				: matchingReplacements?.length > 0;
-
 			const hasResolvedEntity = templatePartId
 				? hasFinishedResolution(
 						'getEditedEntityRecord',
@@ -94,33 +79,26 @@ export default function TemplatePartEdit( {
 				  )
 				: false;
 
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			// eslint-disable-next-line @wordpress/data-no-store-string-literals
-			const defaultWrapperElement = select( 'core/editor' )
-				.__experimentalGetDefaultTemplatePartAreas()
-				.find( ( { area: value } ) => value === _area )?.area_tag;
-
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isResolved: hasResolvedEntity,
 				isMissing: hasResolvedEntity && isEmpty( entityRecord ),
-				defaultWrapper: defaultWrapperElement || 'div',
 				area: _area,
-				enableSelection: _enableSelection,
-				hasResolvedReplacements: hasFinishedResolution(
-					'getEntityRecords',
-					availableReplacementArgs
-				),
 			};
 		},
 		[ templatePartId, 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 || defaultWrapper;
+	const TagName = tagName || areaObject.tagName;
 
 	// 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.
@@ -160,43 +138,31 @@ export default function TemplatePartEdit( {
 				setAttributes={ setAttributes }
 				isEntityAvailable={ isEntityAvailable }
 				templatePartId={ templatePartId }
-				defaultWrapper={ defaultWrapper }
+				defaultWrapper={ areaObject.tagName }
 			/>
 			{ isPlaceholder && (
 				<TagName { ...blockProps }>
 					<TemplatePartPlaceholder
 						area={ attributes.area }
+						templatePartId={ templatePartId }
 						clientId={ clientId }
 						setAttributes={ setAttributes }
-						enableSelection={ enableSelection }
-						hasResolvedReplacements={ hasResolvedReplacements }
+						onOpenSelectionModal={ () =>
+							setIsTemplatePartSelectionOpen( true )
+						}
 					/>
 				</TagName>
 			) }
-			{ isEntityAvailable && enableSelection && (
+			{ isEntityAvailable && hasReplacements && (
 				<BlockControls>
 					<ToolbarGroup className="wp-block-template-part__block-control-group">
-						<Dropdown
-							className="wp-block-template-part__preview-dropdown-button"
-							contentClassName="wp-block-template-part__preview-dropdown-content"
-							position="bottom right left"
-							renderToggle={ ( { isOpen, onToggle } ) => (
-								<ToolbarButton
-									aria-expanded={ isOpen }
-									onClick={ onToggle }
-								>
-									{ __( 'Replace' ) }
-								</ToolbarButton>
-							) }
-							renderContent={ ( { onClose } ) => (
-								<TemplatePartSelection
-									setAttributes={ setAttributes }
-									onClose={ onClose }
-									area={ area }
-									templatePartId={ templatePartId }
-								/>
-							) }
-						/>
+						<ToolbarButton
+							onClick={ () =>
+								setIsTemplatePartSelectionOpen( true )
+							}
+						>
+							{ __( 'Replace' ) }
+						</ToolbarButton>
 					</ToolbarGroup>
 				</BlockControls>
 			) }
@@ -215,6 +181,30 @@ export default function TemplatePartEdit( {
 					<Spinner />
 				</TagName>
 			) }
+			{ isTemplatePartSelectionOpen && (
+				<Modal
+					className="block-editor-template-part__selection-modal"
+					title={ sprintf(
+						// Translators: %s as template part area title ("Header", "Footer", etc.).
+						__( 'Choose a %s' ),
+						areaObject.label.toLowerCase()
+					) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () =>
+						setIsTemplatePartSelectionOpen( false )
+					}
+				>
+					<TemplatePartSelectionModal
+						templatePartId={ templatePartId }
+						clientId={ clientId }
+						area={ area }
+						setAttributes={ setAttributes }
+						onClose={ () =>
+							setIsTemplatePartSelectionOpen( false )
+						}
+					/>
+				</Modal>
+			) }
 		</RecursionProvider>
 	);
 }

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

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Placeholder, Button, Spinner } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useAlternativeBlockPatterns,
+	useAlternativeTemplateParts,
+	useCreateTemplatePartFromBlocks,
+	useTemplatePartArea,
+} from './utils/hooks';
+import TitleModal from './title-modal';
+
+export default function TemplatePartPlaceholder( {
+	area,
+	clientId,
+	templatePartId,
+	onOpenSelectionModal,
+	setAttributes,
+} ) {
+	const { templateParts, isResolving } = useAlternativeTemplateParts(
+		area,
+		templatePartId
+	);
+	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+	const [ showTitleModal, setShowTitleModal ] = useState( false );
+	const areaObject = useTemplatePartArea( area );
+	const createFromBlocks = useCreateTemplatePartFromBlocks(
+		area,
+		setAttributes
+	);
+
+	return (
+		<Placeholder
+			icon={ areaObject.icon }
+			label={ areaObject.label }
+			instructions={ sprintf(
+				// Translators: %s as template part area title ("Header", "Footer", etc.).
+				__( 'Choose an existing %s or create a new one.' ),
+				areaObject.label.toLowerCase()
+			) }
+		>
+			{ isResolving && <Spinner /> }
+
+			{ ! isResolving &&
+				!! ( templateParts.length || blockPatterns.length ) && (
+					<Button variant="primary" onClick={ onOpenSelectionModal }>
+						{ __( 'Choose' ) }
+					</Button>
+				) }
+
+			{ ! isResolving && (
+				<Button
+					variant="secondary"
+					onClick={ () => {
+						setShowTitleModal( true );
+					} }
+				>
+					{ __( 'Start blank' ) }
+				</Button>
+			) }
+			{ showTitleModal && (
+				<TitleModal
+					areaLabel={ areaObject.label }
+					onClose={ () => setShowTitleModal( false ) }
+					onSubmit={ ( title ) => {
+						createFromBlocks( [], title );
+					} }
+				/>
+			) }
+		</Placeholder>
+	);
+}

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

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useMemo } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { useDispatch } from '@wordpress/data';
+import { parse } from '@wordpress/blocks';
+import { useAsyncList } from '@wordpress/compose';
+import {
+	__experimentalBlockPatternsList as BlockPatternsList,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useAlternativeBlockPatterns,
+	useAlternativeTemplateParts,
+	useCreateTemplatePartFromBlocks,
+} from './utils/hooks';
+import { createTemplatePartId } from './utils/create-template-part-id';
+
+export default function TemplatePartSelectionModal( {
+	setAttributes,
+	onClose,
+	templatePartId = null,
+	area,
+	clientId,
+} ) {
+	// When the templatePartId is undefined,
+	// it means the user is creating a new one from the placeholder.
+	const isReplacingTemplatePartContent = !! templatePartId;
+	const { templateParts } = useAlternativeTemplateParts(
+		area,
+		templatePartId
+	);
+	// We can map template parts to block patters to reuse the BlockPatternsList UI
+	const templartPartsAsBlockPatterns = useMemo( () => {
+		return templateParts.map( ( templatePart ) => ( {
+			name: createTemplatePartId( templatePart.theme, templatePart.slug ),
+			title: templatePart.title.rendered,
+			blocks: parse( templatePart.content.raw ),
+			templatePart,
+		} ) );
+	}, [ templateParts ] );
+	const shownTemplateParts = useAsyncList( templartPartsAsBlockPatterns );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+	const shownBlockPatterns = useAsyncList( blockPatterns );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	const onTemplatePartSelect = useCallback( ( templatePart ) => {
+		setAttributes( {
+			slug: templatePart.slug,
+			theme: templatePart.theme,
+			area: undefined,
+		} );
+		createSuccessNotice(
+			sprintf(
+				/* translators: %s: template part title. */
+				__( 'Template Part "%s" inserted.' ),
+				templatePart.title?.rendered || templatePart.slug
+			),
+			{
+				type: 'snackbar',
+			}
+		);
+		onClose();
+	}, [] );
+
+	const createFromBlocks = useCreateTemplatePartFromBlocks(
+		area,
+		setAttributes
+	);
+
+	return (
+		<>
+			<div className="block-library-template-part__selection-content">
+				{ !! templartPartsAsBlockPatterns.length && (
+					<div>
+						<h2>{ __( 'Existing template parts' ) }</h2>
+						<BlockPatternsList
+							blockPatterns={ templartPartsAsBlockPatterns }
+							shownPatterns={ shownTemplateParts }
+							onClickPattern={ ( pattern ) => {
+								onTemplatePartSelect( pattern.templatePart );
+							} }
+						/>
+					</div>
+				) }
+
+				{ !! blockPatterns.length && (
+					<div>
+						<h2>{ __( 'Patterns' ) }</h2>
+						<BlockPatternsList
+							blockPatterns={ blockPatterns }
+							shownPatterns={ shownBlockPatterns }
+							onClickPattern={ ( pattern, blocks ) => {
+								if ( isReplacingTemplatePartContent ) {
+									replaceInnerBlocks( clientId, blocks );
+								} else {
+									createFromBlocks( blocks, pattern.title );
+								}
+
+								onClose();
+							} }
+						/>
+					</div>
+				) }
+			</div>
+		</>
+	);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	TextControl,
+	Flex,
+	FlexItem,
+	Button,
+	Modal,
+} from '@wordpress/components';
+
+export default function TitleModal( { areaLabel, onClose, onSubmit } ) {
+	// Restructure onCreate to set the blocks on local state.
+	// Add modal to confirm title and trigger onCreate.
+	const [ title, setTitle ] = useState( __( 'Untitled Template Part' ) );
+
+	const submitForCreation = ( event ) => {
+		event.preventDefault();
+		onSubmit( title );
+	};
+
+	return (
+		<Modal
+			title={ sprintf(
+				// Translators: %s as template part area title ("Header", "Footer", etc.).
+				__( 'Name and create your new %s' ),
+				areaLabel.toLowerCase()
+			) }
+			closeLabel={ __( 'Cancel' ) }
+			overlayClassName="wp-block-template-part__placeholder-create-new__title-form"
+			onRequestClose={ onClose }
+		>
+			<form onSubmit={ submitForCreation }>
+				<TextControl
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+				/>
+				<Flex
+					className="wp-block-template-part__placeholder-create-new__title-form-actions"
+					justify="flex-end"
+				>
+					<FlexItem>
+						<Button
+							variant="primary"
+							type="submit"
+							disabled={ ! title.length }
+							aria-disabled={ ! title.length }
+						>
+							{ __( 'Create' ) }
+						</Button>
+					</FlexItem>
+				</Flex>
+			</form>
+		</Modal>
+	);
+}