@wordpress/block-library 8.3.6 → 8.3.8

package/src/navigation/index.php

@@ -373,12 +373,14 @@ function block_core_navigation_get_most_recently_published_navigation() {
 
 	// Default to the most recently created menu.
 	$parsed_args = array(
-		'post_type'      => 'wp_navigation',
-		'no_found_rows'  => true,
-		'order'          => 'DESC',
-		'orderby'        => 'date',
-		'post_status'    => 'publish',
-		'posts_per_page' => 1, // get only the most recent.
+		'post_type'              => 'wp_navigation',
+		'no_found_rows'          => true,
+		'update_post_meta_cache' => false,
+		'update_post_term_cache' => false,
+		'order'                  => 'DESC',
+		'orderby'                => 'date',
+		'post_status'            => 'publish',
+		'posts_per_page'         => 1, // get only the most recent.
 	);
 
 	$navigation_post = new WP_Query( $parsed_args );

package/src/navigation-link/edit.js

@@ -225,15 +225,6 @@ export default function NavigationLinkEdit( {
 		[ clientId ]
 	);
 
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelLink } );
-	}, [ isTopLevelLink ] );
-
 	/**
 	 * Transform to submenu block.
 	 */

package/src/navigation-link/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_link_build_css_colors( $context, $attributes ) {
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;

package/src/navigation-submenu/edit.js

@@ -224,16 +224,6 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering.
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelItem } );
-	}, [ isTopLevelItem ] );
-
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
 	 * when selecting a suggestion in the link popover, we force close on block unselection.

package/src/navigation-submenu/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes ) {
+function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -250,6 +249,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
+		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
+		$classes     = array_merge(
+			array( 'wp-block-navigation__submenu-container' ),
+			$colors['css_classes']
+		);
+		$css_classes = trim( implode( ' ', $classes ) );
+
+		$style_attribute = $colors['inline_styles'];
+
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
 			$inner_blocks_html .= $inner_block->render();
@@ -263,10 +271,19 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html = $tag_processor->get_updated_html();
 		}
 
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $css_classes,
+				'style' => $style_attribute,
+			)
+		);
+
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
+			'<ul %s>%s</ul>',
+			$wrapper_attributes,
 			$inner_blocks_html
 		);
+
 	}
 
 	$html .= '</li>';

package/src/page-list/edit.js

