@wordpress/block-library 9.10.0 → 9.12.0

package/src/query/edit/inspector-controls/index.js

@@ -45,7 +45,7 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, isTemplate } = props;
+	const { attributes, setQuery, setDisplayLayout, isSingular } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -118,7 +118,7 @@ export default function QueryInspectorControls( props ) {
 	}, [ querySearch, onChangeDebounced ] );
 
 	const showInheritControl =
-		isTemplate && isControlAllowed( allowedControls, 'inherit' );
+		! isSingular && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
 	const postTypeControlLabel = __( 'Post type' );

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

@@ -4,7 +4,6 @@
 import { useState, useMemo } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { Modal, SearchControl } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
 import {
 	BlockContextProvider,
 	store as blockEditorStore,
@@ -55,7 +54,6 @@ export default function PatternSelectionModal( {
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
-	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	return (
 		<Modal
@@ -77,7 +75,6 @@ export default function PatternSelectionModal( {
 				<BlockContextProvider value={ blockPreviewContext }>
 					<BlockPatternsList
 						blockPatterns={ filteredBlockPatterns }
-						shownPatterns={ shownBlockPatterns }
 						onClickPattern={ onBlockPatternSelect }
 					/>
 				</BlockContextProvider>

package/src/query/edit/query-content.js

@@ -22,6 +22,7 @@ import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
+import { getQueryContextFromTemplate } from '../utils';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -42,7 +43,8 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
-	const { postType } = context;
+	const { templateSlug } = context;
+	const { isSingular } = getQueryContextFromTemplate( templateSlug );
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -50,16 +52,6 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
-	const isTemplate = useSelect(
-		( select ) => {
-			const currentTemplate =
-				select( coreStore ).__experimentalGetTemplateForLink()?.type;
-			const isInTemplate = 'wp_template' === currentTemplate;
-			const isInSingularContent = postType !== undefined;
-			return isInTemplate && ! isInSingularContent;
-		},
-		[ postType ]
-	);
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
@@ -106,9 +98,9 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
-		// We need to reset the `inherit` value if not in a template, as queries
-		// are not inherited when outside a template (e.g. when in singular content).
-		if ( ! isTemplate && query.inherit ) {
+		// We need to reset the `inherit` value if in a singular template, as queries
+		// are not inherited when in singular content (e.g. post, page, 404, blank).
+		if ( isSingular && query.inherit ) {
 			newQuery.inherit = false;
 		}
 		if ( !! Object.keys( newQuery ).length ) {
@@ -117,10 +109,10 @@ export default function QueryContent( {
 		}
 	}, [
 		query.perPage,
+		query.inherit,
 		postsPerPage,
 		inherit,
-		isTemplate,
-		query.inherit,
+		isSingular,
 		__unstableMarkNextChangeAsNotPersistent,
 		updateQuery,
 	] );
@@ -167,7 +159,7 @@ export default function QueryContent( {
 					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
-					isTemplate={ isTemplate }
+					isSingular={ isSingular }
 				/>
 			</InspectorControls>
 			<BlockControls>

package/src/query/test/utils.js

@@ -2,7 +2,11 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo, getValueFromObjectPath } from '../utils';
+import {
+	getEntitiesInfo,
+	getValueFromObjectPath,
+	getQueryContextFromTemplate,
+} from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -61,4 +65,58 @@ describe( 'Query block utils', () => {
 			expect( result ).toBe( 'test' );
 		} );
 	} );
+
+	describe( 'getQueryContextFromTemplate', () => {
+		it( 'should return the correct query context based on template slug', () => {
+			expect( getQueryContextFromTemplate() ).toStrictEqual( {
+				isSingular: true,
+			} );
+			expect( getQueryContextFromTemplate( '404' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: '404',
+			} );
+			expect( getQueryContextFromTemplate( 'blank' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'blank',
+			} );
+			expect( getQueryContextFromTemplate( 'single' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'single-film' )
+			).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect( getQueryContextFromTemplate( 'page' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'page',
+			} );
+			expect( getQueryContextFromTemplate( 'wp' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'custom',
+			} );
+			expect( getQueryContextFromTemplate( 'category' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'category-dog' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect( getQueryContextFromTemplate( 'archive' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'archive-film' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+		} );
+	} );
 } );

package/src/query/utils.js

@@ -435,3 +435,32 @@ export const useUnsupportedBlocks = ( clientId ) => {
 		[ clientId ]
 	);
 };
+
+/**
+ * Helper function that returns the query context from the editor based on the
+ * available template slug.
+ *
+ * @param {string} templateSlug Current template slug based on context.
+ * @return {Object} An object with isSingular and templateType properties.
+ */
+export function getQueryContextFromTemplate( templateSlug ) {
+	// In the Post Editor, the template slug is not available.
+	if ( ! templateSlug ) {
+		return { isSingular: true };
+	}
+	let isSingular = false;
+	let templateType = templateSlug === 'wp' ? 'custom' : templateSlug;
+	const singularTemplates = [ '404', 'blank', 'single', 'page', 'custom' ];
+	const templateTypeFromSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-', 1 )[ 0 ]
+		: templateSlug;
+	const queryFromTemplateSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-' ).slice( 1 ).join( '-' )
+		: '';
+	if ( queryFromTemplateSlug ) {
+		templateType = templateTypeFromSlug;
+	}
+	isSingular = singularTemplates.includes( templateType );
+
+	return { isSingular, templateType };
+}

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

@@ -31,8 +31,8 @@ function render_block_core_search( $attributes ) {
 
 	$input_id            = wp_unique_id( 'wp-block-search__input-' );
 	$classnames          = classnames_for_block_core_search( $attributes );
-	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
-	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+	$show_label          = ! empty( $attributes['showLabel'] );
+	$use_icon_button     = ! empty( $attributes['buttonUseIcon'] );
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
 	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();

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

@@ -21,7 +21,6 @@ import {
 	MenuItem,
 	ToolbarButton,
 } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
@@ -85,7 +84,6 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 		isEntityAvailable &&
 		!! blockPatterns.length &&
 		( area === 'header' || area === 'footer' );
-	const shownTemplates = useAsyncList( blockPatterns );
 
 	if ( ! canReplace ) {
 		return null;
@@ -96,9 +94,8 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 			<BlockPatternsList
 				label={ __( 'Templates' ) }
 				blockPatterns={ blockPatterns }
-				shownPatterns={ shownTemplates }
 				onClickPattern={ onSelect }
-				showTitle={ false }
+				showTitlesAsTooltip
 			/>
 		</PanelBody>
 	);
@@ -214,7 +211,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

@@ -5,7 +5,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
 	SearchControl,
@@ -43,7 +42,6 @@ export default function TemplatePartSelectionModal( {
 
 		return searchPatterns( partsAsPatterns, searchValue );
 	}, [ templateParts, searchValue ] );
-	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
@@ -89,7 +87,6 @@ export default function TemplatePartSelectionModal( {
 					<h2>{ __( 'Existing template parts' ) }</h2>
 					<BlockPatternsList
 						blockPatterns={ filteredTemplateParts }
-						shownPatterns={ shownTemplateParts }
 						onClickPattern={ ( pattern ) => {
 							onTemplatePartSelect( pattern.templatePart );
 						} }

package/src/video/edit.js

@@ -141,7 +141,7 @@ function VideoEdit( {
 				icon={ icon }
 				label={ __( 'Video' ) }
 				instructions={ __(
-					'Upload a video file, pick one from your media library, or add one with a URL.'
+					'Drag and drop a video, upload, or choose from your library.'
 				) }
 			>
 				{ content }

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

@@ -12,7 +12,7 @@ exports[`Video block transforms to Columns block 1`] = `
 
 exports[`Video block transforms to Cover block 1`] = `
 "<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","dimRatio":50,"backgroundType":"video"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cloudup video</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"

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
 						) }
 					>
@@ -204,8 +204,6 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<ToolbarGroup>
 					<ToolbarButton
-						label={ __( 'Text tracks' ) }
-						showTooltip
 						aria-expanded={ isOpen }
 						aria-haspopup="true"
 						onClick={ onToggle }