@wordpress/block-library 8.4.0 → 8.6.0

package/src/navigation-submenu/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes ) {
+function block_core_navigation_submenu_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -250,6 +249,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
+		$colors      = block_core_navigation_submenu_build_css_colors( $block->context, $attributes, $has_submenu );
+		$classes     = array_merge(
+			array( 'wp-block-navigation__submenu-container' ),
+			$colors['css_classes']
+		);
+		$css_classes = trim( implode( ' ', $classes ) );
+
+		$style_attribute = $colors['inline_styles'];
+
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
 			$inner_blocks_html .= $inner_block->render();
@@ -263,10 +271,19 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html = $tag_processor->get_updated_html();
 		}
 
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $css_classes,
+				'style' => $style_attribute,
+			)
+		);
+
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
+			'<ul %s>%s</ul>',
+			$wrapper_attributes,
 			$inner_blocks_html
 		);
+
 	}
 
 	$html .= '</li>';

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Break 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:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Page Break block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:group -->"
+`;

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

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Page Break';
+const initialHtml = `
+<!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...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/page-list/convert-to-links-modal.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const convertDescription = __(
+	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+);
+
+export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
+	return (
+		<Modal
+			onRequestClose={ onClose }
+			title={ __( 'Edit this menu' ) }
+			className={ 'wp-block-page-list-modal' }
+			aria={ {
+				describedby: 'wp-block-page-list-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-page-list-modal__description' }>
+				{ convertDescription }
+			</p>
+			<div className="wp-block-page-list-modal-buttons">
+				<Button variant="tertiary" onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					disabled={ disabled }
+					onClick={ onClick }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+}

package/src/page-list/edit.js

@@ -23,27 +23,25 @@ import {
 	Notice,
 	ComboboxControl,
 	Button,
-	Modal,
 } 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
  */
 import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
+import {
+	convertDescription,
+	ConvertToLinksModal,
+} from './convert-to-links-modal';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 const NOOP = () => {};
-
-const convertDescription = __(
-	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
-);
-
 function BlockContent( {
 	blockProps,
 	innerBlocksProps,
@@ -55,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>
 		);
 	}
@@ -113,48 +113,6 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinksModal( { 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 && (
-				<Modal
-					onRequestClose={ closeModal }
-					title={ __( 'Edit this menu' ) }
-					className={ 'wp-block-page-list-modal' }
-					aria={ {
-						describedby: 'wp-block-page-list-modal__description',
-					} }
-				>
-					<p id={ 'wp-block-page-list-modal__description' }>
-						{ convertDescription }
-					</p>
-					<div className="wp-block-page-list-modal-buttons">
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							disabled={ disabled }
-							onClick={ onClick }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					</div>
-				</Modal>
-			) }
-		</>
-	);
-}
-
 export default function PageListEdit( {
 	context,
 	clientId,
@@ -162,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',
@@ -239,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,
@@ -282,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 (
 		<>
@@ -344,10 +344,23 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinksModal
-					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/edit.js

@@ -110,6 +110,7 @@ function ParagraphBlock( {
 						panelId={ clientId }
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
 							onChange={ () =>

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-author/edit.js

@@ -120,6 +120,7 @@ function PostAuthorEdit( {
 							/>
 						) ) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }
 						onChange={ () =>
@@ -140,6 +141,7 @@ function PostAuthorEdit( {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show bio' ) }
 						checked={ showBio }
 						onChange={ () =>
@@ -147,12 +149,14 @@ function PostAuthorEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link author name to author page' ) }
 						checked={ isLink }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/post-author-name/edit.js

@@ -71,12 +71,14 @@ function PostAuthorNameEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

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-date/edit.js

@@ -150,6 +150,7 @@ export default function PostDateEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -163,6 +164,7 @@ export default function PostDateEdit( {
 						checked={ isLink }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display last modified date' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

package/src/post-excerpt/edit.js

@@ -194,6 +194,7 @@ export default function PostExcerptEditor( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }
 						onChange={ ( newShowMoreOnNewLine ) =>

package/src/post-excerpt/editor.scss

@@ -1,5 +1,5 @@
 .wp-block-post-excerpt {
 	.wp-block-post-excerpt__excerpt.is-inline {
-		display: inline-block;
+		display: inline;
 	}
 }

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',