@wordpress/block-library 8.3.3 → 8.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.3.3",
+	"version": "8.4.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,34 +31,34 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.26.1",
-		"@wordpress/api-fetch": "^6.23.1",
-		"@wordpress/autop": "^3.26.1",
-		"@wordpress/blob": "^3.26.1",
-		"@wordpress/block-editor": "^11.3.3",
-		"@wordpress/blocks": "^12.3.2",
-		"@wordpress/components": "^23.3.2",
-		"@wordpress/compose": "^6.3.2",
-		"@wordpress/core-data": "^6.3.2",
-		"@wordpress/data": "^8.3.2",
-		"@wordpress/date": "^4.26.2",
-		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/dom": "^3.26.1",
-		"@wordpress/element": "^5.3.1",
-		"@wordpress/escape-html": "^2.26.1",
-		"@wordpress/hooks": "^3.26.1",
-		"@wordpress/html-entities": "^3.26.1",
-		"@wordpress/i18n": "^4.26.1",
-		"@wordpress/icons": "^9.17.1",
-		"@wordpress/keycodes": "^3.26.2",
-		"@wordpress/notices": "^3.26.2",
-		"@wordpress/primitives": "^3.24.1",
-		"@wordpress/private-apis": "^0.8.1",
-		"@wordpress/reusable-blocks": "^4.3.3",
-		"@wordpress/rich-text": "^6.3.2",
-		"@wordpress/server-side-render": "^4.3.2",
-		"@wordpress/url": "^3.27.1",
-		"@wordpress/viewport": "^5.3.2",
+		"@wordpress/a11y": "^3.27.0",
+		"@wordpress/api-fetch": "^6.24.0",
+		"@wordpress/autop": "^3.27.0",
+		"@wordpress/blob": "^3.27.0",
+		"@wordpress/block-editor": "^11.4.0",
+		"@wordpress/blocks": "^12.4.0",
+		"@wordpress/components": "^23.4.0",
+		"@wordpress/compose": "^6.4.0",
+		"@wordpress/core-data": "^6.4.0",
+		"@wordpress/data": "^8.4.0",
+		"@wordpress/date": "^4.27.0",
+		"@wordpress/deprecated": "^3.27.0",
+		"@wordpress/dom": "^3.27.0",
+		"@wordpress/element": "^5.4.0",
+		"@wordpress/escape-html": "^2.27.0",
+		"@wordpress/hooks": "^3.27.0",
+		"@wordpress/html-entities": "^3.27.0",
+		"@wordpress/i18n": "^4.27.0",
+		"@wordpress/icons": "^9.18.0",
+		"@wordpress/keycodes": "^3.27.0",
+		"@wordpress/notices": "^3.27.0",
+		"@wordpress/primitives": "^3.25.0",
+		"@wordpress/private-apis": "^0.9.0",
+		"@wordpress/reusable-blocks": "^4.4.0",
+		"@wordpress/rich-text": "^6.4.0",
+		"@wordpress/server-side-render": "^4.4.0",
+		"@wordpress/url": "^3.28.0",
+		"@wordpress/viewport": "^5.4.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1bf01c01a8238ce3a681ad1e517f86033818b78d"
+	"gitHead": "c25ff895413bad4354c55c0c2d732552618b0d56"
 }

package/src/avatar/index.php

