@wordpress/block-library 9.10.0 → 9.11.0

package/src/group/editor.scss

@@ -10,6 +10,18 @@
 	}
 }
 
+// Reset user select, but the next rule should take precedence for nested
+// groups.
+:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group > *) {
+	user-select: initial;
+}
+
+// When we are not multi-selecting, prevent children from capturing the
+// selection, which happens when the group is flex and children inlined.
+:where([data-has-multi-selection]:not([contenteditable="true"]) .wp-block-group) {
+	user-select: none;
+}
+
 // Place block list appender in the same place content will appear.
 [data-type="core/group"].is-selected {
 	.block-list-appender {

package/src/html/edit.js

@@ -7,6 +7,7 @@ import {
 	BlockControls,
 	PlainText,
 	useBlockProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
@@ -14,6 +15,7 @@ import {
 	ToolbarGroup,
 	VisuallyHidden,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
 
 /**
@@ -27,6 +29,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 
 	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
 
+	const isPreviewMode = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings().isPreviewMode;
+	}, [] );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -58,7 +64,7 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isDisabled ? (
+			{ isPreview || isPreviewMode || isDisabled ? (
 				<>
 					<Preview
 						content={ attributes.content }

package/src/html/preview.js

@@ -23,14 +23,15 @@ const DEFAULT_STYLES = `
 
 export default function HTMLEditPreview( { content, isSelected } ) {
 	const settingStyles = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().styles
+		( select ) => select( blockEditorStore ).getSettings().styles,
+		[]
 	);
 
 	const styles = useMemo(
 		() => [
 			DEFAULT_STYLES,
 			...transformStyles(
-				settingStyles.filter( ( style ) => style.css )
+				( settingStyles ?? [] ).filter( ( style ) => style.css )
 			),
 		],
 		[ settingStyles ]

package/src/image/style.scss

@@ -9,6 +9,7 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+		width: fit-content;
 
 		@media (prefers-reduced-motion: no-preference) {
 			&.hide {

package/src/latest-posts/edit.js

@@ -155,15 +155,11 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 	);
 
 	// If a user clicks to a link prevent redirection and show a warning.
-	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
-	let noticeId;
+	const { createWarningNotice } = useDispatch( noticeStore );
 	const showRedirectionPreventedNotice = ( event ) => {
 		event.preventDefault();
-		// Remove previous warning if any, to show one at a time per block.
-		removeNotice( noticeId );
-		noticeId = `block-library/core/latest-posts/redirection-prevented/${ instanceId }`;
 		createWarningNotice( __( 'Links are disabled in the editor.' ), {
-			id: noticeId,
+			id: `block-library/core/latest-posts/redirection-prevented/${ instanceId }`,
 			type: 'snackbar',
 		} );
 	};
@@ -593,7 +589,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							{ displayAuthor && currentAuthor && (
 								<div className="wp-block-latest-posts__post-author">
 									{ sprintf(
-										/* translators: byline. %s: current author. */
+										/* translators: byline. %s: author. */
 										__( 'by %s' ),
 										currentAuthor.name
 									) }

package/src/latest-posts/index.php

@@ -123,7 +123,7 @@ function render_block_core_latest_posts( $attributes ) {
 		if ( isset( $attributes['displayAuthor'] ) && $attributes['displayAuthor'] ) {
 			$author_display_name = get_the_author_meta( 'display_name', $post->post_author );
 
-			/* translators: byline. %s: current author. */
+			/* translators: byline. %s: author. */
 			$byline = sprintf( __( 'by %s' ), $author_display_name );
 
 			if ( ! empty( $author_display_name ) ) {

package/src/navigation/edit/index.js

@@ -73,6 +73,33 @@ import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
 
+function useResponsiveMenu( navRef ) {
+	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
+		useState( false );
+
+	useEffect( () => {
+		if ( ! navRef.current ) {
+			return;
+		}
+
+		const htmlElement = navRef.current.ownerDocument.documentElement;
+
+		// Add a `has-modal-open` class to the <html> when the responsive
+		// menu is open. This reproduces the same behavior of the frontend.
+		if ( isResponsiveMenuOpen ) {
+			htmlElement.classList.add( 'has-modal-open' );
+		} else {
+			htmlElement.classList.remove( 'has-modal-open' );
+		}
+
+		return () => {
+			htmlElement?.classList.remove( 'has-modal-open' );
+		};
+	}, [ navRef, isResponsiveMenuOpen ] );
+
+	return [ isResponsiveMenuOpen, setResponsiveMenuVisibility ];
+}
+
 function ColorTools( {
 	textColor,
 	setTextColor,
@@ -284,8 +311,10 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
+	const navRef = useRef();
+
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
-		useState( false );
+		useResponsiveMenu( navRef );
 
 	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
 
@@ -367,8 +396,6 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
-	const navRef = useRef();
-
 	// The standard HTML5 tag for the block wrapper.
 	const TagName = 'nav';
 

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

@@ -26,8 +26,8 @@ import LeafMoreMenu from './leaf-more-menu';
 import { updateAttributes } from '../../navigation-link/update-attributes';
 import { LinkUI } from '../../navigation-link/link-ui';
 
-/* translators: %s: The name of a menu. */
-const actionLabel = __( "Switch to '%s'" );
+const actionLabel =
+	/* translators: %s: The name of a menu. */ __( "Switch to '%s'" );
 const BLOCKS_WITH_LINK_UI_SUPPORT = [
 	'core/navigation-link',
 	'core/navigation-submenu',

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

@@ -21,7 +21,7 @@ import useNavigationEntities from '../use-navigation-entities';
 
 function buildMenuLabel( title, id, status ) {
 	if ( ! title ) {
-		/* translators: %s is the index of the menu in the list of menus. */
+		/* translators: %s: the index of the menu in the list of menus. */
 		return sprintf( __( '(no title %s)' ), id );
 	}
 
@@ -30,7 +30,7 @@ function buildMenuLabel( title, id, status ) {
 	}
 
 	return sprintf(
-		// translators: %1s: title of the menu; %2s: status of the menu (draft, pending, etc.).
+		// translators: 1: title of the menu. 2: status of the menu (draft, pending, etc.).
 		__( '%1$s (%2$s)' ),
 		decodeEntities( title ),
 		status

package/src/navigation/editor.scss

@@ -203,6 +203,7 @@ $color-control-label-height: 20px;
 .wp-block-navigation .wp-block + .block-list-appender .block-editor-button-block-appender {
 	background-color: $gray-900;
 	color: $white;
+	height: $button-size-small;
 
 	// This needs specificity to override an inherited padding.
 	// That source padding in turn has high specificity to protect

package/src/paragraph/edit.js

@@ -66,7 +66,7 @@ function DropCapControl( { clientId, attributes, setAttributes } ) {
 	} else if ( dropCap ) {
 		helpText = __( 'Showing large initial letter.' );
 	} else {
-		helpText = __( 'Toggle to show a large initial letter.' );
+		helpText = __( 'Show a large initial letter.' );
 	}
 
 	return (

package/src/post-featured-image/edit.js

@@ -207,7 +207,7 @@ export default function PostFeaturedImageEdit( {
 						label={
 							postType?.labels.singular_name
 								? sprintf(
-										// translators: %s: Name of the post type e.g: "Page".
+										// translators: %s: Name of the post type e.g: "post".
 										__( 'Link to %s' ),
 										postType.labels.singular_name
 								  )

package/src/post-time-to-read/edit.js

@@ -71,8 +71,8 @@ function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
 		);
 
 		return sprintf(
-			/* translators: %d is the number of minutes the post will take to read. */
-			_n( '%d minute', '%d minutes', minutesToRead ),
+			/* translators: %s: the number of minutes to read the post. */
+			_n( '%s minute', '%s minutes', minutesToRead ),
 			minutesToRead
 		);
 	}, [ contentStructure, blocks ] );

package/src/post-time-to-read/index.php

@@ -32,7 +32,7 @@ function render_block_core_post_time_to_read( $attributes, $content, $block ) {
 	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
 
 	$minutes_to_read_string = sprintf(
-		/* translators: %s is the number of minutes the post will take to read. */
+		/* translators: %s: the number of minutes to read the post. */
 		_n( '%s minute', '%s minutes', $minutes_to_read ),
 		$minutes_to_read
 	);

package/src/query/edit/inspector-controls/order-control.js

@@ -14,12 +14,12 @@ const orderOptions = [
 		value: 'date/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in ascending order */
+		/* translators: Label for ordering posts by title in ascending order. */
 		label: __( 'A → Z' ),
 		value: 'title/asc',
 	},
 	{
-		/* translators: label for ordering posts by title in descending order */
+		/* translators: Label for ordering posts by title in descending order. */
 		label: __( 'Z → A' ),
 		value: 'title/desc',
 	},

package/src/query-title/edit.js

@@ -15,7 +15,7 @@ import {
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -60,7 +60,7 @@ export default function QueryTitleEdit( {
 				if ( archiveNameLabel ) {
 					title = sprintf(
 						/* translators: 1: Archive type title e.g: "Category", 2: Label of the archive e.g: "Shoes" */
-						__( '%1$s: %2$s' ),
+						_x( '%1$s: %2$s', 'archive label' ),
 						archiveTypeLabel,
 						archiveNameLabel
 					);

package/src/rss/index.php

@@ -62,7 +62,7 @@ function render_block_core_rss( $attributes ) {
 			if ( is_object( $author ) ) {
 				$author = $author->get_name();
 				$author = '<span class="wp-block-rss__item-author">' . sprintf(
-					/* translators: %s: the author. */
+					/* translators: byline. %s: author. */
 					__( 'by %s' ),
 					esc_html( strip_tags( $author ) )
 				) . '</span>';

package/src/search/edit.js

@@ -23,14 +23,14 @@ import { useEffect, useRef } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
-	Button,
-	ButtonGroup,
 	ToolbarButton,
 	ResizableBox,
 	PanelBody,
 	__experimentalVStack as VStack,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
@@ -58,6 +58,7 @@ import {
 // Used to calculate border radius adjustment to avoid "fat" corners when
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
+const PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];
 
 export default function SearchEdit( {
 	className,
@@ -375,7 +376,7 @@ export default function SearchEdit( {
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
-						title={ __( 'Toggle search label' ) }
+						title={ __( 'Show search label' ) }
 						icon={ toggleLabel }
 						onClick={ () => {
 							setAttributes( {
@@ -445,33 +446,35 @@ export default function SearchEdit( {
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>
-						<ButtonGroup
-							className="wp-block-search__components-button-group" // unused, kept for backwards compatibility
-							aria-label={ __( 'Percentage Width' ) }
+						<ToggleGroupControl
+							label={ __( 'Percentage Width' ) }
+							value={
+								PERCENTAGE_WIDTHS.includes( width ) &&
+								widthUnit === '%'
+									? width
+									: undefined
+							}
+							hideLabelFromVision
+							onChange={ ( newWidth ) => {
+								setAttributes( {
+									width: newWidth,
+									widthUnit: '%',
+								} );
+							} }
+							isBlock
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
 						>
-							{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
+							{ PERCENTAGE_WIDTHS.map( ( widthValue ) => {
 								return (
-									<Button
+									<ToggleGroupControlOption
 										key={ widthValue }
-										size="small"
-										variant={
-											widthValue === width &&
-											widthUnit === '%'
-												? 'primary'
-												: undefined
-										}
-										onClick={ () =>
-											setAttributes( {
-												width: widthValue,
-												widthUnit: '%',
-											} )
-										}
-									>
-										{ widthValue }%
-									</Button>
+										value={ widthValue }
+										label={ `${ widthValue }%` }
+									/>
 								);
 							} ) }
-						</ButtonGroup>
+						</ToggleGroupControl>
 					</VStack>
 				</PanelBody>
 			</InspectorControls>

package/src/separator/test/__snapshots__/transforms.native.js.snap

@@ -17,3 +17,9 @@ exports[`Separator block transforms to Group block 1`] = `
 <!-- /wp:separator --></div>
 <!-- /wp:group -->"
 `;
+
+exports[`Separator block transforms to Spacer block 1`] = `
+"<!-- wp:spacer -->
+<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->"
+`;

package/src/separator/test/transforms.native.js

@@ -16,7 +16,7 @@ const initialHtml = `
 <!-- /wp:separator -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
+const blockTransforms = [ 'Spacer', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 

package/src/separator/transforms.js

@@ -18,6 +18,17 @@ const transforms = {
 			},
 		},
 	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/spacer' ], // Transform to Spacer.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/spacer', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
 };
 
 export default transforms;

package/src/social-links/edit.js

@@ -86,7 +86,6 @@ export function SocialLinksEdit( props ) {
 		} else {
 			setAttributes( { ...backgroundBackupRef.current } );
 		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ logosOnly ] );
 
 	const SocialPlaceholder = (

package/src/spacer/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
+import transforms from './transforms';
 import save from './save';
 
 const { name } = metadata;
@@ -18,6 +19,7 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 	save,
 	deprecated,

package/src/spacer/test/__snapshots__/transforms.native.js.snap

@@ -17,3 +17,9 @@ exports[`Spacer block transforms to Group block 1`] = `
 <!-- /wp:spacer --></div>
 <!-- /wp:group -->"
 `;
+
+exports[`Spacer block transforms to Separator block 1`] = `
+"<!-- wp:separator -->
+<hr class="wp-block-separator has-alpha-channel-opacity"/>
+<!-- /wp:separator -->"
+`;

package/src/spacer/test/transforms.native.js

@@ -16,7 +16,7 @@ const initialHtml = `
 <!-- /wp:spacer -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...transformsWithInnerBlocks ];
+const blockTransforms = [ 'Separator', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 

package/src/spacer/transforms.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/separator' ], // Transform to Separator.
+			transform: ( { anchor } ) => {
+				return createBlock( 'core/separator', {
+					anchor: anchor || '',
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/table/edit.js

@@ -465,7 +465,6 @@ function TableEdit( {
 					</BlockControls>
 					<BlockControls group="other">
 						<ToolbarDropdownMenu
-							hasArrowIndicator
 							icon={ table }
 							label={ __( 'Edit table' ) }
 							controls={ tableControls }

package/src/table-of-contents/edit.js

@@ -58,15 +58,11 @@ export default function TableOfContentsEdit( {
 	);
 
 	// If a user clicks to a link prevent redirection and show a warning.
-	const { createWarningNotice, removeNotice } = useDispatch( noticeStore );
-	let noticeId;
+	const { createWarningNotice } = useDispatch( noticeStore );
 	const showRedirectionPreventedNotice = ( event ) => {
 		event.preventDefault();
-		// Remove previous warning if any, to show one at a time per block.
-		removeNotice( noticeId );
-		noticeId = `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`;
 		createWarningNotice( __( 'Links are disabled in the editor.' ), {
-			id: noticeId,
+			id: `block-library/core/table-of-contents/redirection-prevented/${ instanceId }`,
 			type: 'snackbar',
 		} );
 	};

package/src/template-part/edit/index.js

@@ -214,7 +214,7 @@ export default function TemplatePartEdit( {
 			<TagName { ...blockProps }>
 				<Warning>
 					{ sprintf(
-						/* translators: %s: Template part slug */
+						/* translators: %s: Template part slug. */
 						__(
 							'Template part has been deleted or is unavailable: %s'
 						),

package/src/video/tracks-editor.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import {
 	NavigableMenu,
 	MenuItem,
@@ -63,7 +63,7 @@ function TrackList( { tracks, onEditPress } ) {
 						onClick={ () => onEditPress( index ) }
 						aria-label={ sprintf(
 							/* translators: %s: Label of the video text track e.g: "French subtitles" */
-							__( 'Edit %s' ),
+							_x( 'Edit %s', 'text tracks' ),
 							track.label
 						) }
 					>