@wordpress/block-library 6.0.2 → 6.0.6

package/src/page-list/block.json

@@ -7,39 +7,6 @@
 	"keywords": [ "menu", "navigation" ],
 	"textdomain": "default",
 	"attributes": {
-		"textColor": {
-			"type": "string"
-		},
-		"customTextColor": {
-			"type": "string"
-		},
-		"backgroundColor": {
-			"type": "string"
-		},
-		"customBackgroundColor": {
-			"type": "string"
-		},
-		"overlayBackgroundColor": {
-			"type": "string"
-		},
-		"customOverlayBackgroundColor": {
-			"type": "string"
-		},
-		"overlayTextColor": {
-			"type": "string"
-		},
-		"customOverlayTextColor": {
-			"type": "string"
-		},
-		"isNavigationChild": {
-			"type": "boolean"
-		},
-		"showSubmenuIcon": {
-			"type": "boolean"
-		},
-		"openSubmenusOnClick" : {
-			"type": "boolean"
-		}
 	},
 	"usesContext": [
 		"textColor",

package/src/page-list/edit.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -9,14 +10,11 @@ import classnames from 'classnames';
 import {
 	BlockControls,
 	useBlockProps,
-	store as blockEditorStore,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import ServerSideRender from '@wordpress/server-side-render';
-import { ToolbarButton } from '@wordpress/components';
+import { ToolbarButton, Placeholder, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useState, memo } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -24,116 +22,38 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import ConvertToLinksModal from './convert-to-links-modal';
+import { ItemSubmenuIcon } from '../navigation-link/icons';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 
-export default function PageListEdit( {
-	context,
-	clientId,
-	attributes,
-	setAttributes,
-} ) {
-	// Copy context to attributes to make it accessible in the editor's
-	// ServerSideRender
-	useEffect( () => {
-		const {
-			textColor,
-			customTextColor,
-			backgroundColor,
-			customBackgroundColor,
-			overlayTextColor,
-			customOverlayTextColor,
-			overlayBackgroundColor,
-			customOverlayBackgroundColor,
-		} = context;
-		setAttributes( {
-			textColor,
-			customTextColor,
-			backgroundColor,
-			customBackgroundColor,
-			overlayTextColor,
-			customOverlayTextColor,
-			overlayBackgroundColor,
-			customOverlayBackgroundColor,
-		} );
-	}, [
-		context.textColor,
-		context.customTextColor,
-		context.backgroundColor,
-		context.customBackgroundColor,
-		context.overlayTextColor,
-		context.customOverlayTextColor,
-		context.overlayBackgroundColor,
-		context.customOverlayBackgroundColor,
-	] );
-
-	const { textColor, backgroundColor, style } = context || {};
-
-	const [ allowConvertToLinks, setAllowConvertToLinks ] = useState( false );
-
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			'has-text-color': !! textColor,
-			[ getColorClassName( 'color', textColor ) ]: !! textColor,
-			'has-background': !! backgroundColor,
-			[ getColorClassName(
-				'background-color',
-				backgroundColor
-			) ]: !! backgroundColor,
-		} ),
-		style: { ...style?.color },
-	} );
+export default function PageListEdit( { context, clientId } ) {
+	const { pagesByParentId, totalPages } = usePagesByParentId();
 
-	const isParentNavigation = useSelect(
-		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
-			return (
-				getBlockParentsByBlockName( clientId, 'core/navigation' )
-					.length > 0
-			);
-		},
-		[ clientId ]
-	);
-
-	useEffect( () => {
-		setAttributes( {
-			isNavigationChild: isParentNavigation,
-			openSubmenusOnClick: !! context.openSubmenusOnClick,
-			showSubmenuIcon: !! context.showSubmenuIcon,
-		} );
-	}, [ context.openSubmenusOnClick, context.showSubmenuIcon ] );
-
-	useEffect( () => {
-		if ( isParentNavigation ) {
-			apiFetch( {
-				path: addQueryArgs( '/wp/v2/pages', {
-					per_page: 1,
-					_fields: [ 'id' ],
-				} ),
-				parse: false,
-			} ).then( ( res ) => {
-				setAllowConvertToLinks(
-					res.headers.get( 'X-WP-Total' ) <= MAX_PAGE_COUNT
-				);
-			} );
-		} else {
-			setAllowConvertToLinks( false );
-		}
-	}, [ isParentNavigation ] );
+	const isNavigationChild = 'showSubmenuIcon' in context;
+	const allowConvertToLinks =
+		isNavigationChild && totalPages <= MAX_PAGE_COUNT;
 
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
 