@@ -16,67 +16,19 @@
 function render_block_core_avatar( $attributes, $content, $block ) {
 	$size               = isset( $attributes['size'] ) ? $attributes['size'] : 96;
 	$wrapper_attributes = get_block_wrapper_attributes();
+	$border_attributes  = get_block_core_avatar_border_attributes( $attributes );
 
-	$image_styles = array();
+	// Class gets passed through `esc_attr` via `get_avatar`.
+	$image_classes = ! empty( $border_attributes['class'] )
+		? "wp-block-avatar__image {$border_attributes['class']}"
+		: 'wp-block-avatar__image';
 
-	// Add border width styles.
-	$has_border_width = ! empty( $attributes['style']['border']['width'] );
-
-	if ( $has_border_width ) {
-		$border_width   = $attributes['style']['border']['width'];
-		$image_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-	}
-
-	// Add border radius styles.
-	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
-
-	if ( $has_border_radius ) {
-		$border_radius = $attributes['style']['border']['radius'];
-
-		if ( is_array( $border_radius ) ) {
-			// Apply styles for individual corner border radii.
-			foreach ( $border_radius as $key => $value ) {
-				if ( null !== $value ) {
-					$name = _wp_to_kebab_case( $key );
-					// Add shared styles for individual border radii.
-					$border_style   = sprintf(
-						'border-%s-radius: %s;',
-						esc_attr( $name ),
-						esc_attr( $value )
-					);
-					$image_styles[] = $border_style;
-				}
-			}
-		} else {
-			$border_style   = sprintf( 'border-radius: %s;', esc_attr( $border_radius ) );
-			$image_styles[] = $border_style;
-		}
-	}
-
-	// Add border color styles.
-	$has_border_color = ! empty( $attributes['style']['border']['color'] );
-
-	if ( $has_border_color ) {
-		$border_color   = $attributes['style']['border']['color'];
-		$image_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-	}
-
-	// Add border style (solid, dashed, dotted ).
-	$has_border_style = ! empty( $attributes['style']['border']['style'] );
-
-	if ( $has_border_style ) {
-		$border_style   = $attributes['style']['border']['style'];
-		$image_styles[] = sprintf( 'border-style: %s;', esc_attr( $border_style ) );
-	}
-
-	// Add border classes to the avatar image for both custom colors and palette colors.
-	$image_classes = '';
-	if ( $has_border_color || isset( $attributes['borderColor'] ) ) {
-		$image_classes .= 'has-border-color';
-	}
-	if ( isset( $attributes['borderColor'] ) ) {
-		$image_classes .= ' has-' . $attributes['borderColor'] . '-border-color';
-	}
+	// Unlike class, `get_avatar` doesn't filter the styles via `esc_attr`.
+	// The style engine does pass the border styles through
+	// `safecss_filter_attr` however.
+	$image_styles = ! empty( $border_attributes['style'] )
+		? sprintf( ' style="%s"', esc_attr( $border_attributes['style'] ) )
+		: '';
 
 	if ( ! isset( $block->context['commentId'] ) ) {
 		$author_id   = isset( $attributes['userId'] ) ? $attributes['userId'] : get_post_field( 'post_author', $block->context['postId'] );
@@ -89,8 +41,8 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 			'',
 			$alt,
 			array(
-				'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
-				'class'      => "wp-block-avatar__image $image_classes ",
+				'extra_attr' => $image_styles,
+				'class'      => $image_classes,
 			)
 		);
 		if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
@@ -116,8 +68,8 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 		'',
 		$alt,
 		array(
-			'extra_attr' => isset( $image_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $image_styles ) ) ) : '',
-			'class'      => "wp-block-avatar__image $image_classes",
+			'extra_attr' => $image_styles,
+			'class'      => $image_classes,
 		)
 	);
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] && isset( $comment->comment_author_url ) && '' !== $comment->comment_author_url ) {
@@ -132,6 +84,58 @@ function render_block_core_avatar( $attributes, $content, $block ) {
 	return sprintf( '<div %1s>%2s</div>', $wrapper_attributes, $avatar_block );
 }
 
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Avatar block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_avatar_border_attributes( $attributes ) {
+	$border_styles = array();
+	$sides         = array( 'top', 'right', 'bottom', 'left' );
+
+	// Border radius.
+	if ( isset( $attributes['style']['border']['radius'] ) ) {
+		$border_styles['radius'] = $attributes['style']['border']['radius'];
+	}
+
+	// Border style.
+	if ( isset( $attributes['style']['border']['style'] ) ) {
+		$border_styles['style'] = $attributes['style']['border']['style'];
+	}
+
+	// Border width.
+	if ( isset( $attributes['style']['border']['width'] ) ) {
+		$border_styles['width'] = $attributes['style']['border']['width'];
+	}
+
+	// Border color.
+	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+	// Individual border styles e.g. top, left etc.
+	foreach ( $sides as $side ) {
+		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border_styles[ $side ] = array(
+			'color' => isset( $border['color'] ) ? $border['color'] : null,
+			'style' => isset( $border['style'] ) ? $border['style'] : null,
+			'width' => isset( $border['width'] ) ? $border['width'] : null,
+		);
+	}
+
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$attributes = array();
+	if ( ! empty( $styles['classnames'] ) ) {
+		$attributes['class'] = $styles['classnames'];
+	}
+	if ( ! empty( $styles['css'] ) ) {
+		$attributes['style'] = $styles['css'];
+	}
+	return $attributes;
+}
+
 /**
  * Registers the `core/avatar` block on the server.
  */

package/src/avatar/style.scss

@@ -1,6 +1,9 @@
 .wp-block-avatar {
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
+	img {
+		box-sizing: border-box;
+	}
 
 	&.aligncenter {
 		text-align: center;

package/src/button/block.json

@@ -16,30 +16,35 @@
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "href"
+			"attribute": "href",
+			"__experimentalRole": "content"
 		},
 		"title": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "title"
+			"attribute": "title",
+			"__experimentalRole": "content"
 		},
 		"text": {
 			"type": "string",
 			"source": "html",
-			"selector": "a"
+			"selector": "a",
+			"__experimentalRole": "content"
 		},
 		"linkTarget": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "target"
+			"attribute": "target",
+			"__experimentalRole": "content"
 		},
 		"rel": {
 			"type": "string",
 			"source": "attribute",
 			"selector": "a",
-			"attribute": "rel"
+			"attribute": "rel",
+			"__experimentalRole": "content"
 		},
 		"placeholder": {
 			"type": "string"
@@ -92,10 +97,16 @@
 			}
 		},
 		"__experimentalBorder": {
+			"color": true,
 			"radius": true,
+			"style": true,
+			"width": true,
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
-				"radius": true
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
 			}
 		},
 		"__experimentalSelector": ".wp-block-button .wp-block-button__link"

