diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js index 1d272f2d6ff43..fdcf21f6f3844 100644 --- 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 index fcd9264eed024..5b7dbf9e5909c 100644 --- 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 index 5494e74d2a2cc..32585033d7285 100644 --- 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 index a7750db1172de..d9e41bc41f947 100644 --- 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 index 4d051ea2c46b7..1e15cf0be4979 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -161,12 +161,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