More generic floats

WordPress · Feb 21, 2018 · 6f5a765 · 6f5a765
1 parent 7fabeb9
commit 6f5a765
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 45 deletions.
diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js
@@ -184,7 +184,7 @@ export const settings = {
 
 	getEditWrapperProps( attributes ) {
 		const { align, clear } = attributes;
-		const props = {};
+		const props = { 'data-resized': true };
 
 		if ( 'left' === align || 'right' === align || 'center' === align ) {
 			props[ 'data-align' ] = align;

diff --git a/blocks/library/embed/editor.scss b/blocks/library/embed/editor.scss
@@ -1,28 +1,7 @@
-.editor-block-list__block[data-type="core/embed"] {
-	&[data-align="left"],
-	&[data-align="right"] {
-		float: none;
-	}
-
-	&[data-align="left"] .wp-block-embed {
-		float: left;
-	}
-
-	&[data-align="right"] .wp-block-embed {
-		float: right;
-	}
-}
-
 .wp-block-embed {
 	margin: 0;
 	clear: both; // necessary because we use responsive trickery to set width/height, and therefore the video doesn't intrinsically clear floats like an img does
 
-	[data-align="left"] &,
-	[data-align="right"] & {
-		width: 300px;
-		max-width: 100%;
-	}
-
 	&.is-loading {
 		display: flex;
 		flex-direction: column;

diff --git a/blocks/library/pullquote/editor.scss b/blocks/library/pullquote/editor.scss
@@ -1,8 +1,6 @@
 .editor-block-list__block[data-type="core/pullquote"] {
 	&[data-align="left"],
 	&[data-align="right"] {
-		max-width: 400px;
-
 		& .blocks-pullquote__content .blocks-rich-text__tinymce[data-is-empty="true"]:before,
 		& .blocks-rich-text p {
 			font-size: 20px;

diff --git a/blocks/library/table/editor.scss b/blocks/library/table/editor.scss
@@ -1,21 +1,3 @@
-.editor-block-list__block[data-type="core/table"] {
-	&[data-align="left"],
-	&[data-align="right"] {
-		min-width: 33%;
-		max-width: 50%;
-	}
-
-	&[data-align="left"] {
-		float: left;
-		margin-right: $block-padding;
-	}
-
-	&[data-align="right"] {
-		float: right;
-		margin-left: $block-padding;
-	}
-}
-
 .wp-block-table {
 	td,
 	th {

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -160,12 +160,16 @@
 	// Apply max-width to floated items that have no intrinsic width, like Cover Image or Gallery
 	&[data-align="left"],
 	&[data-align="right"] {
-		&[data-type="core/cover-image"] .editor-block-list__block-edit,
-		&[data-type="core/gallery"] .editor-block-list__block-edit,
-		&[data-resized="false"] .editor-block-list__block-edit {
+		> .editor-block-list__block-edit {
 			max-width: 360px;
 			width: 100%;
 		}
+
+		// reset when data-resized
+		&[data-resized="true"] > .editor-block-list__block-edit {
+			max-width: none;
+			width: auto;
+		}
 	}
 
 	// Left