@wordpress/block-library 5.0.1 → 6.0.1

package/src/latest-comments/edit.js

@@ -75,6 +75,10 @@ export default function LatestComments( { attributes, setAttributes } ) {
 				<ServerSideRender
 					block="core/latest-comments"
 					attributes={ attributes }
+					// The preview uses the site's locale to make it more true to how
+					// the block appears on the frontend. Setting the locale
+					// explicitly prevents any middleware from setting it to 'user'.
+					urlQueryArgs={ { _locale: 'site' } }
 				/>
 			</Disabled>
 		</div>

package/src/latest-comments/index.php

@@ -49,7 +49,8 @@ function render_block_core_latest_comments( $attributes = array() ) {
 				'number'      => $attributes['commentsToShow'],
 				'status'      => 'approve',
 				'post_status' => 'publish',
-			)
+			),
+			array()
 		)
 	);
 

package/src/latest-posts/edit.native.js

@@ -9,8 +9,7 @@ import { isEmpty } from 'lodash';
  */
 import { Component } from '@wordpress/element';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
-import { withDispatch } from '@wordpress/data';
-import { coreBlocks } from '@wordpress/block-library';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -22,6 +21,7 @@ import {
 	RangeControl,
 	QueryControls,
 } from '@wordpress/components';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -189,14 +189,12 @@ class LatestPostsEdit extends Component {
 
 	render() {
 		const {
+			blockTitle,
 			getStylesFromColorScheme,
-			name,
 			openGeneralSidebar,
 			isSelected,
 		} = this.props;
 
-		const blockType = coreBlocks[ name ];
-
 		const blockStyle = getStylesFromColorScheme(
 			styles.latestPostBlock,
 			styles.latestPostBlockDark
@@ -221,9 +219,7 @@ class LatestPostsEdit extends Component {
 				<View style={ blockStyle }>
 					{ isSelected && this.getInspectorControls() }
 					<Icon icon={ icon } { ...iconStyle } />
-					<Text style={ titleStyle }>
-						{ blockType.settings.title }
-					</Text>
+					<Text style={ titleStyle }>{ blockTitle }</Text>
 					<Text style={ styles.latestPostBlockSubtitle }>
 						{ __( 'CUSTOMIZE' ) }
 					</Text>
@@ -234,6 +230,12 @@ class LatestPostsEdit extends Component {
 }
 
 export default compose( [
+	withSelect( ( select, { name } ) => {
+		const blockType = select( blocksStore ).getBlockType( name );
+		return {
+			blockTitle: blockType?.title || name,
+		};
+	} ),
 	withDispatch( ( dispatch ) => {
 		const { openGeneralSidebar } = dispatch( 'core/edit-post' );
 

package/src/list/style.scss

@@ -1,4 +1,9 @@
-ol.has-background,
-ul.has-background {
-	padding: $block-bg-padding--v $block-bg-padding--h;
+ol,
+ul {
+	// Break long strings of text without spaces so they don't overflow the block.
+	overflow-wrap: break-word;
+
+	&.has-background {
+		padding: $block-bg-padding--v $block-bg-padding--h;
+	}
 }

package/src/media-text/edit.js

@@ -199,7 +199,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const imageSizes = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		return settings?.imageSizes;
-	} );
+	}, [] );
 	const imageSizeOptions = map(
 		filter( imageSizes, ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )

package/src/media-text/index.js

@@ -20,6 +20,7 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		viewportWidth: 601, // Columns collapse "@media (max-width: 600px)".
 		attributes: {
 			mediaType: 'image',
 			mediaUrl:

package/src/navigation/block-navigation-list.js

@@ -6,6 +6,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { useRef, useEffect, useState } from '@wordpress/element';
 
 export default function BlockNavigationList( {
 	clientId,
@@ -17,13 +18,21 @@ export default function BlockNavigationList( {
 		[ clientId ]
 	);
 
+	const listViewRef = useRef();
+	const [ minHeight, setMinHeight ] = useState( 300 );
+	useEffect( () => {
+		setMinHeight( listViewRef?.current?.clientHeight ?? 300 );
+	}, [] );
+
 	return (
-		<ListView
-			blocks={ blocks }
-			showAppender
-			showBlockMovers
-			showNestedBlocks
-			__experimentalFeatures={ __experimentalFeatures }
-		/>
+		<div style={ { minHeight } }>
+			<ListView
+				ref={ listViewRef }
+				blocks={ blocks }
+				showBlockMovers
+				showNestedBlocks
+				__experimentalFeatures={ __experimentalFeatures }
+			/>
+		</div>
 	);
 }

package/src/navigation/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"orientation": {
-			"type": "string"
+			"type": "string",
+			"default": "horizontal"
 		},
 		"textColor": {
 			"type": "string"
@@ -35,6 +36,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"openSubmenusOnClick":{
+			"type": "boolean",
+			"default": false
+		},
 		"isResponsive": {
 			"type": "boolean",
 			"default": false
@@ -67,6 +72,7 @@
 		"fontSize": "fontSize",
 		"customFontSize": "customFontSize",
 		"showSubmenuIcon": "showSubmenuIcon",
+		"openSubmenusOnClick": "openSubmenusOnClick",
 		"style": "style",
 		"orientation": "orientation"
 	},

package/src/navigation/edit.js

@@ -14,7 +14,6 @@ import {
 	Platform,
 } from '@wordpress/element';
 import {
-	InnerBlocks,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	InspectorControls,
 	JustifyToolbar,
@@ -46,8 +45,21 @@ const ALLOWED_BLOCKS = [
 	'core/page-list',
 	'core/spacer',
 	'core/home-link',
+	'core/site-title',
+	'core/site-logo',
+	'core/navigation-submenu',
 ];
 
+const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+
+const DIRECT_INSERT = ( block ) => {
+	return block.innerBlocks.every(
+		( { name } ) =>
+			name === 'core/navigation-link' ||
+			name === 'core/navigation-submenu'
+	);
+};
+
 const LAYOUT = {
 	type: 'default',
 	alignments: [],
@@ -98,9 +110,14 @@ function Navigation( {
 	setOverlayBackgroundColor,
 	overlayTextColor,
 	setOverlayTextColor,
+
+	// These props are used by the navigation editor to override specific
+	// navigation block settings.
 	hasSubmenuIndicatorSetting = true,
 	hasItemJustificationControls = true,
 	hasColorSettings = true,
+	customPlaceholder: CustomPlaceholder = null,
+	customAppender: CustomAppender = null,
 } ) {
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
 		! hasExistingNavItems
@@ -142,26 +159,37 @@ function Navigation( {
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
+	// 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.
+	const appender =
+		isSelected ||
+		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants )
+			? undefined
+			: false;
+
 	const innerBlocksProps = useInnerBlocksProps(
 		{
 			className: 'wp-block-navigation__container',
 		},
 		{
 			allowedBlocks: ALLOWED_BLOCKS,
-			orientation: attributes.orientation || 'horizontal',
-			renderAppender:
-				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
-				isSelected
-					? InnerBlocks.DefaultAppender
-					: false,
-			__experimentalCaptureToolbars: true,
+			__experimentalDefaultBlock: DEFAULT_BLOCK,
+			__experimentalDirectInsert: DIRECT_INSERT,
+			orientation: attributes.orientation,
+			renderAppender: CustomAppender || appender,
+
+			// Ensure block toolbar is not too far removed from item
+			// being edited when in vertical mode.
+			// see: https://github.com/WordPress/gutenberg/pull/34615.
+			__experimentalCaptureToolbars:
+				attributes.orientation !== 'vertical',
 			// Template lock set to false here so that the Nav
 			// Block on the experimental menus screen does not
 			// inherit templateLock={ 'all' }.
 			templateLock: false,
 			__experimentalLayout: LAYOUT,
-			placeholder,
+			placeholder: ! CustomPlaceholder ? placeholder : undefined,
 		}
 	);
 
@@ -198,9 +226,13 @@ function Navigation( {
 	} );
 
 	if ( isPlaceholderShown ) {
+		const PlaceholderComponent = CustomPlaceholder
+			? CustomPlaceholder
+			: NavigationPlaceholder;
+
 		return (
 			<div { ...blockProps }>
-				<NavigationPlaceholder
+				<PlaceholderComponent
 					onCreate={ ( blocks, selectNavigationBlock ) => {
 						setIsPlaceholderShown( false );
 						updateInnerBlocks( blocks );
@@ -241,23 +273,34 @@ function Navigation( {
 				{ hasSubmenuIndicatorSetting && (
 					<PanelBody title={ __( 'Display settings' ) }>
 						<ToggleControl
-							checked={ attributes.showSubmenuIcon }
+							checked={ attributes.isResponsive }
 							onChange={ ( value ) => {
 								setAttributes( {
-									showSubmenuIcon: value,
+									isResponsive: value,
 								} );
 							} }
-							label={ __( 'Show submenu indicator icons' ) }
+							label={ __( 'Enable responsive menu' ) }
 						/>
 						<ToggleControl
-							checked={ attributes.isResponsive }
+							checked={ attributes.openSubmenusOnClick }
 							onChange={ ( value ) => {
 								setAttributes( {
-									isResponsive: value,
+									openSubmenusOnClick: value,
 								} );
 							} }
-							label={ __( 'Enable responsive menu' ) }
+							label={ __( 'Open submenus on click' ) }
 						/>
+						{ ! attributes.openSubmenusOnClick && (
+							<ToggleControl
+								checked={ attributes.showSubmenuIcon }
+								onChange={ ( value ) => {
+									setAttributes( {
+										showSubmenuIcon: value,
+									} );
+								} }
+								label={ __( 'Show submenu indicator icons' ) }
+							/>
+						) }
 					</PanelBody>
 				) }
 				{ hasColorSettings && (

package/src/navigation/editor.scss

@@ -11,6 +11,13 @@
 		margin-left: 0;
 		padding-left: 0;
 	}
+
+	// Revert any left/right margins.
+	// This also makes it work with classic theme auto margins.
+	.wp-block-navigation-item.wp-block {
+		margin-left: revert;
+		margin-right: revert;
+	}
 }
 
 // This element is inline on the frontend but needs to be editable, therefore inline-block, in the editor.
@@ -18,7 +25,6 @@
 	display: inline-block;
 }
 
-
 /**
  * Submenus.
  */
@@ -31,13 +37,14 @@
 
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
-.wp-block-navigation-link {
+.wp-block-navigation-item {
 	background-color: inherit;
 }
 
 // Only show the flyout on hover if the parent menu item is selected.
-.wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
-	> .wp-block-navigation-link__container {
+.wp-block-navigation:not(.is-selected):not(.has-child-selected)
+.has-child:hover {
+	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -47,7 +54,7 @@
 .has-child {
 	&.is-selected,
 	&.has-child-selected {
-		> .wp-block-navigation-link__container {
+		> .wp-block-navigation__submenu-container {
 			display: flex;
 			opacity: 1;
 			visibility: visible;
@@ -58,7 +65,7 @@
 // Show a submenu when generally dragging (is-dragging-components-draggable) if that
 // submenu has children (has-child) and is being dragged within (is-dragging-within).
 .is-dragging-components-draggable .has-child.is-dragging-within {
-	> .wp-block-navigation-link__container {
+	> .wp-block-navigation__submenu-container {
 		opacity: 1;
 		visibility: visible;
 	}
@@ -72,7 +79,8 @@
 	flex-direction: column;
 }
 
-.is-dragging-components-draggable .wp-block-navigation-link > .wp-block-navigation__container {
+.is-dragging-components-draggable
+.wp-block-navigation-link > .wp-block-navigation__container {
 	// Set opacity to 1 to still be able to show the draggable chip.
 	opacity: 1;
 	visibility: hidden;
@@ -166,7 +174,6 @@ $color-control-label-height: 20px;
 	justify-content: flex-start;
 }
 
-
 /**
  * Setup state
  */
@@ -215,7 +222,7 @@ $color-control-label-height: 20px;
 
 	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
-	.wp-block-navigation-link.wp-block-navigation-link {
+	.wp-block-navigation-item.wp-block-navigation-item {
 		position: relative;
 		min-width: 72px;
 
@@ -236,8 +243,7 @@ $color-control-label-height: 20px;
 		}
 	}
 
-
-	.wp-block-navigation-link.wp-block-navigation-link,
+	.wp-block-navigation-item.wp-block-navigation-item,
 	.wp-block-navigation-placeholder__preview-search-icon {
 		opacity: 0.3;
 	}
@@ -250,6 +256,7 @@ $color-control-label-height: 20px;
 		width: 0;
 		overflow: hidden;
 		flex-wrap: nowrap;
+		flex: 0;
 	}
 
 	// Hide entirely when vertical.
@@ -347,7 +354,9 @@ $color-control-label-height: 20px;
 .is-vertical .wp-block-navigation-placeholder,
 .is-vertical .wp-block-navigation-placeholder__preview,
 .is-vertical .wp-block-navigation-placeholder__controls {
-	min-height: $icon-size + ($grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15) * 3;
+	min-height:
+		$icon-size +
+		( $grid-unit-20 + $grid-unit-05 + $grid-unit-15 + $grid-unit-15 ) * 3;
 }
 
 .is-vertical .wp-block-navigation-placeholder__preview,
@@ -362,7 +371,9 @@ $color-control-label-height: 20px;
 	font-family: $default-font;
 
 	.components-button.components-dropdown-menu__toggle.has-icon {
-		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) $grid-unit-15;
+		padding:
+			( $grid-unit-15 * 0.5 ) $grid-unit-05 ( $grid-unit-15 * 0.5 )
+			$grid-unit-15;
 		display: flex;
 		flex-direction: row-reverse; // This puts the chevron, which is hidden from screen readers, on the right.
 	}
@@ -374,7 +385,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-
 /**
  * Mobile menu.
  */
@@ -399,7 +409,9 @@ $color-control-label-height: 20px;
 // When not fullscreen.
 .wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
+	top:
+		$admin-bar-height-big + $header-height + $block-toolbar-height +
+		$border-width;
 
 	@include break-medium() {
 		top: $admin-bar-height + $header-height + $border-width;
@@ -416,13 +428,17 @@ $color-control-label-height: 20px;
 
 .has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
-		top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
+		top:
+			$admin-bar-height + $header-height + $block-toolbar-height +
+			$border-width;
 	}
 }
 
 .is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
 .is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
-	top: $admin-bar-height + $header-height + $block-toolbar-height + $border-width;
+	top:
+		$admin-bar-height + $header-height + $block-toolbar-height +
+		$border-width;
 }
 
 .is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
@@ -433,7 +449,9 @@ $color-control-label-height: 20px;
 .is-fullscreen-mode {
 	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
-		top: $admin-bar-height-big + $header-height + $block-toolbar-height + $border-width;
+		top:
+			$admin-bar-height-big + $header-height + $block-toolbar-height +
+			$border-width;
 
 		@include break-medium() {
 			top: $header-height + $border-width;
@@ -453,7 +471,8 @@ $color-control-label-height: 20px;
 }
 
 // The iframe makes these rules a lot simpler.
-body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-open {
+body.editor-styles-wrapper
+.wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;

package/src/navigation/index.php

@@ -218,7 +218,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! empty( $attributes['isResponsive'] ) && ! wp_script_is( 'wp-block-navigation-view' );
+	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
@@ -256,15 +256,23 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$inner_blocks_html = '';
 	$is_list_open      = false;
 	foreach ( $inner_blocks as $inner_block ) {
-		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name ) && false === $is_list_open ) {
+		if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) {
 			$is_list_open       = true;
 			$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
 		}
-		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && true === $is_list_open ) {
+		if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && 'core/site-title' !== $inner_block->name && 'core/site-logo' !== $inner_block->name && 'core/navigation-submenu' !== $inner_block->name && $is_list_open ) {
 			$is_list_open       = false;
 			$inner_blocks_html .= '</ul>';
 		}
-		$inner_blocks_html .= $inner_block->render();
+		if ( 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name ) {
+			$inner_blocks_html .= '<li class="wp-block-navigation-item">' . $inner_block->render() . '</li>';
+		} else {
+			$inner_blocks_html .= $inner_block->render();
+		}
+	}
+
+	if ( $is_list_open ) {
+		$inner_blocks_html .= '</ul>';
 	}
 
 	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';

package/src/navigation/menu-items-to-blocks.js

@@ -65,12 +65,12 @@ function mapMenuItemsToBlocks( menuItems ) {
 			...nestedMapping,
 		};
 
+		const blockType = menuItem.children?.length
+			? 'core/navigation-submenu'
+			: 'core/navigation-link';
+
 		// Create block with nested "innerBlocks".
-		const block = createBlock(
-			'core/navigation-link',
-			attributes,
-			nestedBlocks
-		);
+		const block = createBlock( blockType, attributes, nestedBlocks );
 
 		// Create mapping for menuItem -> block
 		mapping[ menuItem.id ] = block.clientId;
@@ -189,9 +189,10 @@ function createDataTree( dataset, id = 'id', relation = 'parent' ) {
 			...data,
 			children: [],
 		};
-	}
-	for ( const data of dataset ) {
 		if ( data[ relation ] ) {
+			hashTable[ data[ relation ] ] = hashTable[ data[ relation ] ] || {};
+			hashTable[ data[ relation ] ].children =
+				hashTable[ data[ relation ] ].children || [];
 			hashTable[ data[ relation ] ].children.push(
 				hashTable[ data[ id ] ]
 			);

package/src/navigation/placeholder-preview.js

@@ -6,9 +6,9 @@ import { Icon, search } from '@wordpress/icons';
 const PlaceholderPreview = () => {
 	return (
 		<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
 			<li className="wp-block-navigation-placeholder__preview-search-icon">
 				<Icon icon={ search } />
 			</li>

package/src/navigation/placeholder.js

@@ -48,7 +48,7 @@ function NavigationPlaceholder( { onCreate }, ref ) {
 		const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
 		const selectNavigationBlock = true;
 		onCreate( blocks, selectNavigationBlock );
-	} );
+	}, [ menuItems, menuItemsToBlocks, onCreate ] );
 
 	const onCreateFromMenu = () => {
 		// If we have menu items, create the block right away.