@wordpress/block-library 8.3.2 → 8.4.0

package/build-style/style.css

@@ -98,6 +98,9 @@
 .wp-block-avatar {
   box-sizing: border-box;
 }
+.wp-block-avatar img {
+  box-sizing: border-box;
+}
 .wp-block-avatar.aligncenter {
   text-align: center;
 }
@@ -200,6 +203,37 @@
   background-image: none;
 }
 
+.wp-block-button .wp-block-button__link:where(.has-border-color) {
+  border-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-top-color"]) {
+  border-top-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-right-color"]) {
+  border-right-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-bottom-color"]) {
+  border-bottom-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-left-color"]) {
+  border-left-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-style"]) {
+  border-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-top-style"]) {
+  border-top-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-right-style"]) {
+  border-right-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-bottom-style"]) {
+  border-bottom-width: initial;
+}
+.wp-block-button .wp-block-button__link:where([style*="border-left-style"]) {
+  border-left-width: initial;
+}
+
 .wp-block-buttons {
   /* stylelint-disable indentation */
 }
@@ -1073,6 +1107,7 @@ section.wp-block-cover-image > h2,
 :where(.wp-block-file__button) {
   border-radius: 2em;
   padding: 0.5em 1em;
+  display: inline-block;
 }
 :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;
@@ -1422,6 +1457,10 @@ h6.has-background {
   vertical-align: bottom;
   box-sizing: border-box;
 }
+.wp-block-image[style*=border-radius] > a,
+.wp-block-image[style*=border-radius] img {
+  border-radius: inherit;
+}
 .wp-block-image.has-custom-border img {
   box-sizing: border-box;
 }
@@ -1450,6 +1489,7 @@ h6.has-background {
   float: left;
   /*rtl:ignore*/
   margin-left: 0;
+  /*rtl:ignore*/
   margin-right: 1em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
@@ -1459,6 +1499,7 @@ h6.has-background {
   float: right;
   /*rtl:ignore*/
   margin-right: 0;
+  /*rtl:ignore*/
   margin-left: 1em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
@@ -1534,12 +1575,24 @@ ol.wp-block-latest-comments {
   box-sizing: border-box;
 }
 
+: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 :where(.wp-block-latest-comments:not([style*="line-height"])),
+.has-excerpts :where(.wp-block-latest-comments:not([style*="line-height"])) {
+  line-height: 1.5;
+}
+
 .wp-block-latest-comments .wp-block-latest-comments {
   padding-left: 0;
 }
 
 .wp-block-latest-comments__comment {
-  line-height: 1.1;
   list-style: none;
   margin-bottom: 1em;
 }
@@ -1551,13 +1604,9 @@ ol.wp-block-latest-comments {
 .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt {
   margin-left: 3.25em;
 }
-.has-dates .wp-block-latest-comments__comment, .has-excerpts .wp-block-latest-comments__comment {
-  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;
 }
 
@@ -1576,6 +1625,11 @@ ol.wp-block-latest-comments {
   width: 2.5em;
 }
 
+.wp-block-latest-comments[style*=font-size] a,
+.wp-block-latest-comments[class*=-font-size] a {
+  font-size: inherit;
+}
+
 .wp-block-latest-posts {
   box-sizing: border-box;
 }
@@ -2715,18 +2769,18 @@ p.has-background {
   box-sizing: border-box;
   overflow-wrap: break-word;
 }
-.wp-block-quote.is-style-large:not(.is-style-plain), .wp-block-quote.is-large:not(.is-style-plain) {
+.wp-block-quote.is-style-large:where(:not(.is-style-plain)), .wp-block-quote.is-large:where(:not(.is-style-plain)) {
   margin-bottom: 1em;
   padding: 0 1em;
 }
-.wp-block-quote.is-style-large:not(.is-style-plain) p, .wp-block-quote.is-large:not(.is-style-plain) p {
+.wp-block-quote.is-style-large:where(:not(.is-style-plain)) p, .wp-block-quote.is-large:where(:not(.is-style-plain)) p {
   font-size: 1.5em;
   font-style: italic;
   line-height: 1.6;
 }
-.wp-block-quote.is-style-large:not(.is-style-plain) cite,
-.wp-block-quote.is-style-large:not(.is-style-plain) footer, .wp-block-quote.is-large:not(.is-style-plain) cite,
-.wp-block-quote.is-large:not(.is-style-plain) footer {
+.wp-block-quote.is-style-large:where(:not(.is-style-plain)) cite,
+.wp-block-quote.is-style-large:where(:not(.is-style-plain)) footer, .wp-block-quote.is-large:where(:not(.is-style-plain)) cite,
+.wp-block-quote.is-large:where(:not(.is-style-plain)) footer {
   font-size: 1.125em;
   text-align: right;
 }

package/build-types/table-of-contents/utils.d.ts

@@ -16,7 +16,7 @@ export interface NestedHeadingData {
  * Takes a flat list of heading parameters and nests them based on each header's
  * immediate parent's level.
  *
- * @param  headingList The flat list of headings to nest.
+ * @param headingList The flat list of headings to nest.
  *
  * @return The nested list of headings.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.3.2",
+	"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.2",
-		"@wordpress/blocks": "^12.3.1",
-		"@wordpress/components": "^23.3.1",
-		"@wordpress/compose": "^6.3.1",
-		"@wordpress/core-data": "^6.3.1",
-		"@wordpress/data": "^8.3.1",
-		"@wordpress/date": "^4.26.1",
-		"@wordpress/deprecated": "^3.26.1",
-		"@wordpress/dom": "^3.26.1",
-		"@wordpress/element": "^5.3.1",
-		"@wordpress/escape-html": "^2.26.1",
-		"@wordpress/experiments": "^0.8.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.1",
-		"@wordpress/notices": "^3.26.1",
-		"@wordpress/primitives": "^3.24.1",
-		"@wordpress/reusable-blocks": "^4.3.2",
-		"@wordpress/rich-text": "^6.3.1",
-		"@wordpress/server-side-render": "^4.3.1",
-		"@wordpress/url": "^3.27.1",
-		"@wordpress/viewport": "^5.3.1",
+		"@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": "3eb2c536278d5a17f698b9c378fe3db746a89622"
+	"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/classic.scss

@@ -13,3 +13,8 @@
 
 	font-size: 1.125em;
 }
+
+.wp-block-file__button {
+	background: #32373c;
+	color: $white;
+}

package/src/cover/edit/index.js

@@ -116,7 +116,10 @@ function CoverEdit( {
 	// we define the url and background type
 	// depending on the value of the useFeaturedImage flag
 	// to preview in edit the dynamic featured image
-	const url = useFeaturedImage ? mediaUrl : attributes.url;
+	const url = useFeaturedImage
+		? mediaUrl
+		: // Ensure the url is not malformed due to sanitization through `wp_kses`.
+		  attributes.url?.replaceAll( '&', '&' );
 	const backgroundType = useFeaturedImage
 		? IMAGE_BACKGROUND_TYPE
 		: attributes.backgroundType;

package/src/editor.scss

@@ -93,3 +93,8 @@
  * These are only output in the editor, but styles here are NOT prefixed .editor-styles-wrapper.
  * This allows us to create normalization styles that are easily overridden by editor styles.
  */
+
+// Remove the browser default border for iframe in Custom HTML block, Embed block, etc.
+.editor-styles-wrapper iframe:not([frameborder]) {
+	border: 0;
+}

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.
 	}
 }