Embed blocks: Add resize handles

docs/reference-guides/core-blocks.md

@@ -264,7 +264,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)
--	**Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url
+-	**Attributes:** allowResponsive, caption, height, previewable, providerNameSlug, responsive, type, url, width
 
 ## File
 

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

@@ -38,6 +38,12 @@
 			"type": "boolean",
 			"default": true,
 			"role": "content"
+		},
+		"width": {
+			"type": "string"
+		},
+		"height": {
+			"type": "string"
 		}
 	},
 	"supports": {

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

@@ -13,7 +13,8 @@ import EmbedControls from './embed-controls';
 import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
-import EmbedPreview from './embed-preview';
+import ResizableEmbedPreview from './resizable-embed-preview';
+import { useMaxWidthObserver } from './use-max-width-observer';
 
 /**
  * External dependencies
@@ -58,6 +59,7 @@ const EmbedEdit = ( props ) => {
 	const [ url, setURL ] = useState( attributesUrl );
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const { invalidateResolution } = useDispatch( coreStore );
+	const [ maxWidthObserver ] = useMaxWidthObserver();
 
 	const {
 		preview,
@@ -249,12 +251,14 @@ const EmbedEdit = ( props ) => {
 	// that `getMergedAttributes` uses is memoized so that we're not
 	// calculating them on every render.
 	const {
-		caption,
 		type,
 		allowResponsive,
 		className: classFromPreview,
+		width,
 	} = getMergedAttributes();
-	const className = clsx( classFromPreview, props.className );
+	const className = clsx( classFromPreview, props.className, {
+		'has-custom-width': !! width,
+	} );
 
 	return (
 		<>
@@ -274,21 +278,21 @@ const EmbedEdit = ( props ) => {
 					[ `wp-block-embed-${ providerNameSlug }` ]:
 						providerNameSlug,
 				} ) }
+				style={ {
+					...blockProps.style,
+					width: width || undefined,
+				} }
 			>
-				<EmbedPreview
+				{ maxWidthObserver }
+				<ResizableEmbedPreview
 					preview={ preview }
 					previewable={ previewable }
 					className={ className }
 					url={ url }
 					type={ type }
-					caption={ caption }
-					onCaptionChange={ ( value ) =>
-						setAttributes( { caption: value } )
-					}
 					isSelected={ isSelected }
 					icon={ icon }
 					label={ label }
-					insertBlocksAfter={ insertBlocksAfter }
 					attributes={ attributes }
 					setAttributes={ setAttributes }
 				/>

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

@@ -39,9 +39,46 @@
 	opacity: 0;
 }
 
+// Resizable embed styles
+.wp-block-embed.is-selected {
+	.wp-block-embed__wrapper {
+		// Ensure the wrapper takes full size when resizing
+		width: 100% !important;
+		height: 100% !important;
+
+		// Maintain proper iframe sizing
+		iframe {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	// Style the ResizableBox component
+	.react-resizable {
+		position: relative !important;
+
+		// Ensure resize handles are visible and properly positioned
+		.react-resizable-handle {
+			opacity: 1;
+			z-index: 10;
+
+			&.react-resizable-handle-e {
+				right: -5px;
+				cursor: col-resize;
+				background: var(--wp-admin-theme-color);
+				border-radius: 2px;
+
+				&:hover {
+					background: var(--wp-admin-theme-color-darker-10);
+				}
+			}
+		}
+	}
+}
+
 .wp-block[data-align="left"],
 .wp-block[data-align="right"] {
-	> .wp-block-embed {
+	>.wp-block-embed {
 		max-width: 360px;
 		width: 100%;