@wordpress/block-library 9.22.0 → 9.24.0

package/src/post-comments-form/style.scss

@@ -82,9 +82,4 @@
 			margin-left: 0.5em;
 		}
 	}
-
-	// Override the 100% width derived from the Button block
-	input[type="submit"] {
-		width: auto;
-	}
 }

package/src/post-excerpt/block.json

@@ -11,7 +11,8 @@
 			"type": "string"
 		},
 		"moreText": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showMoreOnNewLine": {
 			"type": "boolean",

package/src/post-excerpt/edit.js

@@ -15,6 +15,7 @@ import {
 	RichText,
 	Warning,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -41,6 +42,8 @@ export default function PostExcerptEditor( {
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -220,14 +223,16 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

package/src/post-navigation-link/block.json

@@ -15,7 +15,8 @@
 			"default": "next"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showTitle": {
 			"type": "boolean",

package/src/post-navigation-link/edit.js

@@ -19,6 +19,7 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -37,6 +38,8 @@ export default function PostNavigationLinkEdit( {
 	},
 	setAttributes,
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
@@ -176,14 +179,16 @@ export default function PostNavigationLinkEdit( {
 					) }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<div { ...blockProps }>
 				{ ! isNext && displayArrow && (
 					<span

package/src/post-navigation-link/variations.js

@@ -6,34 +6,34 @@ import { next, previous } from '@wordpress/icons';
 
 const variations = [
 	{
-		isDefault: true,
-		name: 'post-next',
-		title: __( 'Next Post' ),
+		name: 'post-previous',
+		title: __( 'Previous Post' ),
 		description: __(
-			'Displays the post link that follows the current post.'
+			'Displays the post link that precedes the current post.'
 		),
-		icon: next,
-		attributes: { type: 'next' },
+		icon: previous,
+		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Next post' ),
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},
 	},
 	{
-		name: 'post-previous',
-		title: __( 'Previous Post' ),
+		isDefault: true,
+		name: 'post-next',
+		title: __( 'Next Post' ),
 		description: __(
-			'Displays the post link that precedes the current post.'
+			'Displays the post link that follows the current post.'
 		),
-		icon: previous,
-		attributes: { type: 'previous' },
+		icon: next,
+		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Previous post' ),
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},

package/src/post-template/edit.js

@@ -181,14 +181,15 @@ export default function PostTemplateEdit( {
 			 * Handle cases where sticky is set to `exclude` or `only`.
 			 * Which works as a `post__in/post__not_in` query for sticky posts.
 			 */
-			if ( sticky && sticky !== 'ignore' ) {
+			if ( [ 'exclude', 'only' ].includes( sticky ) ) {
 				query.sticky = sticky === 'only';
 			}
 
-			if ( sticky === 'ignore' ) {
+			// Empty string represents the default behavior of including sticky posts.
+			if ( [ '', 'ignore' ].includes( sticky ) ) {
 				// Remove any leftover sticky query parameter.
 				delete query.sticky;
-				query.ignore_sticky = true;
+				query.ignore_sticky = sticky === 'ignore';
 			}
 
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.

package/src/post-terms/block.json

@@ -19,11 +19,13 @@
 		},
 		"prefix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"suffix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,6 +13,7 @@ import {
 	useBlockProps,
 	useBlockDisplayInformation,
 	RichText,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -46,6 +47,8 @@ export default function PostTermsEdit( {
 } ) {
 	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 
 	const selectedTerm = useSelect(
 		( select ) => {
@@ -73,14 +76,16 @@ export default function PostTermsEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize

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

@@ -29,3 +29,9 @@ exports[`Preformatted block transforms to Paragraph block 1`] = `
 <p>Some <em>preformatted</em> text...<br />And more!</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Preformatted block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:verse -->"
+`;

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

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

package/src/preformatted/transforms.js

@@ -7,7 +7,7 @@ const transforms = {
 	from: [
 		{
 			type: 'block',
-			blocks: [ 'core/code', 'core/paragraph' ],
+			blocks: [ 'core/code', 'core/paragraph', 'core/verse' ],
 			transform: ( { content, anchor } ) =>
 				createBlock( 'core/preformatted', {
 					content,
@@ -41,6 +41,12 @@ const transforms = {
 			blocks: [ 'core/code' ],
 			transform: ( attributes ) => createBlock( 'core/code', attributes ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/verse' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/verse', attributes ),
+		},
 	],
 };
 

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

@@ -10,8 +10,8 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 	useInnerBlocksProps,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -19,11 +19,13 @@ import { store as coreStore } from '@wordpress/core-data';
  * Internal dependencies
  */
 import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
+import { unlock } from '../../lock-unlock';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
 import QueryToolbar from './query-toolbar';
-import { htmlElementMessages } from '../../utils/messages';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -147,21 +149,18 @@ export default function QueryContent( {
 				<QueryToolbar attributes={ attributes } clientId={ clientId } />
 			</BlockControls>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },
 						{ label: '<main>', value: 'main' },
 						{ label: '<section>', value: 'section' },
 						{ label: '<aside>', value: 'aside' },
 					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
 				/>
 				<EnhancedPaginationControl
 					enhancedPagination={ enhancedPagination }

package/src/read-more/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",

package/src/rss/block.json

@@ -18,7 +18,8 @@
 		},
 		"feedURL": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"itemsToShow": {
 			"type": "number",

package/src/search/edit.js

@@ -8,7 +8,6 @@ import clsx from 'clsx';
  */
 import {
 	useBlockProps,
-	BlockControls,
 	InspectorControls,
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
@@ -21,9 +20,8 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
-	ToolbarDropdownMenu,
-	ToolbarGroup,
-	ToolbarButton,
+	SelectControl,
+	ToggleControl,
 	ResizableBox,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -41,14 +39,6 @@ import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 /**
  * Internal dependencies
  */
-import {
-	buttonOnly,
-	buttonOutside,
-	buttonInside,
-	noButton,
-	buttonWithIcon,
-	toggleLabel,
-} from './icons';
 import {
 	PC_WIDTH_DEFAULT,
 	PX_WIDTH_DEFAULT,
@@ -201,68 +191,23 @@ export default function SearchEdit( {
 
 	const buttonPositionControls = [
 		{
-			role: 'menuitemradio',
-			title: __( 'Button outside' ),
-			isActive: buttonPosition === 'button-outside',
-			icon: buttonOutside,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-outside',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'Button outside' ),
+			value: 'button-outside',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'Button inside' ),
-			isActive: buttonPosition === 'button-inside',
-			icon: buttonInside,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-inside',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'Button inside' ),
+			value: 'button-inside',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'No button' ),
-			isActive: buttonPosition === 'no-button',
-			icon: noButton,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'no-button',
-					isSearchFieldHidden: false,
-				} );
-			},
+			label: __( 'No button' ),
+			value: 'no-button',
 		},
 		{
-			role: 'menuitemradio',
-			title: __( 'Button only' ),
-			isActive: buttonPosition === 'button-only',
-			icon: buttonOnly,
-			onClick: () => {
-				setAttributes( {
-					buttonPosition: 'button-only',
-					isSearchFieldHidden: true,
-				} );
-			},
+			label: __( 'Button only' ),
+			value: 'button-only',
 		},
 	];
 
-	const getButtonPositionIcon = () => {
-		switch ( buttonPosition ) {
-			case 'button-inside':
-				return buttonInside;
-			case 'button-outside':
-				return buttonOutside;
-			case 'no-button':
-				return noButton;
-			case 'button-only':
-				return buttonOnly;
-		}
-	};
-
 	const getResizableSides = () => {
 		if ( hasOnlyButton ) {
 			return {};
@@ -376,40 +321,6 @@ export default function SearchEdit( {
 
 	const controls = (
 		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarButton
-						title={ __( 'Show search label' ) }
-						icon={ toggleLabel }
-						onClick={ () => {
-							setAttributes( {
-								showLabel: ! showLabel,
-							} );
-						} }
-						className={ showLabel ? 'is-pressed' : undefined }
-					/>
-					<ToolbarDropdownMenu
-						icon={ getButtonPositionIcon() }
-						label={ __( 'Change button position' ) }
-						controls={ buttonPositionControls }
-					/>
-					{ ! hasNoButton && (
-						<ToolbarButton
-							title={ __( 'Use button with icon' ) }
-							icon={ buttonWithIcon }
-							onClick={ () => {
-								setAttributes( {
-									buttonUseIcon: ! buttonUseIcon,
-								} );
-							} }
-							className={
-								buttonUseIcon ? 'is-pressed' : undefined
-							}
-						/>
-					) }
-				</ToolbarGroup>
-			</BlockControls>
-
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -417,10 +328,84 @@ export default function SearchEdit( {
 						setAttributes( {
 							width: undefined,
 							widthUnit: undefined,
+							showLabel: true,
+							buttonUseIcon: false,
+							buttonPosition: 'button-outside',
+							isSearchFieldHidden: false,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
+					<ToolsPanelItem
+						hasValue={ () => ! showLabel }
+						label={ __( 'Show label' ) }
+						onDeselect={ () => {
+							setAttributes( {
+								showLabel: true,
+							} );
+						} }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							checked={ showLabel }
+							label={ __( 'Show label' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									showLabel: value,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => buttonPosition !== 'button-outside' }
+						label={ __( 'Button position' ) }
+						onDeselect={ () => {
+							setAttributes( {
+								buttonPosition: 'button-outside',
+								isSearchFieldHidden: false,
+							} );
+						} }
+						isShownByDefault
+					>
+						<SelectControl
+							value={ buttonPosition }
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Button position' ) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									buttonPosition: value,
+									isSearchFieldHidden:
+										value === 'button-only',
+								} );
+							} }
+							options={ buttonPositionControls }
+						/>
+					</ToolsPanelItem>
+					{ buttonPosition !== 'no-button' && (
+						<ToolsPanelItem
+							hasValue={ () => !! buttonUseIcon }
+							label={ __( 'Use button with icon' ) }
+							onDeselect={ () => {
+								setAttributes( {
+									buttonUseIcon: false,
+								} );
+							} }
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								checked={ buttonUseIcon }
+								label={ __( 'Use button with icon' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										buttonUseIcon: value,
+									} )
+								}
+							/>
+						</ToolsPanelItem>
+					) }
 					<ToolsPanelItem
 						hasValue={ () => !! width }
 						label={ __( 'Width' ) }

package/src/separator/edit.js

@@ -6,12 +6,13 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule, SelectControl } from '@wordpress/components';
+import { HorizontalRule } from '@wordpress/components';
 import {
 	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
@@ -19,9 +20,15 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { htmlElementMessages } from '../utils/messages';
+import { unlock } from '../lock-unlock';
 
-export default function SeparatorEdit( { attributes, setAttributes } ) {
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
+export default function SeparatorEdit( {
+	attributes,
+	setAttributes,
+	clientId,
+} ) {
 	const { backgroundColor, opacity, style, tagName } = attributes;
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
@@ -52,19 +59,16 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls group="advanced">
-				<SelectControl
-					__nextHasNoMarginBottom
-					__next40pxDefaultSize
-					label={ __( 'HTML element' ) }
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
 					options={ [
 						{ label: __( 'Default (<hr>)' ), value: 'hr' },
 						{ label: '<div>', value: 'div' },
 					] }
-					value={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ tagName ] }
 				/>
 			</InspectorControls>
 			<Wrapper