@wordpress/block-library 9.24.0 → 9.26.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/block.json

@@ -62,7 +62,6 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
-		},
-		"__experimentalSelector": "form"
+		}
 	}
 }

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">
@@ -166,7 +211,6 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 			) }
 			<form
 				{ ...innerBlocksProps }
-				className="wp-block-form"
 				encType={ submissionMethod === 'email' ? 'text/plain' : null }
 			/>
 		</>

package/src/form/index.js

@@ -20,6 +20,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => {

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/form-input/index.js

@@ -17,6 +17,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/form-submission-notification/index.js

@@ -21,6 +21,7 @@ export const settings = {
 	edit,
 	save,
 	variations,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/form-submit-button/index.js

@@ -13,6 +13,7 @@ export { metadata, name };
 export const settings = {
 	edit,
 	save,
+	example: {},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

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/image/image.js

@@ -595,6 +595,7 @@ export default function Image( {
 			aspectRatio: undefined,
 			lightbox: undefined,
 		} );
+		updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 	};
 
 	const sizeControls = (

package/src/image/index.php

@@ -204,6 +204,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
 	);
+	$p->set_attribute( 'data-wp-key', $unique_image_id );
 
 	// Image.
 	$p->next_tag( 'img' );
@@ -272,12 +273,14 @@ function block_core_image_print_lightbox_overlay() {
 		<div
 			class="wp-lightbox-overlay zoom"
 			data-wp-interactive="core/image"
+			data-wp-router-region='{ "id": "core/image-overlay", "attachTo": "body" }'
+			data-wp-key="wp-lightbox-overlay"
 			data-wp-context='{}'
 			data-wp-bind--role="state.roleAttribute"
 			data-wp-bind--aria-label="state.currentImage.ariaLabel"
 			data-wp-bind--aria-modal="state.ariaModal"
 			data-wp-class--active="state.overlayEnabled"
-			data-wp-class--show-closing-animation="state.showClosingAnimation"
+			data-wp-class--show-closing-animation="state.overlayOpened"
 			data-wp-watch="callbacks.setOverlayFocus"
 			data-wp-on--keydown="actions.handleKeydown"
 			data-wp-on-async--touchstart="actions.handleTouchStart"

package/src/image/view.js

@@ -110,9 +110,6 @@ const { state, actions, callbacks } = store(
 			},
 			hideLightbox() {
 				if ( state.overlayEnabled ) {
-					// Starts the overlay closing animation. The showClosingAnimation
-					// class is used to avoid showing it on page load.
-					state.showClosingAnimation = true;
 					state.overlayEnabled = false;
 
 					// Waits until the close animation has completed before allowing a