@wordpress/block-library 9.23.0 → 9.25.0

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,33 +6,59 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { HorizontalRule } from '@wordpress/components';
+import {
+	HorizontalRule,
+	SelectControl,
+	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import {
 	useBlockProps,
 	getColorClassName,
 	__experimentalUseColorProps as useColorProps,
 	InspectorControls,
-	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useDeprecatedOpacity from './use-deprecated-opacity';
-import { unlock } from '../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+const HtmlElementControl = ( { tagName, setAttributes } ) => {
+	return (
+		<SelectControl
+			label={ __( 'HTML element' ) }
+			value={ tagName }
+			onChange={ ( newValue ) => setAttributes( { tagName: newValue } ) }
+			options={ [
+				{ label: __( 'Default (<hr>)' ), value: 'hr' },
+				{ label: '<div>', value: 'div' },
+			] }
+			help={
+				tagName === 'hr'
+					? __(
+							'Only select <hr> if the separator conveys important information and should be announced by screen readers.'
+					  )
+					: __(
+							'The <div> element should only be used if the block is a design element with no semantic meaning.'
+					  )
+			}
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+		/>
+	);
+};
 
-export default function SeparatorEdit( {
-	attributes,
-	setAttributes,
-	clientId,
-} ) {
+export default function SeparatorEdit( { attributes, setAttributes } ) {
 	const { backgroundColor, opacity, style, tagName } = attributes;
 	const colorProps = useColorProps( attributes );
 	const currentColor = colorProps?.style?.backgroundColor;
 	const hasCustomColor = !! style?.color?.background;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	useDeprecatedOpacity( opacity, currentColor, setAttributes );
 
@@ -58,18 +84,37 @@ export default function SeparatorEdit( {
 
 	return (
 		<>
-			<InspectorControls group="advanced">
-				<HTMLElementControl
-					tagName={ tagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					clientId={ clientId }
-					options={ [
-						{ label: __( 'Default (<hr>)' ), value: 'hr' },
-						{ label: '<div>', value: 'div' },
-					] }
-				/>
+			<InspectorControls>
+				{ Platform.isNative ? (
+					<PanelBody title={ __( 'Settings' ) }>
+						<HtmlElementControl
+							tagName={ tagName }
+							setAttributes={ setAttributes }
+						/>
+					</PanelBody>
+				) : (
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( { tagName: 'hr' } );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							hasValue={ () => tagName !== 'hr' }
+							label={ __( 'HTML element' ) }
+							onDeselect={ () =>
+								setAttributes( { tagName: 'hr' } )
+							}
+							isShownByDefault
+						>
+							<HtmlElementControl
+								tagName={ tagName }
+								setAttributes={ setAttributes }
+							/>
+						</ToolsPanelItem>
+					</ToolsPanel>
+				) }
 			</InspectorControls>
 			<Wrapper
 				{ ...useBlockProps( {

package/src/shortcode/block.json

@@ -9,7 +9,8 @@
 	"attributes": {
 		"text": {
 			"type": "string",
-			"source": "raw"
+			"source": "raw",
+			"role": "content"
 		}
 	},
 	"supports": {

package/src/site-title/index.php

@@ -17,7 +17,7 @@
 function render_block_core_site_title( $attributes ) {
 	$site_title = get_bloginfo( 'name' );
 	if ( ! trim( $site_title ) ) {
-		return;
+		return '';
 	}
 
 	$tag_name = 'h1';