@wordpress/block-library 8.27.2 → 8.28.1

package/src/latest-comments/block.json

@@ -46,6 +46,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",

package/src/latest-posts/block.json

@@ -110,6 +110,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-latest-posts-editor",

package/src/list/block.json

@@ -4,6 +4,7 @@
 	"name": "core/list",
 	"title": "List",
 	"category": "text",
+	"allowedBlocks": [ "core/list-item" ],
 	"description": "Create a bulleted or numbered list.",
 	"keywords": [ "bullet list", "ordered list", "numbered list" ],
 	"textdomain": "default",
@@ -70,7 +71,10 @@
 		"__unstablePasteTextInline": true,
 		"__experimentalSelector": "ol,ul",
 		"__experimentalOnMerge": true,
-		"__experimentalSlashInserter": true
+		"__experimentalSlashInserter": true,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-list-editor",
 	"style": "wp-block-list"

package/src/list/edit.js

@@ -125,7 +125,6 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list-item' ],
 		template: TEMPLATE,
 		templateLock: false,
 		templateInsertUpdatesSelection: true,

package/src/list-item/block.json

@@ -5,6 +5,7 @@
 	"title": "List item",
 	"category": "text",
 	"parent": [ "core/list" ],
+	"allowedBlocks": [ "core/list" ],
 	"description": "Create a list item.",
 	"textdomain": "default",
 	"attributes": {
@@ -41,6 +42,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/list-item/edit.js

@@ -81,7 +81,6 @@ export default function ListItemEdit( {
 	const { placeholder, content } = attributes;
 	const blockProps = useBlockProps( { ref: useCopy( clientId ) } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
 		__unstableDisableDropZone: true,
 	} );

package/src/list-item/edit.native.js

@@ -90,7 +90,6 @@ export default function ListItemEdit( {
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
 	} );
 

package/src/loginout/block.json

@@ -39,6 +39,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/media-text/block.json

@@ -123,6 +123,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-media-text-editor",

package/src/media-text/edit.js

@@ -230,6 +230,15 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 
 	const mediaTextGeneralSettings = (
 		<PanelBody title={ __( 'Settings' ) }>
+			<RangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize
+				label={ __( 'Media width' ) }
+				value={ temporaryMediaWidth || mediaWidth }
+				onChange={ commitWidthChange }
+				min={ WIDTH_CONSTRAINT_PERCENTAGE }
+				max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
 				label={ __( 'Stack on mobile' ) }
@@ -243,7 +252,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 			{ mediaType === 'image' && (
 				<ToggleControl
 					__nextHasNoMarginBottom
-					label={ __( 'Crop image to fill entire column' ) }
+					label={ __( 'Crop image to fill' ) }
 					checked={ !! imageFill }
 					onChange={ () =>
 						setAttributes( {
@@ -255,7 +264,8 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 			{ imageFill && mediaUrl && mediaType === 'image' && (
 				<FocalPointPicker
 					__nextHasNoMarginBottom
-					label={ __( 'Focal point picker' ) }
+					__next40pxDefaultSize
+					label={ __( 'Focal point' ) }
 					url={ mediaUrl }
 					value={ focalPoint }
 					onChange={ ( value ) =>
@@ -293,16 +303,6 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 					) }
 				/>
 			) }
-			{ mediaUrl && (
-				<RangeControl
-					__nextHasNoMarginBottom
-					label={ __( 'Media width' ) }
-					value={ temporaryMediaWidth || mediaWidth }
-					onChange={ commitWidthChange }
-					min={ WIDTH_CONSTRAINT_PERCENTAGE }
-					max={ 100 - WIDTH_CONSTRAINT_PERCENTAGE }
-				/>
-			) }
 		</PanelBody>
 	);
 

package/src/media-text/edit.native.js

@@ -182,7 +182,7 @@ class MediaTextEdit extends Component {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
-						label={ __( 'Crop image to fill entire column' ) }
+						label={ __( 'Crop image to fill' ) }
 						checked={ imageFill }
 						onChange={ this.onSetImageFill }
 					/>

package/src/missing/block.json

@@ -23,6 +23,9 @@
 		"customClassName": false,
 		"inserter": false,
 		"html": false,
-		"reusable": false
+		"reusable": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	}
 }

package/src/more/block.json

@@ -20,7 +20,10 @@
 		"customClassName": false,
 		"className": false,
 		"html": false,
-		"multiple": false
+		"multiple": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-more-editor"
 }

package/src/navigation/block.json

@@ -4,6 +4,19 @@
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
+	"allowedBlocks": [
+		"core/navigation-link",
+		"core/search",
+		"core/social-links",
+		"core/page-list",
+		"core/spacer",
+		"core/home-link",
+		"core/site-title",
+		"core/site-logo",
+		"core/navigation-submenu",
+		"core/loginout",
+		"core/buttons"
+	],
 	"description": "A collection of blocks that allow visitors to get around your site.",
 	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",

package/src/navigation/constants.js

@@ -2,20 +2,6 @@ export const DEFAULT_BLOCK = {
 	name: 'core/navigation-link',
 };
 
-export const ALLOWED_BLOCKS = [
-	'core/navigation-link',
-	'core/search',
-	'core/social-links',
-	'core/page-list',
-	'core/spacer',
-	'core/home-link',
-	'core/site-title',
-	'core/site-logo',
-	'core/navigation-submenu',
-	'core/loginout',
-	'core/buttons',
-];
-
 export const PRIORITIZED_INSERTER_BLOCKS = [
 	'core/navigation-link/page',
 	'core/navigation-link',

package/src/navigation/edit/inner-blocks.js

@@ -14,11 +14,7 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import PlaceholderPreview from './placeholder/placeholder-preview';
-import {
-	DEFAULT_BLOCK,
-	ALLOWED_BLOCKS,
-	PRIORITIZED_INSERTER_BLOCKS,
-} from '../constants';
+import { DEFAULT_BLOCK, PRIORITIZED_INSERTER_BLOCKS } from '../constants';
 
 export default function NavigationInnerBlocks( {
 	clientId,
@@ -59,17 +55,6 @@ export default function NavigationInnerBlocks( {
 		'wp_navigation'
 	);
 
-	const shouldDirectInsert = useMemo(
-		() =>
-			blocks.every(
-				( { name } ) =>
-					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu' ||
-					name === 'core/page-list'
-			),
-		[ blocks ]
-	);
-
 	// When the block is selected itself or has a top level item selected that
 	// doesn't itself have children, show the standard appender. Else show no
 	// appender.
@@ -96,10 +81,9 @@ export default function NavigationInnerBlocks( {
 			value: blocks,
 			onInput,
 			onChange,
-			allowedBlocks: ALLOWED_BLOCKS,
 			prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS,
 			defaultBlock: DEFAULT_BLOCK,
-			directInsert: shouldDirectInsert,
+			directInsert: true,
 			orientation,
 			templateLock,
 

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -5,17 +5,13 @@ import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
+import { useContext, useEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { areBlocksDirty } from './are-blocks-dirty';
-import {
-	DEFAULT_BLOCK,
-	ALLOWED_BLOCKS,
-	SELECT_NAVIGATION_MENUS_ARGS,
-} from '../constants';
+import { DEFAULT_BLOCK, SELECT_NAVIGATION_MENUS_ARGS } from '../constants';
 
 const EMPTY_OBJECT = {};
 
@@ -46,17 +42,6 @@ export default function UnsavedInnerBlocks( {
 		blocks
 	);
 
-	const shouldDirectInsert = useMemo(
-		() =>
-			blocks.every(
-				( { name } ) =>
-					name === 'core/navigation-link' ||
-					name === 'core/navigation-submenu' ||
-					name === 'core/page-list'
-			),
-		[ blocks ]
-	);
-
 	// The block will be disabled in a block preview, use this as a way of
 	// avoiding the side-effects of this component for block previews.
 	const isDisabled = useContext( Disabled.Context );
@@ -67,9 +52,8 @@ export default function UnsavedInnerBlocks( {
 		},
 		{
 			renderAppender: hasSelection ? undefined : false,
-			allowedBlocks: ALLOWED_BLOCKS,
 			defaultBlock: DEFAULT_BLOCK,
-			directInsert: shouldDirectInsert,
+			directInsert: true,
 		}
 	);
 

package/src/navigation/index.php

@@ -9,18 +9,11 @@
  * Helper functions used to render the navigation block.
  */
 class WP_Navigation_Block_Renderer {
+
 	/**
-	 * Used to determine which blocks are wrapped in an <li>.
-	 *
-	 * @var array
+	 * Used to determine whether or not a navigation has submenus.
 	 */
-	private static $nav_blocks_wrapped_in_list_item = array(
-		'core/navigation-link',
-		'core/home-link',
-		'core/site-title',
-		'core/site-logo',
-		'core/navigation-submenu',
-	);
+	private static $has_submenus = false;
 
 	/**
 	 * Used to determine which blocks need an <li> wrapper.
@@ -58,22 +51,37 @@ class WP_Navigation_Block_Renderer {
 	 * Returns whether or not a navigation has a submenu.
 	 *
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
-	 * @return bool Returns whether or not a navigation has a submenu.
+	 * @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
 	 */
 	private static function has_submenus( $inner_blocks ) {
+		if ( true === static::$has_submenus ) {
+			return static::$has_submenus;
+		}
+
 		foreach ( $inner_blocks as $inner_block ) {
-			$inner_block_content = $inner_block->render();
-			$p                   = new WP_HTML_Tag_Processor( $inner_block_content );
-			if ( $p->next_tag(
-				array(
-					'name'       => 'LI',
-					'class_name' => 'has-child',
-				)
-			) ) {
-				return true;
+			// If this is a page list then work out if any of the pages have children.
+			if ( 'core/page-list' === $inner_block->name ) {
+				$all_pages = get_pages(
+					array(
+						'sort_column' => 'menu_order,post_title',
+						'order'       => 'asc',
+					)
+				);
+				foreach ( (array) $all_pages as $page ) {
+					if ( $page->post_parent ) {
+						static::$has_submenus = true;
+						break;
+					}
+				}
+			}
+			// If this is a navigation submenu then we know we have submenus.
+			if ( 'core/navigation-submenu' === $inner_block->name ) {
+				static::$has_submenus = true;
+				break;
 			}
 		}
-		return false;
+
+		return static::$has_submenus;
 	}
 
 	/**
@@ -96,7 +104,23 @@ class WP_Navigation_Block_Renderer {
 	 * @return bool Returns whether or not a block needs a list item wrapper.
 	 */
 	private static function does_block_need_a_list_item_wrapper( $block ) {
-		return in_array( $block->name, static::$needs_list_item_wrapper, true );
+
+		/**
+		 * Filter the list of blocks that need a list item wrapper.
+		 *
+		 * Affords the ability to customize which blocks need a list item wrapper when rendered
+		 * within a core/navigation block.
+		 * This is useful for blocks that are not list items but should be wrapped in a list
+		 * item when used as a child of a navigation block.
+		 *
+		 * @since 6.5.0
+		 *
+		 * @param array $needs_list_item_wrapper The list of blocks that need a list item wrapper.
+		 * @return array The list of blocks that need a list item wrapper.
+		 */
+		$needs_list_item_wrapper = apply_filters( 'block_core_navigation_listable_blocks', static::$needs_list_item_wrapper );
+
+		return in_array( $block->name, $needs_list_item_wrapper, true );
 	}
 
 	/**
@@ -140,7 +164,9 @@ class WP_Navigation_Block_Renderer {
 		$is_list_open      = false;
 
 		foreach ( $inner_blocks as $inner_block ) {
-			$is_list_item = in_array( $inner_block->name, static::$nav_blocks_wrapped_in_list_item, true );
+			$inner_block_markup = static::get_markup_for_inner_block( $inner_block );
+			$p                  = new WP_HTML_Tag_Processor( $inner_block_markup );
+			$is_list_item       = $p->next_tag( 'LI' );
 
 			if ( $is_list_item && ! $is_list_open ) {
 				$is_list_open       = true;
@@ -155,7 +181,7 @@ class WP_Navigation_Block_Renderer {
 				$inner_blocks_html .= '</ul>';
 			}
 
-			$inner_blocks_html .= static::get_markup_for_inner_block( $inner_block );
+			$inner_blocks_html .= $inner_block_markup;
 		}
 
 		if ( $is_list_open ) {
@@ -531,19 +557,17 @@ class WP_Navigation_Block_Renderer {
 			return '';
 		}
 		// When adding to this array be mindful of security concerns.
-		$nav_element_context    = wp_json_encode(
+		$nav_element_context    = data_wp_context(
 			array(
 				'overlayOpenedBy' => array(),
 				'type'            => 'overlay',
 				'roleAttribute'   => '',
 				'ariaLabel'       => __( 'Menu' ),
-			),
-			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
+			)
 		);
 		$nav_element_directives = '
-			data-wp-interactive=\'{"namespace":"core/navigation"}\'
-			data-wp-context=\'' . $nav_element_context . '\'
-		';
+		 data-wp-interactive="core/navigation"'
+		. $nav_element_context;
 
 		/*
 		* When the navigation's 'overlayMenu' attribute is set to 'always', JavaScript
@@ -567,6 +591,17 @@ class WP_Navigation_Block_Renderer {
 	 */
 	private static function handle_view_script_module_loading( $attributes, $block, $inner_blocks ) {
 		if ( static::is_interactive( $attributes, $inner_blocks ) ) {
+			$suffix = wp_scripts_get_suffix();
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$module_url = gutenberg_url( '/build/interactivity/navigation.min.js' );
+			}
+
+			wp_register_script_module(
+				'@wordpress/block-library/navigation',
+				isset( $module_url ) ? $module_url : includes_url( "blocks/navigation/view{$suffix}.js" ),
+				array( '@wordpress/interactivity' ),
+				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+			);
 			wp_enqueue_script_module( '@wordpress/block-library/navigation' );
 		}
 	}
@@ -743,7 +778,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		)
 	) ) {
 		// Add directives to the parent `<li>`.
-		$tags->set_attribute( 'data-wp-interactive', '{ "namespace": "core/navigation" }' );
+		$tags->set_attribute( 'data-wp-interactive', 'core/navigation' );
 		$tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": {}, "type": "submenu" }' );
 		$tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' );
 		$tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' );
@@ -968,7 +1003,9 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
 function block_core_navigation_get_fallback_blocks() {
 	$page_list_fallback = array(
 		array(
-			'blockName' => 'core/page-list',
+			'blockName'    => 'core/page-list',
+			'innerContent' => array(),
+			'attrs'        => array(),
 		),
 	);
 
@@ -976,12 +1013,7 @@ function block_core_navigation_get_fallback_blocks() {
 
 	// If `core/page-list` is not registered then return empty blocks.
 	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
-
-	if ( class_exists( 'WP_Navigation_Fallback' ) ) {
-		$navigation_post = WP_Navigation_Fallback::get_fallback();
-	} else {
-		$navigation_post = Gutenberg_Navigation_Fallback::get_fallback();
-	}
+	$navigation_post = WP_Navigation_Fallback::get_fallback();
 
 	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
@@ -1079,13 +1111,6 @@ function register_block_core_navigation() {
 			'render_callback' => 'render_block_core_navigation',
 		)
 	);
-
-	wp_register_script_module(
-		'@wordpress/block-library/navigation',
-		defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/navigation.min.js' ) : includes_url( 'blocks/navigation/view.min.js' ),
-		array( '@wordpress/interactivity' ),
-		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-	);
 }
 
 add_action( 'init', 'register_block_core_navigation' );
@@ -1418,9 +1443,14 @@ function block_core_navigation_update_ignore_hooked_blocks_meta( $post ) {
 	}
 }
 
+// Before adding our filter, we verify if it's already added in Core.
+// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
+// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
+$rest_insert_wp_navigation_core_callback = 'block_core_navigation_' . 'update_ignore_hooked_blocks_meta';
+
 // Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
 // that are not present in Gutenberg's WP 6.5 compatibility layer.
-if ( function_exists( 'get_hooked_block_markup' ) ) {
+if ( function_exists( 'get_hooked_block_markup' ) && ! has_filter( 'rest_insert_wp_navigation', $rest_insert_wp_navigation_core_callback ) ) {
 	add_action( 'rest_insert_wp_navigation', 'block_core_navigation_update_ignore_hooked_blocks_meta', 10, 3 );
 }
 
@@ -1450,8 +1480,13 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 	return $response;
 }
 
+// Before adding our filter, we verify if it's already added in Core.
+// However, during the build process, Gutenberg automatically prefixes our functions with "gutenberg_".
+// Therefore, we concatenate the Core's function name to circumvent this prefix for our check.
+$rest_prepare_wp_navigation_core_callback = 'block_core_navigation_' . 'insert_hooked_blocks_into_rest_response';
+
 // Injection of hooked blocks into the Navigation block relies on some functions present in WP >= 6.5
 // that are not present in Gutenberg's WP 6.5 compatibility layer.
-if ( function_exists( 'get_hooked_block_markup' ) ) {
+if ( function_exists( 'get_hooked_block_markup' ) && ! has_filter( 'rest_prepare_wp_navigation', $rest_prepare_wp_navigation_core_callback ) ) {
 	add_filter( 'rest_prepare_wp_navigation', 'block_core_navigation_insert_hooked_blocks_into_rest_response', 10, 3 );
 }