Embed Block: Border support added

docs/reference-guides/core-blocks.md

@@ -263,7 +263,7 @@ Add a block that displays content pulled from other sites, like Twitter or YouTu
 
 -	**Name:** core/embed
 -	**Category:** embed
--	**Supports:** align, interactivity (clientNavigation), spacing (margin)
+-	**Supports:** align, interactivity (clientNavigation), spacing (margin, padding)
 -	**Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url
 
 ## File

packages/block-library/src/embed/block.json

@@ -43,12 +43,29 @@
 	"supports": {
 		"align": true,
 		"spacing": {
-			"margin": true
+			"margin": true,
+			"padding": true
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			},
+			"__experimentalSkipSerialization": true
 		}
 	},
+	"selectors": {
+		"border": ".wp-block-embed__wrapper "
+	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"
 }

packages/block-library/src/embed/embed-preview.js

@@ -13,7 +13,10 @@ import clsx from 'clsx';
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
-import { BlockIcon } from '@wordpress/block-editor';
+import {
+	BlockIcon,
+	__experimentalUseBorderProps as useBorderProps,
+} from '@wordpress/block-editor';
 import { useState } from '@wordpress/element';
 import { getAuthority } from '@wordpress/url';
 
@@ -31,6 +34,7 @@ export default function EmbedPreview( {
 	className,
 	icon,
 	label,
+	attributes,
 } ) {
 	const [ interactive, setInteractive ] = useState( false );
 
@@ -64,6 +68,7 @@ export default function EmbedPreview( {
 		className,
 		'wp-block-embed__wrapper'
 	);
+	const borderProps = useBorderProps( attributes );
 
 	// Disabled because the overlay div doesn't actually have a role or functionality
 	// as far as the user is concerned. We're just catching the first click so that
@@ -73,7 +78,13 @@ export default function EmbedPreview( {
 		'wp-embed' === type ? (
 			<WpEmbedPreview html={ html } />
 		) : (
-			<div className="wp-block-embed__wrapper">
+			<div
+				className={ clsx(
+					'wp-block-embed__wrapper',
+					borderProps.className
+				) }
+				style={ borderProps.style }
+			>
 				<SandBox
 					html={ html }
 					scripts={ scripts }

packages/block-library/src/embed/save.js

@@ -10,6 +10,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
@@ -18,6 +19,7 @@ export default function save( { attributes } ) {
 	if ( ! url ) {
 		return null;
 	}
+	const borderProps = getBorderClassesAndStyles( attributes );
 
 	const className = clsx( 'wp-block-embed', {
 		[ `is-type-${ type }` ]: type,
@@ -27,7 +29,13 @@ export default function save( { attributes } ) {
 
 	return (
 		<figure { ...useBlockProps.save( { className } ) }>
-			<div className="wp-block-embed__wrapper">
+			<div
+				className={ clsx(
+					'wp-block-embed__wrapper',
+					borderProps.className
+				) }
+				style={ borderProps.style }
+			>
 				{ `\n${ url }\n` /* URL needs to be on its own line. */ }
 			</div>
 			{ ! RichText.isEmpty( caption ) && (

packages/block-library/src/embed/style.scss

@@ -22,6 +22,9 @@
 .wp-block-embed {
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	// Supply caption styles to embeds, even if the theme hasn't opted in.
 	// Reason being: the new markup, figcaptions, are not likely to be styled in the majority of existing themes,
 	// so we supply the styles so as to not appear broken or unstyled in those.