@wordpress/block-library 7.19.0 → 8.0.0

package/src/index.js

@@ -67,6 +67,7 @@ import * as navigationSubmenu from './navigation-submenu';
 import * as nextpage from './nextpage';
 import * as pattern from './pattern';
 import * as pageList from './page-list';
+import * as pageListItem from './page-list-item';
 import * as paragraph from './paragraph';
 import * as postAuthor from './post-author';
 import * as postAuthorName from './post-author-name';
@@ -155,6 +156,7 @@ const getAllBlocks = () =>
 		more,
 		nextpage,
 		pageList,
+		pageListItem,
 		pattern,
 		preformatted,
 		pullquote,

package/src/latest-comments/edit.js

@@ -56,6 +56,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of comments' ) }
 						value={ commentsToShow }
 						onChange={ ( value ) =>

package/src/latest-posts/edit.js

@@ -234,6 +234,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 				{ displayPostContent &&
 					displayPostContentRadio === 'excerpt' && (
 						<RangeControl
+							__nextHasNoMarginBottom
 							label={ __( 'Max number of words in excerpt' ) }
 							value={ excerptLength }
 							onChange={ ( value ) =>
@@ -355,6 +356,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 				{ postLayout === 'grid' && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Columns' ) }
 						value={ columns }
 						onChange={ ( value ) =>

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

@@ -63,16 +63,18 @@ describe( 'List block', () => {
 		<li></li><!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 1/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 1/
+		);
 		fireEvent.press( listItemBlock );
 
 		const listItemField =
@@ -109,25 +111,25 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 2/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select second level list
-		const secondNestedLevelBlock = within(
+		const [ secondNestedLevelBlock ] = within(
 			firstNestedLevelBlock
-		).getByLabelText( /List Block\. Row 1/ );
+		).getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( secondNestedLevelBlock );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -143,20 +145,22 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select Secont List Item block
-		const listItemBlock = getByLabelText( /List item Block\. Row 2/ );
+		const [ listItemBlock ] = screen.getAllByLabelText(
+			/List item Block\. Row 2/
+		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const indentButton = getByLabelText( 'Indent' );
+		const indentButton = screen.getByLabelText( 'Indent' );
 		fireEvent.press( indentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -173,33 +177,33 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const firstNestedLevelBlock = within( listBlock ).getByLabelText(
+		const [ firstNestedLevelBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( firstNestedLevelBlock );
 
 		// Select Inner block List
-		const innerBlockList = within( firstNestedLevelBlock ).getByLabelText(
-			/List Block\. Row 1/
-		);
+		const [ innerBlockList ] = within(
+			firstNestedLevelBlock
+		).getAllByLabelText( /List Block\. Row 1/ );
 
 		// Select nested List Item block
-		const listItemBlock = within( innerBlockList ).getByLabelText(
+		const [ listItemBlock ] = within( innerBlockList ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
 
 		// Update indentation
-		const outdentButton = getByLabelText( 'Outdent' );
+		const outdentButton = screen.getByLabelText( 'Outdent' );
 		fireEvent.press( outdentButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -218,16 +222,16 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -246,27 +250,29 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = getByLabelText( /Reverse list numbering\. Off/ );
+		const reverseButton = screen.getByLabelText(
+			/Reverse list numbering\. Off/
+		);
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -285,27 +291,27 @@ describe( 'List block', () => {
 		<!-- /wp:list-item --></ul>
 		<!-- /wp:list -->`;
 
-		const { getByLabelText, getByTestId } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select List block
-		const listBlock = getByLabelText( /List Block\. Row 1/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 1/ );
 		fireEvent.press( listBlock );
 
 		// Update to ordered list
-		const orderedButton = getByLabelText( 'Ordered' );
+		const orderedButton = screen.getByLabelText( 'Ordered' );
 		fireEvent.press( orderedButton );
 
 		// Set order to reverse
 
 		// Open block settings
-		fireEvent.press( getByLabelText( 'Open Settings' ) );
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
 		await waitFor(
-			() => getByTestId( 'block-settings-modal' ).props.isVisible
+			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const startValueButton = getByLabelText( /Start value\. Empty/ );
+		const startValueButton = screen.getByLabelText( /Start value\. Empty/ );
 		fireEvent.press( startValueButton );
 		const startValueInput =
 			within( startValueButton ).getByDisplayValue( '' );
@@ -328,11 +334,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -361,7 +367,7 @@ describe( 'List block', () => {
 		` );
 	} );
 
-	it( 'unwraps list items when attempting to merge with non-list block', async () => {
+	it( 'unwraps first item when attempting to merge with non-list block', async () => {
 		const initialHtml = `<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
@@ -376,11 +382,11 @@ describe( 'List block', () => {
 		} );
 
 		// Select List block
-		const listBlock = screen.getByLabelText( /List Block\. Row 2/ );
+		const [ listBlock ] = screen.getAllByLabelText( /List Block\. Row 2/ );
 		fireEvent.press( listBlock );
 
 		// Select List Item block
-		const listItemBlock = within( listBlock ).getByLabelText(
+		const [ listItemBlock ] = within( listBlock ).getAllByLabelText(
 			/List item Block\. Row 1/
 		);
 		fireEvent.press( listItemBlock );
@@ -400,14 +406,16 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-
+		
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-
-		<!-- wp:paragraph -->
-		<p>Two</p>
-		<!-- /wp:paragraph -->"
+		
+		<!-- wp:list -->
+		<ul><!-- wp:list-item -->
+		<li>Two</li>
+		<!-- /wp:list-item --></ul>
+		<!-- /wp:list -->"
 	` );
 	} );
 } );

package/src/list/transforms.js

@@ -114,17 +114,6 @@ const transforms = {
 				);
 			},
 		} ) ),
-		{
-			type: 'block',
-			blocks: [ '*' ],
-			transform: ( _attributes, childBlocks ) => {
-				return getListContentFlat( childBlocks ).map( ( content ) =>
-					createBlock( 'core/paragraph', {
-						content,
-					} )
-				);
-			},
-		},
 	],
 };
 

package/src/list/utils.js

@@ -56,7 +56,8 @@ export function createListBlockFromDOMElement( listElement ) {
 }
 
 export function migrateToListV2( attributes ) {
-	const { values, start, reversed, ordered, type } = attributes;
+	const { values, start, reversed, ordered, type, ...otherAttributes } =
+		attributes;
 
 	const list = document.createElement( ordered ? 'ol' : 'ul' );
 	list.innerHTML = values;
@@ -72,5 +73,8 @@ export function migrateToListV2( attributes ) {
 
 	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	return [ listBlock.attributes, listBlock.innerBlocks ];
+	return [
+		{ ...otherAttributes, ...listBlock.attributes },
+		listBlock.innerBlocks,
+	];
 }

package/src/list-item/index.js

@@ -10,6 +10,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -25,6 +26,7 @@ export const settings = {
 			content: attributes.content + attributesToMerge.content,
 		};
 	},
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/list-item/transforms.js

@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/paragraph' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/paragraph', attributes ),
+		},
+	],
+};
+
+export default transforms;

package/src/list-item/utils.js

@@ -8,6 +8,7 @@ import { createBlock, switchToBlockType } from '@wordpress/blocks';
  */
 import { name as listItemName } from './block.json';
 import { name as listName } from '../list/block.json';
+import { name as paragraphName } from '../paragraph/block.json';
 
 export function createListItem( listItemAttributes, listAttributes, children ) {
 	return createBlock(
@@ -19,6 +20,14 @@ export function createListItem( listItemAttributes, listAttributes, children ) {
 	);
 }
 
+function convertBlockToList( block ) {
+	const list = switchToBlockType( block, listName );
+	if ( list ) return list;
+	const paragraph = switchToBlockType( block, paragraphName );
+	if ( paragraph ) return switchToBlockType( paragraph, listName );
+	return null;
+}
+
 export function convertToListItems( blocks ) {
 	const listItems = [];
 
@@ -27,7 +36,7 @@ export function convertToListItems( blocks ) {
 			listItems.push( block );
 		} else if ( block.name === listName ) {
 			listItems.push( ...block.innerBlocks );
-		} else if ( ( block = switchToBlockType( block, listName ) ) ) {
+		} else if ( ( block = convertBlockToList( block ) ) ) {
 			for ( const { innerBlocks } of block ) {
 				listItems.push( ...innerBlocks );
 			}

package/src/media-text/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { map, filter } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -199,7 +199,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		setAttributes( {
 			mediaWidth: applyWidthConstraints( width ),
 		} );
-		setTemporaryMediaWidth( applyWidthConstraints( width ) );
+		setTemporaryMediaWidth( null );
 	};
 
 	const classNames = classnames( {
@@ -226,7 +226,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	};
 
 	const imageSizeOptions = map(
-		filter( imageSizes, ( { slug } ) =>
+		imageSizes.filter( ( { slug } ) =>
 			getImageSourceUrlBySizeSlug( image, slug )
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
@@ -268,6 +268,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ imageFill && mediaUrl && mediaType === 'image' && (
 				<FocalPointPicker
+					__nextHasNoMarginBottom
 					label={ __( 'Focal point picker' ) }
 					url={ mediaUrl }
 					value={ focalPoint }
@@ -306,6 +307,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			) }
 			{ mediaUrl && (
 				<RangeControl
+					__nextHasNoMarginBottom
 					label={ __( 'Media width' ) }
 					value={ temporaryMediaWidth || mediaWidth }
 					onChange={ commitWidthChange }

package/src/missing/test/edit-integration.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { initializeEditor, fireEvent, waitFor, within } from 'test/helpers';
+import { initializeEditor, fireEvent, within } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -40,12 +40,12 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 			 <!-- /wp:table -->`;
-		const { getByLabelText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByLabelText( /Unsupported Block\. Row 1/ )
+		const [ missingBlock ] = await screen.findAllByLabelText(
+			/Unsupported Block\. Row 1/
 		);
 
 		const translatedTableTitle =
@@ -58,24 +58,22 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 		 <!-- /wp:table -->`;
-		const { getByLabelText, getByText } = await initializeEditor( {
+		const screen = await initializeEditor( {
 			initialHtml,
 		} );
 
-		const missingBlock = await waitFor( () =>
-			getByLabelText( /Unsupported Block\. Row 1/ )
+		const [ missingBlock ] = await screen.findAllByLabelText(
+			/Unsupported Block\. Row 1/
 		);
 
 		fireEvent.press( missingBlock );
 
-		const helpButton = await waitFor( () =>
-			getByLabelText( 'Help button' )
-		);
+		const [ helpButton ] = await screen.findAllByLabelText( 'Help button' );
 
 		fireEvent.press( helpButton );
 
-		const bottomSheetTitle = await waitFor( () =>
-			getByText( '«Tabla» no es totalmente compatible' )
+		const bottomSheetTitle = await screen.findByText(
+			'«Tabla» no es totalmente compatible'
 		);
 
 		expect( bottomSheetTitle ).toBeDefined();

package/src/navigation/edit/are-blocks-dirty.js

@@ -0,0 +1,51 @@
+export function areBlocksDirty( originalBlocks, blocks ) {
+	return ! isDeepEqual( originalBlocks, blocks, ( prop, x ) => {
+		// Skip inner blocks of page list during comparison as they
+		// are **always** controlled and may be updated async due to
+		// syncing with entity records. Left unchecked this would
+		// inadvertently trigger the dirty state.
+		if ( x?.name === 'core/page-list' && prop === 'innerBlocks' ) {
+			return true;
+		}
+	} );
+}
+
+/**
+ * Conditionally compares two candidates for deep equality.
+ * Provides an option to skip a given property of an object during comparison.
+ *
+ * @param {*}                  x          1st candidate for comparison
+ * @param {*}                  y          2nd candidate for comparison
+ * @param {Function|undefined} shouldSkip a function which can be used to skip a given property of an object.
+ * @return {boolean}                      whether the two candidates are deeply equal.
+ */
+const isDeepEqual = ( x, y, shouldSkip ) => {
+	if ( x === y ) {
+		return true;
+	} else if (
+		typeof x === 'object' &&
+		x !== null &&
+		x !== undefined &&
+		typeof y === 'object' &&
+		y !== null &&
+		y !== undefined
+	) {
+		if ( Object.keys( x ).length !== Object.keys( y ).length ) return false;
+
+		for ( const prop in x ) {
+			if ( y.hasOwnProperty( prop ) ) {
+				// Afford skipping a given property of an object.
+				if ( shouldSkip && shouldSkip( prop, x ) ) {
+					return true;
+				}
+
+				if ( ! isDeepEqual( x[ prop ], y[ prop ], shouldSkip ) )
+					return false;
+			} else return false;
+		}
+
+		return true;
+	}
+
+	return false;
+};