@wordpress/block-library 8.33.0 → 8.35.0

package/src/media-text/deprecated.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -263,7 +263,7 @@ const v6 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -293,7 +293,7 @@ const v6 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -392,7 +392,7 @@ const v5 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -422,7 +422,7 @@ const v5 = {
 			image: () => image,
 			video: () => <video controls src={ mediaUrl } />,
 		};
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -506,7 +506,7 @@ const v4 = {
 			attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 		const newRel = ! rel ? undefined : rel;
 
-		const imageClasses = classnames( {
+		const imageClasses = clsx( {
 			[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 			[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 		} );
@@ -537,7 +537,7 @@ const v4 = {
 			video: () => <video controls src={ mediaUrl } />,
 		};
 
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'is-stacked-on-mobile': isStackedOnMobile,
 			[ `is-vertically-aligned-${ verticalAlignment }` ]:
@@ -688,7 +688,7 @@ const v3 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			'has-background': backgroundClass || customBackgroundColor,
 			[ backgroundClass ]: backgroundClass,
@@ -791,7 +791,7 @@ const v2 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,
@@ -870,7 +870,7 @@ const v1 = {
 			'background-color',
 			backgroundColor
 		);
-		const className = classnames( {
+		const className = clsx( {
 			'has-media-on-the-right': 'right' === mediaPosition,
 			[ backgroundClass ]: backgroundClass,
 			'is-stacked-on-mobile': isStackedOnMobile,

package/src/media-text/edit.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -227,7 +227,7 @@ function MediaTextEdit( {
 		setTemporaryMediaWidth( null );
 	};
 
-	const classNames = classnames( {
+	const classNames = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,

package/src/media-text/media-container.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -173,7 +173,7 @@ function MediaContainer( props, ref ) {
 		return (
 			<ResizableBoxContainer
 				as="figure"
-				className={ classnames(
+				className={ clsx(
 					className,
 					'editor-media-container__resizer',
 					{ 'is-transient': isTemporaryMedia }

package/src/media-text/save.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ export default function save( { attributes } ) {
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 	const newRel = ! rel ? undefined : rel;
 
-	const imageClasses = classnames( {
+	const imageClasses = clsx( {
 		[ `wp-image-${ mediaId }` ]: mediaId && mediaType === 'image',
 		[ `size-${ mediaSizeSlug }` ]: mediaId && mediaType === 'image',
 	} );
@@ -67,7 +67,7 @@ export default function save( { attributes } ) {
 		image: () => image,
 		video: () => <video controls src={ mediaUrl } />,
 	};
-	const className = classnames( {
+	const className = clsx( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-stacked-on-mobile': isStackedOnMobile,
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,

package/src/navigation/block.json

@@ -137,15 +137,6 @@
 				"type": "flex"
 			}
 		},
-		"__experimentalStyle": {
-			"elements": {
-				"link": {
-					"color": {
-						"text": "inherit"
-					}
-				}
-			}
-		},
 		"interactivity": true,
 		"renaming": false
 	},

package/src/navigation/edit/are-blocks-dirty.js

@@ -30,7 +30,9 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 		y !== null &&
 		y !== undefined
 	) {
-		if ( Object.keys( x ).length !== Object.keys( y ).length ) return false;
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) {
+			return false;
+		}
 
 		for ( const prop in x ) {
 			if ( y.hasOwnProperty( prop ) ) {
@@ -39,9 +41,12 @@ const isDeepEqual = ( x, y, shouldSkip ) => {
 					return true;
 				}
 
-				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) )
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) ) {
 					return false;
-			} else return false;
+				}
+			} else {
+				return false;
+			}
 		}
 
 		return true;

package/src/navigation/edit/deleted-navigation-warning.js

@@ -11,7 +11,7 @@ function DeletedNavigationWarning( { onCreateNew } ) {
 		<Warning>
 			{ createInterpolateElement(
 				__(
-					'Navigation Menu has been deleted or is unavailable. <button>Create a new menu?</button>'
+					'Navigation Menu has been deleted or is unavailable. <button>Create a new Menu?</button>'
 				),
 				{
 					button: <Button onClick={ onCreateNew } variant="link" />,

package/src/navigation/edit/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -409,7 +409,7 @@ function Navigation( {
 	const isResponsive = 'never' !== overlayMenu;
 	const blockProps = useBlockProps( {
 		ref: navRef,
-		className: classnames(
+		className: clsx(
 			className,
 			{
 				'items-justified-right': justifyContent === 'right',
@@ -558,7 +558,7 @@ function Navigation( {
 	const hasManagePermissions =
 		canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
 
-	const overlayMenuPreviewClasses = classnames(
+	const overlayMenuPreviewClasses = clsx(
 		'wp-block-navigation__overlay-menu-preview',
 		{ open: overlayMenuPreview }
 	);

package/src/navigation/edit/menu-inspector-controls.js

@@ -49,7 +49,9 @@ function AdditionalBlockContent( { block, insertedBlock, setInsertedBlock } ) {
 
 	const setInsertedBlockAttributes =
 		( _insertedBlockClientId ) => ( _updatedAttributes ) => {
-			if ( ! _insertedBlockClientId ) return;
+			if ( ! _insertedBlockClientId ) {
+				return;
+			}
 			updateBlockAttributes( _insertedBlockClientId, _updatedAttributes );
 		};
 

package/src/navigation/edit/navigation-menu-selector.js

@@ -202,7 +202,7 @@ function NavigationMenuSelector( {
 									! hasResolvedNavigationMenus
 								}
 							>
-								{ __( 'Create new menu' ) }
+								{ __( 'Create new Menu' ) }
 							</MenuItem>
 						</MenuGroup>
 					) }

package/src/navigation/edit/responsive-wrapper.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -32,7 +32,7 @@ export default function ResponsiveWrapper( {
 		return children;
 	}
 
-	const responsiveContainerClasses = classnames(
+	const responsiveContainerClasses = clsx(
 		'wp-block-navigation__responsive-container',
 		{
 			'has-text-color':
@@ -59,7 +59,7 @@ export default function ResponsiveWrapper( {
 			overlayBackgroundColor.color,
 	};
 
-	const openButtonClasses = classnames(
+	const openButtonClasses = clsx(
 		'wp-block-navigation__responsive-container-open',
 		{ 'always-shown': isHiddenByDefault }
 	);

package/src/navigation/edit/test/navigation-menu-selector.js

@@ -191,7 +191,7 @@ describe( 'NavigationMenuSelector', () => {
 				expect( toolsGroup ).toBeInTheDocument();
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				expect( createMenuButton ).toBeInTheDocument();
@@ -236,7 +236,7 @@ describe( 'NavigationMenuSelector', () => {
 				await user.click( toggleButton );
 
 				const createMenuButton = screen.getByRole( 'menuitem', {
-					name: 'Create new menu',
+					name: 'Create new Menu',
 				} );
 
 				await user.click( createMenuButton );
@@ -268,7 +268,7 @@ describe( 'NavigationMenuSelector', () => {
 
 				await user.click(
 					screen.getByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				);
 
@@ -293,7 +293,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the "Create menu" button is disabled.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeDisabled();
 
@@ -318,7 +318,7 @@ describe( 'NavigationMenuSelector', () => {
 				// Check the button is enabled again.
 				expect(
 					screen.queryByRole( 'menuitem', {
-						name: 'Create new menu',
+						name: 'Create new Menu',
 					} )
 				).toBeEnabled();
 			} );

package/src/navigation/edit/utils.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -91,7 +91,7 @@ export function getColors( context, isSubMenu ) {
 
 export function getNavigationChildBlockProps( innerBlocksColors ) {
 	return {
-		className: classnames( 'wp-block-navigation__submenu-container', {
+		className: clsx( 'wp-block-navigation__submenu-container', {
 			'has-text-color': !! (
 				innerBlocksColors.textColor || innerBlocksColors.customTextColor
 			),

package/src/navigation/index.php

@@ -7,27 +7,36 @@
 
 /**
  * Helper functions used to render the navigation block.
+ *
+ * @since 6.5.0
  */
 class WP_Navigation_Block_Renderer {
 
 	/**
 	 * Used to determine whether or not a navigation has submenus.
+	 *
+	 * @since 6.5.0
 	 */
 	private static $has_submenus = false;
 
 	/**
 	 * Used to determine which blocks need an <li> wrapper.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @var array
 	 */
 	private static $needs_list_item_wrapper = array(
 		'core/site-title',
 		'core/site-logo',
+		'core/social-links',
 	);
 
 	/**
 	 * Keeps track of all the navigation names that have been seen.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @var array
 	 */
 	private static $seen_menu_names = array();
@@ -35,6 +44,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns whether or not this is responsive navigation.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return bool Returns whether or not this is responsive navigation.
 	 */
@@ -50,6 +61,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns whether or not a navigation has a submenu.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
 	 */
@@ -87,6 +100,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Determine whether the navigation blocks is interactive.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return bool Returns whether or not to load the view script.
@@ -100,6 +115,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns whether or not a block needs a list item wrapper.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block $block The block.
 	 * @return bool Returns whether or not a block needs a list item wrapper.
 	 */
@@ -126,6 +143,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns the markup for a single inner block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param WP_Block $inner_block The inner block.
 	 * @return string Returns the markup for a single inner block.
 	 */
@@ -143,6 +162,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns the html for the inner blocks of the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return string Returns the html for the inner blocks of the navigation block.
@@ -200,6 +221,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the inner blocks for the navigation block from the navigation post.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
@@ -235,6 +258,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the inner blocks for the navigation block from the fallback.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
 	 */
@@ -252,6 +277,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the inner blocks for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array    $attributes The block attributes.
 	 * @param WP_Block $block The parsed block.
 	 * @return WP_Block_List Returns the inner blocks for the navigation block.
@@ -310,6 +337,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the name of the current navigation, if it has one.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the name of the navigation.
 	 */
@@ -345,6 +374,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns the layout class for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the layout class for the navigation block.
 	 */
@@ -376,6 +407,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Return classes for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the classes for the navigation block.
 	 */
@@ -403,6 +436,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Get styles for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns the styles for the navigation block.
 	 */
@@ -416,6 +451,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Get the responsive container markup
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @param string        $inner_blocks_html The markup for the inner blocks.
@@ -514,6 +551,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Get the wrapper attributes
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes    The block attributes.
 	 * @param WP_Block_List $inner_blocks  A list of inner blocks.
 	 * @return string Returns the navigation block markup.
@@ -543,6 +582,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Gets the nav element directives.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param bool $is_interactive Whether the block is interactive.
 	 * @return string the directives for the navigation element.
 	 */
@@ -573,6 +614,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Handle view script module loading.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes   The block attributes.
 	 * @param WP_Block      $block        The parsed block.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
@@ -597,6 +640,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns the markup for the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array         $attributes The block attributes.
 	 * @param WP_Block_List $inner_blocks The list of inner blocks.
 	 * @return string Returns the navigation wrapper markup.
@@ -612,6 +657,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Returns a unique name for the navigation.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array $attributes The block attributes.
 	 * @return string Returns a unique name for the navigation.
 	 */
@@ -631,6 +678,8 @@ class WP_Navigation_Block_Renderer {
 	/**
 	 * Renders the navigation block.
 	 *
+	 * @since 6.5.0
+	 *
 	 * @param array    $attributes The block attributes.
 	 * @param string   $content    The saved content.
 	 * @param WP_Block $block      The parsed block.
@@ -1603,7 +1652,9 @@ function block_core_navigation_insert_hooked_blocks_into_rest_response( $respons
 	// Remove mock Navigation block wrapper.
 	$content = block_core_navigation_remove_serialized_parent_block( $content );
 
-	$response->data['content']['raw']      = $content;
+	$response->data['content']['raw'] = $content;
+
+	/** This filter is documented in wp-includes/post-template.php */
 	$response->data['content']['rendered'] = apply_filters( 'the_content', $content );
 
 	return $response;

package/src/navigation/view.js

@@ -94,7 +94,9 @@ const { state, actions } = store(
 				const ctx = getContext();
 				const { ref } = getElement();
 				// Safari won't send focus to the clicked element, so we need to manually place it: https://bugs.webkit.org/show_bug.cgi?id=22261
-				if ( window.document.activeElement !== ref ) ref.focus();
+				if ( window.document.activeElement !== ref ) {
+					ref.focus();
+				}
 				const { menuOpenedBy } = state;
 				if ( menuOpenedBy.click || menuOpenedBy.focus ) {
 					actions.closeMenu( 'click' );