@wordpress/block-library 9.9.0 → 9.11.0

package/src/post-content/edit.js

@@ -8,19 +8,24 @@ import {
 	RecursionProvider,
 	useHasRecursion,
 	Warning,
+	__experimentalUseBlockPreview as useBlockPreview,
 } from '@wordpress/block-editor';
+import { parse } from '@wordpress/blocks';
 import {
 	useEntityProp,
 	useEntityBlockEditor,
 	store as coreStore,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
 import { useCanEditEntity } from '../utils/hooks';
 
 function ReadOnlyContent( {
+	parentLayout,
 	layoutClassNames,
 	userCanEdit,
 	postType,
@@ -33,7 +38,28 @@ function ReadOnlyContent( {
 		postId
 	);
 	const blockProps = useBlockProps( { className: layoutClassNames } );
-	return content?.protected && ! userCanEdit ? (
+	const blocks = useMemo( () => {
+		return content?.raw ? parse( content.raw ) : [];
+	}, [ content?.raw ] );
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+		props: blockProps,
+		layout: parentLayout,
+	} );
+
+	if ( userCanEdit ) {
+		/*
+		 * Rendering the block preview using the raw content blocks allows for
+		 * block support styles to be generated and applied by the editor.
+		 *
+		 * The preview using the raw blocks can only be presented to users with
+		 * edit permissions for the post to prevent potential exposure of private
+		 * block content.
+		 */
+		return <div { ...blockPreviewProps }></div>;
+	}
+
+	return content?.protected ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
 		</div>
@@ -96,6 +122,7 @@ function Content( props ) {
 		<EditableContent { ...props } />
 	) : (
 		<ReadOnlyContent
+			parentLayout={ props.parentLayout }
 			layoutClassNames={ layoutClassNames }
 			userCanEdit={ userCanEdit }
 			postType={ postType }
@@ -141,6 +168,7 @@ function RecursionError() {
 export default function PostContentEdit( {
 	context,
 	__unstableLayoutClassNames: layoutClassNames,
+	__unstableParentLayout: parentLayout,
 } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -154,6 +182,7 @@ export default function PostContentEdit( {
 			{ contextPostId && contextPostType ? (
 				<Content
 					context={ context }
+					parentLayout={ parentLayout }
 					layoutClassNames={ layoutClassNames }
 				/>
 			) : (

package/src/post-content/style.scss

@@ -1,5 +1,3 @@
-.wp-block-post-content::after {
-	content: "";
-	display: table;
-	clear: both;
+.wp-block-post-content {
+	display: flow-root;
 }

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-terms/index.php

@@ -24,11 +24,6 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$post_terms = get_the_terms( $block->context['postId'], $attributes['term'] );
-	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
-		return '';
-	}
-
 	$classes = array( 'taxonomy-' . $attributes['term'] );
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes[] = 'has-text-align-' . $attributes['textAlign'];
@@ -51,13 +46,19 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
 		$suffix = '<span class="wp-block-post-terms__suffix">' . $attributes['suffix'] . '</span>' . $suffix;
 	}
 
-	return get_the_term_list(
+	$post_terms = get_the_term_list(
 		$block->context['postId'],
 		$attributes['term'],
 		wp_kses_post( $prefix ),
 		'<span class="wp-block-post-terms__separator">' . esc_html( $separator ) . '</span>',
 		wp_kses_post( $suffix )
 	);
+
+	if ( is_wp_error( $post_terms ) || empty( $post_terms ) ) {
+		return '';
+	}
+
+	return $post_terms;
 }
 
 /**

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/index.js

@@ -62,7 +62,7 @@ export default function QueryInspectorControls( props ) {
 		format,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
-	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
+	const showSticky = postType === 'post';
 	const {
 		postTypesTaxonomiesMap,
 		postTypesSelectOptions,
@@ -70,9 +70,6 @@ export default function QueryInspectorControls( props ) {
 	} = usePostTypes();
 	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
-	useEffect( () => {
-		setShowSticky( postType === 'post' );
-	}, [ postType ] );
 	const onPostTypeChange = ( newValue ) => {
 		const updateQuery = { postType: newValue };
 		// We need to dynamically update the `taxQuery` property,
@@ -123,21 +120,18 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl =
 		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
-		! isTemplate;
+		! inherit && isControlAllowed( allowedControls, 'postType' );
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
-		! isTemplate;
+		! inherit && isControlAllowed( allowedControls, 'order' );
 	const showStickyControl =
-		( ! inherit &&
-			showSticky &&
-			isControlAllowed( allowedControls, 'sticky' ) ) ||
-		( showSticky && ! isTemplate );
+		! inherit &&
+		showSticky &&
+		isControlAllowed( allowedControls, 'sticky' );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
@@ -211,7 +205,7 @@ export default function QueryInspectorControls( props ) {
 							label={ __( 'Query type' ) }
 							isBlock
 							onChange={ ( value ) => {
-								setQuery( { inherit: !! value } );
+								setQuery( { inherit: value === 'default' } );
 							} }
 							help={
 								inherit
@@ -222,14 +216,14 @@ export default function QueryInspectorControls( props ) {
 											'Display a list of posts or custom post types based on specific criteria.'
 									  )
 							}
-							value={ !! inherit }
+							value={ !! inherit ? 'default' : 'custom' }
 						>
 							<ToggleGroupControlOption
-								value
+								value="default"
 								label={ __( 'Default' ) }
 							/>
 							<ToggleGroupControlOption
-								value={ false }
+								value="custom"
 								label={ __( 'Custom' ) }
 							/>
 						</ToggleGroupControl>

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/edit/pattern-selection-modal.js

@@ -70,7 +70,7 @@ export default function PatternSelectionModal( {
 						__nextHasNoMarginBottom
 						onChange={ setSearchValue }
 						value={ searchValue }
-						label={ __( 'Search for patterns' ) }
+						label={ __( 'Search' ) }
 						placeholder={ __( 'Search' ) }
 					/>
 				</div>

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/template-part/edit/selection-modal.js

@@ -80,7 +80,7 @@ export default function TemplatePartSelectionModal( {
 					__nextHasNoMarginBottom
 					onChange={ setSearchValue }
 					value={ searchValue }
-					label={ __( 'Search for replacements' ) }
+					label={ __( 'Search' ) }
 					placeholder={ __( 'Search' ) }
 				/>
 			</div>

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
 						) }
 					>