From 9e1df4617bb697d05c67c38a190497484a1bd82a Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 19 Feb 2018 12:38:27 +0100 Subject: [PATCH 1/9] Add the float refactor files --- blocks/library/image/editor.scss | 12 --- editor/components/block-list/style.scss | 136 +++++++++++------------- 2 files changed, 60 insertions(+), 88 deletions(-) diff --git a/blocks/library/image/editor.scss b/blocks/library/image/editor.scss index 4d34fe4063f8d6..3c698fdd864dfa 100644 --- a/blocks/library/image/editor.scss +++ b/blocks/library/image/editor.scss @@ -76,18 +76,6 @@ } } -.editor-block-list__block[data-type="core/image"][data-align="right"], -.editor-block-list__block[data-type="core/image"][data-align="left"] { - max-width: none; - &[data-resized="false"] { - max-width: 370px; - } - &[data-resized="true"] { - width: auto; - max-width: none; - } -} - .editor-block-list__block[data-type="core/image"][data-align="center"] { .wp-block-image { margin-left: auto; diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 9323e53314031d..2f332ed15726ac 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -1,17 +1,30 @@ .editor-block-list__layout .editor-default-block-appender, -.editor-block-list__layout .editor-block-list__block { - margin-bottom: $block-spacing; -} - .editor-block-list__layout .editor-block-list__block { position: relative; - padding: $block-padding; + margin-bottom: $block-spacing; + padding-left: $block-padding; + padding-right: $block-padding; @include break-small { // The block mover needs to stay inside the block to allow clicks when hovering the block - padding: $block-padding $block-padding + $block-mover-padding-visible; + padding-left: $block-padding + $block-mover-padding-visible; + padding-right: $block-padding + $block-mover-padding-visible; } + // Prevent collapsing margins + // This allows us control over block boundaries and how blocks fit together visually + // It makes things a lot simpler, however it also means block margins and paddings have to be tuned (halved) for the editor. + padding-top: .05px; + padding-bottom: .05px; + + // Space blocks using margin instead of block padding + // @todo, this should be on a per-block basis, including placeholders + .editor-block-list__block-edit p { + margin-top: $block-padding; // @todo needs new variable + margin-bottom: $block-padding; + } + + // Block outline container &:before { z-index: z-index( '.editor-block-list__block:before' ); content: ''; @@ -28,6 +41,7 @@ } } + // Block warnings &.has-warning .editor-block-list__block-edit { position: relative; min-height: 250px; @@ -125,85 +139,49 @@ display: none; } - // Alignments + + /** + * Alignments + */ + &[data-align="left"], &[data-align="right"] { // Without z-index, won't be clickable as "above" adjacent content z-index: z-index( '.editor-block-list__block {core/image aligned left or right}' ); width: 100%; - max-width: 370px; // Needed for blocks with no intrinsic width, like Cover Image or Gallery - } - - &[data-align="left"] { - float: left; - // mobile, and no sidebars - margin-right: $block-padding; - - // sidebar (folded) - .auto-fold .edit-post-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { - margin-left: $float-margin; - } - } + // When images are floated, the block itself should collapse to zero height + margin-bottom: 0; - // sidebar (sticky) - .sticky-menu .edit-post-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) { - margin-left: $float-margin; - } + // Because margins don't collapse, we add a little top margin to offset that + // In the theme itself, this shouldn't be necessary + img { + margin-top: $block-padding; } - // sidebar (sticky) and post settings - .sticky-menu .edit-post-layout & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) { - margin-left: $float-margin; - } + // Hide block outline when an image is floated + &:before { + content: none; } + } - // sidebar and post settings - .auto-fold .is-sidebar-opened & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) { - margin-left: $float-margin; - } + // Left + &[data-align="left"] { + figure { // This is in the editor only, on the frontend, the img should be floated + float: left; + margin-right: 2em; } } + // Right &[data-align="right"] { - float: right; - - // mobile, and no sidebars - margin-right: $block-padding; - - // sidebar (folded) - .auto-fold .edit-post-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { - margin-right: $float-margin; - } - } - - // sidebar (sticky) - .sticky-menu .edit-post-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) { - margin-right: $float-margin; - } - } - - // sidebar (sticky) and post settings - .sticky-menu .edit-post-layout & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width - $block-padding ) { - margin-right: $float-margin; - } - } - - // sidebar and post settings - .auto-fold .is-sidebar-opened & { - @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) { - margin-right: $float-margin; - } + figure { // This is in the editor only, on the frontend, the img should be floated + float: right; + margin-left: 2em; } } + // Full-wide &[data-align="full"] { padding-left: 0; padding-right: 0; @@ -253,10 +231,12 @@ } } + // Clear floats &[data-clear="true"] { float: none; } + // Dropzones & > .components-drop-zone { border: none; top: -4px; @@ -418,19 +398,23 @@ } } -$sticky-bottom-offset: 20px; + +/** + * Block Toolbar + */ + .editor-block-contextual-toolbar { position: sticky; z-index: z-index( '.editor-block-contextual-toolbar' ); - margin-top: - $block-toolbar-height - $block-padding - 1px; - margin-bottom: $block-padding + $sticky-bottom-offset; + margin-top: - $block-toolbar-height - 1px; + margin-bottom: $block-padding + 1px; white-space: nowrap; text-align: left; pointer-events: none; height: $block-toolbar-height; - // put toolbar snugly to edge on mobile + // put toolbar snugly to side edges on mobile margin-left: -$block-padding - 1px; // stack borders margin-right: -$block-padding - 1px; @include break-small() { @@ -471,12 +455,12 @@ $sticky-bottom-offset: 20px; margin-left: - $block-padding - 1px; margin-right: - $block-padding - 1px; } -} -.editor-block-contextual-toolbar + div { - // prevent collapsing margins between block and toolbar, matches the 20px bottom offset + display: flex; - margin-top: - $sticky-bottom-offset - 1px; - padding-top: 2px; + // Custom toolbars for floats + .edit-post-visual-editor .editor-block-list__block[data-align="left"] &, + .edit-post-visual-editor .editor-block-list__block[data-align="right"] & { + margin-bottom: 1px; + } } .editor-block-list__side-inserter { From f5027882b823a5078858268ef77b5211c0e620a3 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 20 Feb 2018 09:28:11 +0100 Subject: [PATCH 2/9] Address padding and margin jumps. Simplify. --- editor/components/block-list/style.scss | 37 +++++++++++-------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 2f332ed15726ac..9249ddeb03a4f3 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -17,10 +17,9 @@ padding-top: .05px; padding-bottom: .05px; - // Space blocks using margin instead of block padding - // @todo, this should be on a per-block basis, including placeholders - .editor-block-list__block-edit p { - margin-top: $block-padding; // @todo needs new variable + // Space every block using margin instead of padding + .editor-block-list__block-edit { + margin-top: $block-padding; margin-bottom: $block-padding; } @@ -153,12 +152,6 @@ // When images are floated, the block itself should collapse to zero height margin-bottom: 0; - // Because margins don't collapse, we add a little top margin to offset that - // In the theme itself, this shouldn't be necessary - img { - margin-top: $block-padding; - } - // Hide block outline when an image is floated &:before { content: none; @@ -167,7 +160,7 @@ // Left &[data-align="left"] { - figure { // This is in the editor only, on the frontend, the img should be floated + .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated float: left; margin-right: 2em; } @@ -175,7 +168,7 @@ // Right &[data-align="right"] { - figure { // This is in the editor only, on the frontend, the img should be floated + .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated float: right; margin-left: 2em; } @@ -403,17 +396,25 @@ * Block Toolbar */ - .editor-block-contextual-toolbar { position: sticky; z-index: z-index( '.editor-block-contextual-toolbar' ); - margin-top: - $block-toolbar-height - 1px; - margin-bottom: $block-padding + 1px; white-space: nowrap; text-align: left; pointer-events: none; height: $block-toolbar-height; + // Position the contextual toolbar above the block + margin-top: -$block-toolbar-height; + margin-bottom: $block-padding; + + // Floated items have special needs for the contextual toolbar position + .edit-post-visual-editor .editor-block-list__block[data-align="left"] &, + .edit-post-visual-editor .editor-block-list__block[data-align="right"] & { + margin-bottom: 1px; + margin-top: -$block-toolbar-height - 1px; + } + // put toolbar snugly to side edges on mobile margin-left: -$block-padding - 1px; // stack borders margin-right: -$block-padding - 1px; @@ -455,12 +456,6 @@ margin-left: - $block-padding - 1px; margin-right: - $block-padding - 1px; } - - // Custom toolbars for floats - .edit-post-visual-editor .editor-block-list__block[data-align="left"] &, - .edit-post-visual-editor .editor-block-list__block[data-align="right"] & { - margin-bottom: 1px; - } } .editor-block-list__side-inserter { From 509590ea09bde61bbf109278585b3f527e43fe8a Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 20 Feb 2018 09:56:00 +0100 Subject: [PATCH 3/9] Fix margins of separator, add back max-width This adds the resizing trick back, which we use chiefly for unresized images, or blocks with no intrinsic width. --- blocks/library/separator/style.scss | 2 +- editor/components/block-list/style.scss | 11 +++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/blocks/library/separator/style.scss b/blocks/library/separator/style.scss index 37561623928515..8625ab104bb803 100644 --- a/blocks/library/separator/style.scss +++ b/blocks/library/separator/style.scss @@ -2,5 +2,5 @@ border: none; border-bottom: 2px solid $dark-gray-100; max-width: 100px; - margin: 1em auto; + margin: 1.65em auto; } diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 9249ddeb03a4f3..4d051ea2c46b75 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -158,6 +158,17 @@ } } + // 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 { + max-width: 360px; + width: 100%; + } + } + // Left &[data-align="left"] { .editor-block-list__block-edit { // This is in the editor only, on the frontend, the img should be floated From e6bdd72ad18bc8f05065b9c051930e373aaeb980 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 20 Feb 2018 10:04:43 +0100 Subject: [PATCH 4/9] Improve embed floats. --- blocks/library/embed/editor.scss | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/blocks/library/embed/editor.scss b/blocks/library/embed/editor.scss index 9055aa36a89065..fcd9264eed0248 100644 --- a/blocks/library/embed/editor.scss +++ b/blocks/library/embed/editor.scss @@ -1,7 +1,15 @@ .editor-block-list__block[data-type="core/embed"] { &[data-align="left"], &[data-align="right"] { - max-width: 100%; + float: none; + } + + &[data-align="left"] .wp-block-embed { + float: left; + } + + &[data-align="right"] .wp-block-embed { + float: right; } } @@ -14,7 +22,7 @@ width: 300px; max-width: 100%; } - + &.is-loading { display: flex; flex-direction: column; From 299f1b89d703333d60a6a9495e5da0a74d196f53 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 21 Feb 2018 11:30:17 +0100 Subject: [PATCH 5/9] More generic floats --- blocks/library/button/index.js | 2 +- blocks/library/embed/editor.scss | 21 --------------------- blocks/library/pullquote/editor.scss | 2 -- blocks/library/table/editor.scss | 18 ------------------ editor/components/block-list/style.scss | 10 +++++++--- 5 files changed, 8 insertions(+), 45 deletions(-) diff --git a/blocks/library/button/index.js b/blocks/library/button/index.js index 1d272f2d6ff438..fdcf21f6f38442 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 fcd9264eed0248..5b7dbf9e5909c7 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 5494e74d2a2cc3..32585033d72851 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 a7750db1172de5..d9e41bc41f947a 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 4d051ea2c46b75..1e15cf0be49794 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 From 23c990a1d67e11319cccab3d3943707cdf122f23 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 21 Feb 2018 13:15:41 +0100 Subject: [PATCH 6/9] Add small trick to right align the toolbar on right floated images. --- editor/components/block-list/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 1e15cf0be49794..fa4d0dd4a68e59 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -187,6 +187,10 @@ float: right; margin-left: 2em; } + + .editor-block-toolbar { + float: right; + } } // Full-wide From deaf19c4d99d3ad283c295ce83c8a4d3fe9c8493 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 21 Feb 2018 13:20:30 +0100 Subject: [PATCH 7/9] Fix 1px offset toolbar. --- editor/components/block-list/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index fa4d0dd4a68e59..a8264a3a7c2b7f 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -423,9 +423,9 @@ pointer-events: none; height: $block-toolbar-height; - // Position the contextual toolbar above the block - margin-top: -$block-toolbar-height; - margin-bottom: $block-padding; + // Position the contextual toolbar above the block, add 1px to each to stack borders + margin-top: -$block-toolbar-height - 1px; + margin-bottom: $block-padding + 1px; // Floated items have special needs for the contextual toolbar position .edit-post-visual-editor .editor-block-list__block[data-align="left"] &, From f98af6823bcd32c9873248b3a42f6189d0a31189 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 22 Feb 2018 08:15:13 +0100 Subject: [PATCH 8/9] Clear wide and fullwide --- editor/components/block-list/style.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index a8264a3a7c2b7f..20ffe3a84f2082 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -193,6 +193,12 @@ } } + // Wide and full-wide + &[data-align="full"], + &[data-align="wide"] { + clear: both; + } + // Full-wide &[data-align="full"] { padding-left: 0; From 8d7bd27e4295d00835a8c31a3c628466b8d7a775 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 22 Feb 2018 09:07:08 +0100 Subject: [PATCH 9/9] Fix z-index issue with wide toolbars --- edit-post/assets/stylesheets/_z-index.scss | 1 + editor/components/block-list/style.scss | 3 +++ 2 files changed, 4 insertions(+) diff --git a/edit-post/assets/stylesheets/_z-index.scss b/edit-post/assets/stylesheets/_z-index.scss index 2c6e2e29a32516..d78279d2c71de2 100644 --- a/edit-post/assets/stylesheets/_z-index.scss +++ b/edit-post/assets/stylesheets/_z-index.scss @@ -7,6 +7,7 @@ $z-layers: ( '.editor-block-list__block:before': -1, '.editor-block-list__block .wp-block-more:before': -1, '.editor-block-list__block {core/image aligned left or right}': 20, + '.editor-block-list__block {core/image aligned wide or fullwide}': 20, '.freeform-toolbar': 10, '.editor-warning': 1, '.components-form-toggle__input': 1, diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss index 20ffe3a84f2082..52468f73e5aabc 100644 --- a/editor/components/block-list/style.scss +++ b/editor/components/block-list/style.scss @@ -197,6 +197,9 @@ &[data-align="full"], &[data-align="wide"] { clear: both; + + // Without z-index, the block toolbar will be below an adjecent float + z-index: z-index( '.editor-block-list__block {core/image aligned wide or fullwide}' ); } // Full-wide