package/src/button/edit.js

@@ -32,6 +32,7 @@ import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
 import { createBlock } from '@wordpress/blocks';
 import { useMergeRefs } from '@wordpress/compose';
+import { prependHTTP } from '@wordpress/url';
 
 const NEW_TAB_REL = 'noreferrer noopener';
 
@@ -240,7 +241,7 @@ function ButtonEdit( props ) {
 							url: newURL = '',
 							opensInNewTab: newOpensInNewTab,
 						} ) => {
-							setAttributes( { url: newURL } );
+							setAttributes( { url: prependHTTP( newURL ) } );
 
 							if ( opensInNewTab !== newOpensInNewTab ) {
 								onToggleOpenInNewTab( newOpensInNewTab );

package/src/button/editor.scss

@@ -79,3 +79,39 @@ div[data-type="core/button"] {
 .editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
 	text-decoration: inherit;
 }
+
+.editor-styles-wrapper .wp-block-button .wp-block-button__link {
+	// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
+	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}

package/src/button/style.scss

@@ -92,7 +92,6 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0;
 }
 
-
 // the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
@@ -116,3 +115,40 @@ $blocks-block__margin: 0.5em;
 	// background-image is required to overwrite a gradient background
 	background-image: none;
 }
+
+.wp-block-button .wp-block-button__link {
+	// The following styles ensure a default border is applied when the user
+	// selects only a border color or style. This overcomes the zero border
+	// width applied by core's theme.json via the elements API.
+	&:where(.has-border-color) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-color"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-color"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-color"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-color"]) {
+		border-left-width: initial;
+	}
+
+	&:where([style*="border-style"]) {
+		border-width: initial;
+	}
+	&:where([style*="border-top-style"]) {
+		border-top-width: initial;
+	}
+	&:where([style*="border-right-style"]) {
+		border-right-width: initial;
+	}
+	&:where([style*="border-bottom-style"]) {
+		border-bottom-width: initial;
+	}
+	&:where([style*="border-left-style"]) {
+		border-left-width: initial;
+	}
+}

package/src/file/block.json

@@ -56,7 +56,16 @@
 	},
 	"supports": {
 		"anchor": true,
-		"align": true
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"link": true
+			}
+		}
 	},
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",

package/src/file/style.scss