-	// Update parent status before component first renders.
-	const attributesWithParentStatus = {
-		...attributes,
-		isNavigationChild: isParentNavigation,
-		openSubmenusOnClick: !! context.openSubmenusOnClick,
-		showSubmenuIcon: !! context.showSubmenuIcon,
-	};
+	const blockProps = useBlockProps( {
+		className: classnames( 'wp-block-page-list', {
+			'has-text-color': !! context.textColor,
+			[ getColorClassName(
+				'color',
+				context.textColor
+			) ]: !! context.textColor,
+			'has-background': !! context.backgroundColor,
+			[ getColorClassName(
+				'background-color',
+				context.backgroundColor
+			) ]: !! context.backgroundColor,
+		} ),
+		style: { ...context.style?.color },
+	} );
 
 	return (
 		<>
@@ -150,15 +70,150 @@ export default function PageListEdit( {
 					clientId={ clientId }
 				/>
 			) }
-			<div { ...blockProps }>
-				<ServerSideRender
-					block="core/page-list"
-					attributes={ attributesWithParentStatus }
-					EmptyResponsePlaceholder={ () => (
-						<span>{ __( 'Page List: No pages to show.' ) }</span>
-					) }
-				/>
-			</div>
+			{ totalPages === null && (
+				<div { ...blockProps }>
+					<Placeholder>
+						<Spinner />
+					</Placeholder>
+				</div>
+			) }
+			{ totalPages === 0 && (
+				<div { ...blockProps }>
+					<span>{ __( 'Page List: No pages to show.' ) }</span>
+				</div>
+			) }
+			{ totalPages > 0 && (
+				<ul { ...blockProps }>
+					<PageItems
+						context={ context }
+						pagesByParentId={ pagesByParentId }
+					/>
+				</ul>
+			) }
 		</>
 	);
 }
+
+function usePagesByParentId() {
+	const [ pagesByParentId, setPagesByParentId ] = useState( null );
+	const [ totalPages, setTotalPages ] = useState( null );
+
+	useEffect( () => {
+		async function performFetch() {
+			setPagesByParentId( null );
+			setTotalPages( null );
+
+			let pages = await apiFetch( {
+				path: addQueryArgs( '/wp/v2/pages', {
+					orderby: 'menu_order',
+					order: 'asc',
+					_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
+					per_page: -1,
+				} ),
+			} );
+
+			// TODO: Once the REST API supports passing multiple values to
+			// 'orderby', this can be removed.
+			// https://core.trac.wordpress.org/ticket/39037
+			pages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );
+
+			setPagesByParentId(
+				pages.reduce( ( accumulator, page ) => {
+					const { parent } = page;
+					if ( accumulator.has( parent ) ) {
+						accumulator.get( parent ).push( page );
+					} else {
+						accumulator.set( parent, [ page ] );
+					}
+					return accumulator;
+				}, new Map() )
+			);
+			setTotalPages( pages.length );
+		}
+		performFetch();
+	}, [] );
+
+	return {
+		pagesByParentId,
+		totalPages,
+	};
+}
+
+const PageItems = memo( function PageItems( {
+	context,
+	pagesByParentId,
+	parentId = 0,
+	depth = 0,
+} ) {
+	const pages = pagesByParentId.get( parentId );
+
+	if ( ! pages?.length ) {
+		return [];
+	}
+
+	return pages.map( ( page ) => {
+		const hasChildren = pagesByParentId.has( page.id );
+		const isNavigationChild = 'showSubmenuIcon' in context;
+		return (
+			<li
+				key={ page.id }
+				className={ classnames( 'wp-block-pages-list__item', {
+					'has-child': hasChildren,
+					'wp-block-navigation-item': isNavigationChild,
+					'open-on-click': context.openSubmenusOnClick,
+					'open-on-hover-click':
+						! context.openSubmenusOnClick &&
+						context.showSubmenuIcon,
+				} ) }
+			>
+				{ hasChildren && context.openSubmenusOnClick ? (
+					<ItemSubmenuToggle title={ page.title?.rendered } />
+				) : (
+					<a
+						className={ classnames(
+							'wp-block-pages-list__item__link',
+							{
+								'wp-block-navigation-item__content': isNavigationChild,
+							}
+						) }
+						href={ page.link }
+					>
+						{ page.title?.rendered }
+					</a>
+				) }
+				{ hasChildren && (
+					<>
+						{ ! context.openSubmenusOnClick &&
+							context.showSubmenuIcon && <ItemSubmenuToggle /> }
+						<ul
+							className={ classnames( 'submenu-container', {
+								'wp-block-navigation__submenu-container': isNavigationChild,
+							} ) }
+						>
+							<PageItems
+								context={ context }
+								pagesByParentId={ pagesByParentId }
+								parentId={ page.id }
+								depth={ depth + 1 }
+							/>
+						</ul>
+					</>
+				) }
+			</li>
+		);
+	} );
+} );
+
+function ItemSubmenuToggle( { title } ) {
+	return (
+		<button
+			className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+			aria-expanded="false"
+		>
+			{ title }
+			<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+				<ItemSubmenuIcon />
+			</span>
+		</button>
+	);
+}

