@wordpress/block-library 9.15.1 → 9.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.15.1",
+	"version": "9.16.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.15.1",
-		"@wordpress/api-fetch": "^7.15.1",
-		"@wordpress/autop": "^4.15.0",
-		"@wordpress/blob": "^4.15.0",
-		"@wordpress/block-editor": "^14.10.1",
-		"@wordpress/blocks": "^14.4.1",
-		"@wordpress/components": "^29.1.1",
-		"@wordpress/compose": "^7.15.1",
-		"@wordpress/core-data": "^7.15.1",
-		"@wordpress/data": "^10.15.1",
-		"@wordpress/date": "^5.15.1",
-		"@wordpress/deprecated": "^4.15.1",
-		"@wordpress/dom": "^4.15.1",
-		"@wordpress/element": "^6.15.1",
-		"@wordpress/escape-html": "^3.15.0",
-		"@wordpress/hooks": "^4.15.0",
-		"@wordpress/html-entities": "^4.15.0",
-		"@wordpress/i18n": "^5.15.1",
-		"@wordpress/icons": "^10.15.1",
-		"@wordpress/interactivity": "^6.15.0",
-		"@wordpress/interactivity-router": "^2.15.1",
-		"@wordpress/keyboard-shortcuts": "^5.15.1",
-		"@wordpress/keycodes": "^4.15.1",
-		"@wordpress/notices": "^5.15.1",
-		"@wordpress/patterns": "^2.15.1",
-		"@wordpress/primitives": "^4.15.1",
-		"@wordpress/private-apis": "^1.15.0",
-		"@wordpress/reusable-blocks": "^5.15.1",
-		"@wordpress/rich-text": "^7.15.1",
-		"@wordpress/server-side-render": "^5.15.1",
-		"@wordpress/url": "^4.15.0",
-		"@wordpress/viewport": "^6.15.1",
-		"@wordpress/wordcount": "^4.15.0",
+		"@wordpress/a11y": "^4.16.0",
+		"@wordpress/api-fetch": "^7.16.0",
+		"@wordpress/autop": "^4.16.0",
+		"@wordpress/blob": "^4.16.0",
+		"@wordpress/block-editor": "^14.11.0",
+		"@wordpress/blocks": "^14.5.0",
+		"@wordpress/components": "^29.2.0",
+		"@wordpress/compose": "^7.16.0",
+		"@wordpress/core-data": "^7.16.0",
+		"@wordpress/data": "^10.16.0",
+		"@wordpress/date": "^5.16.0",
+		"@wordpress/deprecated": "^4.16.0",
+		"@wordpress/dom": "^4.16.0",
+		"@wordpress/element": "^6.16.0",
+		"@wordpress/escape-html": "^3.16.0",
+		"@wordpress/hooks": "^4.16.0",
+		"@wordpress/html-entities": "^4.16.0",
+		"@wordpress/i18n": "^5.16.0",
+		"@wordpress/icons": "^10.16.0",
+		"@wordpress/interactivity": "^6.16.0",
+		"@wordpress/interactivity-router": "^2.16.0",
+		"@wordpress/keyboard-shortcuts": "^5.16.0",
+		"@wordpress/keycodes": "^4.16.0",
+		"@wordpress/notices": "^5.16.0",
+		"@wordpress/patterns": "^2.16.0",
+		"@wordpress/primitives": "^4.16.0",
+		"@wordpress/private-apis": "^1.16.0",
+		"@wordpress/reusable-blocks": "^5.16.0",
+		"@wordpress/rich-text": "^7.16.0",
+		"@wordpress/server-side-render": "^5.16.0",
+		"@wordpress/url": "^4.16.0",
+		"@wordpress/viewport": "^6.16.0",
+		"@wordpress/wordcount": "^4.16.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0d4503ecc364cf4ca16024673baf5a84dacf212f"
+	"gitHead": "f48b9f56629e400891abb5ae491504de475237ff"
 }

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