@@ -27,6 +27,7 @@
 :where(.wp-block-file__button) {
 	border-radius: 2em;
 	padding: 0.5em 1em;
+	display: inline-block;
 
 	&:is(a) {
 

package/src/image/editor.scss

@@ -141,6 +141,7 @@ figure.wp-block-image:not(.wp-block) {
 	// smoother UX.
 	.reactEasyCrop_Container .reactEasyCrop_Image {
 		border: none;
+		border-radius: 0; // Prevent's theme.json radius bleeding into cropper.
 	}
 }
 

package/src/image/image.js

@@ -134,19 +134,13 @@ export default function Image( {
 				} = select( blockEditorStore );
 
 				const rootClientId = getBlockRootClientId( clientId );
-				const settings = Object.fromEntries(
-					Object.entries( getSettings() ).filter( ( [ key ] ) =>
-						[
-							'imageEditing',
-							'imageSizes',
-							'maxWidth',
-							'mediaUpload',
-						].includes( key )
-					)
-				);
+				const settings = getSettings();
 
 				return {
-					...settings,
+					imageEditing: settings.imageEditing,
+					imageSizes: settings.imageSizes,
+					maxWidth: settings.maxWidth,
+					mediaUpload: settings.mediaUpload,
 					canInsertCover: canInsertBlockType(
 						'core/cover',
 						rootClientId

package/src/image/style.scss

@@ -6,6 +6,17 @@
 		box-sizing: border-box;
 	}
 
+	// The following style maintains border radius application for deprecated
+	// image blocks that applied border radius to the outer `figure` element.
+	//
+	// See: https://github.com/WordPress/gutenberg/issues/47422
+	&[style*="border-radius"] {
+		> a,
+		img {
+			border-radius: inherit;
+		}
+	}
+
 	&.has-custom-border {
 		img {
 			box-sizing: border-box;
@@ -41,6 +52,7 @@
 		float: left;
 		/*rtl:ignore*/
 		margin-left: 0;
+		/*rtl:ignore*/
 		margin-right: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
@@ -51,6 +63,7 @@
 		float: right;
 		/*rtl:ignore*/
 		margin-right: 0;
+		/*rtl:ignore*/
 		margin-left: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;

package/src/latest-comments/block.json

@@ -34,6 +34,19 @@
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",

package/src/latest-comments/edit.js

@@ -28,6 +28,14 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
 		attributes;
 
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			spacing: undefined,
+		},
+	};
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
@@ -71,8 +79,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 			<Disabled>
 				<ServerSideRender
 					block="core/latest-comments"
-					attributes={ attributes }
-					skipBlockSupportAttributes
+					attributes={ serverSideAttributes }
 					// The preview uses the site's locale to make it more true to how
 					// the block appears on the frontend. Setting the locale
 					// explicitly prevents any middleware from setting it to 'user'.

package/src/latest-comments/style.scss

@@ -9,6 +9,23 @@ ol.wp-block-latest-comments {
 	box-sizing: border-box;
 }
 
+// Following styles leverage :where so that typography block support styles and
+// global styles apply when necessary.
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment)) {
+	line-height: 1.1;
+}
+
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment-excerpt p)) {
+	line-height: 1.8;
+}
+
+.has-dates,
+.has-excerpts {
+	:where(.wp-block-latest-comments:not([style*="line-height"])) {
+		line-height: 1.5;
+	}
+}
+
 // Higher specificity - target list via wrapper.
 .wp-block-latest-comments .wp-block-latest-comments {
 	// Remove left spacing. Higher specificity required to
@@ -17,7 +34,6 @@ ol.wp-block-latest-comments {
 }
 
 .wp-block-latest-comments__comment {
-	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
@@ -30,16 +46,10 @@ ol.wp-block-latest-comments {
 			margin-left: 3.25em;
 		}
 	}
-
-	.has-dates &,
-	.has-excerpts & {
-		line-height: 1.5;
-	}
 }
 
 .wp-block-latest-comments__comment-excerpt p {
 	font-size: 0.875em;
-	line-height: 1.8;
 	margin: 0.36em 0 1.4em;
 }
 
@@ -57,3 +67,11 @@ ol.wp-block-latest-comments {
 	margin-right: 0.75em;
 	width: 2.5em;
 }
+
+// Enforce font size when user has made selection at the individual block level.
+.wp-block-latest-comments[style*="font-size"],
+.wp-block-latest-comments[class*="-font-size"] {
+	a {
+		font-size: inherit;
+	}
+}

package/src/navigation/edit/menu-inspector-controls.js

@@ -19,7 +19,6 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenuSelector from './navigation-menu-selector';
-import { LeafMoreMenu } from '../leaf-more-menu';
 import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
@@ -34,8 +33,7 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor } = unlock( blockEditorPrivateApis );
-
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(