@wordpress/block-library 8.10.0 → 8.12.0

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

@@ -107,7 +107,6 @@ export default function QueryContent( {
 					clientId={ clientId }
 					attributes={ attributes }
 					setQuery={ updateQuery }
-					setDisplayLayout={ updateDisplayLayout }
 					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>

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

@@ -10,7 +10,7 @@ import {
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
-import { settings, list, grid } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -18,9 +18,8 @@ import { settings, list, grid } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query, displayLayout },
+	attributes: { query },
 	setQuery,
-	setDisplayLayout,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -30,24 +29,7 @@ export default function QueryToolbar( {
 		QueryToolbar,
 		'blocks-query-pagination-max-page-input'
 	);
-	const displayLayoutControls = [
-		{
-			icon: list,
-			title: __( 'List view' ),
-			onClick: () => setDisplayLayout( { type: 'list' } ),
-			isActive: displayLayout?.type === 'list',
-		},
-		{
-			icon: grid,
-			title: __( 'Grid view' ),
-			onClick: () =>
-				setDisplayLayout( {
-					type: 'flex',
-					columns: displayLayout?.columns || 3,
-				} ),
-			isActive: displayLayout?.type === 'flex',
-		},
-	];
+
 	return (
 		<>
 			{ ! query.inherit && (
@@ -144,7 +126,6 @@ export default function QueryToolbar( {
 					</ToolbarButton>
 				</ToolbarGroup>
 			) }
-			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);
 }

package/src/query-no-results/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-no-results",
 	"title": "No results",
 	"category": "theme",

package/src/query-pagination/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination",
 	"title": "Pagination",
 	"category": "theme",
@@ -11,11 +11,16 @@
 		"paginationArrow": {
 			"type": "string",
 			"default": "none"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"usesContext": [ "queryId", "query" ],
 	"providesContext": {
-		"paginationArrow": "paginationArrow"
+		"paginationArrow": "paginationArrow",
+		"showLabel": "showLabel"
 	},
 	"supports": {
 		"anchor": true,

package/src/query-pagination/edit.js

@@ -10,11 +10,13 @@ import {
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 import { PanelBody } from '@wordpress/components';
+import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
+import { QueryPaginationLabelControl } from './query-pagination-label-control';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -28,7 +30,7 @@ const ALLOWED_BLOCKS = [
 ];
 
 export default function QueryPaginationEdit( {
-	attributes: { paginationArrow },
+	attributes: { paginationArrow, showLabel },
 	setAttributes,
 	clientId,
 } ) {
@@ -36,7 +38,7 @@ export default function QueryPaginationEdit( {
 		const { getBlocks } = select( blockEditorStore );
 		const innerBlocks = getBlocks( clientId );
 		/**
-		 * Show the `paginationArrow` control only if a
+		 * Show the `paginationArrow` and `showLabel` controls only if a
 		 * `QueryPaginationNext/Previous` block exists.
 		 */
 		return innerBlocks?.find( ( innerBlock ) => {
@@ -51,6 +53,12 @@ export default function QueryPaginationEdit( {
 		template: TEMPLATE,
 		allowedBlocks: ALLOWED_BLOCKS,
 	} );
+	// Always show label text if paginationArrow is set to 'none'.
+	useEffect( () => {
+		if ( paginationArrow === 'none' && ! showLabel ) {
+			setAttributes( { showLabel: true } );
+		}
+	}, [ paginationArrow, setAttributes, showLabel ] );
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
@@ -62,6 +70,14 @@ export default function QueryPaginationEdit( {
 								setAttributes( { paginationArrow: value } );
 							} }
 						/>
+						{ paginationArrow !== 'none' && (
+							<QueryPaginationLabelControl
+								value={ showLabel }
+								onChange={ ( value ) => {
+									setAttributes( { showLabel: value } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				</InspectorControls>
 			) }

package/src/query-pagination/query-pagination-label-control.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToggleControl } from '@wordpress/components';
+
+export function QueryPaginationLabelControl( { value, onChange } ) {
+	return (
+		<ToggleControl
+			__nextHasNoMarginBottom
+			label={ __( 'Show label text' ) }
+			help={ __(
+				'Toggle off to hide the label text, e.g. "Next Page".'
+			) }
+			onChange={ onChange }
+			checked={ value === true }
+		/>
+	);
+}

package/src/query-pagination-next/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",
 	"category": "theme",
@@ -12,7 +12,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
 		"anchor": true,
 		"reusable": false,

package/src/query-pagination-next/edit.js

@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationNextEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -22,16 +22,18 @@ export default function QueryPaginationNextEdit( {
 			onClick={ ( event ) => event.preventDefault() }
 			{ ...useBlockProps() }
 		>
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Next page link' ) }
-				placeholder={ __( 'Next Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Next page link' ) }
+					placeholder={ __( 'Next Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 			{ displayArrow && (
 				<span
 					className={ `wp-block-query-pagination-next-arrow is-arrow-${ paginationArrow }` }

package/src/query-pagination-next/index.php

@@ -20,10 +20,15 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, true );
 
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
@@ -31,7 +36,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 		add_filter( 'next_posts_link_attributes', $filter_link_attributes );

package/src/query-pagination-numbers/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",
 	"category": "theme",

package/src/query-pagination-previous/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",
 	"category": "theme",
@@ -12,7 +12,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query", "paginationArrow" ],
+	"usesContext": [ "queryId", "query", "paginationArrow", "showLabel" ],
 	"supports": {
 		"anchor": true,
 		"reusable": false,

package/src/query-pagination-previous/edit.js

@@ -13,7 +13,7 @@ const arrowMap = {
 export default function QueryPaginationPreviousEdit( {
 	attributes: { label },
 	setAttributes,
-	context: { paginationArrow },
+	context: { paginationArrow, showLabel },
 } ) {
 	const displayArrow = arrowMap[ paginationArrow ];
 	return (
@@ -30,16 +30,18 @@ export default function QueryPaginationPreviousEdit( {
 					{ displayArrow }
 				</span>
 			) }
-			<PlainText
-				__experimentalVersion={ 2 }
-				tagName="span"
-				aria-label={ __( 'Previous page link' ) }
-				placeholder={ __( 'Previous Page' ) }
-				value={ label }
-				onChange={ ( newLabel ) =>
-					setAttributes( { label: newLabel } )
-				}
-			/>
+			{ showLabel && (
+				<PlainText
+					__experimentalVersion={ 2 }
+					tagName="span"
+					aria-label={ __( 'Previous page link' ) }
+					placeholder={ __( 'Previous Page' ) }
+					value={ label }
+					onChange={ ( newLabel ) =>
+						setAttributes( { label: newLabel } )
+					}
+				/>
+			) }
 		</a>
 	);
 }

package/src/query-pagination-previous/index.php

@@ -19,9 +19,14 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
 
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
 	$default_label      = __( 'Previous Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label              = $show_label ? $label_text : '';
 	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	if ( ! $label ) {
+		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
+	}
 	if ( $pagination_arrow ) {
 		$label = $pagination_arrow . $label;
 	}
@@ -29,7 +34,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 	// Check if the pagination is for Query that inherits the global context
 	// and handle appropriately.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
-		$filter_link_attributes = function() use ( $wrapper_attributes ) {
+		$filter_link_attributes = static function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 

package/src/query-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/query-title",
 	"title": "Query Title",
 	"category": "theme",

package/src/quote/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/quote",
 	"title": "Quote",
 	"category": "text",

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

@@ -28,7 +28,7 @@ exports[`Quote block transforms to Pullquote block 1`] = `
 <!-- /wp:pullquote -->"
 `;
 
-exports[`Quote block transforms unwraps content 1`] = `
+exports[`Quote block transforms ungroups block 1`] = `
 "<!-- wp:paragraph -->
 <p>"This will make running your own blog a viable alternative again."</p>
 <!-- /wp:paragraph -->

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

@@ -36,14 +36,13 @@ describe( `${ block } block transforms`, () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'unwraps content', async () => {
+	it( 'ungroups block', async () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const { getByText } = screen;
 		fireEvent.press( getBlock( screen, block ) );
 
 		await openBlockActionsMenu( screen );
-		fireEvent.press( getByText( 'Transform block…' ) );
-		fireEvent.press( getByText( 'Unwrap' ) );
+		fireEvent.press( getByText( 'Ungroup' ) );
 
 		// The first block created is the content of the Paragraph block.
 		const paragraph = getBlock( screen, 'Paragraph', 0 );
@@ -59,8 +58,7 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const transformOptions = await getBlockTransformOptions(
 			screen,
-			block,
-			{ canUnwrap: true }
+			block
 		);
 		expect( transformOptions ).toHaveLength( blockTransforms.length );
 	} );

package/src/quote/transforms.js

@@ -126,20 +126,16 @@ const transforms = {
 						: innerBlocks
 				),
 		},
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( { citation }, innerBlocks ) =>
-				citation
-					? [
-							...innerBlocks,
-							createBlock( 'core/paragraph', {
-								content: citation,
-							} ),
-					  ]
-					: innerBlocks,
-		},
 	],
+	ungroup: ( { citation }, innerBlocks ) =>
+		citation
+			? [
+					...innerBlocks,
+					createBlock( 'core/paragraph', {
+						content: citation,
+					} ),
+			  ]
+			: innerBlocks,
 };
 
 export default transforms;

package/src/read-more/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/read-more",
 	"title": "Read More",
 	"category": "theme",

package/src/rss/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/rss",
 	"title": "RSS",
 	"category": "widgets",

package/src/search/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/search",
 	"title": "Search",
 	"category": "widgets",
@@ -42,6 +42,14 @@
 		"query": {
 			"type": "object",
 			"default": {}
+		},
+		"buttonBehavior": {
+			"type": "string",
+			"default": "expand-searchfield"
+		},
+		"isSearchFieldHidden": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

package/src/search/edit.js

@@ -19,7 +19,7 @@ import {
 	useSetting,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import {
 	ToolbarDropdownMenu,
 	ToolbarGroup,
@@ -59,6 +59,8 @@ import {
 // button is placed inside wrapper.
 const DEFAULT_INNER_PADDING = '4px';
 
+const BUTTON_BEHAVIOR_EXPAND = 'expand-searchfield';
+
 export default function SearchEdit( {
 	className,
 	attributes,
@@ -77,6 +79,8 @@ export default function SearchEdit( {
 		buttonText,
 		buttonPosition,
 		buttonUseIcon,
+		buttonBehavior,
+		isSearchFieldHidden,
 		style,
 	} = attributes;
 
@@ -130,12 +134,33 @@ export default function SearchEdit( {
 	const isButtonPositionOutside = 'button-outside' === buttonPosition;
 	const hasNoButton = 'no-button' === buttonPosition;
 	const hasOnlyButton = 'button-only' === buttonPosition;
+	const searchFieldRef = useRef();
+	const buttonRef = useRef();
 
 	const units = useCustomUnits( {
 		availableUnits: [ '%', 'px' ],
 		defaultValues: { '%': PC_WIDTH_DEFAULT, px: PX_WIDTH_DEFAULT },
 	} );
 
+	useEffect( () => {
+		if ( hasOnlyButton && ! isSelected ) {
+			setAttributes( {
+				isSearchFieldHidden: true,
+			} );
+		}
+	}, [ hasOnlyButton, isSelected, setAttributes ] );
+
+	// Show the search field when width changes.
+	useEffect( () => {
+		if ( ! hasOnlyButton || ! isSelected ) {
+			return;
+		}
+
+		setAttributes( {
+			isSearchFieldHidden: false,
+		} );
+	}, [ hasOnlyButton, isSelected, setAttributes, width ] );
+
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
@@ -152,6 +177,12 @@ export default function SearchEdit( {
 				: undefined,
 			buttonUseIcon && ! hasNoButton
 				? 'wp-block-search__icon-button'
+				: undefined,
+			hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior
+				? 'wp-block-search__button-behavior-expand'
+				: undefined,
+			hasOnlyButton && isSearchFieldHidden
+				? 'wp-block-search__searchfield-hidden'
 				: undefined
 		);
 	};
@@ -165,6 +196,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-outside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -176,6 +208,7 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'button-inside',
+					isSearchFieldHidden: false,
 				} );
 			},
 		},
@@ -187,6 +220,19 @@ export default function SearchEdit( {
 			onClick: () => {
 				setAttributes( {
 					buttonPosition: 'no-button',
+					isSearchFieldHidden: false,
+				} );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Button Only' ),
+			isActive: buttonPosition === 'button-only',
+			icon: buttonOnly,
+			onClick: () => {
+				setAttributes( {
+					buttonPosition: 'button-only',
+					isSearchFieldHidden: true,
 				} );
 			},
 		},
@@ -247,6 +293,7 @@ export default function SearchEdit( {
 				onChange={ ( event ) =>
 					setAttributes( { placeholder: event.target.value } )
 				}
+				ref={ searchFieldRef }
 			/>
 		);
 	};
@@ -268,6 +315,13 @@ export default function SearchEdit( {
 				? { borderRadius }
 				: borderProps.style ),
 		};
+		const handleButtonClick = () => {
+			if ( hasOnlyButton && BUTTON_BEHAVIOR_EXPAND === buttonBehavior ) {
+				setAttributes( {
+					isSearchFieldHidden: ! isSearchFieldHidden,
+				} );
+			}
+		};
 
 		return (
 			<>
@@ -281,6 +335,8 @@ export default function SearchEdit( {
 								? stripHTML( buttonText )
 								: __( 'Search' )
 						}
+						onClick={ handleButtonClick }
+						ref={ buttonRef }
 					>
 						<Icon icon={ search } />
 					</button>
@@ -297,6 +353,7 @@ export default function SearchEdit( {
 						onChange={ ( html ) =>
 							setAttributes( { buttonText: html } )
 						}
+						onClick={ handleButtonClick }
 					/>
 				) }
 			</>
@@ -516,14 +573,15 @@ export default function SearchEdit( {
 				} }
 				showHandle={ isSelected }
 			>
-				{ ( isButtonPositionInside || isButtonPositionOutside ) && (
+				{ ( isButtonPositionInside ||
+					isButtonPositionOutside ||
+					hasOnlyButton ) && (
 					<>
 						{ renderTextField() }
 						{ renderButton() }
 					</>
 				) }
 
-				{ hasOnlyButton && renderButton() }
 				{ hasNoButton && renderTextField() }
 			</ResizableBox>
 		</div>