@@ -55,7 +55,9 @@ function BlockContent( {
 	if ( ! hasResolvedPages ) {
 		return (
 			<div { ...blockProps }>
-				<Spinner />
+				<div className="wp-block-page-list__loading-indicator-container">
+					<Spinner className="wp-block-page-list__loading-indicator" />
+				</div>
 			</div>
 		);
 	}

package/src/page-list/editor.scss

@@ -61,3 +61,9 @@
 .wp-block-page-list .components-notice {
 	margin-left: 0;
 }
+
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-page-list__loading-indicator-container {
+	padding: $grid-unit-10 $grid-unit-15;
+}

package/src/query/edit/query-placeholder.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations } from '../utils';
+import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -30,6 +30,10 @@ export default function QueryPlaceholder( {
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
 
 	const { blockType, allVariations, hasPatterns } = useSelect(
 		( select ) => {
@@ -37,15 +41,16 @@ export default function QueryPlaceholder( {
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-
 			return {
 				blockType: getBlockType( name ),
 				allVariations: getBlockVariations( name ),
-				hasPatterns: !! getPatternsByBlockTypes( name, rootClientId )
-					.length,
+				hasPatterns: !! getPatternsByBlockTypes(
+					blockNameForPatterns,
+					rootClientId
+				).length,
 			};
 		},
-		[ name, clientId ]
+		[ name, blockNameForPatterns, clientId ]
 	);
 
 	const matchingVariation = getMatchingVariation( attributes, allVariations );

package/src/template-part/edit/import-controls.js

@@ -12,10 +12,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
-import {
-	switchToBlockType,
-	getPossibleBlockTransformations,
-} from '@wordpress/blocks';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -110,36 +106,13 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 		const blocks = widgets.flatMap( ( widget ) => {
 			const block = transformWidgetToBlock( widget );
 
-			if ( block.name !== 'core/legacy-widget' ) {
-				return block;
-			}
-
-			const transforms = getPossibleBlockTransformations( [
-				block,
-			] ).filter( ( item ) => {
-				// The block without any transformations can't be a wildcard.
-				if ( ! item.transforms ) {
-					return true;
-				}
-
-				const hasWildCardFrom = item.transforms?.from?.find(
-					( from ) => from.blocks && from.blocks.includes( '*' )
-				);
-				const hasWildCardTo = item.transforms?.to?.find(
-					( to ) => to.blocks && to.blocks.includes( '*' )
-				);
-
-				return ! hasWildCardFrom && ! hasWildCardTo;
-			} );
-
 			// Skip the block if we have no matching transformations.
-			if ( ! transforms.length ) {
+			if ( ! block ) {
 				skippedWidgets.add( widget.id_base );
 				return [];
 			}
 
-			// Try transforming the Legacy Widget into a first matching block.
-			return switchToBlockType( block, transforms[ 0 ].name );
+			return block;
 		} );
 
 		await createFromBlocks(

package/src/template-part/edit/utils/transformers.js

@@ -1,7 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { createBlock, parse } from '@wordpress/blocks';
+import {
+	parse,
+	cloneBlock,
+	createBlock,
+	getGroupingBlockName,
+	getPossibleBlockTransformations,
+	switchToBlockType,
+} from '@wordpress/blocks';
 
 /**
  * Converts a widget entity record into a block.
@@ -10,28 +17,98 @@ import { createBlock, parse } from '@wordpress/blocks';
  * @return {Object} a block (converted from the entity record).
  */
 export function transformWidgetToBlock( widget ) {
-	if ( widget.id_base === 'block' ) {
-		const parsedBlocks = parse( widget.instance.raw.content, {
-			__unstableSkipAutop: true,
-		} );
-		if ( ! parsedBlocks.length ) {
-			return createBlock( 'core/paragraph', {}, [] );
+	if ( widget.id_base !== 'block' ) {
+		let attributes;
+		if ( widget._embedded.about[ 0 ].is_multi ) {
+			attributes = {
+				idBase: widget.id_base,
+				instance: widget.instance,
+			};
+		} else {
+			attributes = {
+				id: widget.id,
+			};
 		}
 
-		return parsedBlocks[ 0 ];
+		return switchLegacyWidgetType(
+			createBlock( 'core/legacy-widget', attributes )
+		);
 	}
 
-	let attributes;
-	if ( widget._embedded.about[ 0 ].is_multi ) {
-		attributes = {
-			idBase: widget.id_base,
-			instance: widget.instance,
-		};
-	} else {
-		attributes = {
-			id: widget.id,
-		};
+	const parsedBlocks = parse( widget.instance.raw.content, {
+		__unstableSkipAutop: true,
+	} );
+
+	if ( ! parsedBlocks.length ) {
+		return undefined;
+	}
+
+	const block = parsedBlocks[ 0 ];
+
+	if ( block.name === 'core/widget-group' ) {
+		return createBlock(
+			getGroupingBlockName(),
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	if ( block.innerBlocks.length > 0 ) {
+		return cloneBlock(
+			block,
+			undefined,
+			transformInnerBlocks( block.innerBlocks )
+		);
+	}
+
+	return block;
+}
+
+/**
+ * Switch Legacy Widget to the first matching transformation block.
+ *
+ * @param {Object} block Legacy Widget block object
+ * @return {Object|undefined} a block
+ */
+function switchLegacyWidgetType( block ) {
+	const transforms = getPossibleBlockTransformations( [ block ] ).filter(
+		( item ) => {
+			// The block without any transformations can't be a wildcard.
+			if ( ! item.transforms ) {
+				return true;
+			}
+
+			const hasWildCardFrom = item.transforms?.from?.find(
+				( from ) => from.blocks && from.blocks.includes( '*' )
+			);
+			const hasWildCardTo = item.transforms?.to?.find(
+				( to ) => to.blocks && to.blocks.includes( '*' )
+			);
+
+			// Skip wildcard transformations.
+			return ! hasWildCardFrom && ! hasWildCardTo;
+		}
+	);
+
+	if ( ! transforms.length ) {
+		return undefined;
 	}
 
-	return createBlock( 'core/legacy-widget', attributes, [] );
+	return switchToBlockType( block, transforms[ 0 ].name );
+}
+
+function transformInnerBlocks( innerBlocks = [] ) {
+	return innerBlocks
+		.flatMap( ( block ) => {
+			if ( block.name === 'core/legacy-widget' ) {
+				return switchLegacyWidgetType( block );
+			}
+
+			return createBlock(
+				block.name,
+				block.attributes,
+				transformInnerBlocks( block.innerBlocks )
+			);
+		} )
+		.filter( ( block ) => !! block );
 }