@wordpress/block-library 8.5.0 → 8.6.0

package/src/page-list/edit.js

@@ -25,9 +25,9 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useMemo, useState, useEffect, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -53,7 +53,9 @@ function BlockContent( {
 	if ( ! hasResolvedPages ) {
 		return (
 			<div { ...blockProps }>
-				<Spinner />
+				<div className="wp-block-page-list__loading-indicator-container">
+					<Spinner className="wp-block-page-list__loading-indicator" />
+				</div>
 			</div>
 		);
 	}
@@ -111,29 +113,6 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinks( { onClick, disabled } ) {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
-	return (
-		<>
-			<BlockControls group="other">
-				<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-					{ __( 'Edit' ) }
-				</ToolbarButton>
-			</BlockControls>
-			{ isOpen && (
-				<ConvertToLinksModal
-					onClick={ onClick }
-					onClose={ closeModal }
-					disabled={ disabled }
-				/>
-			) }
-		</>
-	);
-}
-
 export default function PageListEdit( {
 	context,
 	clientId,
@@ -141,6 +120,9 @@ export default function PageListEdit( {
 	setAttributes,
 } ) {
 	const { parentPageID } = attributes;
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = useCallback( () => setOpen( true ), [] );
+	const closeModal = () => setOpen( false );
 
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -218,7 +200,11 @@ export default function PageListEdit( {
 			const hasChildren = pagesByParentId.has( page.id );
 			const pageProps = {
 				id: page.id,
-				label: page.title?.rendered,
+				label:
+					// translators: displayed when a page has an empty title.
+					page.title?.rendered?.trim() !== ''
+						? page.title?.rendered
+						: __( '(no title)' ),
 				title: page.title?.rendered,
 				link: page.url,
 				hasChildren,
@@ -261,34 +247,69 @@ export default function PageListEdit( {
 		parentPageID,
 	] );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/page-list-item' ],
-		renderAppender: false,
-		__unstableDisableDropZone: true,
-		templateLock: 'all',
-		onInput: NOOP,
-		onChange: NOOP,
-		value: blockList,
-	} );
-
-	const { isNested } = useSelect(
+	const {
+		isNested,
+		hasSelectedChild,
+		parentBlock,
+		hasDraggedChild,
+		isChildOfNavigation,
+	} = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			const {
+				getBlockParentsByBlockName,
+				hasSelectedInnerBlock,
+				getBlockRootClientId,
+				hasDraggedInnerBlock,
+			} = select( blockEditorStore );
 			const blockParents = getBlockParentsByBlockName(
 				clientId,
 				'core/navigation-submenu',
 				true
 			);
+			const navigationBlockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation',
+				true
+			);
 			return {
 				isNested: blockParents.length > 0,
+				isChildOfNavigation: navigationBlockParents.length > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
+				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
+				parentBlock: getBlockRootClientId( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/page-list-item' ],
+		renderAppender: false,
+		__unstableDisableDropZone: true,
+		templateLock: isChildOfNavigation ? false : 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
+	} );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( hasSelectedChild || hasDraggedChild ) {
+			openModal();
+			selectBlock( parentBlock );
+		}
+	}, [
+		hasSelectedChild,
+		hasDraggedChild,
+		parentBlock,
+		selectBlock,
+		openModal,
+	] );
+
 	useEffect( () => {
 		setAttributes( { isNested } );
-	}, [ isNested ] );
+	}, [ isNested, setAttributes ] );
 
 	return (
 		<>
@@ -323,10 +344,23 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinks
-					disabled={ ! hasResolvedPages }
-					onClick={ convertToNavigationLinks }
-				/>
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							title={ __( 'Edit' ) }
+							onClick={ openModal }
+						>
+							{ __( 'Edit' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isOpen && (
+						<ConvertToLinksModal
+							onClick={ convertToNavigationLinks }
+							onClose={ closeModal }
+							disabled={ ! hasResolvedPages }
+						/>
+					) }
+				</>
 			) }
 			<BlockContent
 				blockProps={ blockProps }

package/src/page-list/editor.scss

@@ -61,3 +61,9 @@
 .wp-block-page-list .components-notice {
 	margin-left: 0;
 }
+
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-page-list__loading-indicator-container {
+	padding: $grid-unit-10 $grid-unit-15;
+}

package/src/page-list-item/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +35,7 @@ function useFrontPageId() {
 }
 
 export default function PageListItemEdit( { context, attributes } ) {
-	const { id, label, link, hasChildren } = attributes;
+	const { id, label, link, hasChildren, title } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const frontPageId = useFrontPageId();
 
@@ -81,7 +80,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 					} ) }
 					href={ link }
 				>
