@wordpress/block-library 7.8.0 → 7.9.0

package/build-style/style.css

@@ -112,6 +112,11 @@
   text-align: right;
 }
 
+:where(.wp-block-button__link) {
+  border-radius: 9999px;
+  padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 .wp-block-buttons > .wp-block-button.has-custom-width {
   max-width: none;
 }
@@ -872,6 +877,9 @@ section.wp-block-cover-image > h2,
 .wp-block-file {
   margin-bottom: 1.5em;
 }
+.wp-block-file:not(.wp-element-button) {
+  font-size: 0.8em;
+}
 .wp-block-file.aligncenter {
   text-align: center;
 }
@@ -887,17 +895,11 @@ section.wp-block-cover-image > h2,
   margin-bottom: 1em;
 }
 
-.wp-block-file__button {
-  background: #32373c;
+:where(.wp-block-file__button) {
   border-radius: 2em;
-  color: #fff;
-  font-size: 0.8em;
   padding: 0.5em 1em;
 }
-.wp-block-file__button:is(a) {
-  text-decoration: none;
-}
-.wp-block-file__button:is(a):hover, .wp-block-file__button:is(a):visited, .wp-block-file__button:is(a):focus, .wp-block-file__button:is(a):active {
+:where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
@@ -1602,7 +1604,6 @@ ul.has-background {
   display: none;
 }
 .wp-block-navigation .wp-block-navigation-item__content {
-  color: inherit;
   display: block;
   padding: 0;
 }
@@ -2035,6 +2036,15 @@ button.wp-block-navigation-item__content {
   position: relative;
 }
 
+.has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+  margin-top: 46px;
+}
+@media (min-width: 782px) {
+  .has-modal-open .admin-bar .wp-block-navigation__responsive-dialog {
+    margin-top: 32px;
+  }
+}
+
 html.has-modal-open {
   overflow: hidden;
 }
@@ -2228,7 +2238,8 @@ p.has-background {
 .wp-block-post-comments input:not([type=submit]):not([type=checkbox]) {
   padding: calc(0.667em + 2px);
 }
-.wp-block-post-comments input[type=submit] {
+
+:where(.wp-block-post-comments input[type="submit"]) {
   border: none;
 }
 
@@ -2395,49 +2406,40 @@ p.has-background {
   color: inherit;
 }
 
-.wp-block-post-template,
-.wp-block-query-loop {
+.wp-block-post-template {
   margin-top: 0;
   margin-bottom: 0;
   max-width: 100%;
   list-style: none;
   padding: 0;
 }
-.wp-block-post-template.wp-block-post-template,
-.wp-block-query-loop.wp-block-post-template {
+.wp-block-post-template.wp-block-post-template {
   background: none;
 }
-.wp-block-post-template.is-flex-container,
-.wp-block-query-loop.is-flex-container {
+.wp-block-post-template.is-flex-container {
   flex-direction: row;
   display: flex;
   flex-wrap: wrap;
   gap: 1.25em;
 }
-.wp-block-post-template.is-flex-container li,
-.wp-block-query-loop.is-flex-container li {
+.wp-block-post-template.is-flex-container li {
   margin: 0;
   width: 100%;
 }
 @media (min-width: 600px) {
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li,
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-2 > li {
+  .wp-block-post-template.is-flex-container.is-flex-container.columns-2 > li {
     width: calc((100% / 2) - 1.25em + (1.25em / 2));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li,
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-3 > li {
+  .wp-block-post-template.is-flex-container.is-flex-container.columns-3 > li {
     width: calc((100% / 3) - 1.25em + (1.25em / 3));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li,
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-4 > li {
+  .wp-block-post-template.is-flex-container.is-flex-container.columns-4 > li {
     width: calc((100% / 4) - 1.25em + (1.25em / 4));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li,
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-5 > li {
+  .wp-block-post-template.is-flex-container.is-flex-container.columns-5 > li {
     width: calc((100% / 5) - 1.25em + (1.25em / 5));
   }
-  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li,
-.wp-block-query-loop.is-flex-container.is-flex-container.columns-6 > li {
+  .wp-block-post-template.is-flex-container.is-flex-container.columns-6 > li {
     width: calc((100% / 6) - 1.25em + (1.25em / 6));
   }
 }
@@ -2555,15 +2557,8 @@ ul.wp-block-rss.is-grid li {
 }
 
 .wp-block-search__button {
-  background: #f7f7f7;
-  border: 1px solid #ccc;
-  padding: 0.375em 0.625em;
-  color: #32373c;
   margin-left: 0.625em;
   word-break: normal;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
 }
 .wp-block-search__button.has-icon {
   line-height: 0;
@@ -2574,6 +2569,11 @@ ul.wp-block-rss.is-grid li {
   fill: currentColor;
 }
 
+:where(.wp-block-search__button) {
+  border: 1px solid #ccc;
+  padding: 0.375em 0.625em;
+}
+
 .wp-block-search__inside-wrapper {
   display: flex;
   flex: auto;
@@ -2611,7 +2611,7 @@ ul.wp-block-rss.is-grid li {
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input:focus {
   outline: none;
 }
-:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__button {
+:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) :where(.wp-block-search__button) {
   padding: 0.125em 0.5em;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.8.0",
+	"version": "7.9.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -34,32 +34,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.11.0",
-		"@wordpress/api-fetch": "^6.8.0",
-		"@wordpress/autop": "^3.11.0",
-		"@wordpress/blob": "^3.11.0",
-		"@wordpress/block-editor": "^9.3.0",
-		"@wordpress/blocks": "^11.10.0",
-		"@wordpress/components": "^19.13.0",
-		"@wordpress/compose": "^5.9.0",
-		"@wordpress/core-data": "^4.9.0",
-		"@wordpress/data": "^6.11.0",
-		"@wordpress/date": "^4.11.0",
-		"@wordpress/deprecated": "^3.11.0",
-		"@wordpress/dom": "^3.11.0",
-		"@wordpress/element": "^4.9.0",
-		"@wordpress/hooks": "^3.11.0",
-		"@wordpress/html-entities": "^3.11.0",
-		"@wordpress/i18n": "^4.11.0",
-		"@wordpress/icons": "^9.2.0",
-		"@wordpress/keycodes": "^3.11.0",
-		"@wordpress/notices": "^3.11.0",
-		"@wordpress/primitives": "^3.9.0",
-		"@wordpress/reusable-blocks": "^3.9.0",
-		"@wordpress/rich-text": "^5.9.0",
-		"@wordpress/server-side-render": "^3.9.0",
-		"@wordpress/url": "^3.12.0",
-		"@wordpress/viewport": "^4.9.0",
+		"@wordpress/a11y": "^3.12.0",
+		"@wordpress/api-fetch": "^6.9.0",
+		"@wordpress/autop": "^3.12.0",
+		"@wordpress/blob": "^3.12.0",
+		"@wordpress/block-editor": "^9.4.0",
+		"@wordpress/blocks": "^11.11.0",
+		"@wordpress/components": "^19.14.0",
+		"@wordpress/compose": "^5.10.0",
+		"@wordpress/core-data": "^4.10.0",
+		"@wordpress/data": "^6.12.0",
+		"@wordpress/date": "^4.12.0",
+		"@wordpress/deprecated": "^3.12.0",
+		"@wordpress/dom": "^3.12.0",
+		"@wordpress/element": "^4.10.0",
+		"@wordpress/hooks": "^3.12.0",
+		"@wordpress/html-entities": "^3.12.0",
+		"@wordpress/i18n": "^4.12.0",
+		"@wordpress/icons": "^9.3.0",
+		"@wordpress/keycodes": "^3.12.0",
+		"@wordpress/notices": "^3.12.0",
+		"@wordpress/primitives": "^3.10.0",
+		"@wordpress/reusable-blocks": "^3.10.0",
+		"@wordpress/rich-text": "^5.10.0",
+		"@wordpress/server-side-render": "^3.10.0",
+		"@wordpress/url": "^3.13.0",
+		"@wordpress/viewport": "^4.10.0",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -76,5 +76,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

package/src/audio/edit.js

@@ -24,6 +24,7 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
@@ -200,6 +201,9 @@ function AudioEdit( {
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
 						aria-label={ __( 'Audio caption text' ) }
 						placeholder={ __( 'Add caption' ) }
 						value={ caption }

package/src/audio/save.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { RichText, useBlockProps } from '@wordpress/block-editor';
+import {
+	RichText,
+	useBlockProps,
+	__experimentalGetElementClassName,
+} from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { autoplay, caption, loop, preload, src } = attributes;
@@ -17,7 +21,13 @@ export default function save( { attributes } ) {
 					preload={ preload }
 				/>
 				{ ! RichText.isEmpty( caption ) && (
-					<RichText.Content tagName="figcaption" value={ caption } />
+					<RichText.Content
+						tagName="figcaption"
+						value={ caption }
+						className={ __experimentalGetElementClassName(
+							'caption'
+						) }
+					/>
 				) }
 			</figure>
 		)

package/src/avatar/hooks.js

@@ -76,15 +76,12 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		},
 		[ postType, postId, userId ]
 	);
-
-	const avatarUrls =
-		authorDetails && authorDetails?.avatar_urls
-			? Object.values( authorDetails.avatar_urls )
-			: null;
-	const sizes =
-		authorDetails && authorDetails?.avatar_urls
-			? Object.keys( authorDetails.avatar_urls )
-			: null;
+	const avatarUrls = authorDetails?.avatar_urls
+		? Object.values( authorDetails.avatar_urls )
+		: null;
+	const sizes = authorDetails?.avatar_urls
+		? Object.keys( authorDetails.avatar_urls )
+		: null;
 	const { minSize, maxSize } = getAvatarSizes( sizes );
 	const defaultAvatar = useDefaultAvatar();
 	return {

package/src/button/block.json

@@ -89,30 +89,7 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link",
-		"__experimentalStyle": {
-			"border": {
-				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
-				"radius": "9999px"
-			},
-			"color": {
-				"text": "#fff",
-				"background": "#32373c"
-			},
-			"typography": {
-				"fontSize": "1.125em",
-				"textDecoration": "none"
-			},
-			"spacing": {
-				"padding": {
-					"//": "The extra 2px are added to size solids the same as the outline versions.",
-					"top": "calc(0.667em + 2px)",
-					"right": "calc(1.333em + 2px)",
-					"bottom": "calc(0.667em + 2px)",
-					"left": "calc(1.333em + 2px)"
-				}
-			}
-		}
+		"__experimentalSelector": ".wp-block-button__link"
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

package/src/button/edit.js

@@ -25,7 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -172,7 +172,7 @@ function ButtonEdit( props ) {
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
 						},
-						__experimentalElementButtonClassName
+						__experimentalGetElementClassName( 'button' )
 					) }
 					style={ {
 						...borderProps.style,

package/src/button/save.js

@@ -12,7 +12,7 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
-	__experimentalElementButtonClassName,
+	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
@@ -35,7 +35,7 @@ export default function save( { attributes, className } ) {
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
 		},
-		__experimentalElementButtonClassName
+		__experimentalGetElementClassName( 'button' )
 	);
 	const buttonStyle = {
 		...borderProps.style,

package/src/button/style.scss

@@ -29,6 +29,16 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
+// These rules are set to zero specificity to keep the default styles for buttons.
+// They are needed for backwards compatibility.
+:where(.wp-block-button__link) {
+	// 100% causes an oval, but any explicit but really high value retains the pill shape.
+	border-radius: 9999px;
+
+	// The extra 2px are added to size solids the same as the outline versions.
+	padding: calc(0.667em + 2px) calc(1.333em + 2px);
+}
+
 // Increased specificity needed to override margins.
 .wp-block-buttons > .wp-block-button {
 	&.has-custom-width {

package/src/columns/variations.js

@@ -57,7 +57,7 @@ const variations = [
 	},
 	{
 		name: 'two-columns-one-third-two-thirds',
-		title: __( '30 / 70' ),
+		title: __( '33 / 66' ),
 		description: __( 'Two columns; one-third, two-thirds split' ),
 		icon: (
 			<SVG
@@ -81,7 +81,7 @@ const variations = [
 	},
 	{
 		name: 'two-columns-two-thirds-one-third',
-		title: __( '70 / 30' ),
+		title: __( '66 / 33' ),
 		description: __( 'Two columns; two-thirds, one-third split' ),
 		icon: (
 			<SVG

package/src/comment-author-name/block.json

@@ -18,10 +18,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-author-name/edit.js

@@ -41,7 +41,7 @@ export default function Edit( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
-	const displayName = useSelect(
+	let displayName = useSelect(
 		( select ) => {
 			const { getEntityRecord } = select( coreStore );
 
@@ -92,15 +92,7 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! displayName ) {
-		return (
-			<>
-				{ inspectorControls }
-				{ blockControls }
-				<div { ...blockProps }>
-					{ _x( 'Comment Author', 'block title' ) }
-				</div>
-			</>
-		);
+		displayName = _x( 'Comment Author', 'block title' );
 	}
 
 	const displayAuthor = isLink ? (
@@ -111,9 +103,8 @@ export default function Edit( {
 			{ displayName }
 		</a>
 	) : (
-		{ displayName }
+		displayName
 	);
-
 	return (
 		<>
 			{ inspectorControls }

package/src/comment-date/block.json

@@ -14,10 +14,6 @@
 		"isLink": {
 			"type": "boolean",
 			"default": true
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"usesContext": [ "commentId" ],

package/src/comment-date/edit.js

@@ -33,7 +33,7 @@ export default function Edit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
+	let [ date ] = useEntityProp( 'root', 'comment', 'date', commentId );
 	const [ siteFormat = getDateSettings().formats.date ] = useEntityProp(
 		'root',
 		'site',
@@ -60,21 +60,17 @@ export default function Edit( {
 	);
 
 	if ( ! commentId || ! date ) {
-		return (
-			<>
-				{ inspectorControls }
-				<div { ...blockProps }>
-					<time>{ _x( 'Comment Date', 'block title' ) }</time>
-				</div>
-			</>
-		);
+		date = _x( 'Comment Date', 'block title' );
 	}
 
-	let commentDate = (
-		<time dateTime={ dateI18n( 'c', date ) }>
-			{ dateI18n( format || siteFormat, date ) }
-		</time>
-	);
+	let commentDate =
+		date instanceof Date ? (
+			<time dateTime={ dateI18n( 'c', date ) }>
+				{ dateI18n( format || siteFormat, date ) }
+			</time>
+		) : (
+			<time>{ date }</time>
+		);
 
 	if ( isLink ) {
 		commentDate = (

package/src/comment-date/index.php

@@ -24,9 +24,6 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	}
 
 	$classes = '';
-	if ( isset( $attributes['fontSize'] ) ) {
-		$classes .= 'has-' . esc_attr( $attributes['fontSize'] ) . '-font-size';
-	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	$formatted_date     = get_comment_date(

package/src/comment-edit-link/block.json

@@ -15,10 +15,6 @@
 		},
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

package/src/comment-reply-link/block.json

@@ -11,10 +11,6 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
-		},
-		"fontSize": {
-			"type": "string",
-			"default": "small"
 		}
 	},
 	"supports": {

package/src/comments/edit.js

@@ -37,7 +37,12 @@ const TEMPLATE = [
 						'core/column',
 						{},
 						[
-							[ 'core/comment-author-name' ],
+							[
+								'core/comment-author-name',
+								{
+									fontSize: 'small',
+								},
+							],
 							[
 								'core/group',
 								{
@@ -52,12 +57,27 @@ const TEMPLATE = [
 									},
 								},
 								[
-									[ 'core/comment-date' ],
-									[ 'core/comment-edit-link' ],
+									[
+										'core/comment-date',
+										{
+											fontSize: 'small',
+										},
+									],
+									[
+										'core/comment-edit-link',
+										{
+											fontSize: 'small',
+										},
+									],
 								],
 							],
 							[ 'core/comment-content' ],
-							[ 'core/comment-reply-link' ],
+							[
+								'core/comment-reply-link',
+								{
+									fontSize: 'small',
+								},
+							],
 						],
 					],
 				],

package/src/comments-title/deprecated.js

@@ -18,13 +18,11 @@ export default [
 		},
 		supports,
 		migrate: ( oldAttributes ) => {
-			/* eslint-disable no-unused-vars */
 			const {
 				singleCommentLabel,
 				multipleCommentsLabel,
 				...newAttributes
 			} = oldAttributes;
-			/* eslint-enable no-unused-vars */
 			return newAttributes;
 		},
 		isEligible: ( { multipleCommentsLabel, singleCommentLabel } ) =>

package/src/cover/block.json

@@ -83,6 +83,7 @@
 		"html": false,
 		"spacing": {
 			"padding": true,
+			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"padding": true
 			}

package/src/cover/index.php

@@ -32,20 +32,33 @@ function render_block_core_cover( $attributes, $content ) {
 
 		$image = get_the_post_thumbnail( null, 'post-thumbnail', $attr );
 
-		$content = str_replace(
-			'</span><div',
-			'</span>' . $image . '<div',
-			$content
-		);
-
+		/*
+		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
+		 * and removes eventual withespace characters between the two (typically introduced at template level)
+		 */
+		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
+		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
+			$offset  = $matches[0][1];
+			$content = substr( $content, 0, $offset ) . $image . substr( $content, $offset );
+		}
 	} else {
 		if ( in_the_loop() ) {
 			update_post_thumbnail_cache();
 		}
 		$current_featured_image = get_the_post_thumbnail_url();
-		$content                = preg_replace(
+
+		$styles = 'background-image:url(' . esc_url( $current_featured_image ) . '); ';
+
+		if ( isset( $attributes['minHeight'] ) ) {
+			$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
+			$height      = " min-height:{$attributes['minHeight']}{$height_unit}";
+
+			$styles .= $height;
+		}
+
+		$content = preg_replace(
 			'/class=\".*?\"/',
-			'${0} style="background-image:url(' . esc_url( $current_featured_image ) . ')"',
+			'${0} style="' . $styles . '"',
 			$content,
 			1
 		);