@wordpress/block-library 9.3.0 → 9.4.0

package/build-style/style-rtl.css

@@ -308,6 +308,10 @@
 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
   text-align: center;
 }
+.wp-block-categories .wp-block-categories__label {
+  width: 100%;
+  display: block;
+}
 
 .wp-block-code {
   box-sizing: border-box;
@@ -1530,6 +1534,14 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   vertical-align: bottom;
   box-sizing: border-box;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-image img.hide {
+    visibility: hidden;
+  }
+  .wp-block-image img.show {
+    animation: show-content-image 0.4s;
+  }
+}
 .wp-block-image[style*=border-radius] > a,
 .wp-block-image[style*=border-radius] img {
   border-radius: inherit;
@@ -1773,6 +1785,17 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
 }
 
+@keyframes show-content-image {
+  0% {
+    visibility: hidden;
+  }
+  99% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;
@@ -1977,7 +2000,7 @@ ul {
   box-sizing: border-box;
 }
 
-:root :where(ul.has-background, ol.has-background) {
+:root :where(.wp-block-list.has-background) {
   padding: 1.25em 2.375em;
 }
 
@@ -2133,10 +2156,7 @@ ul {
 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active {
   text-decoration: line-through;
 }
-.wp-block-navigation:where(:not([class*="has-text-decoration"])) a {
-  text-decoration: none;
-}
-.wp-block-navigation:where(:not([class*="has-text-decoration"])) a:focus, .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:active {
+.wp-block-navigation :where(a), .wp-block-navigation :where(a:focus), .wp-block-navigation :where(a:active) {
   text-decoration: none;
 }
 .wp-block-navigation .wp-block-navigation__submenu-icon {
@@ -2754,7 +2774,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
   letter-spacing: inherit;
 }
-.wp-block-post-comments-form input[type=submit] {
+.wp-block-post-comments-form :where(input[type="submit"]) {
   box-shadow: none;
   cursor: pointer;
   display: inline-block;
@@ -3456,7 +3476,7 @@ ul.wp-block-rss.is-grid li {
   color: #fff;
 }
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook {
-  background-color: #1778f2;
+  background-color: #0866ff;
   color: #fff;
 }
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-fivehundredpx {
@@ -3632,7 +3652,7 @@ ul.wp-block-rss.is-grid li {
   color: #f45800;
 }
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-facebook {
-  color: #1778f2;
+  color: #0866ff;
 }
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-fivehundredpx {
   color: #000;
@@ -3930,6 +3950,7 @@ ul.wp-block-rss.is-grid li {
 }
 
 :where(.wp-block-term-description) {
+  box-sizing: border-box;
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/build-style/style.css

@@ -311,6 +311,10 @@
 .wp-block-categories.wp-block-categories-dropdown.aligncenter {
   text-align: center;
 }
+.wp-block-categories .wp-block-categories__label {
+  width: 100%;
+  display: block;
+}
 
 .wp-block-code {
   box-sizing: border-box;
@@ -1538,6 +1542,14 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   vertical-align: bottom;
   box-sizing: border-box;
 }
+@media (prefers-reduced-motion: no-preference) {
+  .wp-block-image img.hide {
+    visibility: hidden;
+  }
+  .wp-block-image img.show {
+    animation: show-content-image 0.4s;
+  }
+}
 .wp-block-image[style*=border-radius] > a,
 .wp-block-image[style*=border-radius] img {
   border-radius: inherit;
@@ -1787,6 +1799,17 @@ h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
   }
 }
 
+@keyframes show-content-image {
+  0% {
+    visibility: hidden;
+  }
+  99% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
 @keyframes turn-on-visibility {
   0% {
     opacity: 0;
@@ -1997,7 +2020,7 @@ ul {
   box-sizing: border-box;
 }
 
-:root :where(ul.has-background, ol.has-background) {
+:root :where(.wp-block-list.has-background) {
   padding: 1.25em 2.375em;
 }
 
@@ -2163,10 +2186,7 @@ ul {
 .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:focus, .wp-block-navigation.has-text-decoration-line-through .wp-block-navigation-item__content:active {
   text-decoration: line-through;
 }
-.wp-block-navigation:where(:not([class*="has-text-decoration"])) a {
-  text-decoration: none;
-}
-.wp-block-navigation:where(:not([class*="has-text-decoration"])) a:focus, .wp-block-navigation:where(:not([class*="has-text-decoration"])) a:active {
+.wp-block-navigation :where(a), .wp-block-navigation :where(a:focus), .wp-block-navigation :where(a:active) {
   text-decoration: none;
 }
 .wp-block-navigation .wp-block-navigation__submenu-icon {
@@ -2784,7 +2804,7 @@ p.has-text-align-left[style*="writing-mode:vertical-lr"] {
 .wp-block-post-comments-form[style*=letter-spacing] :where(.comment-reply-title) {
   letter-spacing: inherit;
 }
-.wp-block-post-comments-form input[type=submit] {
+.wp-block-post-comments-form :where(input[type="submit"]) {
   box-shadow: none;
   cursor: pointer;
   display: inline-block;
@@ -3491,7 +3511,7 @@ ul.wp-block-rss.is-grid li {
   color: #fff;
 }
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook {
-  background-color: #1778f2;
+  background-color: #0866ff;
   color: #fff;
 }
 :where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-fivehundredpx {
@@ -3667,7 +3687,7 @@ ul.wp-block-rss.is-grid li {
   color: #f45800;
 }
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-facebook {
-  color: #1778f2;
+  color: #0866ff;
 }
 :where(.wp-block-social-links.is-style-logos-only) .wp-social-link-fivehundredpx {
   color: #000;
@@ -3965,6 +3985,7 @@ ul.wp-block-rss.is-grid li {
 }
 
 :where(.wp-block-term-description) {
+  box-sizing: border-box;
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/build-style/term-description/style-rtl.css

@@ -87,6 +87,7 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :where(.wp-block-term-description) {
+  box-sizing: border-box;
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/build-style/term-description/style.css

@@ -87,6 +87,7 @@
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
 :where(.wp-block-term-description) {
+  box-sizing: border-box;
   margin-top: var(--wp--style--block-gap);
   margin-bottom: var(--wp--style--block-gap);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.3.0",
+	"version": "9.4.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,39 +32,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.3.0",
-		"@wordpress/api-fetch": "^7.3.0",
-		"@wordpress/autop": "^4.3.0",
-		"@wordpress/blob": "^4.3.0",
-		"@wordpress/block-editor": "^13.3.0",
-		"@wordpress/blocks": "^13.3.0",
-		"@wordpress/components": "^28.3.0",
-		"@wordpress/compose": "^7.3.0",
-		"@wordpress/core-data": "^7.3.0",
-		"@wordpress/data": "^10.3.0",
-		"@wordpress/date": "^5.3.0",
-		"@wordpress/deprecated": "^4.3.0",
-		"@wordpress/dom": "^4.3.0",
-		"@wordpress/element": "^6.3.0",
-		"@wordpress/escape-html": "^3.3.0",
-		"@wordpress/hooks": "^4.3.0",
-		"@wordpress/html-entities": "^4.3.0",
-		"@wordpress/i18n": "^5.3.0",
-		"@wordpress/icons": "^10.3.0",
-		"@wordpress/interactivity": "^6.3.0",
-		"@wordpress/interactivity-router": "^2.3.0",
-		"@wordpress/keyboard-shortcuts": "^5.3.0",
-		"@wordpress/keycodes": "^4.3.0",
-		"@wordpress/notices": "^5.3.0",
-		"@wordpress/patterns": "^2.3.0",
-		"@wordpress/primitives": "^4.3.0",
-		"@wordpress/private-apis": "^1.3.0",
-		"@wordpress/reusable-blocks": "^5.3.0",
-		"@wordpress/rich-text": "^7.3.0",
-		"@wordpress/server-side-render": "^5.3.0",
-		"@wordpress/url": "^4.3.0",
-		"@wordpress/viewport": "^6.3.0",
-		"@wordpress/wordcount": "^4.3.0",
+		"@wordpress/a11y": "^4.4.0",
+		"@wordpress/api-fetch": "^7.4.0",
+		"@wordpress/autop": "^4.4.0",
+		"@wordpress/blob": "^4.4.0",
+		"@wordpress/block-editor": "^13.4.0",
+		"@wordpress/blocks": "^13.4.0",
+		"@wordpress/components": "^28.4.0",
+		"@wordpress/compose": "^7.4.0",
+		"@wordpress/core-data": "^7.4.0",
+		"@wordpress/data": "^10.4.0",
+		"@wordpress/date": "^5.4.0",
+		"@wordpress/deprecated": "^4.4.0",
+		"@wordpress/dom": "^4.4.0",
+		"@wordpress/element": "^6.4.0",
+		"@wordpress/escape-html": "^3.4.0",
+		"@wordpress/hooks": "^4.4.0",
+		"@wordpress/html-entities": "^4.4.0",
+		"@wordpress/i18n": "^5.4.0",
+		"@wordpress/icons": "^10.4.0",
+		"@wordpress/interactivity": "^6.4.0",
+		"@wordpress/interactivity-router": "^2.4.0",
+		"@wordpress/keyboard-shortcuts": "^5.4.0",
+		"@wordpress/keycodes": "^4.4.0",
+		"@wordpress/notices": "^5.4.0",
+		"@wordpress/patterns": "^2.4.0",
+		"@wordpress/primitives": "^4.4.0",
+		"@wordpress/private-apis": "^1.4.0",
+		"@wordpress/reusable-blocks": "^5.4.0",
+		"@wordpress/rich-text": "^7.4.0",
+		"@wordpress/server-side-render": "^5.4.0",
+		"@wordpress/url": "^4.4.0",
+		"@wordpress/viewport": "^6.4.0",
+		"@wordpress/wordcount": "^4.4.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
+	"gitHead": "363edb39b8dda8727f652e42cbb8497732693ed2"
 }

package/src/block/edit.js

@@ -121,6 +121,51 @@ export default function ReusableBlockEditRecursionWrapper( props ) {
 	);
 }
 
+function ReusableBlockControl( {
+	recordId,
+	canOverrideBlocks,
+	hasContent,
+	handleEditOriginal,
+	resetContent,
+} ) {
+	const canUserEdit = useSelect(
+		( select ) =>
+			!! select( coreStore ).canUser( 'update', {
+				kind: 'postType',
+				name: 'wp_block',
+				id: recordId,
+			} ),
+		[ recordId ]
+	);
+
+	return (
+		<>
+			{ canUserEdit && !! handleEditOriginal && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton onClick={ handleEditOriginal }>
+							{ __( 'Edit original' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+
+			{ canOverrideBlocks && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ resetContent }
+							disabled={ ! hasContent }
+						>
+							{ __( 'Reset' ) }
+						</ToolbarButton>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+		</>
+	);
+}
+
 function ReusableBlockEdit( {
 	name,
 	attributes: { ref, content },
@@ -143,25 +188,20 @@ function ReusableBlockEdit( {
 
 	const {
 		innerBlocks,
-		userCanEdit,
 		onNavigateToEntityRecord,
 		editingMode,
 		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
-			const { canUser } = select( coreStore );
 			const {
 				getBlocks,
 				getSettings,
 				getBlockEditingMode: _getBlockEditingMode,
 			} = select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
-			const canEdit = canUser( 'update', 'blocks', ref );
-
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
-				userCanEdit: canEdit,
 				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
@@ -171,7 +211,7 @@ function ReusableBlockEdit( {
 				),
 			};
 		},
-		[ patternClientId, ref ]
+		[ patternClientId ]
 	);
 
 	// Sync the editing mode of the pattern block with the inner blocks.
@@ -252,27 +292,18 @@ function ReusableBlockEdit( {
 
 	return (
 		<>
-			{ userCanEdit && onNavigateToEntityRecord && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton onClick={ handleEditOriginal }>
-							{ __( 'Edit original' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
-			) }
-
-			{ canOverrideBlocks && (
-				<BlockControls>
-					<ToolbarGroup>
-						<ToolbarButton
-							onClick={ resetContent }
-							disabled={ ! content }
-						>
-							{ __( 'Reset' ) }
-						</ToolbarButton>
-					</ToolbarGroup>
-				</BlockControls>
+			{ hasResolved && (
+				<ReusableBlockControl
+					recordId={ ref }
+					canOverrideBlocks={ canOverrideBlocks }
+					hasContent={ !! content }
+					handleEditOriginal={
+						onNavigateToEntityRecord
+							? handleEditOriginal
+							: undefined
+					}
+					resetContent={ resetContent }
+				/>
 			) }
 
 			{ children === null ? (

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

@@ -158,7 +158,9 @@ describe( 'Synced patterns', () => {
 			if ( path.startsWith( endpoint ) ) {
 				response = getMockedReusableBlock( id );
 			}
-			return Promise.resolve( response );
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
 		} );
 
 		const screen = await initializeEditor( {
@@ -229,7 +231,9 @@ describe( 'Synced patterns', () => {
 			response.content.raw = `<!-- wp:image {"id":1,"sizeSlug":"large","linkDestination":"none"} -->
 <figure class="wp-block-image size-large"><img src="https://cldup.com/cXyG__fTLN.jpg" alt="" class="wp-image-1"/></figure>
 <!-- /wp:image -->`;
-			return Promise.resolve( response );
+			return Promise.resolve( {
+				json: () => Promise.resolve( response ),
+			} );
 		} );
 
 		const screen = await initializeEditor( {

package/src/button/edit.js

@@ -247,7 +247,7 @@ function ButtonEdit( props ) {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					! blockBindingsSource?.canUserEditValue( {
+					! blockBindingsSource?.canUserEditValue?.( {
 						select,
 						context,
 						args: metadata?.bindings?.url?.args,

package/src/button/index.php

@@ -26,8 +26,8 @@ function render_block_core_button( $attributes, $content ) {
 	 * conditional statement will be removed and the core class `WP_HTML_Tag_Processor`
 	 * should be used.
 	 */
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_5' ) ) {
-		$p = new Gutenberg_HTML_Tag_Processor_6_5( $content );
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_7' ) ) {
+		$p = new Gutenberg_HTML_Tag_Processor_6_7( $content );
 	} else {
 		$p = new WP_HTML_Tag_Processor( $content );
 	}

package/src/buttons/block.json

@@ -13,8 +13,16 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalExposeControlsToChildren": true,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"spacing": {
 			"blockGap": true,
+			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
@@ -33,6 +41,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,

package/src/buttons/index.js

@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			layout: {
+				type: 'flex',
+				justifyContent: 'center',
+			},
+		},
 		innerBlocks: [
 			{
 				name: 'core/button',

package/src/categories/block.json

@@ -26,6 +26,14 @@
 		"showEmpty": {
 			"type": "boolean",
 			"default": false
+		},
+		"label": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/categories/edit.js

@@ -14,7 +14,11 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
@@ -27,6 +31,8 @@ export default function CategoriesEdit( {
 		showPostCounts,
 		showOnlyTopLevel,
 		showEmpty,
+		label,
+		showLabel,
 	},
 	setAttributes,
 	className,
@@ -92,9 +98,22 @@ export default function CategoriesEdit( {
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
-				</VisuallyHidden>
+				{ showLabel ? (
+					<RichText
+						className="wp-block-categories__label"
+						aria-label={ __( 'Label text' ) }
+						placeholder={ __( 'Categories' ) }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+					/>
+				) : (
+					<VisuallyHidden as="label" htmlFor={ selectId }>
+						{ label ? label : __( 'Categories' ) }
+					</VisuallyHidden>
+				) }
 				<select id={ selectId }>
 					<option>{ __( 'Select Category' ) }</option>
 					{ categoriesList.map( ( category ) =>
@@ -148,6 +167,15 @@ export default function CategoriesEdit( {
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							className="wp-block-categories__indentation"
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ toggleAttribute( 'showLabel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }

package/src/categories/editor.scss

@@ -10,3 +10,7 @@
 [data-align="center"] .wp-block-categories {
 	text-align: center;
 }
+
+.wp-block-categories__indentation {
+	padding-left: 16px;
+}

package/src/categories/index.php

@@ -34,7 +34,10 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
+		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label            = __( 'Categories' );
+		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 

package/src/categories/style.scss

@@ -14,4 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
+	& .wp-block-categories__label {
+		width: 100%;
+		display: block;
+	}
 }

package/src/columns/index.js

@@ -23,7 +23,7 @@ export const settings = {
 	icon,
 	variations,
 	example: {
-		viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
+		viewportWidth: 782, // Columns collapse "@media (max-width: 781px)".
 		innerBlocks: [
 			{
 				name: 'core/column',

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

@@ -260,6 +260,7 @@ export default function CoverInspectorControls( {
 									gradient: undefined,
 									customGradient: undefined,
 								} ),
+								clearable: true,
 							},
 						] }
 						panelId={ clientId }