@wordpress/block-library 7.17.0 → 7.18.0

package/build-style/navigation/editor-rtl.css

@@ -256,10 +256,6 @@
   color: #1e1e1e;
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-  margin-top: 0;
-}
-
 .wp-block-navigation-placeholder__preview {
   display: flex;
   align-items: center;
@@ -496,6 +492,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 8px 12px;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+  margin-top: 0;
+}
+
 @keyframes fadeouthalf {
   0% {
     opacity: 1;

package/build-style/navigation/editor.css

@@ -256,10 +256,6 @@
   color: #1e1e1e;
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-  margin-top: 0;
-}
-
 .wp-block-navigation-placeholder__preview {
   display: flex;
   align-items: center;
@@ -496,6 +492,10 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
   padding: 8px 12px;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+  margin-top: 0;
+}
+
 @keyframes fadeouthalf {
   0% {
     opacity: 1;

package/build-style/navigation/style-rtl.css

@@ -311,7 +311,9 @@ button.wp-block-navigation-item__content {
 }
 
 :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;
 }
 

package/build-style/navigation/style.css

@@ -311,7 +311,9 @@ button.wp-block-navigation-item__content {
 }
 
 :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;
 }
 

package/build-style/post-comments-form/style-rtl.css

@@ -74,6 +74,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-post-comments-form {
+  box-sizing: border-box;
+}
 .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
   font-weight: inherit;
 }

package/build-style/post-comments-form/style.css

@@ -74,6 +74,9 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
+.wp-block-post-comments-form {
+  box-sizing: border-box;
+}
 .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
   font-weight: inherit;
 }

package/build-style/style-rtl.css

@@ -184,6 +184,7 @@
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
   background-color: transparent;
+  background-image: none;
 }
 
 .wp-block-buttons {
@@ -518,6 +519,7 @@
 }
 
 .wp-block-comment-template {
+  box-sizing: border-box;
   margin-bottom: 0;
   max-width: 100%;
   list-style: none;
@@ -1981,7 +1983,9 @@ button.wp-block-navigation-item__content {
 }
 
 :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;
 }
 
@@ -2330,6 +2334,9 @@ p.has-background {
   margin: 0;
 }
 
+.wp-block-post-comments-form {
+  box-sizing: border-box;
+}
 .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
   font-weight: inherit;
 }

package/build-style/style.css

@@ -185,6 +185,7 @@
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
   background-color: transparent;
+  background-image: none;
 }
 
 .wp-block-buttons {
@@ -523,6 +524,7 @@
 }
 
 .wp-block-comment-template {
+  box-sizing: border-box;
   margin-bottom: 0;
   max-width: 100%;
   list-style: none;
@@ -2009,7 +2011,9 @@ button.wp-block-navigation-item__content {
 }
 
 :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;
 }
 
@@ -2358,6 +2362,9 @@ p.has-background {
   margin: 0;
 }
 
+.wp-block-post-comments-form {
+  box-sizing: border-box;
+}
 .wp-block-post-comments-form[style*=font-weight] :where(.comment-reply-title) {
   font-weight: inherit;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.17.0",
+	"version": "7.18.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.20.0",
-		"@wordpress/api-fetch": "^6.17.0",
-		"@wordpress/autop": "^3.20.0",
-		"@wordpress/blob": "^3.20.0",
-		"@wordpress/block-editor": "^10.3.0",
-		"@wordpress/blocks": "^11.19.0",
-		"@wordpress/components": "^21.3.0",
-		"@wordpress/compose": "^5.18.0",
-		"@wordpress/core-data": "^5.3.0",
-		"@wordpress/data": "^7.4.0",
-		"@wordpress/date": "^4.20.0",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/dom": "^3.20.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/hooks": "^3.20.0",
-		"@wordpress/html-entities": "^3.20.0",
-		"@wordpress/i18n": "^4.20.0",
-		"@wordpress/icons": "^9.11.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/notices": "^3.20.0",
-		"@wordpress/primitives": "^3.18.0",
-		"@wordpress/reusable-blocks": "^3.18.0",
-		"@wordpress/rich-text": "^5.18.0",
-		"@wordpress/server-side-render": "^3.18.0",
-		"@wordpress/url": "^3.21.0",
-		"@wordpress/viewport": "^4.18.0",
+		"@wordpress/a11y": "^3.21.0",
+		"@wordpress/api-fetch": "^6.18.0",
+		"@wordpress/autop": "^3.21.0",
+		"@wordpress/blob": "^3.21.0",
+		"@wordpress/block-editor": "^10.4.0",
+		"@wordpress/blocks": "^11.20.0",
+		"@wordpress/components": "^22.0.0",
+		"@wordpress/compose": "^5.19.0",
+		"@wordpress/core-data": "^5.4.0",
+		"@wordpress/data": "^7.5.0",
+		"@wordpress/date": "^4.21.0",
+		"@wordpress/deprecated": "^3.21.0",
+		"@wordpress/dom": "^3.21.0",
+		"@wordpress/element": "^4.19.0",
+		"@wordpress/hooks": "^3.21.0",
+		"@wordpress/html-entities": "^3.21.0",
+		"@wordpress/i18n": "^4.21.0",
+		"@wordpress/icons": "^9.12.0",
+		"@wordpress/keycodes": "^3.21.0",
+		"@wordpress/notices": "^3.21.0",
+		"@wordpress/primitives": "^3.19.0",
+		"@wordpress/reusable-blocks": "^3.19.0",
+		"@wordpress/rich-text": "^5.19.0",
+		"@wordpress/server-side-render": "^3.19.0",
+		"@wordpress/url": "^3.22.0",
+		"@wordpress/viewport": "^4.19.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"escape-html": "^1.0.3",
 		"fast-average-color": "^9.1.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -73,5 +74,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "511f4cc1f0138641bc4394bc1cf36e833109c791"
 }

