@wordpress/block-library 9.23.0 → 9.25.0

package/src/file/inspector.js

@@ -3,10 +3,11 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	PanelBody,
 	RangeControl,
 	SelectControl,
 	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 
@@ -14,6 +15,7 @@ import { InspectorControls } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { MIN_PREVIEW_HEIGHT, MAX_PREVIEW_HEIGHT } from './edit';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function FileBlockInspector( {
 	hrefs,
@@ -28,6 +30,7 @@ export default function FileBlockInspector( {
 	changePreviewHeight,
 } ) {
 	const { href, textLinkHref, attachmentPage } = hrefs;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	let linkDestinationOptions = [ { value: href, label: __( 'URL' ) } ];
 	if ( attachmentPage ) {
@@ -41,58 +44,109 @@ export default function FileBlockInspector( {
 		<>
 			<InspectorControls>
 				{ href.endsWith( '.pdf' ) && (
-					<PanelBody title={ __( 'PDF settings' ) }>
-						<ToggleControl
-							__nextHasNoMarginBottom
+					<ToolsPanel
+						label={ __( 'PDF settings' ) }
+						resetAll={ () => {
+							changeDisplayPreview( true );
+							changePreviewHeight( 600 );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
 							label={ __( 'Show inline embed' ) }
-							help={
-								displayPreview
-									? __(
-											"Note: Most phone and tablet browsers won't display embedded PDFs."
-									  )
-									: null
-							}
-							checked={ !! displayPreview }
-							onChange={ changeDisplayPreview }
-						/>
-						{ displayPreview && (
-							<RangeControl
+							isShownByDefault
+							hasValue={ () => ! displayPreview }
+							onDeselect={ () => changeDisplayPreview( true ) }
+						>
+							<ToggleControl
 								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Height in pixels' ) }
-								min={ MIN_PREVIEW_HEIGHT }
-								max={ Math.max(
-									MAX_PREVIEW_HEIGHT,
-									previewHeight
-								) }
-								value={ previewHeight }
-								onChange={ changePreviewHeight }
+								label={ __( 'Show inline embed' ) }
+								help={
+									displayPreview
+										? __(
+												"Note: Most phone and tablet browsers won't display embedded PDFs."
+										  )
+										: null
+								}
+								checked={ !! displayPreview }
+								onChange={ changeDisplayPreview }
 							/>
+						</ToolsPanelItem>
+						{ displayPreview && (
+							<ToolsPanelItem
+								label={ __( 'Height in pixels' ) }
+								isShownByDefault
+								hasValue={ () => previewHeight !== 600 }
+								onDeselect={ () => changePreviewHeight( 600 ) }
+							>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Height in pixels' ) }
+									min={ MIN_PREVIEW_HEIGHT }
+									max={ Math.max(
+										MAX_PREVIEW_HEIGHT,
+										previewHeight
+									) }
+									value={ previewHeight }
+									onChange={ changePreviewHeight }
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						changeLinkDestinationOption( href );
+						changeOpenInNewWindow( false );
+						changeShowDownloadButton( true );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Link to' ) }
-						value={ textLinkHref }
-						options={ linkDestinationOptions }
-						onChange={ changeLinkDestinationOption }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => textLinkHref !== href }
+						onDeselect={ () => changeLinkDestinationOption( href ) }
+					>
+						<SelectControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Link to' ) }
+							value={ textLinkHref }
+							options={ linkDestinationOptions }
+							onChange={ changeLinkDestinationOption }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						checked={ openInNewWindow }
-						onChange={ changeOpenInNewWindow }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+						hasValue={ () => !! openInNewWindow }
+						onDeselect={ () => changeOpenInNewWindow( false ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							checked={ openInNewWindow }
+							onChange={ changeOpenInNewWindow }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
 						label={ __( 'Show download button' ) }
-						checked={ showDownloadButton }
-						onChange={ changeShowDownloadButton }
-					/>
-				</PanelBody>
+						isShownByDefault
+						hasValue={ () => ! showDownloadButton }
+						onDeselect={ () => changeShowDownloadButton( true ) }
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show download button' ) }
+							checked={ showDownloadButton }
+							onChange={ changeShowDownloadButton }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);

package/src/form/edit.js

@@ -9,12 +9,18 @@ import {
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { TextControl, SelectControl, PanelBody } from '@wordpress/components';
+import {
+	SelectControl,
+	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 import {
 	formSubmissionNotificationSuccess,
 	formSubmissionNotificationError,
@@ -51,6 +57,17 @@ const TEMPLATE = [
 ];
 
 const Edit = ( { attributes, setAttributes, clientId } ) => {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const resetAllSettings = () => {
+		setAttributes( {
+			submissionMethod: 'email',
+			email: undefined,
+			action: undefined,
+			method: 'post',
+		} );
+	};
+
 	const { action, method, email, submissionMethod } = attributes;
 	const blockProps = useBlockProps();
 
@@ -75,58 +92,86 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<SelectControl
-						__nextHasNoMarginBottom
-						__next40pxDefaultSize
+				<ToolsPanel
+					dropdownMenuProps={ dropdownMenuProps }
+					label={ __( 'Settings' ) }
+					resetAll={ resetAllSettings }
+				>
+					<ToolsPanelItem
+						hasValue={ () => submissionMethod !== 'email' }
 						label={ __( 'Submissions method' ) }
-						options={ [
-							// TODO: Allow plugins to add their own submission methods.
-							{
-								label: __( 'Send email' ),
-								value: 'email',
-							},
-							{
-								label: __( '- Custom -' ),
-								value: 'custom',
-							},
-						] }
-						value={ submissionMethod }
-						onChange={ ( value ) =>
-							setAttributes( { submissionMethod: value } )
-						}
-						help={
-							submissionMethod === 'custom'
-								? __(
-										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
-								  )
-								: __(
-										'Select the method to use for form submissions.'
-								  )
+						onDeselect={ () =>
+							setAttributes( {
+								submissionMethod: 'email',
+							} )
 						}
-					/>
-					{ submissionMethod === 'email' && (
-						<TextControl
+						isShownByDefault
+					>
+						<SelectControl
 							__nextHasNoMarginBottom
 							__next40pxDefaultSize
-							autoComplete="off"
+							label={ __( 'Submissions method' ) }
+							options={ [
+								// TODO: Allow plugins to add their own submission methods.
+								{
+									label: __( 'Send email' ),
+									value: 'email',
+								},
+								{
+									label: __( '- Custom -' ),
+									value: 'custom',
+								},
+							] }
+							value={ submissionMethod }
+							onChange={ ( value ) =>
+								setAttributes( { submissionMethod: value } )
+							}
+							help={
+								submissionMethod === 'custom'
+									? __(
+											'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
+									  )
+									: __(
+											'Select the method to use for form submissions.'
+									  )
+							}
+						/>
+					</ToolsPanelItem>
+					{ submissionMethod === 'email' && (
+						<ToolsPanelItem
+							hasValue={ () => !! email }
 							label={ __( 'Email for form submissions' ) }
-							value={ email }
-							required
-							onChange={ ( value ) => {
-								setAttributes( { email: value } );
+							onDeselect={ () =>
 								setAttributes( {
-									action: `mailto:${ value }`,
-								} );
-								setAttributes( { method: 'post' } );
-							} }
-							help={ __(
-								'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
-							) }
-							type="email"
-						/>
+									email: undefined,
+									action: undefined,
+									method: 'post',
+								} )
+							}
+							isShownByDefault
+						>
+							<TextControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								autoComplete="off"
+								label={ __( 'Email for form submissions' ) }
+								value={ email || '' }
+								required
+								onChange={ ( value ) => {
+									setAttributes( { email: value } );
+									setAttributes( {
+										action: `mailto:${ value }`,
+									} );
+									setAttributes( { method: 'post' } );
+								} }
+								help={ __(
+									'The email address where form submissions will be sent. Separate multiple email addresses with a comma.'
+								) }
+								type="email"
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ submissionMethod !== 'email' && (
 				<InspectorControls group="advanced">

package/src/form-input/edit.js

@@ -14,14 +14,24 @@ import {
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { PanelBody, TextControl, CheckboxControl } from '@wordpress/components';
-
+import {
+	TextControl,
+	CheckboxControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useRef } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 function InputFieldBlock( { attributes, setAttributes, className } ) {
 	const { type, name, label, inlineLabel, required, placeholder, value } =
 		attributes;
 	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const ref = useRef();
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
@@ -38,30 +48,58 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		<>
 			{ 'hidden' !== type && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								inlineLabel: false,
+								required: false,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ 'checkbox' !== type && (
+							<ToolsPanelItem
+								label={ __( 'Inline label' ) }
+								hasValue={ () => !! inlineLabel }
+								onDeselect={ () =>
+									setAttributes( { inlineLabel: false } )
+								}
+								isShownByDefault
+							>
+								<CheckboxControl
+									__nextHasNoMarginBottom
+									label={ __( 'Inline label' ) }
+									checked={ inlineLabel }
+									onChange={ ( newVal ) => {
+										setAttributes( {
+											inlineLabel: newVal,
+										} );
+									} }
+								/>
+							</ToolsPanelItem>
+						) }
+
+						<ToolsPanelItem
+							label={ __( 'Required' ) }
+							hasValue={ () => !! required }
+							onDeselect={ () =>
+								setAttributes( { required: false } )
+							}
+							isShownByDefault
+						>
 							<CheckboxControl
 								__nextHasNoMarginBottom
-								label={ __( 'Inline label' ) }
-								checked={ inlineLabel }
+								label={ __( 'Required' ) }
+								checked={ required }
 								onChange={ ( newVal ) => {
 									setAttributes( {
-										inlineLabel: newVal,
+										required: newVal,
 									} );
 								} }
 							/>
-						) }
-						<CheckboxControl
-							__nextHasNoMarginBottom
-							label={ __( 'Required' ) }
-							checked={ required }
-							onChange={ ( newVal ) => {
-								setAttributes( {
-									required: newVal,
-								} );
-							} }
-						/>
-					</PanelBody>
+						</ToolsPanelItem>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<InspectorControls group="advanced">

package/src/gallery/style.scss

@@ -58,6 +58,7 @@ figure.wp-block-gallery.has-nested-images {
 			content: "";
 			height: 100%;
 			max-height: 40%;
+			pointer-events: none;
 
 			// Blur the background under the gradient scrim.
 			backdrop-filter: blur(3px);

package/src/html/block.json

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

package/src/html/editor.scss

@@ -10,6 +10,7 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
+		display: block;
 		box-sizing: border-box;
 		max-height: 250px;
 		@include editor-input-reset();

package/src/image/constants.js

@@ -7,3 +7,4 @@ export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';

package/src/image/edit.js

@@ -42,6 +42,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 	ALLOWED_MEDIA_TYPES,
+	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
 
 export const pickRelevantMediaFiles = ( image, size ) => {
@@ -239,7 +240,7 @@ export function ImageEdit( {
 
 		// Try to use the previous selected image size if its available
 		// otherwise try the default image size or fallback to "full"
-		let newSize = 'full';
+		let newSize = DEFAULT_MEDIA_SIZE_SLUG;
 		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
 			newSize = sizeSlug;
 		} else if ( hasSize( media, imageDefaultSize ) ) {

package/src/image/image.js

@@ -53,12 +53,13 @@ import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
-
-/**
- * Module constants
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { MIN_SIZE, ALLOWED_MEDIA_TYPES, SIZED_LAYOUTS } from './constants';
+import {
+	MIN_SIZE,
+	ALLOWED_MEDIA_TYPES,
+	SIZED_LAYOUTS,
+	DEFAULT_MEDIA_SIZE_SLUG,
+} from './constants';
 import { evalAspectRatio } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
@@ -836,6 +837,7 @@ export default function Image( {
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
+							defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
 							onChange={ updateImage }
 							options={ imageSizeOptions }
 						/>