@wordpress/block-library 8.31.0 → 8.33.0

package/src/navigation-submenu/edit.js

@@ -28,7 +28,6 @@ import {
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
-import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { useResourcePermissions } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
@@ -139,9 +138,14 @@ export default function NavigationSubmenuEdit( {
 
 	const { showSubmenuIcon, maxNestingLevel, openSubmenusOnClick } = context;
 
-	const { __unstableMarkNextChangeAsNotPersistent, replaceBlock } =
-		useDispatch( blockEditorStore );
+	const {
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlock,
+		selectBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
+	// Store what element opened the popover, so we know where to return focus to (toolbar button vs navigation link text)
+	const [ openedBy, setOpenedBy ] = useState( null );
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
@@ -241,9 +245,6 @@ export default function NavigationSubmenuEdit( {
 			) {
 				// Focus and select the label text.
 				selectLabelText();
-			} else {
-				// Focus it (but do not select).
-				placeCaretAtHorizontalEdge( ref.current, true );
 			}
 		}
 	}, [ url ] );
@@ -283,7 +284,10 @@ export default function NavigationSubmenuEdit( {
 			// as it shares the CMD+K shortcut.
 			// See https://github.com/WordPress/gutenberg/pull/59845.
 			event.preventDefault();
+			// If we don't stop propogation, this event bubbles up to the parent submenu item
+			event.stopPropagation();
 			setIsLinkOpen( true );
+			setOpenedBy( ref.current );
 		}
 	}
 
@@ -370,7 +374,10 @@ export default function NavigationSubmenuEdit( {
 							icon={ linkIcon }
 							title={ __( 'Link' ) }
 							shortcut={ displayShortcut.primary( 'k' ) }
-							onClick={ () => setIsLinkOpen( true ) }
+							onClick={ ( event ) => {
+								setIsLinkOpen( true );
+								setOpenedBy( event.currentTarget );
+							} }
 						/>
 					) }
 
@@ -389,20 +396,22 @@ export default function NavigationSubmenuEdit( {
 				<PanelBody title={ __( 'Settings' ) }>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ label || '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
 						} }
-						label={ __( 'Label' ) }
+						label={ __( 'Text' ) }
 						autoComplete="off"
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							setAttributes( { url: urlValue } );
 						} }
-						label={ __( 'URL' ) }
+						label={ __( 'Link' ) }
 						autoComplete="off"
 					/>
 					<TextareaControl