package/src/audio/edit.js

@@ -13,6 +13,7 @@ import {
 	SelectControl,
 	Spinner,
 	ToggleControl,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -25,12 +26,13 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useState, useCallback } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { audio as icon } from '@wordpress/icons';
+import { audio as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -48,6 +50,8 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
@@ -69,6 +73,30 @@ function AudioEdit( {
 		}
 	}, [] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function toggleAttribute( attribute ) {
 		return ( newValue ) => {
 			setAttributes( { [ attribute ]: newValue } );
@@ -106,12 +134,20 @@ function AudioEdit( {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error and we should continue in the editing state
 			// previous attributes should be removed because they may be temporary blob urls.
-			setAttributes( { src: undefined, id: undefined } );
+			setAttributes( {
+				src: undefined,
+				id: undefined,
+				caption: undefined,
+			} );
 			return;
 		}
 		// Sets the block's attribute and updates the edit component from the
 		// selected media, then switches off the editing UI.
-		setAttributes( { src: media.url, id: media.id } );
+		setAttributes( {
+			src: media.url,
+			id: media.id,
+			caption: media.caption,
+		} );
 	}
 
 	const classes = classnames( className, {
@@ -140,6 +176,23 @@ function AudioEdit( {
 
 	return (
 		<>
+			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }
@@ -195,26 +248,28 @@ function AudioEdit( {
 					<audio controls="controls" src={ src } />
 				</Disabled>
 				{ isTemporaryAudio && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Audio caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							ref={ captionRef }
+							aria-label={ __( 'Audio caption text' ) }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

package/src/button/edit.js

@@ -221,7 +221,7 @@ function ButtonEdit( props ) {
 			</BlockControls>
 			{ isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
-					position="bottom center"
+					placement="bottom"
 					onClose={ () => {
 						setIsEditingURL( false );
 						richTextRef.current?.focus();

package/src/button/style.scss

@@ -113,4 +113,6 @@ $blocks-block__margin: 0.5em;
 .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
 	background-color: transparent;
+	// background-image is required to overwrite a gradient background
+	background-image: none;
 }

package/src/buttons/edit.native.js

@@ -139,7 +139,7 @@ export default function ButtonsEdit( {
 						}
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 						} }
 					/>
 				</BlockControls>

package/src/comment-template/block.json

@@ -9,9 +9,13 @@
 	"textdomain": "default",
 	"usesContext": [ "postId" ],
 	"supports": {
-		"reusable": false,
-		"html": false,
 		"align": true,
+		"html": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/comment-template/style.scss

@@ -1,4 +1,6 @@
 .wp-block-comment-template {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;

package/src/cover/edit/inspector-controls.js

@@ -3,7 +3,6 @@
  */
 import { Fragment, useMemo } from '@wordpress/element';
 import {
-	BaseControl,
 	Button,
 	ExternalLink,
 	FocalPointPicker,
@@ -73,18 +72,17 @@ function CoverHeightInput( {
 	const min = isPx ? COVER_MIN_HEIGHT : 0;
 
 	return (
-		<BaseControl label={ __( 'Minimum height of cover' ) } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ min }
-				onChange={ handleOnChange }
-				onUnitChange={ onUnitChange }
-				style={ { maxWidth: 80 } }
-				units={ units }
-				value={ computedValue }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ __( 'Minimum height of cover' ) }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ min }
+			onChange={ handleOnChange }
+			onUnitChange={ onUnitChange }
+			__unstableInputWidth={ '80px' }
+			units={ units }
+			value={ computedValue }
+		/>
 	);
 }
 export default function CoverInspectorControls( {

package/src/embed/deprecated.js

@@ -11,36 +11,63 @@ import metadata from './block.json';
 /**
  * WordPress dependencies
  */
-import { RichText } from '@wordpress/block-editor';
+import { RichText, useBlockProps } from '@wordpress/block-editor';
 
 const { attributes: blockAttributes } = metadata;
 
-const deprecated = [
-	{
-		attributes: blockAttributes,
-		save( { attributes: { url, caption, type, providerNameSlug } } ) {
-			if ( ! url ) {
-				return null;
-			}
-
-			const embedClassName = classnames( 'wp-block-embed', {
-				[ `is-type-${ type }` ]: type,
-				[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
-			} );
-
-			return (
-				<figure className={ embedClassName }>
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the embed figcaption element.
+const v2 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const { url, caption, type, providerNameSlug } = attributes;
+
+		if ( ! url ) {
+			return null;
+		}
+
+		const className = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+			[ `wp-block-embed-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure { ...useBlockProps.save( { className } ) }>
+				<div className="wp-block-embed__wrapper">
 					{ `\n${ url }\n` /* URL needs to be on its own line. */ }
-					{ ! RichText.isEmpty( caption ) && (
-						<RichText.Content
-							tagName="figcaption"
-							value={ caption }
-						/>
-					) }
-				</figure>
-			);
-		},
+				</div>
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes: { url, caption, type, providerNameSlug } } ) {
+		if ( ! url ) {
+			return null;
+		}
+
+		const embedClassName = classnames( 'wp-block-embed', {
+			[ `is-type-${ type }` ]: type,
+			[ `is-provider-${ providerNameSlug }` ]: providerNameSlug,
+		} );
+
+		return (
+			<figure className={ embedClassName }>
+				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
 	},
-];
+};
+
+const deprecated = [ v2, v1 ];
 
 export default deprecated;