@wordpress/block-library 9.15.1 → 9.17.0

package/src/cover/edit/inspector-controls.js

@@ -36,6 +36,7 @@ import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
+import { htmlElementMessages } from '../../utils/messages';
 
 const { cleanEmptyObject, ResolutionTool } = unlock( blockEditorPrivateApis );
 
@@ -183,27 +184,6 @@ export default function CoverInspectorControls( {
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
-	const htmlElementMessages = {
-		header: __(
-			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-		),
-		main: __(
-			'The <main> element should be used for the primary content of your document only.'
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		article: __(
-			'The <article> element should represent a self-contained, syndicatable portion of the document.'
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-		footer: __(
-			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-		),
-	};
-
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	return (

package/src/cover/test/__snapshots__/edit.native.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`color settings clears the selected overlay color and mantains the inner blocks 1`] = `
+exports[`color settings clears the selected overlay color and maintains the inner blocks 1`] = `
 "<!-- wp:cover {"isUserOverlayColor":true,"isDark":false} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…"} -->
 <p class="has-text-align-center"></p>

package/src/cover/test/edit.js

@@ -48,7 +48,7 @@ async function setup( attributes, useCoreBlocks, customSettings ) {
 async function createAndSelectBlock() {
 	await userEvent.click(
 		screen.getByRole( 'option', {
-			name: 'Color: Black',
+			name: 'Black',
 		} )
 	);
 	await userEvent.click(
@@ -73,7 +73,7 @@ describe( 'Cover block', () => {
 		test( 'can set overlay color using color picker on block placeholder', async () => {
 			const { container } = await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} );
 			await userEvent.click( colorPicker );
 			const color = colorPicker.style.backgroundColor;
@@ -97,7 +97,7 @@ describe( 'Cover block', () => {
 
 			await userEvent.click(
 				screen.getByRole( 'option', {
-					name: 'Color: Black',
+					name: 'Black',
 				} )
 			);
 
@@ -390,7 +390,7 @@ describe( 'Cover block', () => {
 		test( 'should toggle is-light class if background changed from light to dark', async () => {
 			await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
 
@@ -406,7 +406,7 @@ describe( 'Cover block', () => {
 			);
 			await userEvent.click( screen.getByText( 'Overlay' ) );
 			const popupColorPicker = screen.getByRole( 'option', {
-				name: 'Color: Black',
+				name: 'Black',
 			} );
 			await userEvent.click( popupColorPicker );
 			expect( coverBlock ).not.toHaveClass( 'is-light' );
@@ -414,7 +414,7 @@ describe( 'Cover block', () => {
 		test( 'should remove is-light class if overlay color is removed', async () => {
 			await setup();
 			const colorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( colorPicker );
 			const coverBlock = screen.getByLabelText( 'Block: Cover' );
@@ -429,7 +429,7 @@ describe( 'Cover block', () => {
 			// The default color is black, so clicking the black color option will remove the background color,
 			// which should remove the isDark setting and assign the is-light class.
 			const popupColorPicker = screen.getByRole( 'option', {
-				name: 'Color: White',
+				name: 'White',
 			} );
 			await userEvent.click( popupColorPicker );
 			expect( coverBlock ).not.toHaveClass( 'is-light' );

package/src/cover/test/edit.native.js

@@ -101,7 +101,7 @@ const attributes = {
 };
 
 beforeAll( () => {
-	// Mock Image.getSize to avoid failed attempt to size non-existant image.
+	// Mock Image.getSize to avoid failed attempt to size non-existent image.
 	const getSizeSpy = jest.spyOn( Image, 'getSize' );
 	getSizeSpy.mockImplementation( ( _url, callback ) => callback( 300, 200 ) );
 
@@ -541,7 +541,7 @@ describe( 'color settings', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
-	it( 'clears the selected overlay color and mantains the inner blocks', async () => {
+	it( 'clears the selected overlay color and maintains the inner blocks', async () => {
 		const screen = await initializeEditor( {
 			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
 		} );

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

@@ -23,16 +23,16 @@ const initialHtmlWithVideo = `
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
 const blockTransformsWithImage = [
 	'Image',
 	'Media & Text',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 const blockTransformsWithVideo = [
 	'Video',
 	'Media & Text',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 ];
 
 setupCoreBlocks();
@@ -52,7 +52,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();
@@ -88,7 +90,9 @@ describe( `${ block } block transformations`, () => {
 					{
 						isMediaBlock: true,
 						hasInnerBlocks:
-							tranformsWithInnerBlocks.includes( blockTransform ),
+							transformsWithInnerBlocks.includes(
+								blockTransform
+							),
 					}
 				);
 				expect( newBlock ).toBeVisible();

package/src/details/block.json

@@ -16,6 +16,18 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "summary"
+		},
+		"name": {
+			"type": "string",
+			"source": "attribute",
+			"attribute": "name",
+			"selector": ".wp-block-details"
+		},
+		"allowedBlocks": {
+			"type": "array"
+		},
+		"placeholder": {
+			"type": "string"
 		}
 	},
 	"supports": {

package/src/details/edit.js

@@ -5,16 +5,16 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
 import {
+	TextControl,
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,29 +30,18 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent, summary } = attributes;
+function DetailsEdit( { attributes, setAttributes } ) {
+	const { name, showContent, summary, allowedBlocks, placeholder } =
+		attributes;
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 		__experimentalCaptureToolbars: true,
+		allowedBlocks,
 	} );
+	const [ isOpen, setIsOpen ] = useState( showContent );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Check if either the block or the inner blocks are selected.
-	const hasSelection = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			/* Sets deep to true to also find blocks inside the details content block. */
-			return (
-				hasSelectedInnerBlock( clientId, true ) ||
-				isBlockSelected( clientId )
-			);
-		},
-		[ clientId ]
-	);
-
 	return (
 		<>
 			<InspectorControls>
@@ -88,15 +77,31 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
-			<details
-				{ ...innerBlocksProps }
-				open={ hasSelection || showContent }
-			>
-				<summary onClick={ ( event ) => event.preventDefault() }>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name attribute' ) }
+					value={ name || '' }
+					onChange={ ( newName ) =>
+						setAttributes( { name: newName } )
+					}
+					help={ __(
+						'Enables multiple Details blocks with the same name attribute to be connected, with only one open at a time.'
+					) }
+				/>
+			</InspectorControls>
+			<details { ...innerBlocksProps } open={ isOpen }>
+				<summary
+					onClick={ ( event ) => {
+						event.preventDefault();
+						setIsOpen( ! isOpen );
+					} }
+				>
 					<RichText
 						identifier="summary"
 						aria-label={ __( 'Write summary' ) }
-						placeholder={ __( 'Write summary…' ) }
+						placeholder={ placeholder || __( 'Write summary…' ) }
 						allowedFormats={ [] }
 						withoutInteractiveFormatting
 						value={ summary }

package/src/details/save.js

@@ -4,12 +4,16 @@
 import { RichText, useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { showContent } = attributes;
+	const { name, showContent } = attributes;
 	const summary = attributes.summary ? attributes.summary : 'Details';
 	const blockProps = useBlockProps.save();
 
 	return (
-		<details { ...blockProps } open={ showContent }>
+		<details
+			{ ...blockProps }
+			name={ name || undefined }
+			open={ showContent }
+		>
 			<summary>
 				<RichText.Content value={ summary } />
 			</summary>

package/src/editor.scss

@@ -65,7 +65,7 @@
 // Font sizes (not used now, kept because of backward compatibility).
 //
 // The reason we add the editor class wrapper here is
-// to avoid enqueing the classes twice: here and in ./editor.scss
+// to avoid enqueuing the classes twice: here and in ./editor.scss
 :where(.editor-styles-wrapper) .has-regular-font-size {
 	font-size: 16px;
 }

package/src/embed/test/index.js

@@ -69,7 +69,7 @@ describe( 'utils', () => {
 			expect( getClassNames( html, '', false ) ).toEqual( expected );
 		} );
 
-		it( 'should preserve exsiting class names when removing responsive classes', () => {
+		it( 'should preserve existing class names when removing responsive classes', () => {
 			const html = '<iframe height="9" width="16"></iframe>';
 			const expected = 'lovely';
 			expect(

package/src/embed/transforms.js

@@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import metadata from './block.json';
+import { removeAspectRatioClasses } from './util';
 
 const { name: EMBED_BLOCK } = metadata;
 
@@ -33,13 +34,14 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			isMatch: ( { url } ) => !! url,
-			transform: ( { url, caption } ) => {
+			transform: ( { url, caption, className } ) => {
 				let value = `<a href="${ url }">${ url }</a>`;
 				if ( caption?.trim() ) {
 					value += `<br />${ caption }`;
 				}
 				return createBlock( 'core/paragraph', {
 					content: value,
+					className: removeAspectRatioClasses( className ),
 				} );
 			},
 		},

package/src/embed/util.js

@@ -42,7 +42,7 @@ export const getEmbedInfoByProvider = ( provider ) =>
  * Returns true if any of the regular expressions match the URL.
  *
  * @param {string} url      The URL to test.
- * @param {Array}  patterns The list of regular expressions to test agains.
+ * @param {Array}  patterns The list of regular expressions to test against.
  * @return {boolean} True if any of the regular expressions match the URL.
  */
 export const matchesPatterns = ( url, patterns = [] ) =>

package/src/file/edit.js

@@ -255,11 +255,12 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			<div { ...blockProps }>
 				{ displayPreviewInEditor && (
 					<ResizableBox
-						size={ { height: previewHeight } }
+						size={ { height: previewHeight, width: '100%' } }
 						minHeight={ MIN_PREVIEW_HEIGHT }
 						maxHeight={ MAX_PREVIEW_HEIGHT }
-						minWidth="100%"
-						grid={ [ 10, 10 ] }
+						// The horizontal grid value must be 1 or else the width may snap during a
+						// resize even though only vertical resizing is enabled.
+						grid={ [ 1, 10 ] }
 						enable={ {
 							top: false,
 							right: false,

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

@@ -15,8 +15,8 @@ const initialHtml = `
 <div class="wp-block-file"><a href="https://wordpress.org/latest.zip">WordPress.zip</a><a href="https://wordpress.org/latest.zip" class="wp-block-file__button wp-element-button" download>Download</a></div>
 <!-- /wp:file -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ ...tranformsWithInnerBlocks ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 
@@ -25,7 +25,8 @@ describe( `${ block } block transformations`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const newBlock = await transformBlock( screen, block, blockTransform, {
 			isMediaBlock: false,
-			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
 		} );
 		expect( newBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/file/transforms.js

@@ -14,7 +14,7 @@ const transforms = {
 			isMatch( files ) {
 				return files.length > 0;
 			},
-			// We define a lower priorty (higher number) than the default of 10. This
+			// We define a lower priority (higher number) than the default of 10. This
 			// ensures that the File block is only created as a fallback.
 			priority: 15,
 			transform: ( files ) => {

package/src/file/utils/index.js

@@ -10,7 +10,7 @@ export const browserSupportsPdfs = () => {
 		return false;
 	}
 
-	// Android tablets are the noteable exception.
+	// Android tablets are the notable exception.
 	if ( window.navigator.userAgent.indexOf( 'Android' ) > -1 ) {
 		return false;
 	}

package/src/form/variations.js

@@ -61,7 +61,7 @@ const variations = [
 	},
 	{
 		name: 'wp-privacy-form',
-		title: __( 'Experimental privacy request form' ),
+		title: __( 'Experimental Privacy Request Form' ),
 		keywords: [ 'GDPR' ],
 		description: __( 'A form to request data exports and/or deletion.' ),
 		attributes: {

package/src/form-input/edit.js

@@ -77,7 +77,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						} );
 					} }
 					help={ __(
-						'Affects the "name" atribute of the input element, and is used as a name for the form submission results.'
+						'Affects the "name" attribute of the input element, and is used as a name for the form submission results.'
 					) }
 				/>
 			</InspectorControls>

package/src/freeform/editor.scss

@@ -240,12 +240,13 @@
 
 div[data-type="core/freeform"] {
 	&::before {
-		transition: border-color 0.1s linear, box-shadow 0.1s linear;
-		@include reduce-motion("transition");
 		border: $border-width solid $gray-300;
-
 		// Windows High Contrast mode will show this outline.
 		outline: $border-width solid transparent;
+
+		@media not (prefers-reduced-motion) {
+			transition: border-color 0.1s linear, box-shadow 0.1s linear;
+		}
 	}
 
 	&.is-selected::before {

package/src/gallery/edit.js

@@ -80,7 +80,7 @@ const LINK_OPTIONS = [
 	},
 	{
 		icon: fullscreen,
-		label: __( 'Expand on click' ),
+		label: __( 'Enlarge on click' ),
 		value: LINK_DESTINATION_LIGHTBOX,
 		noticeText: __( 'Lightbox effect' ),
 		infoText: __( 'Scale images with a lightbox effect' ),

package/src/gallery/editor.scss

@@ -117,10 +117,6 @@
 		opacity: 0.3;
 	}
 
-	.is-selected .block-library-gallery-item__inline-menu {
-		display: inline-flex;
-	}
-
 	.block-editor-media-placeholder {
 		margin: 0;
 		height: 100%;
@@ -131,56 +127,6 @@
 	}
 }
 
-.block-library-gallery-item__inline-menu {
-	display: none;
-	position: absolute;
-	top: -2px;
-	margin: $grid-unit-10;
-	z-index: z-index(".block-library-gallery-item__inline-menu");
-	transition: box-shadow 0.2s ease-out;
-	@include reduce-motion("transition");
-	border-radius: $radius-small;
-	background: $white;
-	border: $border-width solid $gray-900;
-
-	&:hover {
-		box-shadow: $elevation-x-small;
-	}
-
-	@include break-small() {
-		// Use smaller buttons to fit when there are many columns.
-		.columns-7 &,
-		.columns-8 & {
-			padding: $grid-unit-05 * 0.5;
-		}
-	}
-
-	.components-button.has-icon {
-		&:not(:focus) {
-			border: none;
-			box-shadow: none;
-		}
-
-		@include break-small() {
-			// Use smaller buttons to fit when there are many columns.
-			.columns-7 &,
-			.columns-8 & {
-				padding: 0;
-				width: inherit;
-				height: inherit;
-			}
-		}
-	}
-
-	&.is-left {
-		left: -2px;
-	}
-
-	&.is-right {
-		right: -2px;
-	}
-}
-
 .wp-block-gallery ul.blocks-gallery-grid {
 	padding: 0;
 	// Some themes give all <ul> default margin instead of padding.

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

@@ -25,8 +25,8 @@ const initialHtml = `
 <!-- /wp:image --></figure>
 <!-- /wp:gallery -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Image', ...tranformsWithInnerBlocks ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Image', ...transformsWithInnerBlocks ];
 
 setupCoreBlocks();
 
@@ -35,7 +35,8 @@ describe( `${ block } block transformations`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const newBlock = await transformBlock( screen, block, blockTransform, {
 			isMediaBlock: true,
-			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
 		} );
 		expect( newBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/gallery/transforms.js

@@ -25,7 +25,7 @@ const parseShortcodeIds = ( ids ) => {
 /**
  * Third party block plugins don't have an easy way to detect if the
  * innerBlocks version of the Gallery is running when they run a
- * 3rdPartyBlock -> GalleryBlock transform so this tranform filter
+ * 3rdPartyBlock -> GalleryBlock transform so this transform filter
  * will handle this. Once the innerBlocks version is the default
  * in a core release, this could be deprecated and removed after
  * plugin authors have been given time to update transforms.
@@ -189,7 +189,7 @@ const transforms = {
 			// When created by drag and dropping multiple files on an insertion point. Because multiple
 			// files must not be transformed to a gallery when dropped within a gallery there is another transform
 			// within the image block to handle that case. Therefore this transform has to have priority 1
-			// set so that it overrrides the image block transformation when mulitple images are dropped outside
+			// set so that it overrides the image block transformation when multiple images are dropped outside
 			// of a gallery block.
 			type: 'files',
 			priority: 1,

package/src/gallery/use-get-new-images.js

@@ -56,7 +56,7 @@ export default function useGetNewImages( images, imageData ) {
 						currentImage.clientId === image.clientId
 				) &&
 				imageData?.find( ( img ) => img.id === image.id ) &&
-				! image.fromSavedConent
+				! image.fromSavedContent
 		);
 
 		if ( imagesUpdated || newImages?.length > 0 ) {

package/src/group/edit.js

@@ -18,6 +18,7 @@ import { View } from '@wordpress/primitives';
  * Internal dependencies
  */
 import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+import { htmlElementMessages } from '../utils/messages';
 
 /**
  * Render inspector controls for the Group block.
@@ -29,26 +30,6 @@ import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
  * @return {JSX.Element}                The control group.
  */
 function GroupEditControls( { tagName, onSelectTagName } ) {
-	const htmlElementMessages = {
-		header: __(
-			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-		),
-		main: __(
-			'The <main> element should be used for the primary content of your document only.'
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		article: __(
-			'The <article> element should represent a self-contained, syndicatable portion of the document.'
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-		footer: __(
-			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-		),
-	};
 	return (
 		<InspectorControls group="advanced">
 			<SelectControl

package/src/home-link/edit.js

@@ -51,12 +51,6 @@ export default function HomeEdit( { attributes, setAttributes, context } ) {
 					aria-label={ __( 'Home link text' ) }
 					placeholder={ __( 'Add home link' ) }
 					withoutInteractiveFormatting
-					allowedFormats={ [
-						'core/bold',
-						'core/italic',
-						'core/image',
-						'core/strikethrough',
-					] }
 				/>
 			</a>
 		</div>

package/src/image/block.json

@@ -4,7 +4,14 @@
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
-	"usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ],
+	"usesContext": [
+		"allowResize",
+		"imageCrop",
+		"fixedHeight",
+		"postId",
+		"postType",
+		"queryId"
+	],
 	"description": "Insert an image to make a visual statement.",
 	"keywords": [ "img", "photo", "picture" ],
 	"textdomain": "default",

package/src/image/editor.scss

@@ -32,7 +32,7 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
-// Shown while image is being uploded but cannot be previewed.
+// Shown while image is being uploaded but cannot be previewed.
 .wp-block-image__placeholder {
 	aspect-ratio: 4 / 3;