@wordpress/block-library 9.3.0 → 9.5.0

package/src/image/view.js

@@ -19,27 +19,16 @@ let isTouching = false;
  */
 let lastTouchTime = 0;
 
-/**
- * Stores the image reference of the currently opened lightbox.
- *
- * @type {HTMLElement}
- */
-let imageRef;
-
-/**
- * Stores the button reference of the currently opened lightbox.
- *
- * @type {HTMLElement}
- */
-let buttonRef;
-
 const { state, actions, callbacks } = store(
 	'core/image',
 	{
 		state: {
-			currentImage: {},
+			currentImageId: null,
+			get currentImage() {
+				return state.metadata[ state.currentImageId ];
+			},
 			get overlayOpened() {
-				return state.currentImage.currentSrc;
+				return state.currentImageId !== null;
 			},
 			get roleAttribute() {
 				return state.overlayOpened ? 'dialog' : null;
@@ -53,6 +42,15 @@ const { state, actions, callbacks } = store(
 					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 				);
 			},
+			get figureStyles() {
+				return (
+					state.overlayOpened &&
+					`${ state.currentImage.figureStyles?.replace(
+						/margin[^;]*;?/g,
+						''
+					) };`
+				);
+			},
 			get imgStyles() {
 				return (
 					state.overlayOpened &&
@@ -62,33 +60,56 @@ const { state, actions, callbacks } = store(
 					) }; object-fit:cover;`
 				);
 			},
+			get imageButtonRight() {
+				const { imageId } = getContext();
+				return state.metadata[ imageId ].imageButtonRight;
+			},
+			get imageButtonTop() {
+				const { imageId } = getContext();
+				return state.metadata[ imageId ].imageButtonTop;
+			},
+			get isContentHidden() {
+				const ctx = getContext();
+				return (
+					state.overlayEnabled && state.currentImageId === ctx.imageId
+				);
+			},
+			get isContentVisible() {
+				const ctx = getContext();
+				return (
+					! state.overlayEnabled &&
+					state.currentImageId === ctx.imageId
+				);
+			},
 		},
 		actions: {
 			showLightbox() {
-				const ctx = getContext();
+				const { imageId } = getContext();
 
 				// Bails out if the image has not loaded yet.
-				if ( ! ctx.imageRef?.complete ) {
+				if ( ! state.metadata[ imageId ].imageRef?.complete ) {
 					return;
 				}
 
-				// Stores the positons of the scroll to fix it until the overlay is
+				// Stores the positions of the scroll to fix it until the overlay is
 				// closed.
 				state.scrollTopReset = document.documentElement.scrollTop;
 				state.scrollLeftReset = document.documentElement.scrollLeft;
 
-				// Moves the information of the expaned image to the state.
-				ctx.currentSrc = ctx.imageRef.currentSrc;
-				imageRef = ctx.imageRef;
-				buttonRef = ctx.buttonRef;
-				state.currentImage = ctx;
+				// Sets the current expanded image in the state and enables the overlay.
 				state.overlayEnabled = true;
+				state.currentImageId = imageId;
 
 				// Computes the styles of the overlay for the animation.
 				callbacks.setOverlayStyles();
 			},
 			hideLightbox() {
 				if ( state.overlayEnabled ) {
+					// Starts the overlay closing animation. The showClosingAnimation
+					// class is used to avoid showing it on page load.
+					state.showClosingAnimation = true;
+					state.overlayEnabled = false;
+
 					// Waits until the close animation has completed before allowing a
 					// user to scroll again. The duration of this animation is defined in
 					// the `styles.scss` file, but in any case we should wait a few
@@ -98,20 +119,13 @@ const { state, actions, callbacks } = store(
 						// Delays before changing the focus. Otherwise the focus ring will
 						// appear on Firefox before the image has finished animating, which
 						// looks broken.
-						buttonRef.focus( {
+						state.currentImage.buttonRef.focus( {
 							preventScroll: true,
 						} );
 
-						// Resets the current image to mark the overlay as closed.
-						state.currentImage = {};
-						imageRef = null;
-						buttonRef = null;
+						// Resets the current image id to mark the overlay as closed.
+						state.currentImageId = null;
 					}, 450 );
-
-					// Starts the overlay closing animation. The showClosingAnimation
-					// class is used to avoid showing it on page load.
-					state.showClosingAnimation = true;
-					state.overlayEnabled = false;
 				}
 			},
 			handleKeydown( event ) {
@@ -174,7 +188,7 @@ const { state, actions, callbacks } = store(
 		},
 		callbacks: {
 			setOverlayStyles() {
-				if ( ! imageRef ) {
+				if ( ! state.overlayEnabled ) {
 					return;
 				}
 
@@ -183,9 +197,9 @@ const { state, actions, callbacks } = store(
 					naturalHeight,
 					offsetWidth: originalWidth,
 					offsetHeight: originalHeight,
-				} = imageRef;
+				} = state.currentImage.imageRef;
 				let { x: screenPosX, y: screenPosY } =
-					imageRef.getBoundingClientRect();
+					state.currentImage.imageRef.getBoundingClientRect();
 
 				// Natural ratio of the image clicked to open the lightbox.
 				const naturalRatio = naturalWidth / naturalHeight;
@@ -231,6 +245,7 @@ const { state, actions, callbacks } = store(
 				let containerMaxHeight = imgMaxHeight;
 				let containerWidth = imgMaxWidth;
 				let containerHeight = imgMaxHeight;
+
 				// Checks if the target image has a different ratio than the original
 				// one (thumbnail). Recalculates the width and height.
 				if ( naturalRatio.toFixed( 2 ) !== imgRatio.toFixed( 2 ) ) {
@@ -341,9 +356,11 @@ const { state, actions, callbacks } = store(
 			`;
 			},
 			setButtonStyles() {
-				const ctx = getContext();
+				const { imageId } = getContext();
 				const { ref } = getElement();
-				ctx.imageRef = ref;
+
+				state.metadata[ imageId ].imageRef = ref;
+				state.metadata[ imageId ].currentSrc = ref.currentSrc;
 
 				const {
 					naturalWidth,
@@ -386,10 +403,13 @@ const { state, actions, callbacks } = store(
 				const buttonOffsetTop = figureHeight - offsetHeight;
 				const buttonOffsetRight = figureWidth - offsetWidth;
 
+				let imageButtonTop = buttonOffsetTop + 16;
+				let imageButtonRight = buttonOffsetRight + 16;
+
 				// In the case of an image with object-fit: contain, the size of the
 				// <img> element can be larger than the image itself, so it needs to
 				// calculate where to place the button.
-				if ( ctx.scaleAttr === 'contain' ) {
+				if ( state.metadata[ imageId ].scaleAttr === 'contain' ) {
 					// Natural ratio of the image.
 					const naturalRatio = naturalWidth / naturalHeight;
 					// Offset ratio of the image.
@@ -399,25 +419,25 @@ const { state, actions, callbacks } = store(
 						// If it reaches the width first, it keeps the width and compute the
 						// height.
 						const referenceHeight = offsetWidth / naturalRatio;
-						ctx.imageButtonTop =
+						imageButtonTop =
 							( offsetHeight - referenceHeight ) / 2 +
 							buttonOffsetTop +
 							16;
-						ctx.imageButtonRight = buttonOffsetRight + 16;
+						imageButtonRight = buttonOffsetRight + 16;
 					} else {
 						// If it reaches the height first, it keeps the height and compute
 						// the width.
 						const referenceWidth = offsetHeight * naturalRatio;
-						ctx.imageButtonTop = buttonOffsetTop + 16;
-						ctx.imageButtonRight =
+						imageButtonTop = buttonOffsetTop + 16;
+						imageButtonRight =
 							( offsetWidth - referenceWidth ) / 2 +
 							buttonOffsetRight +
 							16;
 					}
-				} else {
-					ctx.imageButtonTop = buttonOffsetTop + 16;
-					ctx.imageButtonRight = buttonOffsetRight + 16;
 				}
+
+				state.metadata[ imageId ].imageButtonTop = imageButtonTop;
+				state.metadata[ imageId ].imageButtonRight = imageButtonRight;
 			},
 			setOverlayFocus() {
 				if ( state.overlayEnabled ) {
@@ -427,9 +447,9 @@ const { state, actions, callbacks } = store(
 				}
 			},
 			initTriggerButton() {
-				const ctx = getContext();
+				const { imageId } = getContext();
 				const { ref } = getElement();
-				ctx.buttonRef = ref;
+				state.metadata[ imageId ].buttonRef = ref;
 			},
 		},
 	},

package/src/latest-comments/block.json

@@ -29,6 +29,15 @@
 	},
 	"supports": {
 		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,

package/src/latest-posts/edit.js

@@ -202,6 +202,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 		<InspectorControls>
 			<PanelBody title={ __( 'Post content' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Post content' ) }
 					checked={ displayPostContent }
 					onChange={ ( value ) =>

package/src/latest-posts/editor.scss

@@ -10,10 +10,6 @@
 }
 
 .editor-latest-posts-image-alignment-control {
-	.components-base-control__label {
-		display: block;
-	}
-
 	.components-toolbar {
 		border-radius: $radius-block-ui;
 	}

package/src/list/block.json

@@ -5,7 +5,7 @@
 	"title": "List",
 	"category": "text",
 	"allowedBlocks": [ "core/list-item" ],
-	"description": "Create a bulleted or numbered list.",
+	"description": "An organized collection of items displayed in a specific order.",
 	"keywords": [ "bullet list", "ordered list", "numbered list" ],
 	"textdomain": "default",
 	"attributes": {

package/src/list/edit.js

@@ -110,7 +110,7 @@ function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
-				describedBy={ __( 'Outdent list item' ) }
+				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ outdentList }
 			/>
@@ -147,7 +147,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
 				title={ __( 'Unordered' ) }
-				describedBy={ __( 'Convert to unordered list' ) }
+				description={ __( 'Convert to unordered list' ) }
 				isActive={ ordered === false }
 				onClick={ () => {
 					setAttributes( { ordered: false } );
@@ -156,7 +156,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
 				title={ __( 'Ordered' ) }
-				describedBy={ __( 'Convert to ordered list' ) }
+				description={ __( 'Convert to ordered list' ) }
 				isActive={ ordered === true }
 				onClick={ () => {
 					setAttributes( { ordered: true } );

package/src/list/ordered-list-settings.js

@@ -13,25 +13,10 @@ import {
 const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 	<InspectorControls>
 		<PanelBody title={ __( 'Settings' ) }>
-			<TextControl
-				__nextHasNoMarginBottom
-				label={ __( 'Start value' ) }
-				type="number"
-				onChange={ ( value ) => {
-					const int = parseInt( value, 10 );
-
-					setAttributes( {
-						// It should be possible to unset the value,
-						// e.g. with an empty string.
-						start: isNaN( int ) ? undefined : int,
-					} );
-				} }
-				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
-				step="1"
-			/>
 			<SelectControl
+				__next40pxDefaultSize
 				__nextHasNoMarginBottom
-				label={ __( 'Numbering style' ) }
+				label={ __( 'List style' ) }
 				options={ [
 					{
 						label: __( 'Numbers' ),
@@ -57,9 +42,26 @@ const OrderedListSettings = ( { setAttributes, reversed, start, type } ) => (
 				value={ type }
 				onChange={ ( newValue ) => setAttributes( { type: newValue } ) }
 			/>
+			<TextControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				label={ __( 'Start value' ) }
+				type="number"
+				onChange={ ( value ) => {
+					const int = parseInt( value, 10 );
+
+					setAttributes( {
+						// It should be possible to unset the value,
+						// e.g. with an empty string.
+						start: isNaN( int ) ? undefined : int,
+					} );
+				} }
+				value={ Number.isInteger( start ) ? start.toString( 10 ) : '' }
+				step="1"
+			/>
 			<ToggleControl
 				__nextHasNoMarginBottom
-				label={ __( 'Reverse list numbering' ) }
+				label={ __( 'Reverse order' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {
 					setAttributes( {

package/src/list/style.scss

@@ -3,6 +3,6 @@ ul {
 	box-sizing: border-box;
 }
 
-:root :where(ul.has-background, ol.has-background) {
+:root :where(.wp-block-list.has-background) {
 	padding: $block-bg-padding--v $block-bg-padding--h;
 }

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

@@ -289,9 +289,7 @@ describe( 'List block', () => {
 			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
-		const reverseButton = screen.getByLabelText(
-			/Reverse list numbering\. Off/
-		);
+		const reverseButton = screen.getByLabelText( /Reverse order\. Off/ );
 		fireEvent.press( reverseButton );
 
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/list-item/block.json

@@ -6,7 +6,7 @@
 	"category": "text",
 	"parent": [ "core/list" ],
 	"allowedBlocks": [ "core/list" ],
-	"description": "Create a list item.",
+	"description": "An individual item within a list.",
 	"textdomain": "default",
 	"attributes": {
 		"placeholder": {
@@ -20,13 +20,14 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": false,
 		"splitting": true,
 		"color": {
 			"gradients": true,
 			"link": true,
+			"background": true,
 			"__experimentalDefaultControls": {
-				"background": true,
 				"text": true
 			}
 		},

package/src/list-item/edit.js

@@ -53,14 +53,14 @@ export function IndentUI( { clientId } ) {
 			<ToolbarButton
 				icon={ isRTL() ? formatOutdentRTL : formatOutdent }
 				title={ __( 'Outdent' ) }
-				describedBy={ __( 'Outdent list item' ) }
+				description={ __( 'Outdent list item' ) }
 				disabled={ ! canOutdent }
 				onClick={ () => outdentListItem() }
 			/>
 			<ToolbarButton
 				icon={ isRTL() ? formatIndentRTL : formatIndent }
 				title={ __( 'Indent' ) }
-				describedBy={ __( 'Indent list item' ) }
+				description={ __( 'Indent list item' ) }
 				disabled={ ! canIndent }
 				onClick={ () => indentListItem() }
 			/>

package/src/list-item/hooks/index.js

@@ -2,5 +2,4 @@ export { default as useOutdentListItem } from './use-outdent-list-item';
 export { default as useIndentListItem } from './use-indent-list-item';
 export { default as useEnter } from './use-enter';
 export { default as useSpace } from './use-space';
-export { default as useSplit } from './use-split';
 export { default as useMerge } from './use-merge';

package/src/loginout/block.json

@@ -22,6 +22,12 @@
 	},
 	"supports": {
 		"className": true,
+		"color": {
+			"background": true,
+			"text": false,
+			"gradients": true,
+			"link": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -43,8 +49,15 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
-	}
+	},
+	"style": "wp-block-loginout"
 }

package/src/loginout/style.scss

@@ -0,0 +1,4 @@
+.wp-block-loginout {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/media-text/block.json

@@ -103,6 +103,18 @@
 		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"color": {
 			"gradients": true,
 			"heading": true,

package/src/media-text/style.native.scss

@@ -7,6 +7,7 @@ $media-to-text: 12px;
 }
 
 .has-media-on-the-right {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 	flex-direction: row-reverse;
 }
 
@@ -14,6 +15,7 @@ $media-to-text: 12px;
 	flex-direction: column;
 
 	&.has-media-on-the-right {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 		flex-direction: column-reverse;
 	}
 }

package/src/navigation/edit/index.js

@@ -721,7 +721,7 @@ function Navigation( {
 	);
 
 	const accessibleDescriptionId = `${ clientId }-desc`;
-
+	const isHiddenByDefault = 'always' === overlayMenu;
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
@@ -760,7 +760,7 @@ function Navigation( {
 					hasIcon={ hasIcon }
 					icon={ icon }
 					isResponsive={ isResponsive }
-					isHiddenByDefault={ 'always' === overlayMenu }
+					isHiddenByDefault={ isHiddenByDefault }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
 				>
@@ -899,13 +899,13 @@ function Navigation( {
 							: undefined
 					}
 				>
-					{ isLoading && (
+					{ isLoading && ! isHiddenByDefault && (
 						<div className="wp-block-navigation__loading-indicator-container">
 							<Spinner className="wp-block-navigation__loading-indicator" />
 						</div>
 					) }
 
-					{ ! isLoading && (
+					{ ( ! isLoading || isHiddenByDefault ) && (
 						<>
 							<AccessibleMenuDescription
 								id={ accessibleDescriptionId }
@@ -917,7 +917,7 @@ function Navigation( {
 								icon={ icon }
 								isOpen={ isResponsiveMenuOpen }
 								isResponsive={ isResponsive }
-								isHiddenByDefault={ 'always' === overlayMenu }
+								isHiddenByDefault={ isHiddenByDefault }
 								overlayBackgroundColor={
 									overlayBackgroundColor
 								}

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -41,6 +41,7 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 						setIsConfirmDialogVisible( false );
 					} }
 					confirmButtonText={ __( 'Delete' ) }
+					size="medium"
 				>
 					{ __(
 						'Are you sure you want to delete this Navigation Menu?'

package/src/navigation/editor.scss

@@ -287,7 +287,6 @@ $color-control-label-height: 20px;
 		left: 0;
 		pointer-events: none;
 		border: $border-width dashed currentColor;
-		@include placeholder-style();
 
 		// Inherit border radius from style variations.
 		border-radius: inherit;

package/src/navigation/index.php

@@ -483,7 +483,7 @@ class WP_Navigation_Block_Renderer {
 			}
 		}
 		$toggle_button_content       = $should_display_icon_label ? $toggle_button_icon : __( 'Menu' );
-		$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+		$toggle_close_button_icon    = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
 		$toggle_close_button_content = $should_display_icon_label ? $toggle_close_button_icon : __( 'Close' );
 		$toggle_aria_label_open      = $should_display_icon_label ? 'aria-label="' . __( 'Open menu' ) . '"' : ''; // Open button label.
 		$toggle_aria_label_close     = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.

package/src/navigation/style.scss

@@ -76,15 +76,10 @@ $navigation-icon-size: 24px;
 		}
 	}
 
-	&:where(:not([class*="has-text-decoration"])) {
-		a {
-			text-decoration: none;
-
-			&:focus,
-			&:active {
-				text-decoration: none;
-			}
-		}
+	& :where(a),
+	& :where(a:focus),
+	& :where(a:active) {
+		text-decoration: none;
 	}
 
 	// Submenu indicator.