Embed Block: Border support added

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

@@ -47,8 +47,22 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"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,16 +68,27 @@ export default function EmbedPreview( {
 		className,
 		'wp-block-embed__wrapper'
 	);
+	const borderProps = useBorderProps( attributes );
+	const wrapperProps = {
+		className: borderProps.className,
+		style: { ...borderProps.style },
+	};
 
 	// 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
 	// the block can be selected without interacting with the embed preview that the overlay covers.
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	const embedWrapper =
 		'wp-embed' === type ? (
-			<WpEmbedPreview html={ html } />
+			<WpEmbedPreview html={ html } wrapperProps={ wrapperProps } />
 		) : (
-			<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.

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

@@ -13,7 +13,7 @@ const attributeMap = {
 	marginwidth: 'marginWidth',
 };
 
-export default function WpEmbedPreview( { html } ) {
+export default function WpEmbedPreview( { html, wrapperProps = {} } ) {
 	const ref = useRef();
 	const props = useMemo( () => {
 		const doc = new window.DOMParser().parseFromString( html, 'text/html' );
@@ -68,7 +68,12 @@ export default function WpEmbedPreview( { html } ) {
 	}, [] );
 
 	return (
-		<div className="wp-block-embed__wrapper">
+		<div
+			className={ `wp-block-embed__wrapper ${
+				wrapperProps.className || ''
+			}` }
+			style={ { ...wrapperProps.style } }
+		>
 			<iframe
 				ref={ useMergeRefs( [ ref, useFocusableIframe() ] ) }
 				title={ props.title }