package/src/page-list/index.php

@@ -22,8 +22,8 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	);
 
 	// Text color.
-	$has_named_text_color  = array_key_exists( 'textColor', $attributes );
-	$has_picked_text_color = array_key_exists( 'customTextColor', $attributes );
+	$has_named_text_color  = array_key_exists( 'textColor', $context );
+	$has_picked_text_color = array_key_exists( 'customTextColor', $context );
 	$has_custom_text_color = isset( $context['style']['color']['text'] );
 
 	// If has text color.
@@ -34,17 +34,17 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_text_color ) {
 		// Add the color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $attributes['textColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['textColor'] ) );
 	} elseif ( $has_picked_text_color ) {
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $attributes['customTextColor'] );
+		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	} elseif ( $has_custom_text_color ) {
 		// Add the custom color inline style.
 		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['style']['color']['text'] );
 	}
 
 	// Background color.
-	$has_named_background_color  = array_key_exists( 'backgroundColor', $attributes );
-	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $attributes );
+	$has_named_background_color  = array_key_exists( 'backgroundColor', $context );
+	$has_picked_background_color = array_key_exists( 'customBackgroundColor', $context );
 	$has_custom_background_color = isset( $context['style']['color']['background'] );
 
 	// If has background color.
@@ -55,17 +55,17 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $attributes['backgroundColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['backgroundColor'] ) );
 	} elseif ( $has_picked_background_color ) {
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customBackgroundColor'] );
+		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
 		// Add the custom background-color inline style.
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['style']['color']['background'] );
 	}
 
 	// Overlay text color.
-	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $attributes );
-	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $attributes );
+	$has_named_overlay_text_color  = array_key_exists( 'overlayTextColor', $context );
+	$has_picked_overlay_text_color = array_key_exists( 'customOverlayTextColor', $context );
 
 	// If it has a text color.
 	if ( $has_named_overlay_text_color || $has_picked_overlay_text_color ) {
@@ -74,14 +74,14 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
 	if ( $has_named_overlay_text_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $attributes['overlayTextColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['overlayTextColor'] ) );
 	} elseif ( $has_picked_overlay_text_color ) {
-		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $attributes['customOverlayTextColor'] );
+		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
 	}
 
 	// Overlay background colors.
-	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $attributes );
-	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $attributes );
+	$has_named_overlay_background_color  = array_key_exists( 'overlayBackgroundColor', $context );
+	$has_picked_overlay_background_color = array_key_exists( 'customOverlayBackgroundColor', $context );
 
 	// If has background color.
 	if ( $has_named_overlay_background_color || $has_picked_overlay_background_color ) {
@@ -89,9 +89,9 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	}
 
 	if ( $has_named_overlay_background_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $attributes['overlayBackgroundColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['overlayBackgroundColor'] ) );
 	} elseif ( $has_picked_overlay_background_color ) {
-		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $attributes['customOverlayBackgroundColor'] );
+		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
 	}
 
 	return $colors;
@@ -145,6 +145,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 	$markup = '';
 	foreach ( (array) $nested_pages as $page ) {
 		$css_class       = $page['is_active'] ? ' current-menu-item' : '';
+		$aria_current    = $page['is_active'] ? ' aria-current="page"' : '';
 		$style_attribute = '';
 
 		$css_class .= in_array( $page['page_id'], $active_page_ancestor_ids, true ) ? ' current-menu-ancestor' : '';
@@ -181,7 +182,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			) . '<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" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
 			'</button>';
 		} else {
-			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '">' . wp_kses(
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
 				$page['title'],
 				wp_kses_allowed_html( 'post' )
 			) . '</a>';
@@ -238,20 +239,14 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	static $block_id = 0;
 	$block_id++;
 
-	// TODO: When https://core.trac.wordpress.org/ticket/39037 REST API support for multiple orderby values is resolved,
-	// update 'sort_column' to 'menu_order, post_title'. Sorting by both menu_order and post_title ensures a stable sort.
-	// Otherwise with pages that have the same menu_order value, we can see different ordering depending on how DB
-	// queries are constructed internally. For example we might see a different order when a limit is set to <499
-	// versus >= 500.
 	$all_pages = get_pages(
 		array(
-			'sort_column' => 'menu_order',
+			'sort_column' => 'menu_order,post_title',
 			'order'       => 'asc',
 		)
 	);
 
 	// If thare are no pages, there is nothing to show.
-	// Return early and empty to trigger EmptyResponsePlaceholder.
 	if ( empty( $all_pages ) ) {
 		return;
 	}
@@ -298,11 +293,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
-	$is_navigation_child = array_key_exists( 'isNavigationChild', $attributes ) ? $attributes['isNavigationChild'] : ! empty( $block->context );
+	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
-	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $attributes ) ? $attributes['openSubmenusOnClick'] : false;
+	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;
 
-	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $attributes ) ? $attributes['showSubmenuIcon'] : false;
+	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false;
 
 	$wrapper_markup = '<ul %1$s>%2$s</ul>';
 

package/src/page-list/style.scss

@@ -2,7 +2,10 @@
 .wp-block-navigation {
 	.wp-block-page-list {
 		display: flex;
-		flex-wrap: wrap;
+		flex-direction: var(--layout-direction, initial);
+		justify-content: var(--layout-justify, initial);
+		align-items: var(--layout-align, initial);
+		flex-wrap: var(--layout-wrap, wrap);
 		background-color: inherit;
 	}
 
@@ -12,25 +15,3 @@
 		background-color: inherit;
 	}
 }
-
-.is-vertical .wp-block-navigation__container,
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		display: flex;
-	}
-}
-
-.is-open .wp-block-navigation__container {
-	.wp-block-page-list {
-		@include break-mobile() {
-			display: flex;
-		}
-	}
-}
-
-// space-between justification.
-.wp-block-page-list {
-	.items-justified-space-between & {
-		display: contents;
-	}
-}

package/src/paragraph/block.json

@@ -37,7 +37,14 @@
 		},
 		"typography": {
 			"fontSize": true,
-			"lineHeight": true
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		},
 		"__experimentalSelector": "p",
 		"__unstablePasteTextInline": true

package/src/pattern/block.json

@@ -0,0 +1,17 @@
+{
+	"apiVersion": 2,
+	"name": "core/pattern",
+	"title": "Pattern",
+	"category": "design",
+	"description": "Show a block pattern.",
+	"supports": {
+		"html": false,
+		"inserter": false
+	},
+	"textdomain": "default",
+	"attributes": {
+		"slug": {
+			"type": "string"
+		}
+	}
+}

package/src/pattern/edit.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	store as blockEditorStore,
+	useBlockProps,
+} from '@wordpress/block-editor';
+
+const PatternEdit = ( { attributes, clientId } ) => {
+	const selectedPattern = useSelect(
+		( select ) =>
+			select( blockEditorStore ).__experimentalGetParsedPattern(
+				attributes.slug
+			),
+		[ attributes.slug ]
+	);
+
+	const {
+		replaceBlocks,
+		__unstableMarkNextChangeAsNotPersistent,
+	} = useDispatch( blockEditorStore );
+
+	// Run this effect when the component loads.
+	// This adds the Pattern's contents to the post.
+	// This change won't be saved.
+	// It will continue to pull from the pattern file unless changes are made to its respective template part.
+	useEffect( () => {
+		if ( selectedPattern?.blocks ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceBlocks( clientId, selectedPattern.blocks );
+		}
+	}, [ selectedPattern?.blocks ] );
+
+	const props = useBlockProps();
+
+	return <div { ...props } />;
+};
+
+export default PatternEdit;

package/src/pattern/index.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import PatternEdit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	edit: PatternEdit,
+};

package/src/pattern/index.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Server-side rendering of the `core/pattern` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ *  Registers the `core/pattern` block on the server.
+ *
+ * @return void
+ */
+function register_block_core_pattern() {
+	register_block_type_from_metadata(
+		__DIR__ . '/pattern',
+		array(
+			'render_callback' => 'render_block_core_pattern',
+		)
+	);
+}
+
+/**
+ * Renders the `core/pattern` block on the server.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Returns the output of the pattern.
+ */
+function render_block_core_pattern( $attributes ) {
+	if ( empty( $attributes['slug'] ) ) {
+		return '';
+	}
+
+	$slug     = $attributes['slug'];
+	$registry = WP_Block_Patterns_Registry::get_instance();
+	if ( ! $registry->is_registered( $slug ) ) {
+		return '';
+	}
+
+	$pattern = $registry->get_registered( $slug );
+	return do_blocks( $pattern['content'] );
+}
+
+add_action( 'init', 'register_block_core_pattern' );