@wordpress/block-library 8.3.6 → 8.5.0

package/src/audio/test/__snapshots__/edit.native.js.snap

@@ -3,7 +3,7 @@
 exports[`Audio block renders audio block error state without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }
@@ -20,7 +20,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -28,7 +28,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -37,7 +37,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -51,7 +51,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
@@ -60,7 +60,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         Svg
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
@@ -68,7 +68,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
         <View>
           Svg
           <Text
-            style={Object {}}
+            style={{}}
           >
             Failed to insert audio file. Please tap for options.
           </Text>
@@ -78,8 +78,8 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -91,7 +91,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -99,7 +99,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -107,9 +107,9 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -140,14 +140,14 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           placeholder="Add caption"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -156,7 +156,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -167,7 +167,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
 exports[`Audio block renders audio file without crashing 1`] = `
 <View
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }
@@ -184,7 +184,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   <View
     pointerEvents="box-none"
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -192,7 +192,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
   >
     <View
       style={
-        Array [
+        [
           undefined,
           undefined,
           undefined,
@@ -201,7 +201,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
     />
     <View
       accessibilityState={
-        Object {
+        {
           "disabled": true,
         }
       }
@@ -215,7 +215,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Object {
+        {
           "height": 44,
         }
       }
@@ -224,14 +224,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
         Svg
       </View>
       <View
-        style={Object {}}
+        style={{}}
       >
         <Text>
           59IrU0WJtq
         </Text>
         <View>
           <Text
-            style={Object {}}
+            style={{}}
           >
             MP3 audio file
           </Text>
@@ -253,7 +253,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       >
         <Text
           style={
-            Object {
+            {
               "color": "white",
             }
           }
@@ -265,8 +265,8 @@ exports[`Audio block renders audio file without crashing 1`] = `
   </View>
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "height": 44,
         },
         false,
@@ -278,7 +278,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
       accessibilityRole="button"
       accessible={true}
       style={
-        Object {
+        {
           "display": "none",
           "flex": 1,
         }
@@ -286,7 +286,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
     >
       <View
         style={
-          Array [
+          [
             undefined,
             undefined,
           ]
@@ -294,9 +294,9 @@ exports[`Audio block renders audio file without crashing 1`] = `
       >
         <RCTAztecView
           accessible={true}
-          activeFormats={Array []}
+          activeFormats={[]}
           blockType={
-            Object {
+            {
               "tag": "p",
             }
           }
@@ -327,14 +327,14 @@ exports[`Audio block renders audio file without crashing 1`] = `
           placeholder="Add caption"
           placeholderTextColor="gray"
           style={
-            Object {
+            {
               "backgroundColor": undefined,
               "maxWidth": undefined,
               "minHeight": 0,
             }
           }
           text={
-            Object {
+            {
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
@@ -343,7 +343,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
             }
           }
           textAlign="center"
-          triggerKeyCodes={Array []}
+          triggerKeyCodes={[]}
         />
       </View>
     </View>
@@ -355,7 +355,7 @@ exports[`Audio block renders placeholder without crashing 1`] = `
 <View>
   <View
     style={
-      Object {
+      {
         "flex": 1,
       }
     }
@@ -374,8 +374,8 @@ exports[`Audio block renders placeholder without crashing 1`] = `
       onResponderTerminationRequest={[Function]}
       onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Array [
+        [
+          [
             undefined,
             undefined,
             undefined,
@@ -386,13 +386,13 @@ exports[`Audio block renders placeholder without crashing 1`] = `
     >
       <View
         style={
-          Object {
+          {
             "fill": "gray",
           }
         }
       >
         <View
-          style={Object {}}
+          style={{}}
         >
           Svg
         </View>

package/src/avatar/block.json

@@ -25,6 +25,7 @@
 	},
 	"usesContext": [ "postType", "postId", "commentId" ],
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"align": true,
 		"alignWide": false,

package/src/avatar/edit.js

@@ -48,6 +48,7 @@ const AvatarInspectorControls = ( {
 				value={ attributes?.size }
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Link to user profile' ) }
 				onChange={ () =>
 					setAttributes( { isLink: ! attributes.isLink } )
@@ -122,7 +123,6 @@ const ResizableAvatar = ( {
 				<img
 					src={ doubledSizedSrc }
 					alt={ avatar.alt }
-					{ ...borderProps }
 					className={ classnames(
 						'avatar',
 						'avatar-' + attributes.size,
@@ -130,9 +130,7 @@ const ResizableAvatar = ( {
 						'wp-block-avatar__image',
 						borderProps.className
 					) }
-					style={ {
-						...borderProps.style, // Border radius, width and style.
-					} }
+					style={ borderProps.style }
 				/>
 			</ResizableBox>
 		</div>

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;
+	}
+}