-					{ decodeEntities( label ) }
+					{ decodeEntities( title ) }
 				</a>
 			) }
 			{ hasChildren && (

package/src/paragraph/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paragraph block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Paragraph block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Paragraph block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">Example text</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Paragraph block transforms to List block 1`] = `
+"<!-- wp:list -->
+<ul><!-- wp:list-item -->
+<li>Example text</li>
+<!-- /wp:list-item --></ul>
+<!-- /wp:list -->"
+`;
+
+exports[`Paragraph block transforms to Preformatted block 1`] = `
+"<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Example text</pre>
+<!-- /wp:preformatted -->"
+`;
+
+exports[`Paragraph block transforms to Pullquote block 1`] = `
+"<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>Example text</p></blockquote></figure>
+<!-- /wp:pullquote -->"
+`;
+
+exports[`Paragraph block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->"
+`;
+
+exports[`Paragraph block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Example text</pre>
+<!-- /wp:verse -->"
+`;

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

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Paragraph';
+const initialHtml = `
+<!-- wp:paragraph -->
+<p>Example text</p>
+<!-- /wp:paragraph -->`;
+
+// NOTE: Paragraph block can be transformed to Buttons block in web,
+// however this transform is not supported in the native version.
+const transformsWithInnerBlocks = [ 'List', 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Heading',
+	'Preformatted',
+	'Pullquote',
+	'Verse',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/post-content/edit.js

@@ -58,8 +58,12 @@ function EditableContent( { context = {} } ) {
 
 function Content( props ) {
 	const { context: { queryId, postType, postId } = {} } = props;
-	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
+	if ( userCanEdit === undefined ) {
+		return null;
+	}
+
+	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const isEditable = userCanEdit && ! isDescendentOfQueryLoop;
 
 	return isEditable ? (

package/src/post-excerpt/index.php

@@ -84,8 +84,7 @@ add_action( 'init', 'register_block_core_post_excerpt' );
  * Returns 100 because 100 is the max length in the setting.
  */
 if ( is_admin() ||
-	defined( 'REST_REQUEST' ) ||
-	'REST_REQUEST' ) {
+	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 	add_filter(
 		'excerpt_length',
 		function() {

package/src/post-featured-image/dimension-controls.js

@@ -96,10 +96,6 @@ const DimensionControls = ( {
 							label: __( 'Square' ),
 							value: '1',
 						},
-						{
-							label: __( '16:10' ),
-							value: '16/10',
-						},
 						{
 							label: __( '16:9' ),
 							value: '16/9',
@@ -112,10 +108,6 @@ const DimensionControls = ( {
 							label: __( '3:2' ),
 							value: '3/2',
 						},
-						{
-							label: __( '10:16' ),
-							value: '10/16',
-						},
 						{
 							label: __( '9:16' ),
 							value: '9/16',

package/src/post-featured-image/edit.js

@@ -139,7 +139,7 @@ export default function PostFeaturedImageEdit( {
 				imageSizeOptions={ imageSizeOptions }
 			/>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={

package/src/post-featured-image/style.scss

@@ -3,6 +3,7 @@
 	margin-right: 0;
 	a {
 		display: block;
+		height: 100%;
 	}
 	img {
 		max-width: 100%;

package/src/preformatted/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preformatted block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Some <em>preformatted</em> text...<br />And more!</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Preformatted block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Preformatted block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Preformatted block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Some <em>preformatted</em> text...<br />And more!</p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Preformatted';
+const initialHtml = `
+<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>
+<!-- /wp:preformatted -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/pullquote/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -435,11 +434,8 @@ const v2 = {
 			// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
 			// as there is no expectation that themes create classes that set border colors.
 		} else if ( mainColor ) {
-			const colors = get(
-				select( blockEditorStore ).getSettings(),
-				[ 'colors' ],
-				[]
-			);
+			const colors =
+				select( blockEditorStore ).getSettings().colors ?? [];
 			const colorObject = getColorObjectByAttributeValues(
 				colors,
 				mainColor

package/src/pullquote/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pullquote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Pullquote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Pullquote block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">One of the hardest things to do in technology is disrupt yourself.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Matt Mullenweg</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Pullquote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Matt Mullenweg</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Pullquote block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph --><cite>Matt Mullenweg</cite></blockquote>
+<!-- /wp:quote -->"
+`;

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

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Pullquote';
+const initialHtml = `
+<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/query/edit/query-placeholder.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations } from '../utils';
+import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -30,6 +30,10 @@ export default function QueryPlaceholder( {
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
 
 	const { blockType, allVariations, hasPatterns } = useSelect(
 		( select ) => {
@@ -37,15 +41,16 @@ export default function QueryPlaceholder( {
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-
 			return {
 				blockType: getBlockType( name ),
 				allVariations: getBlockVariations( name ),
-				hasPatterns: !! getPatternsByBlockTypes( name, rootClientId )
-					.length,
+				hasPatterns: !! getPatternsByBlockTypes(
+					blockNameForPatterns,
+					rootClientId
+				).length,
 			};
 		},
-		[ name, clientId ]
+		[ name, blockNameForPatterns, clientId ]
 	);
 
 	const matchingVariation = getMatchingVariation( attributes, allVariations );

package/src/query/test/utils.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo } from '../utils';
+import { getEntitiesInfo, getValueFromObjectPath } from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -29,4 +29,36 @@ describe( 'Query block utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getValueFromObjectPath', () => {
+		it( 'should return undefined when path is empty', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, '' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when path does not exist', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'baz' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when a deeper path does not exist', () => {
+			const object = { foo: { bar: 'baz' } };
+			const result = getValueFromObjectPath( object, 'foo.test' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return the corresponding value of a single level path', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'foo' );
+			expect( result ).toBe( 'bar' );
+		} );
+
+		it( 'should return the value of a deeper path', () => {
+			const object = { foo: { bar: { baz: 'test' } } };
+			const result = getValueFromObjectPath( object, 'foo.bar.baz' );
+			expect( result ).toBe( 'test' );
+		} );
+	} );
 } );