@wordpress/block-library 9.31.1-next.f56bd8138.0 → 9.32.0

package/src/accordion-panel/edit.js

@@ -9,6 +9,7 @@ export default function Edit( { attributes } ) {
 
 	const blockProps = useBlockProps( {
 		'aria-hidden': ! isSelected && ! openByDefault,
+		role: 'region',
 	} );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {

package/src/accordion-panel/save.js

@@ -4,7 +4,9 @@
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 export default function save() {
-	const blockProps = useBlockProps.save();
+	const blockProps = useBlockProps.save( {
+		role: 'region',
+	} );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

package/src/accordion-panel/style.scss

@@ -0,0 +1,8 @@
+.wp-block-accordion-panel {
+	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
+	&[inert],
+	&[aria-hidden="true"] {
+		display: none;
+		margin-block-start: 0;
+	}
+}

package/src/block/block.json

@@ -24,6 +24,7 @@
 		"html": false,
 		"inserter": false,
 		"renaming": false,
+		"blockVisibility": false,
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/comments/index.php

@@ -28,11 +28,11 @@
 function render_block_core_comments( $attributes, $content, $block ) {
 	global $post;
 
-	$post_id = $block->context['postId'];
-	if ( ! isset( $post_id ) ) {
+	if ( ! isset( $block->context['postId'] ) ) {
 		return '';
 	}
 
+	$post_id = $block->context['postId'];
 	// Return early if there are no comments and comments are closed.
 	if ( ! comments_open( $post_id ) && (int) get_comments_number( $post_id ) === 0 ) {
 		return '';

package/src/group/variations.js

@@ -53,11 +53,6 @@ const variations = [
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			! blockAttributes.layout ||
-			! blockAttributes.layout?.type ||
-			blockAttributes.layout?.type === 'default' ||
-			blockAttributes.layout?.type === 'constrained',
 		icon: group,
 	},
 	{
@@ -66,10 +61,7 @@ const variations = [
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex' &&
-			( ! blockAttributes.layout?.orientation ||
-				blockAttributes.layout?.orientation === 'horizontal' ),
+		isActive: [ 'layout.type' ],
 		icon: row,
 		example,
 	},
@@ -79,9 +71,7 @@ const variations = [
 		description: __( 'Arrange blocks vertically.' ),
 		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'flex' &&
-			blockAttributes.layout?.orientation === 'vertical',
+		isActive: [ 'layout.type', 'layout.orientation' ],
 		icon: stack,
 		example,
 	},
@@ -91,8 +81,7 @@ const variations = [
 		description: __( 'Arrange blocks in a grid.' ),
 		attributes: { layout: { type: 'grid' } },
 		scope: [ 'block', 'inserter', 'transform' ],
-		isActive: ( blockAttributes ) =>
-			blockAttributes.layout?.type === 'grid',
+		isActive: [ 'layout.type' ],
 		icon: grid,
 		example,
 	},

package/src/index.js

@@ -6,7 +6,10 @@ import {
 	setFreeformContentHandlerName,
 	setUnregisteredTypeHandlerName,
 	setGroupingBlockName,
+	registerBlockType,
 } from '@wordpress/blocks';
+import { createElement } from '@wordpress/element';
+import ServerSideRender from '@wordpress/server-side-render';
 
 /**
  * Internal dependencies
@@ -21,8 +24,8 @@ import {
 //
 // See https://github.com/WordPress/gutenberg/pull/40655 for more context.
 import * as accordion from './accordion';
-import * as accordionContent from './accordion-content';
-import * as accordionHeader from './accordion-header';
+import * as accordionItem from './accordion-item';
+import * as accordionHeading from './accordion-heading';
 import * as accordionPanel from './accordion-panel';
 import * as archives from './archives';
 import * as avatar from './avatar';
@@ -243,8 +246,8 @@ const getAllBlocks = () => {
 
 	if ( window?.__experimentalEnableBlockExperiments ) {
 		blocks.push( accordion );
-		blocks.push( accordionContent );
-		blocks.push( accordionHeader );
+		blocks.push( accordionItem );
+		blocks.push( accordionHeading );
 		blocks.push( accordionPanel );
 		blocks.push( termsQuery );
 		blocks.push( termTemplate );
@@ -309,6 +312,22 @@ export const registerCoreBlocks = (
 ) => {
 	blocks.forEach( ( { init } ) => init() );
 
+	// Auto-register PHP-only blocks with ServerSideRender
+	if ( window.__unstableAutoRegisterBlocks ) {
+		window.__unstableAutoRegisterBlocks.forEach( ( blockName ) => {
+			registerBlockType( blockName, {
+				title: blockName,
+				edit: ( { attributes } ) => {
+					return createElement( ServerSideRender, {
+						block: blockName,
+						attributes,
+					} );
+				},
+				save: () => null,
+			} );
+		} );
+	}
+
 	setDefaultBlockName( paragraph.name );
 	if (
 		window.wp &&

package/src/navigation/edit/leaf-more-menu.js

@@ -13,6 +13,11 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+import { DEFAULT_BLOCK } from '../constants';
+
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
@@ -43,7 +48,10 @@ function AddSubmenuItem( {
 			disabled={ isDisabled }
 			onClick={ () => {
 				const updateSelectionOnInsert = false;
-				const newLink = createBlock( 'core/navigation-link' );
+				const newLink = createBlock(
+					DEFAULT_BLOCK.name,
+					DEFAULT_BLOCK.attributes
+				);
 
 				if ( block.name === 'core/navigation-submenu' ) {
 					insertBlock(

package/src/navigation/index.php

@@ -478,10 +478,10 @@ class WP_Navigation_Block_Renderer {
 		);
 
 		$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
-		$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+		$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 7.5h16v1.5H4z"></path><path d="M4 15h16v1.5H4z"></path></svg>';
 		if ( isset( $attributes['icon'] ) ) {
 			if ( 'menu' === $attributes['icon'] ) {
-				$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" /></svg>';
+				$toggle_button_icon = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 5v1.5h14V5H5z"></path><path d="M5 12.8h14v-1.5H5v1.5z"></path><path d="M5 19h14v-1.5H5V19z"></path></svg>';
 			}
 		}
 		$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );

package/src/navigation-link/edit.js

@@ -8,15 +8,7 @@ import clsx from 'clsx';
  */
 import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	CheckboxControl,
-	TextControl,
-	TextareaControl,
-	ToolbarButton,
-	ToolbarGroup,
-} from '@wordpress/components';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
 import {
@@ -29,9 +21,8 @@ import {
 	useInnerBlocksProps,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
+import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
@@ -43,7 +34,7 @@ import { useMergeRefs, usePrevious } from '@wordpress/compose';
 import { LinkUI } from './link-ui';
 import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
-import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { Controls } from './shared';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
 const NESTING_BLOCK_NAMES = [
@@ -175,136 +166,6 @@ function getMissingText( type ) {
  * packages/block-library/src/navigation-submenu/edit.js
  * Consider reusing this components for both blocks.
  */
-function Controls( { attributes, setAttributes, setIsEditingControl } ) {
-	const { label, url, description, rel, opensInNewTab } = attributes;
-	const lastURLRef = useRef( url );
-	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	return (
-		<ToolsPanel
-			label={ __( 'Settings' ) }
-			resetAll={ () => {
-				setAttributes( {
-					label: '',
-					url: '',
-					description: '',
-					rel: '',
-					opensInNewTab: false,
-				} );
-			} }
-			dropdownMenuProps={ dropdownMenuProps }
-		>
-			<ToolsPanelItem
-				hasValue={ () => !! label }
-				label={ __( 'Text' ) }
-				onDeselect={ () => setAttributes( { label: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Text' ) }
-					value={ label ? stripHTML( label ) : '' }
-					onChange={ ( labelValue ) => {
-						setAttributes( { label: labelValue } );
-					} }
-					autoComplete="off"
-					onFocus={ () => setIsEditingControl( true ) }
-					onBlur={ () => setIsEditingControl( false ) }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! url }
-				label={ __( 'Link' ) }
-				onDeselect={ () => setAttributes( { url: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Link' ) }
-					value={ url ? safeDecodeURI( url ) : '' }
-					onChange={ ( urlValue ) => {
-						setAttributes( {
-							url: encodeURI( safeDecodeURI( urlValue ) ),
-						} );
-					} }
-					autoComplete="off"
-					type="url"
-					onFocus={ () => {
-						lastURLRef.current = url;
-						setIsEditingControl( true );
-					} }
-					onBlur={ () => {
-						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
-						updateAttributes(
-							{ url: ! url ? lastURLRef.current : url },
-							setAttributes,
-							{ ...attributes, url: lastURLRef.current }
-						);
-						setIsEditingControl( false );
-					} }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! opensInNewTab }
-				label={ __( 'Open in new tab' ) }
-				onDeselect={ () => setAttributes( { opensInNewTab: false } ) }
-				isShownByDefault
-			>
-				<CheckboxControl
-					__nextHasNoMarginBottom
-					label={ __( 'Open in new tab' ) }
-					checked={ opensInNewTab }
-					onChange={ ( value ) =>
-						setAttributes( { opensInNewTab: value } )
-					}
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! description }
-				label={ __( 'Description' ) }
-				onDeselect={ () => setAttributes( { description: '' } ) }
-				isShownByDefault
-			>
-				<TextareaControl
-					__nextHasNoMarginBottom
-					label={ __( 'Description' ) }
-					value={ description || '' }
-					onChange={ ( descriptionValue ) => {
-						setAttributes( { description: descriptionValue } );
-					} }
-					help={ __(
-						'The description will be displayed in the menu if the current theme supports it.'
-					) }
-				/>
-			</ToolsPanelItem>
-
-			<ToolsPanelItem
-				hasValue={ () => !! rel }
-				label={ __( 'Rel attribute' ) }
-				onDeselect={ () => setAttributes( { rel: '' } ) }
-				isShownByDefault
-			>
-				<TextControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'Rel attribute' ) }
-					value={ rel || '' }
-					onChange={ ( relValue ) => {
-						setAttributes( { rel: relValue } );
-					} }
-					autoComplete="off"
-					help={ __(
-						'The relationship of the linked URL as space-separated link types.'
-					) }
-				/>
-			</ToolsPanelItem>
-		</ToolsPanel>
-	);
-}
 
 export default function NavigationLinkEdit( {
 	attributes,

package/src/navigation-link/shared/README.md

@@ -0,0 +1,47 @@
+# Navigation Blocks Shared Components
+
+This directory contains shared components and utilities used by both the Navigation Link and Navigation Submenu blocks to reduce code duplication and ensure consistent behavior.
+
+## Purpose
+
+The Navigation Link and Navigation Submenu blocks share significant functionality, particularly in their inspector controls (ToolsPanel). This shared directory was created to:
+
+-   **Reduce code duplication** - Eliminate identical code between the two blocks
+-   **Ensure consistency** - Both blocks now use the same components, preventing behavioral differences
+-   **Reduce maintenance burden** - Changes to shared functionality only need to be made in one place
+-   **Minimize bugs** - Less duplicated code means fewer places for bugs to hide
+-   **Improve testability** - Shared components can be tested once and reused
+
+## Current Shared Components
+
+-   **`Controls`** - Inspector controls component providing the ToolsPanel interface for both blocks
+
+## Future Direction
+
+While this shared directory provides immediate benefits for reducing duplication, the long-term vision is to refactor towards a **unified Navigation Item block** that can behave differently based on context (link vs submenu). This would:
+
+-   Eliminate the need for separate Navigation Link and Navigation Submenu blocks
+-   Provide a single, more maintainable codebase
+-   Allow for more flexible navigation item types
+-   Simplify the user experience
+
+However, this refactoring is beyond the current scope and would require significant architectural changes. For now, this shared directory provides a practical solution that:
+
+-   Maintains backward compatibility
+-   Reduces immediate technical debt
+-   Prepares the foundation for future unification
+-   Supports the integration of new features like Dynamic URL functionality
+
+## Testing
+
+All shared components include comprehensive tests in the `test/` directory. The tests use pure mocking strategies to ensure isolated, reliable testing of component behavior.
+
+## Contributing
+
+When adding new shared functionality:
+
+1. Place shared components in this directory
+2. Export them from `index.js`
+3. Add comprehensive tests
+4. Update both Navigation Link and Navigation Submenu blocks to use the shared component
+5. Remove any duplicated code from the individual blocks

package/src/navigation-link/shared/controls.js

@@ -0,0 +1,167 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	CheckboxControl,
+	TextControl,
+	TextareaControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { safeDecodeURI } from '@wordpress/url';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
+import { updateAttributes } from '../update-attributes';
+
+/**
+ * Shared Controls component for Navigation Link and Navigation Submenu blocks.
+ *
+ * This component provides the inspector controls (ToolsPanel) that are identical
+ * between both navigation blocks.
+ *
+ * @param {Object}   props                     - Component props
+ * @param {Object}   props.attributes          - Block attributes
+ * @param {Function} props.setAttributes       - Function to update block attributes
+ * @param {Function} props.setIsEditingControl - Function to set editing state (optional)
+ */
+export function Controls( {
+	attributes,
+	setAttributes,
+	setIsEditingControl = () => {},
+} ) {
+	const { label, url, description, rel, opensInNewTab } = attributes;
+	const lastURLRef = useRef( url );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	return (
+		<ToolsPanel
+			label={ __( 'Settings' ) }
+			resetAll={ () => {
+				setAttributes( {
+					label: '',
+					url: '',
+					description: '',
+					rel: '',
+					opensInNewTab: false,
+				} );
+			} }
+			dropdownMenuProps={ dropdownMenuProps }
+		>
+			<ToolsPanelItem
+				hasValue={ () => !! label }
+				label={ __( 'Text' ) }
+				onDeselect={ () => setAttributes( { label: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Text' ) }
+					value={ label ? stripHTML( label ) : '' }
+					onChange={ ( labelValue ) => {
+						setAttributes( { label: labelValue } );
+					} }
+					autoComplete="off"
+					onFocus={ () => setIsEditingControl( true ) }
+					onBlur={ () => setIsEditingControl( false ) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! url }
+				label={ __( 'Link' ) }
+				onDeselect={ () => setAttributes( { url: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Link' ) }
+					value={ url ? safeDecodeURI( url ) : '' }
+					onChange={ ( urlValue ) => {
+						setAttributes( {
+							url: encodeURI( safeDecodeURI( urlValue ) ),
+						} );
+					} }
+					autoComplete="off"
+					type="url"
+					onFocus={ () => {
+						lastURLRef.current = url;
+						setIsEditingControl( true );
+					} }
+					onBlur={ () => {
+						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
+						updateAttributes(
+							{ url: ! url ? lastURLRef.current : url },
+							setAttributes,
+							{ ...attributes, url: lastURLRef.current }
+						);
+						setIsEditingControl( false );
+					} }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! opensInNewTab }
+				label={ __( 'Open in new tab' ) }
+				onDeselect={ () => setAttributes( { opensInNewTab: false } ) }
+				isShownByDefault
+			>
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					label={ __( 'Open in new tab' ) }
+					checked={ opensInNewTab }
+					onChange={ ( value ) =>
+						setAttributes( { opensInNewTab: value } )
+					}
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! description }
+				label={ __( 'Description' ) }
+				onDeselect={ () => setAttributes( { description: '' } ) }
+				isShownByDefault
+			>
+				<TextareaControl
+					__nextHasNoMarginBottom
+					label={ __( 'Description' ) }
+					value={ description || '' }
+					onChange={ ( descriptionValue ) => {
+						setAttributes( { description: descriptionValue } );
+					} }
+					help={ __(
+						'The description will be displayed in the menu if the current theme supports it.'
+					) }
+				/>
+			</ToolsPanelItem>
+
+			<ToolsPanelItem
+				hasValue={ () => !! rel }
+				label={ __( 'Rel attribute' ) }
+				onDeselect={ () => setAttributes( { rel: '' } ) }
+				isShownByDefault
+			>
+				<TextControl
+					__nextHasNoMarginBottom
+					__next40pxDefaultSize
+					label={ __( 'Rel attribute' ) }
+					value={ rel || '' }
+					onChange={ ( relValue ) => {
+						setAttributes( { rel: relValue } );
+					} }
+					autoComplete="off"
+					help={ __(
+						'The relationship of the linked URL as space-separated link types.'
+					) }
+				/>
+			</ToolsPanelItem>
+		</ToolsPanel>
+	);
+}

package/src/navigation-link/shared/index.js

@@ -0,0 +1,8 @@
+/**
+ * Shared components for Navigation Link and Navigation Submenu blocks.
+ *
+ * This module provides common functionality that can be used by both blocks
+ * to reduce code duplication and ensure consistent behavior.
+ */
+
+export { Controls } from './controls';