Use a light block DOM for the Media & Text block (#23062)

* Use light block DOM for the Media & Text block * Update re-resizable dependency Specifically to support "as" from bokuweb/re-resizable#614
WordPress · Jun 22, 2020 · 4825ad1 · 4825ad1
1 parent a3e1255
commit 4825ad1
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 83 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
@@ -83,6 +83,7 @@
 			"full"
 		],
 		"html": false,
+		"lightBlockWrapper": true,
 		"__experimentalColor": {
 			"gradients": true,
 			"linkColor": true

diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -14,6 +14,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InnerBlocks,
 	InspectorControls,
+	__experimentalBlock as Block,
 	__experimentalImageURLInputUI as ImageURLInputUI,
 } from '@wordpress/block-editor';
 import {
@@ -107,7 +108,7 @@ function attributesFromMedia( {
 	};
 }
 
-function MediaTextEdit( { attributes, className, isSelected, setAttributes } ) {
+function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	const {
 		focalPoint,
 		href,
@@ -150,7 +151,7 @@ function MediaTextEdit( { attributes, className, isSelected, setAttributes } ) {
 		setTemporaryMediaWidth( applyWidthConstraints( width ) );
 	};
 
-	const classNames = classnames( className, {
+	const classNames = classnames( {
 		'has-media-on-the-right': 'right' === mediaPosition,
 		'is-selected': isSelected,
 		'is-stacked-on-mobile': isStackedOnMobile,
@@ -263,7 +264,7 @@ function MediaTextEdit( { attributes, className, isSelected, setAttributes } ) {
 					</ToolbarGroup>
 				) }
 			</BlockControls>
-			<div className={ classNames } style={ style }>
+			<Block.div className={ classNames } style={ style }>
 				<MediaContainer
 					className="wp-block-media-text__media"
 					onSelectMedia={ onSelectMedia }
@@ -283,10 +284,14 @@ function MediaTextEdit( { attributes, className, isSelected, setAttributes } ) {
 					} }
 				/>
 				<InnerBlocks
+					__experimentalTagName="div"
+					__experimentalPassedProps={ {
+						className: 'wp-block-media-text__content',
+					} }
 					template={ TEMPLATE }
 					templateInsertUpdatesSelection={ false }
 				/>
-			</div>
+			</Block.div>
 		</>
 	);
 }

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
@@ -3,30 +3,7 @@
 	grid-row: 2;
 }
 
-.wp-block-media-text.is-vertically-aligned-top {
-	.block-editor-inner-blocks,
-	.editor-media-container__resizer {
-		align-self: start;
-	}
-}
-.wp-block-media-text,
-.wp-block-media-text.is-vertically-aligned-center {
-	.block-editor-inner-blocks,
-	.editor-media-container__resizer {
-		align-self: center;
-	}
-}
-
-.wp-block-media-text.is-vertically-aligned-bottom {
-	.block-editor-inner-blocks,
-	.editor-media-container__resizer {
-		align-self: end;
-	}
-}
-
 .wp-block-media-text .editor-media-container__resizer {
-	grid-column: 1;
-	grid-row: 1;
 	// The resizer sets a inline width but as we are using a grid layout,
 	// we set the width on container.
 	width: 100% !important;
@@ -37,47 +14,6 @@
 	height: 100% !important;
 }
 
-.wp-block-media-text.has-media-on-the-right .editor-media-container__resizer {
-	grid-column: 2;
-	grid-row: 1;
-}
-
-.wp-block-media-text > .block-editor-inner-blocks {
-	word-break: break-word;
-	grid-column: 2;
-	grid-row: 1;
-	text-align: initial;
-	padding: 0 8% 0 8%;
-}
-
-.wp-block-media-text.has-media-on-the-right .block-editor-inner-blocks {
-	grid-column: 1;
-	grid-row: 1;
-}
-
-.wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
+.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
-
-@media (max-width: #{ ($break-small) }) {
-	.wp-block-media-text.is-stacked-on-mobile {
-		.block-editor-inner-blocks {
-			grid-column: 1;
-			grid-row: 2;
-		}
-		.editor-media-container__resizer {
-			grid-column: 1;
-			grid-row: 1;
-		}
-	}
-	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
-		.block-editor-inner-blocks {
-			grid-column: 1;
-			grid-row: 1;
-		}
-		.editor-media-container__resizer {
-			grid-column: 1;
-			grid-row: 2;
-		}
-	}
-}
diff --git a/packages/block-library/src/media-text/media-container.js b/packages/block-library/src/media-text/media-container.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { noop } from 'lodash';
 
 /**
@@ -137,7 +138,12 @@ function MediaContainer( props ) {
 
 		return (
 			<ResizableBoxContainer
-				className="editor-media-container__resizer"
+				as="figure"
+				className={ classnames(
+					className,
+					'editor-media-container__resizer'
+				) }
+				style={ backgroundStyles }
 				size={ { width: mediaWidth + '%' } }
 				minWidth="10%"
 				maxWidth="100%"
@@ -154,9 +160,7 @@ function MediaContainer( props ) {
 					mediaUrl={ mediaUrl }
 					mediaId={ mediaId }
 				/>
-				<figure className={ className } style={ backgroundStyles }>
-					{ ( mediaTypeRenderers[ mediaType ] || noop )() }
-				</figure>
+				{ ( mediaTypeRenderers[ mediaType ] || noop )() }
 			</ResizableBoxContainer>
 		);
 	}

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -50,7 +50,7 @@
 		"lodash": "^4.17.15",
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
-		"re-resizable": "^6.0.0",
+		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",