@@ -15,8 +15,8 @@ const initialHtml = `
 <figure class="wp-block-audio"><audio controls src="https://cldup.com/59IrU0WJtq.mp3"></audio></figure>
 <!-- /wp:audio -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'File', ...tranformsWithInnerBlocks ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'File', ...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/button/edit.js

@@ -14,7 +14,7 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
 	TextControl,
@@ -148,7 +148,11 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 							<ToggleGroupControlOption
 								key={ widthValue }
 								value={ widthValue }
-								label={ `${ widthValue }%` }
+								label={ sprintf(
+									/* translators: Percentage value. */
+									__( '%d%%' ),
+									widthValue
+								) }
 							/>
 						);
 					} ) }

package/src/columns/edit.js

@@ -242,7 +242,7 @@ function ColumnsEditContainer( { attributes, setAttributes, clientId } ) {
 	/**
 	 * Update all child Column blocks with a new vertical alignment setting
 	 * based on whatever alignment is passed in. This allows change to parent
-	 * to overide anything set on a individual column basis.
+	 * to override anything set on a individual column basis.
 	 *
 	 * @param {string} newVerticalAlignment The vertical alignment setting.
 	 */

package/src/columns/edit.native.js

@@ -287,7 +287,7 @@ const ColumnsEditContainerWrapper = withDispatch(
 		/**
 		 * Update all child Column blocks with a new vertical alignment setting
 		 * based on whatever alignment is passed in. This allows change to parent
-		 * to overide anything set on a individual column basis.
+		 * to override anything set on a individual column basis.
 		 *
 		 * @param {string} verticalAlignment the vertical alignment setting
 		 */

package/src/comment-template/edit.js

@@ -168,7 +168,7 @@ const CommentTemplatePreview = ( {
 	};
 
 	// We have to hide the preview block if the `comment` props points to
-	// the curently active block!
+	// the currently active block!
 
 	// Or, to put it differently, every preview block is visible unless it is the
 	// currently active block - in this case we render its inner blocks.
@@ -222,7 +222,7 @@ const CommentsList = ( {
 						// "placeholder" and that the block is most likely being used in the
 						// site editor. In this case, we have to set the commentId to `null`
 						// because otherwise the (non-existent) comment with a negative ID
-						// would be reqested from the REST API.
+						// would be requested from the REST API.
 						commentId: commentId < 0 ? null : commentId,
 					} }
 				>

package/src/comments-pagination-next/block.json

@@ -12,11 +12,6 @@
 			"type": "string"
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Comments Next Page"
-		}
-	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-pagination-next/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { queryPaginationNext as icon } from '@wordpress/icons';
 
 /**
@@ -16,6 +17,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		attributes: {
+			label: __( 'Newer Comments' ),
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/comments-pagination-previous/block.json

@@ -12,11 +12,6 @@
 			"type": "string"
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Comments Previous Page"
-		}
-	},
 	"usesContext": [ "postId", "comments/paginationArrow" ],
 	"supports": {
 		"reusable": false,

package/src/comments-pagination-previous/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { queryPaginationPrevious as icon } from '@wordpress/icons';
 
 /**
@@ -16,6 +17,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		attributes: {
+			label: __( 'Older Comments' ),
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/cover/deprecated.js

@@ -885,7 +885,7 @@ const v11 = {
 	migrate: migrateTag,
 };
 
-// Deprecation for blocks that renders fixed background as backgroud from the main block container.
+// Deprecation for blocks that renders fixed background as background from the main block container.
 const v10 = {
 	attributes: v8ToV11BlockAttributes,
 	supports: v7toV11BlockSupports,

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,9 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "summary"
+		},
+		"allowedBlocks": {
+			"type": "array"
 		}
 	},
 	"supports": {

package/src/details/edit.js

@@ -5,16 +5,15 @@ import {
 	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 	InspectorControls,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
 import {
 	ToggleControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,29 +29,17 @@ const TEMPLATE = [
 	],
 ];
 
-function DetailsEdit( { attributes, setAttributes, clientId } ) {
-	const { showContent, summary } = attributes;
+function DetailsEdit( { attributes, setAttributes } ) {
+	const { showContent, summary, allowedBlocks } = 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,11 +75,13 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
-			<details
-				{ ...innerBlocksProps }
-				open={ hasSelection || showContent }
-			>
-				<summary onClick={ ( event ) => event.preventDefault() }>
+			<details { ...innerBlocksProps } open={ isOpen }>
+				<summary
+					onClick={ ( event ) => {
+						event.preventDefault();
+						setIsOpen( ! isOpen );
+					} }
+				>
 					<RichText
 						identifier="summary"
 						aria-label={ __( 'Write 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/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-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

@@ -137,12 +137,14 @@
 	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;
 
+	@media not (prefers-reduced-motion) {
+		transition: box-shadow 0.2s ease-out;
+	}
+
 	&:hover {
 		box-shadow: $elevation-x-small;
 	}

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,