@wordpress/block-library 7.17.0 → 7.19.0

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useInnerBlocksProps } from '@wordpress/block-editor';
-import { Disabled, Spinner } from '@wordpress/components';
+import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
@@ -11,7 +11,6 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
-import useCreateNavigationMenu from './use-create-navigation-menu';
 
 const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = [
@@ -38,9 +37,8 @@ const ALLOWED_BLOCKS = [
 
 export default function UnsavedInnerBlocks( {
 	blocks,
-	clientId,
-	hasSavedUnsavedInnerBlocks,
-	onSave,
+	createNavigationMenu,
+
 	hasSelection,
 } ) {
 	const originalBlocks = useRef();
@@ -75,7 +73,6 @@ export default function UnsavedInnerBlocks( {
 	// The block will be disabled in a block preview, use this as a way of
 	// avoiding the side-effects of this component for block previews.
 	const isDisabled = useContext( Disabled.Context );
-	const savingLock = useRef( false );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
@@ -121,9 +118,6 @@ export default function UnsavedInnerBlocks( {
 
 	const { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();
 
-	const { create: createNavigationMenu } =
-		useCreateNavigationMenu( clientId );
-
 	// Automatically save the uncontrolled blocks.
 	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
@@ -140,9 +134,7 @@ export default function UnsavedInnerBlocks( {
 		// which is an indication they want to start editing.
 		if (
 			isDisabled ||
-			hasSavedUnsavedInnerBlocks ||
 			isSaving ||
-			savingLock.current ||
 			! hasResolvedDraftNavigationMenus ||
 			! hasResolvedNavigationMenus ||
 			! hasSelection ||
@@ -151,11 +143,7 @@ export default function UnsavedInnerBlocks( {
 			return;
 		}
 
-		savingLock.current = true;
-		createNavigationMenu( null, blocks ).then( ( menu ) => {
-			onSave( menu );
-			savingLock.current = false;
-		} );
+		createNavigationMenu( null, blocks );
 	}, [
 		isDisabled,
 		isSaving,
@@ -170,10 +158,5 @@ export default function UnsavedInnerBlocks( {
 
 	const Wrapper = isSaving ? Disabled : 'div';
 
-	return (
-		<>
-			<Wrapper { ...innerBlocksProps } />
-			{ isSaving && <Spinner /> }
-		</>
-	);
+	return <Wrapper { ...innerBlocksProps } />;
 }

package/src/navigation/editor.scss

@@ -261,10 +261,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: 0;
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -544,6 +540,13 @@ body.editor-styles-wrapper
 	color: inherit;
 }
 
+.components-heading.wp-block-navigation-off-canvas-editor__title {
+	margin: 0;
+}
+.wp-block-navigation-off-canvas-editor__header {
+	margin-bottom: $grid-unit-10;
+}
+
 // Customize the mobile editing.
 // This can be revisited in the future, but for now, inherit design from the parent.
 .is-menu-open .wp-block-navigation__responsive-container-content * {
@@ -567,6 +570,10 @@ body.editor-styles-wrapper
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+	margin-top: 0;
+}
+
 @keyframes fadeouthalf {
 	0% {
 		opacity: 1;
@@ -582,6 +589,13 @@ body.editor-styles-wrapper
 	margin-bottom: $grid-unit-20;
 }
 
+// increased specificity to override button variant
+// for the manage menus button in the advanced area
+// of the navigation block
+.components-button.is-link.wp-block-navigation-manage-menus-button {
+	margin-bottom: $grid-unit-20;
+}
+
 .wp-block-navigation__overlay-menu-preview {
 	display: flex;
 	align-items: center;
@@ -625,6 +639,17 @@ body.editor-styles-wrapper
 	width: 100%;
 }
 
+.wp-block-navigation__navigation-selector-button__icon {
+	flex: 0 0 auto;
+}
+
+.wp-block-navigation__navigation-selector-button__label {
+	flex: 0 1 auto;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .wp-block-navigation__navigation-selector-button--createnew {
 	border: 1px solid;
 	margin-bottom: $grid-unit-20;

package/src/navigation/style.scss

@@ -359,7 +359,9 @@ button.wp-block-navigation-item__content {
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
-:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 	padding: 0.5em 1em;
 }
 
@@ -653,6 +655,14 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
+	// When set to collapse into a text button, it should inherit the parent font.
+	// This needs specificity to override inherited properties by the button element and component.
+	&.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open {
+		font-family: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+	}
+
 	&:not(.always-shown) {
 		@include break-small {
 			display: none;
@@ -666,6 +676,14 @@ button.wp-block-navigation-item__content {
 	top: 0;
 	right: 0;
 	z-index: 2; // Needs to be above the modal z index itself.
+
+	// When set to collapse into a text button, it should inherit the parent font.
+	// This needs specificity to override inherited properties by the button element and component.
+	&.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
+		font-family: inherit;
+		font-weight: inherit;
+		font-size: inherit;
+	}
 }
 
 // The menu adds wrapping containers.

package/src/navigation-link/edit.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, unescape } from 'lodash';
+import escapeHtml from 'escape-html';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -262,8 +263,8 @@ export const updateNavigationLinkBlockAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escape( newLabel )
-		: originalLabel || escape( newUrlWithoutHttp );
+		? escapeHtml( newLabel )
+		: originalLabel || escapeHtml( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -715,6 +716,14 @@ export default function NavigationLinkEdit( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
+					<TextControl
+						value={ url || '' }
+						onChange={ ( urlValue ) => {
+							setAttributes( { url: urlValue } );
+						} }
+						label={ __( 'URL' ) }
+						autoComplete="off"
+					/>
 					<TextareaControl
 						value={ description || '' }
 						onChange={ ( descriptionValue ) => {
@@ -846,7 +855,7 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/navigation-link/editor.scss

@@ -1,3 +1,11 @@
+/**
+ * Appender
+ */
+
+.wp-block-navigation .block-list-appender {
+	position: relative;
+}
+
 /**
  * Submenus.
  */

package/src/navigation-submenu/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, without } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -248,8 +248,8 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+		? escapeHtml( title )
+		: originalLabel || escapeHtml( normalizedURL );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -486,7 +486,9 @@ export default function NavigationSubmenuEdit( {
 	const innerBlocksColors = getColors( context, true );
 
 	const allowedBlocks = isAtMaxNesting
-		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		? ALLOWED_BLOCKS.filter(
+				( blockName ) => blockName !== 'core/navigation-submenu'
+		  )
 		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
@@ -631,7 +633,7 @@ export default function NavigationSubmenuEdit( {
 					}
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/page-list/edit.js

@@ -52,50 +52,64 @@ export default function PageListEdit( { context, clientId } ) {
 		style: { ...context.style?.color },
 	} );
 
-	return (
-		<>
-			{ allowConvertToLinks && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
-				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
-				/>
-			) }
-			{ ! hasResolvedPages && (
+	const getBlockContent = () => {
+		if ( ! hasResolvedPages ) {
+			return (
 				<div { ...blockProps }>
 					<Spinner />
 				</div>
-			) }
+			);
+		}
 
-			{ hasResolvedPages && totalPages === null && (
+		if ( totalPages === null ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'warning' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
+			);
+		}
 
-			{ totalPages === 0 && (
+		if ( totalPages === 0 ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'info' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
-			{ totalPages > 0 && (
+			);
+		}
+
+		if ( totalPages > 0 ) {
+			return (
 				<ul { ...blockProps }>
 					<PageItems
 						context={ context }
 						pagesByParentId={ pagesByParentId }
 					/>
 				</ul>
+			);
+		}
+	};
+
+	return (
+		<>
+			{ allowConvertToLinks && (
+				<BlockControls group="other">
+					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</BlockControls>
 			) }
+			{ allowConvertToLinks && isOpen && (
+				<ConvertToLinksModal
+					onClose={ closeModal }
+					clientId={ clientId }
+				/>
+			) }
+
+			{ getBlockContent() }
 		</>
 	);
 }

package/src/post-author/edit.js

@@ -13,11 +13,23 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, SelectControl, ToggleControl } from '@wordpress/components';
+import {
+	ComboboxControl,
+	PanelBody,
+	SelectControl,
+	ToggleControl,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
+const minimumUsersForCombobox = 25;
+
+const AUTHORS_QUERY = {
+	who: 'authors',
+	per_page: 100,
+};
+
 function PostAuthorEdit( {
 	isSelected,
 	context: { postType, postId, queryId },
@@ -38,7 +50,7 @@ function PostAuthorEdit( {
 			return {
 				authorId: _authorId,
 				authorDetails: _authorId ? getUser( _authorId ) : null,
-				authors: getUsers( { who: 'authors' } ),
+				authors: getUsers( AUTHORS_QUERY ),
 			};
 		},
 		[ postType, postId ]
@@ -65,34 +77,46 @@ function PostAuthorEdit( {
 		} ),
 	} );
 
+	const authorOptions = authors?.length
+		? authors.map( ( { id, name } ) => {
+				return {
+					value: id,
+					label: name,
+				};
+		  } )
+		: [];
+
+	const handleSelect = ( nextAuthorId ) => {
+		editEntityRecord( 'postType', postType, postId, {
+			author: nextAuthorId,
+		} );
+	};
+
+	const showCombobox = authorOptions.length >= minimumUsersForCombobox;
+
 	return (
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					{ !! postId &&
 						! isDescendentOfQueryLoop &&
-						!! authors?.length && (
+						authorOptions.length &&
+						( ( showCombobox && (
+							<ComboboxControl
+								label={ __( 'Author' ) }
+								options={ authorOptions }
+								value={ authorId }
+								onChange={ handleSelect }
+								allowReset={ false }
+							/>
+						) ) || (
 							<SelectControl
 								label={ __( 'Author' ) }
 								value={ authorId }
-								options={ authors.map( ( { id, name } ) => {
-									return {
-										value: id,
-										label: name,
-									};
-								} ) }
-								onChange={ ( nextAuthorId ) => {
-									editEntityRecord(
-										'postType',
-										postType,
-										postId,
-										{
-											author: nextAuthorId,
-										}
-									);
-								} }
+								options={ authorOptions }
+								onChange={ handleSelect }
 							/>
-						) }
+						) ) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }

package/src/post-comments-count/block.json

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-comments-form/block.json

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-comments-form/style.scss

@@ -1,4 +1,7 @@
 .wp-block-post-comments-form {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&[style*="font-weight"] :where(.comment-reply-title) {
 		font-weight: inherit;
 	}

package/src/post-comments-link/block.json

@@ -23,6 +23,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-content/block.json

@@ -11,6 +11,9 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalLayout": true,
+		"dimensions": {
+			"minHeight": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-content/edit.js

@@ -84,8 +84,8 @@ function Content( props ) {
 	);
 }
 
-function Placeholder() {
-	const blockProps = useBlockProps();
+function Placeholder( { layoutClassNames } ) {
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
 		<div { ...blockProps }>
 			<p>
@@ -118,7 +118,11 @@ function RecursionError() {
 	);
 }
 
-export default function PostContentEdit( { context, attributes } ) {
+export default function PostContentEdit( {
+	context,
+	attributes,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -132,7 +136,7 @@ export default function PostContentEdit( { context, attributes } ) {
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (
-				<Placeholder />
+				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }
 		</RecursionProvider>
 	);

package/src/pullquote/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,7 +140,7 @@ const v4 = {
 			className,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -206,7 +206,7 @@ const v4 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -270,7 +270,7 @@ const v3 = {
 			figureStyle,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -345,7 +345,7 @@ const v3 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -416,7 +416,7 @@ const v2 = {
 			citation,
 			className,
 		} = attributes;
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClass, figureStyles;
 		// Is solid color style
@@ -484,7 +484,7 @@ const v2 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style = {};
 
 		if ( customMainColor ) {

package/src/query/editor.scss

@@ -3,7 +3,7 @@
 }
 
 .wp-block-query__create-new-link {
-	padding: 0 $grid-unit-20 $grid-unit-20 56px;
+	padding: 0 $grid-unit-20 $grid-unit-20 52px;
 }
 
 .block-library-query__pattern-selection-content .block-editor-block-patterns-list {

package/src/query-pagination/style.scss

@@ -18,7 +18,7 @@ $pagination-margin: 0.5em;
 	// which is important when it's the only block displayed
 	// and the block has a "space-between" justification.
 	&.is-content-justification-space-between {
-		> .wp-block-query-pagination-next:last-child {
+		> .wp-block-query-pagination-next:last-of-type {
 			margin-inline-start: auto;
 		}
 		> .wp-block-query-pagination-previous:first-child {

package/src/read-more/index.php

@@ -19,15 +19,22 @@ function render_block_core_read_more( $attributes, $content, $block ) {
 	}
 
 	$post_ID            = $block->context['postId'];
+	$post_title         = get_the_title( $post_ID );
+	$screen_reader_text = sprintf(
+		/* translators: %s is either the post title or post ID to describe the link for screen readers. */
+		__( ': %s' ),
+		'' !== $post_title ? $post_title : __( 'untitled post ' ) . $post_ID
+	);
 	$justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) );
 	$more_text          = ! empty( $attributes['content'] ) ? wp_kses_post( $attributes['content'] ) : __( 'Read more' );
 	return sprintf(
-		'<a %1s href="%2s" target="%3s">%4s</a>',
+		'<a %1s href="%2s" target="%3s">%4s<span class="screen-reader-text">%5s</span></a>',
 		$wrapper_attributes,
 		get_the_permalink( $post_ID ),
 		esc_attr( $attributes['linkTarget'] ),
-		$more_text
+		$more_text,
+		$screen_reader_text
 	);
 }
 

package/src/search/edit.js

@@ -363,7 +363,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							style={ { maxWidth: 80 } }
+							__unstableInputWidth={ '80px' }
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>