@@ -420,6 +429,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -432,6 +442,7 @@ export default function NavigationSubmenuEdit( {
 					/>
 					<TextControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -471,6 +482,7 @@ export default function NavigationSubmenuEdit( {
 							onClick={ () => {
 								if ( ! openSubmenusOnClick && ! url ) {
 									setIsLinkOpen( true );
+									setOpenedBy( ref.current );
 								}
 							} }
 						/>
@@ -479,7 +491,15 @@ export default function NavigationSubmenuEdit( {
 						<LinkUI
 							clientId={ clientId }
 							link={ attributes }
-							onClose={ () => setIsLinkOpen( false ) }
+							onClose={ () => {
+								setIsLinkOpen( false );
+								if ( openedBy ) {
+									openedBy.focus();
+									setOpenedBy( null );
+								} else {
+									selectBlock( clientId );
+								}
+							} }
 							anchor={ popoverAnchor }
 							hasCreateSuggestion={ userCanCreate }
 							onRemove={ () => {

package/src/navigation-submenu/index.php

@@ -87,6 +87,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
+	if ( is_post_type_archive() ) {
+		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
+		if ( $attributes['url'] === $queried_archive_link ) {
+			$is_active = true;
+		}
+	}
+
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
 	$open_on_hover_and_click = isset( $block->context['openSubmenusOnClick'] ) && ! $block->context['openSubmenusOnClick'] &&

package/src/page-list/convert-to-links-modal.js

@@ -5,7 +5,7 @@ import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 export const convertDescription = __(
-	"This navigation menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
+	"This Navigation Menu displays your website's pages. Editing it will enable you to add, delete, or reorder pages. However, new pages will no longer be added automatically."
 );
 
 export function ConvertToLinksModal( { onClick, onClose, disabled } ) {

package/src/pattern/edit.js

@@ -108,6 +108,10 @@ const PatternEdit = ( { attributes, clientId } ) => {
 						metadata: {
 							...clonedBlocks[ 0 ].attributes.metadata,
 							categories: selectedPattern.categories,
+							patternName: selectedPattern.name,
+							name:
+								clonedBlocks[ 0 ].attributes.metadata.name ||
+								selectedPattern.title,
 						},
 					};
 				}

package/src/post-featured-image/block.json

@@ -61,7 +61,6 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -69,7 +68,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -77,6 +75,9 @@
 				"width": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
 		"shadow": {
 			"__experimentalSkipSerialization": true
 		},
@@ -90,7 +91,11 @@
 		}
 	},
 	"selectors": {
-		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder"
+		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
+		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"

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

@@ -10,7 +10,11 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { InspectorControls, useSettings } from '@wordpress/block-editor';
+import {
+	useSettings,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 
 const SCALE_OPTIONS = (
 	<>
@@ -51,12 +55,25 @@ const DimensionControls = ( {
 	clientId,
 	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
-	imageSizeOptions = [],
+	media,
 } ) => {
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
 		availableUnits: availableUnits || [ 'px', '%', 'vw', 'em', 'rem' ],
 	} );
+	const imageSizes = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().imageSizes,
+		[]
+	);
+	const imageSizeOptions = imageSizes
+		.filter( ( { slug } ) => {
+			return media?.media_details?.sizes?.[ slug ]?.source_url;
+		} )
+		.map( ( { name, slug } ) => ( {
+			value: slug,
+			label: name,
+		} ) );
+
 	const onDimensionChange = ( dimension, nextValue ) => {
 		const parsedValue = parseFloat( nextValue );
 		/**
@@ -75,7 +92,7 @@ const DimensionControls = ( {
 		height || ( aspectRatio && aspectRatio !== 'auto' );
 
 	return (
-		<InspectorControls group="dimensions">
+		<>
 			<ToolsPanelItem
 				hasValue={ () => !! aspectRatio }
 				label={ __( 'Aspect ratio' ) }
@@ -230,7 +247,7 @@ const DimensionControls = ( {
 					/>
 				</ToolsPanelItem>
 			) }
-		</InspectorControls>
+		</>
 	);
 };
 

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
@@ -14,6 +15,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Button,
+	Spinner,
 	TextControl,
 } from '@wordpress/components';
 import {
@@ -22,12 +24,11 @@ import {
 	MediaPlaceholder,
 	MediaReplaceFlow,
 	useBlockProps,
-	store as blockEditorStore,
 	__experimentalUseBorderProps as useBorderProps,
 	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 	useBlockEditingMode,
 } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useEffect, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { upload } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
@@ -36,6 +37,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -69,6 +71,7 @@ export default function PostFeaturedImageEdit( {
 		linkTarget,
 		useFirstImageFromPost,
 	} = attributes;
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const [ storedFeaturedImage, setFeaturedImage ] = useEntityProp(
 		'postType',
@@ -128,21 +131,11 @@ export default function PostFeaturedImageEdit( {
 
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
-	const imageSizes = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().imageSizes,
-		[]
-	);
-	const imageSizeOptions = imageSizes
-		.filter( ( { slug } ) => {
-			return media?.media_details?.sizes?.[ slug ]?.source_url;
-		} )
-		.map( ( { name, slug } ) => ( {
-			value: slug,
-			label: name,
-		} ) );
-
 	const blockProps = useBlockProps( {
 		style: { width, height, aspectRatio },
+		className: classnames( {
+			'is-transient': temporaryURL,
+		} ),
 	} );
 	const borderProps = useBorderProps( attributes );
 	const shadowProps = getShadowClassesAndStyles( attributes );
@@ -172,26 +165,42 @@ export default function PostFeaturedImageEdit( {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
+
+		if ( value?.url && isBlobURL( value.url ) ) {
+			setTemporaryURL( value.url );
+		}
 	};
 
+	// Reset temporary url when media is available.
+	useEffect( () => {
+		if ( mediaUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ mediaUrl, temporaryURL ] );
+
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<Overlay
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				clientId={ clientId }
-			/>
-			<DimensionControls
-				clientId={ clientId }
-				attributes={ attributes }
-				setAttributes={ setAttributes }
-				imageSizeOptions={ imageSizeOptions }
-			/>
+			<InspectorControls group="color">
+				<OverlayControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</InspectorControls>
+			<InspectorControls group="dimensions">
+				<DimensionControls
+					clientId={ clientId }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					media={ media }
+				/>
+			</InspectorControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
@@ -240,7 +249,7 @@ export default function PostFeaturedImageEdit( {
 	/**
 	 * A Post Featured Image block should not have image replacement
 	 * or upload options in the following cases:
-	 * - Is placed in a Query Loop. This is a consious decision to
+	 * - Is placed in a Query Loop. This is a conscious decision to
 	 * prevent content editing of different posts in Query Loop, and
 	 * this could change in the future.
 	 * - Is in a context where it does not have a postId (for example
@@ -262,6 +271,11 @@ export default function PostFeaturedImageEdit( {
 					) : (
 						placeholder()
 					) }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
 				</div>
 			</>
 		);
@@ -283,7 +297,7 @@ export default function PostFeaturedImageEdit( {
 	 * - It has no image assigned yet
 	 * Then display the placeholder with the image upload option.
 	 */
-	if ( ! featuredImage ) {
+	if ( ! featuredImage && ! temporaryURL ) {
 		image = (
 			<MediaPlaceholder
 				onSelect={ onSelectImage }
@@ -309,24 +323,28 @@ export default function PostFeaturedImageEdit( {
 		);
 	} else {
 		// We have a Featured image so show a Placeholder if is loading.
-		image = ! media ? (
-			placeholder()
-		) : (
-			<img
-				className={ borderProps.className }
-				src={ mediaUrl }
-				alt={
-					media.alt_text
-						? sprintf(
-								// translators: %s: The image's alt text.
-								__( 'Featured image: %s' ),
-								media.alt_text
-						  )
-						: __( 'Featured image' )
-				}
-				style={ imageStyles }
-			/>
-		);
+		image =
+			! media && ! temporaryURL ? (
+				placeholder()
+			) : (
+				<>
+					<img
+						className={ borderProps.className }
+						src={ temporaryURL || mediaUrl }
+						alt={
+							media && media?.alt_text
+								? sprintf(
+										// translators: %s: The image's alt text.
+										__( 'Featured image: %s' ),
+										media.alt_text
+								  )
+								: __( 'Featured image' )
+						}
+						style={ imageStyles }
+					/>
+					{ temporaryURL && <Spinner /> }
+				</>
+			);
 	}
 
 	/**
@@ -337,7 +355,7 @@ export default function PostFeaturedImageEdit( {
 	 */
 	return (
 		<>
-			{ controls }
+			{ ! temporaryURL && controls }
 			{ !! media && ! isDescendentOfQueryLoop && (
 				<BlockControls group="other">
 					<MediaReplaceFlow
@@ -367,6 +385,11 @@ export default function PostFeaturedImageEdit( {
 				) : (
 					image
 				) }
+				<Overlay
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
 			</figure>
 		</>
 	);

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

@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-post-featured-image {
 	.block-editor-media-placeholder {
 		z-index: 1; // Need to put it above the overlay so the upload button works.
@@ -115,6 +115,23 @@
 			pointer-events: auto;
 		}
 	}
+
+	// When image being uploaded.
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Show spinner while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {

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

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient as useGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientValue, setGradient } = useGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: overlayColor.color,
+						gradientValue,
+						label: __( 'Overlay' ),
+						onColorChange: setOverlayColor,
+						onGradientChange: setGradient,
+						isShownByDefault: true,
+						resetAllFilter: () => ( {
+							overlayColor: undefined,
+							customOverlayColor: undefined,
+							gradient: undefined,
+							customGradient: undefined,
+						} ),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+			/>
+			<ToolsPanelItem
+				hasValue={ () => dimRatio !== undefined }
+				label={ __( 'Overlay opacity' ) }
+				onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+				resetAllFilter={ () => ( {
+					dimRatio: 0,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					label={ __( 'Overlay opacity' ) }
+					value={ dimRatio }
+					onChange={ ( newDimRatio ) =>
+						setAttributes( {
+							dimRatio: newDimRatio,
+						} )
+					}
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
+					required
+					__next40pxDefaultSize
+				/>
+			</ToolsPanelItem>
+		</>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );