@wordpress/block-library 10.5.0 → 10.5.2-next.v.202608281122.0

package/src/gallery/style.scss

@@ -8,11 +8,12 @@
 
 // The following is a temporary override until flex layout supports
 // an align items setting of normal.
-figure.wp-block-gallery.has-nested-images {
+figure.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
 	align-items: normal;
 }
-// Styles for current version of gallery block.
-.wp-block-gallery.has-nested-images {
+
+// Styles for the current Gallery block's custom Flex layout.
+.wp-block-gallery.has-nested-images:where(.is-layout-flex) {
 	// Need bogus :not(#individual-image) to override long :not()
 	// specificity chain on default image block on front end.
 	figure.wp-block-image:not(#individual-image) {
@@ -24,7 +25,6 @@ figure.wp-block-gallery.has-nested-images {
 		display: flex;
 		flex-grow: 1;
 		justify-content: center;
-		position: relative;
 		flex-direction: column;
 		max-width: 100%;
 		// Prevents theme.json and global styles borders that apply to the outer
@@ -47,78 +47,6 @@ figure.wp-block-gallery.has-nested-images {
 			max-width: 100% !important;
 			width: auto;
 		}
-
-		// Position caption and scrim at the bottom.
-		&:has(figcaption)::before,
-		figcaption {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			left: 0;
-			max-height: 100%;
-		}
-
-		// Create a background blur layer.
-		&:has(figcaption)::before {
-			content: "";
-			height: 100%;
-			max-height: 3em;
-			pointer-events: none;
-
-			// Blur the background under the gradient scrim.
-			backdrop-filter: blur(3px);
-
-			// Crop the caption so the blur is only on the edge.
-			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
-		}
-
-		// Place the caption at the bottom.
-		figcaption {
-			color: $white;
-			text-shadow: 0 0 1.5px $black;
-			font-size: $default-font-size;
-			margin: 0;
-			overflow: auto;
-			padding: 1em;
-			text-align: center;
-			box-sizing: border-box;
-			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
-
-			// Dark gradient scrim.
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
-
-			img {
-				display: inline;
-			}
-
-			a {
-				color: inherit;
-			}
-		}
-
-		&.has-custom-border img {
-			box-sizing: border-box;
-		}
-
-		&.is-style-rounded,
-		&.has-custom-border {
-			> div,
-			> a {
-				flex: 1 1 auto;
-			}
-			figcaption {
-				flex: initial;
-				background: none;
-				color: inherit;
-				margin: 0;
-				padding: 10px 10px 9px;
-				position: relative;
-				text-shadow: none;
-			}
-			&::before {
-				content: none;
-			}
-		}
 	}
 
 	figcaption {
@@ -194,3 +122,88 @@ figure.wp-block-gallery.has-nested-images {
 		justify-content: center;
 	}
 }
+
+// Styles for overlaying image captions, shared between the Flex and Grid layouts.
+.wp-block-gallery.has-nested-images {
+	figure.wp-block-image {
+		position: relative;
+		margin: 0;
+
+		// Position caption and scrim at the bottom.
+		&:has(figcaption)::before,
+		figcaption {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			left: 0;
+			max-height: 100%;
+		}
+
+		// Create a background blur layer.
+		&:has(figcaption)::before {
+			content: "";
+			height: 100%;
+			max-height: 3em;
+			pointer-events: none;
+
+			// Blur the background under the gradient scrim.
+			backdrop-filter: blur(3px);
+
+			// Crop the caption so the blur is only on the edge.
+			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
+		}
+
+		// Place the caption at the bottom.
+		figcaption {
+			color: $white;
+			text-shadow: 0 0 1.5px $black;
+			font-size: $default-font-size;
+			margin: 0;
+			overflow: auto;
+			padding: 1em;
+			text-align: center;
+			box-sizing: border-box;
+			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
+
+			// Dark gradient scrim.
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
+
+			img {
+				display: inline;
+			}
+
+			a {
+				color: inherit;
+			}
+		}
+
+		&.has-custom-border img {
+			box-sizing: border-box;
+		}
+
+		&.is-style-rounded,
+		&.has-custom-border {
+			> div,
+			> a {
+				flex: 1 1 auto;
+			}
+			figcaption {
+				flex: initial;
+				background: none;
+				color: inherit;
+				margin: 0;
+				padding: 10px 10px 9px;
+				position: relative;
+				text-shadow: none;
+			}
+			&::before {
+				content: none;
+			}
+		}
+	}
+}
+
+:where(.wp-block-gallery.has-nested-images.is-layout-grid) > .blocks-gallery-caption {
+	grid-column: 1 / -1;
+	text-align: center;
+}

package/src/gallery/test/edit.js

@@ -1,10 +1,18 @@
 import { screen } from '@testing-library/react';
-import { createBlock } from '@wordpress/blocks';
+import userEvent from '@testing-library/user-event';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import {
+	store as blockEditorStore,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { useDispatch } from '@wordpress/data';
+import { createElement, useEffect } from '@wordpress/element';
 import {
 	initializeEditor,
 	selectBlock,
 } from '@wordpress/integration-tests/helpers/integration-test-editor';
 import { registerCoreBlocks } from '@wordpress/block-library';
+import { unlock } from '../../lock-unlock';
 
 const IMAGE_ATTRIBUTES = {
 	id: 1,
@@ -12,6 +20,21 @@ const IMAGE_ATTRIBUTES = {
 	alt: 'Example image',
 };
 
+const VIEWPORT_STATE_INITIALIZER = 'test/viewport-state-initializer';
+
+function ViewportStateInitializer() {
+	const { setResponsiveEditing, setStyleStateViewport } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	useEffect( () => {
+		setResponsiveEditing( true );
+		setStyleStateViewport( '@mobile' );
+	}, [ setResponsiveEditing, setStyleStateViewport ] );
+
+	return createElement( 'div', useBlockProps() );
+}
+
 /**
  * Registers the core blocks up front so inner blocks can be created before the
  * editor is initialized, then renders the given block.
@@ -25,6 +48,17 @@ async function setup( block ) {
 describe( 'Gallery block', () => {
 	beforeEach( () => {
 		registerCoreBlocks();
+		registerBlockType( VIEWPORT_STATE_INITIALIZER, {
+			apiVersion: 3,
+			title: 'Viewport state initializer',
+			category: 'text',
+			supports: {
+				html: false,
+				inserter: false,
+			},
+			edit: ViewportStateInitializer,
+			save: () => null,
+		} );
 	} );
 
 	describe( 'Block toolbar', () => {
@@ -54,4 +88,121 @@ describe( 'Gallery block', () => {
 			).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Layout', () => {
+		const createGallery = ( attributes = {} ) =>
+			createBlock( 'core/gallery', attributes, [
+				createBlock( 'core/image', IMAGE_ATTRIBUTES ),
+				createBlock( 'core/image', {
+					...IMAGE_ATTRIBUTES,
+					id: 2,
+				} ),
+			] );
+
+		test( 'keeps the custom Gallery controls for the default Flex layout', async () => {
+			await setup( createGallery() );
+			await selectBlock( 'Block: Gallery' );
+
+			expect(
+				await screen.findByRole( 'slider', { name: 'Columns' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByLabelText( 'Crop images to fit' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByText( 'Min. column width' )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'shows only viewport-enabled Flex Gallery settings while editing a viewport state', async () => {
+			await setup( [
+				createGallery(),
+				createBlock( VIEWPORT_STATE_INITIALIZER ),
+			] );
+			await selectBlock( 'Block: Gallery' );
+
+			expect(
+				await screen.findByRole( 'slider', { name: 'Columns' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByLabelText( 'Crop images to fit' )
+			).toBeInTheDocument();
+			expect(
+				screen.queryByLabelText( 'Randomize order' )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'does not show a Settings tab when the Gallery has no viewport-enabled controls', async () => {
+			await setup( [
+				createGallery( { layout: { type: 'grid' } } ),
+				createBlock( VIEWPORT_STATE_INITIALIZER ),
+			] );
+			await selectBlock( 'Block: Gallery Grid' );
+
+			expect(
+				screen.queryByRole( 'tab', { name: 'Settings' } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByLabelText( 'Crop images to fit' )
+			).not.toBeInTheDocument();
+		} );
+
+		test( 'preserves layout settings when switching Gallery variations', async () => {
+			await setup(
+				createGallery( {
+					columns: 2,
+					imageCrop: false,
+					layout: {
+						type: 'grid',
+						columnCount: 4,
+						minimumColumnWidth: '10rem',
+					},
+				} )
+			);
+			await selectBlock( 'Block: Gallery Grid' );
+
+			expect(
+				screen.queryByLabelText( 'Crop images to fit' )
+			).not.toBeInTheDocument();
+			expect(
+				screen.queryByRole( 'slider', { name: 'Columns' } )
+			).not.toBeInTheDocument();
+			expect(
+				screen.getByRole( 'radio', { name: 'Gallery Grid' } )
+			).toBeChecked();
+
+			await userEvent.click(
+				await screen.findByRole( 'radio', {
+					name: 'Transform to Gallery',
+				} )
+			);
+
+			// Switching layouts only changes the layout attribute. The Gallery's
+			// previous Flex settings are restored when switching back.
+			expect(
+				screen.getByRole( 'slider', { name: 'Columns' } )
+			).toHaveValue( '2' );
+			expect(
+				screen.getByLabelText( 'Crop images to fit' )
+			).not.toBeChecked();
+
+			await userEvent.click(
+				screen.getByRole( 'radio', {
+					name: 'Transform to Gallery Grid',
+				} )
+			);
+			await userEvent.click(
+				screen.getByRole( 'tab', { name: 'Styles' } )
+			);
+
+			expect(
+				await screen.findByRole( 'spinbutton', { name: 'Columns' } )
+			).toHaveDisplayValue( '4' );
+			expect(
+				await screen.findByRole( 'spinbutton', {
+					name: 'Minimum column width',
+				} )
+			).toHaveDisplayValue( '10' );
+		} );
+	} );
 } );

package/src/gallery/test/responsive-styles.js

@@ -0,0 +1,107 @@
+import {
+	getGalleryResponsiveFlexCSS,
+	getUpdatedGalleryStyle,
+} from '../responsive-styles';
+
+const MEDIA_QUERIES = {
+	'@tablet': '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+};
+
+describe( 'Gallery responsive Flex styles', () => {
+	it( 'updates crop to fit for the active viewport', () => {
+		expect(
+			getUpdatedGalleryStyle( {
+				style: {
+					spacing: { blockGap: '10px' },
+					'@mobile': { columns: 1 },
+				},
+				viewport: '@tablet',
+				baseSettings: { columns: 2, imageCrop: true },
+				settings: { imageCrop: false },
+			} )
+		).toEqual( {
+			spacing: { blockGap: '10px' },
+			'@mobile': { columns: 1 },
+			'@tablet': { imageCrop: false },
+		} );
+	} );
+
+	it( 'removes a Gallery override without removing viewport layout settings', () => {
+		expect(
+			getUpdatedGalleryStyle( {
+				style: {
+					'@mobile': {
+						columns: 1,
+						imageCrop: false,
+						layout: { columnCount: 2 },
+					},
+				},
+				viewport: '@mobile',
+				baseSettings: { columns: 2, imageCrop: true },
+				settings: { columns: 2 },
+			} )
+		).toEqual( {
+			'@mobile': {
+				imageCrop: false,
+				layout: { columnCount: 2 },
+			},
+		} );
+	} );
+
+	it( 'applies a viewport-specific column count', () => {
+		const css = getGalleryResponsiveFlexCSS(
+			'#block-test',
+			{
+				'@mobile': {
+					columns: 3,
+					layout: { columnCount: 2 },
+				},
+			},
+			MEDIA_QUERIES
+		);
+
+		expect( css ).toContain( '@media (width <= 480px)' );
+		expect( css ).toContain(
+			'width:calc((100% - (var(--wp--style--unstable-gallery-gap, 16px) * 2)) / 3)'
+		);
+		expect( css ).not.toContain( '@media (480px < width <= 782px)' );
+	} );
+
+	it.each( [
+		[ true, 'object-fit:cover', 'display:flex' ],
+		[ false, 'object-fit:fill', 'display:block' ],
+	] )(
+		'applies crop to fit set to %s for a viewport',
+		( imageCrop, objectFitRule, wrapperDisplayRule ) => {
+			const css = getGalleryResponsiveFlexCSS(
+				'#block-test',
+				{
+					'@tablet': {
+						imageCrop,
+					},
+				},
+				MEDIA_QUERIES
+			);
+
+			expect( css ).toContain( objectFitRule );
+			expect( css ).toContain( wrapperDisplayRule );
+		}
+	);
+
+	it( 'ignores malformed viewport Gallery values', () => {
+		const css = getGalleryResponsiveFlexCSS(
+			'#block-test',
+			{
+				'@tablet': {
+					columns: '3',
+					imageCrop: 'false',
+				},
+				'@mobile': [],
+			},
+			MEDIA_QUERIES
+		);
+
+		expect( css ).toBe( '' );
+	} );
+} );

package/src/gallery/test/shared.js

@@ -0,0 +1,22 @@
+import { isGalleryFlexLayout } from '../shared';
+
+describe( 'isGalleryFlexLayout', () => {
+	it.each( [
+		[ 'missing', undefined ],
+		[ 'null', null ],
+		[ 'a string', 'grid' ],
+		[ 'an array', [ 'grid' ] ],
+		[ 'an object without a type', {} ],
+		[ 'an object with an empty type', { type: '' } ],
+		[ 'an explicit Flex layout', { type: 'flex' } ],
+	] )( 'treats %s layout data as Flex', ( label, layout ) => {
+		expect( isGalleryFlexLayout( layout ) ).toBe( true );
+	} );
+
+	it.each( [
+		[ 'Grid', { type: 'grid' } ],
+		[ 'another explicit layout type', { type: 'constrained' } ],
+	] )( 'does not treat %s as Flex', ( label, layout ) => {
+		expect( isGalleryFlexLayout( layout ) ).toBe( false );
+	} );
+} );

package/src/gallery/test/variations.js

@@ -0,0 +1,26 @@
+import variations from '../variations';
+
+const getVariation = ( name ) =>
+	variations.find( ( variation ) => variation.name === name );
+
+describe( 'Gallery layout variations', () => {
+	const flexVariation = getVariation( 'gallery-flex' );
+	const gridVariation = getVariation( 'gallery-grid' );
+
+	it( 'exposes Flex and Grid only as transforms', () => {
+		expect( flexVariation.scope ).toEqual( [ 'transform' ] );
+		expect( gridVariation.scope ).toEqual( [ 'transform' ] );
+	} );
+
+	it( 'keeps an attribute-less Gallery on the Flex variation', () => {
+		expect( flexVariation.isActive( {} ) ).toBe( true );
+		expect( gridVariation.isActive( {} ) ).toBe( false );
+	} );
+
+	it( 'activates only the Grid variation for a Gallery Grid', () => {
+		const attributes = { layout: { type: 'grid' } };
+
+		expect( flexVariation.isActive( attributes ) ).toBe( false );
+		expect( gridVariation.isActive( attributes ) ).toBe( true );
+	} );
+} );

package/src/gallery/use-dynamic-gallery.js

@@ -200,7 +200,7 @@ export default function useDynamicGallery( {
 	// current post. Clearing the inner blocks removes the manually-added images:
 	// they're the gallery's image data, so there's nothing else to reset. The
 	// legacy `images`/`ids` attributes aren't touched — they're back-compat shims
-	// for the pre-innerBlocks format (see `deprecated.js`/`transforms.js`), empty
+	// for the pre-innerBlocks format (see `deprecated.jsx`/`transforms.js`), empty
 	// on any gallery reachable here.
 	function enableDynamicMode() {
 		// Batch the attribute change and the inner-block reset into a single

package/src/gallery/variations.js

@@ -1,5 +1,7 @@
 import { __ } from '@wordpress/i18n';
+import { gallery, grid } from '@wordpress/icons';
 import { ATTACHED_MEDIA } from './dynamic-source';
+import { isGalleryFlexLayout } from './shared';
 
 const variations = [
 	{
@@ -25,6 +27,34 @@ const variations = [
 		// beyond the post-attached source.
 		scope: [],
 	},
+	{
+		name: 'gallery-flex',
+		title: __( 'Gallery' ),
+		description: __( 'Arrange images in flexible rows.' ),
+		icon: gallery,
+		attributes: {
+			layout: {
+				type: 'flex',
+			},
+		},
+		isActive: ( blockAttributes ) =>
+			isGalleryFlexLayout( blockAttributes.layout ),
+		scope: [ 'transform' ],
+	},
+	{
+		name: 'gallery-grid',
+		title: __( 'Gallery Grid' ),
+		description: __( 'Arrange images in a grid.' ),
+		icon: grid,
+		attributes: {
+			layout: {
+				type: 'grid',
+			},
+		},
+		isActive: ( blockAttributes ) =>
+			blockAttributes.layout?.type === 'grid',
+		scope: [ 'transform' ],
+	},
 ];
 
 export default variations;

package/src/group/README.md

@@ -75,6 +75,6 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/group/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/group/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/group/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/heading/README.md

@@ -55,6 +55,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/heading/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/heading/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/heading/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/home-link/README.md

@@ -61,6 +61,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/home-link/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/home-link/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/home-link/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/html/README.md

@@ -44,6 +44,6 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/html/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/html/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/html/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/icon/README.md

@@ -59,6 +59,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/icon/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/icon/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/icon/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/image/README.md

@@ -98,6 +98,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/image/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/latest-comments/README.md

@@ -52,6 +52,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-comments/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-comments/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-comments/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/latest-posts/README.md

@@ -66,6 +66,6 @@ In post content, it is stored as a block comment:
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-posts/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-posts/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/latest-posts/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/list/README.md

@@ -66,6 +66,6 @@ This is a [**hybrid block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->

package/src/list-item/README.md

@@ -66,6 +66,6 @@ This is a [**static block**](https://developer.wordpress.org/block-editor/gettin
 ## Source
 
 - [block.json](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item/block.json) ([reference](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/))
-- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item/) — browse `edit.js`, `save.js`, `index.php`, and more.
+- [Source directory](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/list-item/) — browse the `edit` and `save` source files, `index.php`, and more.
 
 <!-- END TOKEN(Autogenerated block API docs) -->