From 549228d4f313fde7972f2e37c7d870856b58cc52 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 16 May 2017 14:42:52 +0200 Subject: [PATCH 01/15] Remove full-width trick pending better one This also adds a few improvements from the now deleted branch, https://github.com/WordPress/gutenberg/pull/799, notably: - clearing for video blocks. The responsive trickery means we have to, or we will get odd behavior otherwise - better collapsing margins fix for the toolbar. --- blocks/library/embed/style.scss | 2 ++ editor/modes/visual-editor/style.scss | 17 ++++++----------- 2 files changed, 8 insertions(+), 11 deletions(-) diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index e7291f13602e99..d7d5d4458f1800 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -1,6 +1,8 @@ .blocks-embed, .blocks-embed-video { 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 + &.is-loading { display: flex; flex-direction: column; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index a72c49a0fdd0d0..74446168b3f784 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -18,8 +18,7 @@ } } -/* "Hassle-free full bleed" from CSS Tricks */ -.editor-visual-editor > *:not( [data-align="wide"] ) { +.editor-visual-editor { max-width: $visual-editor-max-width; margin-left: auto; margin-right: auto; @@ -105,16 +104,12 @@ } } +$sticky-bottom-offset: 20px; .editor-visual-editor__block-controls + div { - margin-top: -20px; - - // prevent collapsing margins between the block and the toolbar - &:before { - content: ""; - display: table; - clear: both; - } -} + // prevent collapsing margins between block and toolbar, matches the 20px bottom offset + margin-top: -$sticky-bottom-offset - 1px; + padding-top: 1px; + } .editor-visual-editor__block-controls .components-toolbar { display: inline-flex; From 9968972f0f9547cd1698eb2f2ebb2eaacbf2b1a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Tue, 16 May 2017 20:39:32 +0200 Subject: [PATCH 02/15] Calculate width and positioning for align:wide attr. --- blocks/library/image/style.scss | 10 ++-------- editor/modes/visual-editor/block.js | 28 ++++++++++++++++++++++++++++ 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index f91f979a4d5bf2..29b0cc22731858 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -17,9 +17,10 @@ } &[data-align="wide"] { + margin-left: calc(50% - 50vw); padding-left: 0; padding-right: 0; - margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ + box-sizing: border-box; &:before { left: 0; @@ -30,13 +31,6 @@ .editor-block-mover { display: none; } - - .editor-visual-editor__block-controls { - max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; - margin-left: auto; - margin-right: auto; - } - } } diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 390e870a973edc..9fcaad743c4921 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -170,10 +170,26 @@ class VisualEditorBlock extends wp.element.Component { } } + isWide() { + return this.props.block.attributes.align === 'wide'; + } + componentDidMount() { if ( this.props.focus ) { this.node.focus(); } + + window.addEventListener( 'resize', this.updateWidth ); + } + + componentWillUnmount() { + window.removeEventListener( 'resize', this.updateWidth ); + } + + updateWidth() { + if ( this.isWide() ) { + this.forceUpdate(); + } } onFocus( event ) { @@ -231,6 +247,17 @@ class VisualEditorBlock extends wp.element.Component { wrapperProps = blockType.getEditWrapperProps( block.attributes ); } + const layout = document.querySelector( '.editor-layout__content' ); + const editor = document.querySelector( '.editor-visual-editor' ); + let style; + + if ( layout && editor && this.isWide() ) { + style = { + width: layout.offsetWidth, + marginLeft: -( layout.offsetWidth / 2 ) + ( editor.offsetWidth / 2 ), + }; + } + // Disable reason: Each block can be selected by clicking on it /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( @@ -249,6 +276,7 @@ class VisualEditorBlock extends wp.element.Component { className={ className } data-type={ block.name } tabIndex="0" + style={ style } { ...wrapperProps } > { ( showUI || isHovered ) && } From 4d68c23f85de74c726bfa3d135eea20af069b687 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 17 May 2017 10:36:25 +0200 Subject: [PATCH 03/15] Polish the toolbar centering math. --- blocks/library/image/style.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 29b0cc22731858..df088fe3f24e7a 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -17,7 +17,6 @@ } &[data-align="wide"] { - margin-left: calc(50% - 50vw); padding-left: 0; padding-right: 0; box-sizing: border-box; @@ -31,6 +30,16 @@ .editor-block-mover { display: none; } + + .editor-visual-editor__block-controls { + max-width: $visual-editor-max-width - ( ( $block-padding + $block-padding + $block-mover-margin ) * 2 );; + // a block is 600px wide inside a 700px container + // with block mover margin, border widths and paddings, toolbars are indented 46px + // that's 2px border plus 10px padding plus 18px mover margin + // these 46px are accounted for on both sides, to make sure the block is centered + margin-left: auto; + margin-right: auto; + } } } From e641ccbb148d77dfeb62d3d85c765533430d60cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 17 May 2017 14:01:45 +0200 Subject: [PATCH 04/15] Keep track of editor width values in redux state. Update when sidebar is toggled. --- editor/layout/index.js | 69 ++++++++++++++++++++--------- editor/modes/visual-editor/block.js | 27 ++++------- editor/selectors.js | 4 ++ editor/state.js | 16 +++++++ 4 files changed, 78 insertions(+), 38 deletions(-) diff --git a/editor/layout/index.js b/editor/layout/index.js index c9e3467e8ede71..18fb7ef1d26621 100644 --- a/editor/layout/index.js +++ b/editor/layout/index.js @@ -11,26 +11,55 @@ import Header from '../header'; import Sidebar from '../sidebar'; import TextEditor from '../modes/text-editor'; import VisualEditor from '../modes/visual-editor'; -import { getEditorMode, isEditorSidebarOpened } from '../selectors'; - -function Layout( { mode, isSidebarOpened } ) { - const className = classnames( 'editor-layout', { - 'is-sidebar-opened': isSidebarOpened, - } ); - - return ( -
-
-
- { mode === 'text' && } - { mode === 'visual' && } +import { + getEditorMode, + isEditorSidebarOpened, + getEditorWidth, +} from '../selectors'; + +class Layout extends wp.element.Component { + + componentDidMount() { + window.addEventListener( 'resize', this.props.setEditorWidth ); + } + + componentWillUnmount() { + window.removeEventListener( 'resize', this.props.setEditorWidth ); + } + + componentDidUpdate( newProps ) { + if ( this.props.isSidebarOpened !== newProps.isSidebarOpened ) { + this.props.setEditorWidth(); + } + } + + render() { + const { mode, isSidebarOpened } = this.props; + + const className = classnames( 'editor-layout', { + 'is-sidebar-opened': isSidebarOpened, + } ); + + return ( +
+
+
+ { mode === 'text' && } + { mode === 'visual' && } +
+ { isSidebarOpened && }
- { isSidebarOpened && } -
- ); + ); + } } -export default connect( ( state ) => ( { - mode: getEditorMode( state ), - isSidebarOpened: isEditorSidebarOpened( state ), -} ) )( Layout ); +export default connect( + ( state ) => ( { + mode: getEditorMode( state ), + isSidebarOpened: isEditorSidebarOpened( state ), + editorWidth: getEditorWidth( state ), + } ), + ( dispatch ) => ( { + setEditorWidth: () => dispatch( { type: 'SET_EDITOR_WIDTH' } ), + } ) +)( Layout ); diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 9fcaad743c4921..e4e3db473594cf 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -37,6 +37,7 @@ import { isFirstSelectedBlock, getSelectedBlocks, isTypingInBlock, + getEditorWidth, } from '../../selectors'; function FirstChild( { children } ) { @@ -178,18 +179,6 @@ class VisualEditorBlock extends wp.element.Component { if ( this.props.focus ) { this.node.focus(); } - - window.addEventListener( 'resize', this.updateWidth ); - } - - componentWillUnmount() { - window.removeEventListener( 'resize', this.updateWidth ); - } - - updateWidth() { - if ( this.isWide() ) { - this.forceUpdate(); - } } onFocus( event ) { @@ -231,7 +220,7 @@ class VisualEditorBlock extends wp.element.Component { } // Generate the wrapper class names handling the different states of the block. - const { isHovered, isSelected, isMultiSelected, isFirstSelected, isTyping, focus } = this.props; + const { isHovered, isSelected, isMultiSelected, isFirstSelected, isTyping, focus, editorWidth } = this.props; const showUI = isSelected && ( ! isTyping || ! focus.collapsed ); const className = classnames( 'editor-visual-editor__block', { 'is-selected': showUI, @@ -247,14 +236,12 @@ class VisualEditorBlock extends wp.element.Component { wrapperProps = blockType.getEditWrapperProps( block.attributes ); } - const layout = document.querySelector( '.editor-layout__content' ); - const editor = document.querySelector( '.editor-visual-editor' ); let style; - if ( layout && editor && this.isWide() ) { + if ( this.isWide() && editorWidth ) { style = { - width: layout.offsetWidth, - marginLeft: -( layout.offsetWidth / 2 ) + ( editor.offsetWidth / 2 ), + width: editorWidth[ 0 ], + marginLeft: -( editorWidth[ 0 ] / 2 ) + ( editorWidth[ 1 ] / 2 ), }; } @@ -340,6 +327,7 @@ export default connect( focus: getBlockFocus( state, ownProps.uid ), isTyping: isTypingInBlock( state, ownProps.uid ), order: getBlockIndex( state, ownProps.uid ), + editorWidth: getEditorWidth( state ), }; }, ( dispatch, ownProps ) => ( { @@ -349,6 +337,9 @@ export default connect( uid, updates, } ); + + // we don't want to do this blindly on every change + dispatch( { type: 'SET_EDITOR_WIDTH' } ); }, onSelect() { dispatch( { diff --git a/editor/selectors.js b/editor/selectors.js index c24555ab172fda..992578feff8966 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -28,6 +28,10 @@ export function isEditorSidebarOpened( state ) { return state.isSidebarOpened; } +export function getEditorWidth( state ) { + return state.editorWidth; +} + /** * Returns true if any past editor history snapshots exist, or false otherwise. * diff --git a/editor/state.js b/editor/state.js index da8f9b125570c5..15d08dbb782341 100644 --- a/editor/state.js +++ b/editor/state.js @@ -375,6 +375,21 @@ export function isSidebarOpened( state = false, action ) { return state; } +export function editorWidth( state = null, action ) { + const layout = document.querySelector( '.editor-layout__content' ); + const innerContent = document.querySelector( '.editor-visual-editor' ); + + if ( layout && innerContent ) { + const width = [ layout.offsetWidth, innerContent.offsetWidth ]; + switch ( action.type ) { + case 'SET_EDITOR_WIDTH': + return width; + } + } + + return state; +} + /** * Reducer returning current network request state (whether a request to the WP * REST API is in progress, successful, or failed). @@ -429,6 +444,7 @@ export function createReduxStore() { mode, isSidebarOpened, saving, + editorWidth, } ); const enhancers = [ applyMiddleware( refx( effects ) ) ]; From 274b0faee8641ff8fc2c192f9459654239f9c8b0 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Tue, 23 May 2017 13:05:25 +0200 Subject: [PATCH 05/15] Fix issue with full width editor toolbar. --- blocks/library/image/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index df088fe3f24e7a..ca71d30547efa1 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -37,6 +37,7 @@ // with block mover margin, border widths and paddings, toolbars are indented 46px // that's 2px border plus 10px padding plus 18px mover margin // these 46px are accounted for on both sides, to make sure the block is centered + width: 100%; margin-left: auto; margin-right: auto; } From 7325ba3b43cdd6852f6a3bd687e76ebeb13c9c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 2 Jun 2017 17:14:59 +0200 Subject: [PATCH 06/15] Add wide and full-width options to images. --- blocks/library/image/index.js | 10 ++++++++-- blocks/library/image/style.scss | 5 +++++ editor/modes/visual-editor/block.js | 6 +++--- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/blocks/library/image/index.js b/blocks/library/image/index.js index 2b7d06ab90810a..1bdfe5ac0dbbed 100644 --- a/blocks/library/image/index.js +++ b/blocks/library/image/index.js @@ -60,16 +60,22 @@ registerBlockType( 'core/image', { onClick: toggleAlignment( 'right' ), }, { - icon: 'align-full-width', + icon: 'align-wide', title: wp.i18n.__( 'Wide width' ), isActive: ( { align } ) => 'wide' === align, onClick: toggleAlignment( 'wide' ), }, + { + icon: 'align-full-width', + title: wp.i18n.__( 'Full width' ), + isActive: ( { align } ) => 'full' === align, + onClick: toggleAlignment( 'full' ), + }, ], getEditWrapperProps( attributes ) { const { align } = attributes; - if ( 'left' === align || 'right' === align || 'wide' === align ) { + if ( 'left' === align || 'right' === align || 'wide' === align || 'full' === align ) { return { 'data-align': align }; } }, diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index ca71d30547efa1..1e0ace0979e25d 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -17,6 +17,11 @@ } &[data-align="wide"] { + margin-left: -24%; + margin-right: -24%; + } + + &[data-align="full"] { padding-left: 0; padding-right: 0; box-sizing: border-box; diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index e4e3db473594cf..0e64769b6f39c8 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -171,8 +171,8 @@ class VisualEditorBlock extends wp.element.Component { } } - isWide() { - return this.props.block.attributes.align === 'wide'; + isFullWidth() { + return this.props.block.attributes.align === 'full'; } componentDidMount() { @@ -238,7 +238,7 @@ class VisualEditorBlock extends wp.element.Component { let style; - if ( this.isWide() && editorWidth ) { + if ( this.isFullWidth() && editorWidth ) { style = { width: editorWidth[ 0 ], marginLeft: -( editorWidth[ 0 ] / 2 ) + ( editorWidth[ 1 ] / 2 ), From 662aab65aba6c229cd2cc290a384d834fa479519 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Fri, 2 Jun 2017 17:30:38 +0200 Subject: [PATCH 07/15] Position toolbar in wide image option. --- blocks/library/image/style.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 1e0ace0979e25d..65805e69c71bd7 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -35,7 +35,10 @@ .editor-block-mover { display: none; } + } + &[data-align="full"], + &[data-align="wide"] { .editor-visual-editor__block-controls { max-width: $visual-editor-max-width - ( ( $block-padding + $block-padding + $block-mover-margin ) * 2 );; // a block is 600px wide inside a 700px container From 8f138a83ecc4a3c51cf2e380ed7494ac9cfec605 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 5 Jun 2017 09:37:01 +0200 Subject: [PATCH 08/15] Improve responsiveness. There were some issues with centering blocks, due to the fact that it has a block mover on the left. This commit simplifies that math, so the block mover doesn't actually affect the padding of the block, but rather uses negative space, making the math simpler. Additionally, it adds some responsive fixes for the full wide toolbar positioning. --- blocks/library/image/style.scss | 30 ++++++++++++++++++++--- editor/assets/stylesheets/_variables.scss | 2 ++ editor/block-mover/style.scss | 2 +- editor/modes/visual-editor/style.scss | 12 ++++----- 4 files changed, 35 insertions(+), 11 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 65805e69c71bd7..3a1732c1fd077a 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -25,6 +25,11 @@ padding-left: 0; padding-right: 0; box-sizing: border-box; + left: -$block-mover-padding-hidden; // compensate for block padding + + @include break-small() { + left: -$block-mover-padding-visible; // compensate for mover and block padding + } &:before { left: 0; @@ -45,9 +50,28 @@ // with block mover margin, border widths and paddings, toolbars are indented 46px // that's 2px border plus 10px padding plus 18px mover margin // these 46px are accounted for on both sides, to make sure the block is centered - width: 100%; - margin-left: auto; - margin-right: auto; + + width: auto; + margin-left: $block-mover-padding-hidden + $block-padding; + margin-right: $block-mover-padding-hidden + $block-padding; + + @include break-small() { + width: 100%; + margin-left: auto; + margin-right: auto; + + .is-sidebar-opened & { + padding-left: $block-mover-padding-visible + $block-padding; + padding-right: $block-mover-padding-visible + $block-padding; + } + } + + @include break-large() { + .is-sidebar-opened & { + padding-left: 0; + padding-right: 0; + } + } } } } diff --git a/editor/assets/stylesheets/_variables.scss b/editor/assets/stylesheets/_variables.scss index cc4093fa55d14d..d75bf0cb0a7e6f 100644 --- a/editor/assets/stylesheets/_variables.scss +++ b/editor/assets/stylesheets/_variables.scss @@ -65,6 +65,8 @@ $icon-button-size: 36px; /* Blocks */ $block-padding: 14px; $block-mover-margin: 18px; +$block-mover-padding-hidden: 10px; +$block-mover-padding-visible: 32px; /* Media Queries */ diff --git a/editor/block-mover/style.scss b/editor/block-mover/style.scss index fc05da1d3fceb9..08ccb61f7635dd 100644 --- a/editor/block-mover/style.scss +++ b/editor/block-mover/style.scss @@ -1,7 +1,7 @@ .editor-block-mover { position: absolute; top: 10px; - left: 0; + left: -$block-mover-padding-visible; } .editor-block-mover__control { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 74446168b3f784..39b988c9abe7f8 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,6 @@ .editor-visual-editor { margin: 0 auto; - padding: 50px 10px; /* Floating up/down arrows invisible */ + padding: 50px $block-mover-padding-hidden; // Floating up/down arrows invisible &, & p { @@ -10,11 +10,11 @@ } @include break-small() { - padding: 50px 0 50px #{ $block-padding + $block-mover-margin }; /* Floating up/down appear, also compensate for mover */ + padding: 50px $block-mover-padding-visible; // Floating up/down appear } @include break-large() { - padding: 60px 0 60px #{ $block-padding + $block-mover-margin }; /* Compensate for mover on the left side */ + padding: 60px $block-mover-padding-visible; } } @@ -26,9 +26,7 @@ .editor-visual-editor__block { position: relative; - left: -#{ $block-padding + $block-mover-margin }; /* Make room for the mover */ - padding: $block-padding $block-padding $block-padding #{ $block-padding * 2 + $block-mover-margin }; /* Compensate for mover */ - margin-right: #{ $block-padding + $block-mover-margin }; + padding: $block-padding; transition: 0.2s border-color; &:before { @@ -37,7 +35,7 @@ position: absolute; top: 0; bottom: 0; - left: #{ $block-padding + $block-mover-margin }; /* Compensate for mover */ + left: 0; right: 0; border: 2px solid transparent; transition: 0.2s border-color; From aaeb881d2d4808ea56ee1c16f461b1b8868f3437 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 7 Jun 2017 17:41:21 +0200 Subject: [PATCH 09/15] Completely different approach using CSS grid. --- blocks/library/image/style.scss | 6 +-- editor/layout/index.js | 69 ++++++++------------------- editor/modes/visual-editor/block.js | 21 +------- editor/modes/visual-editor/style.scss | 13 +++-- editor/post-title/style.scss | 3 ++ editor/selectors.js | 4 -- editor/state.js | 16 ------- 7 files changed, 34 insertions(+), 98 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 3a1732c1fd077a..53582c1b98ae3c 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -22,14 +22,10 @@ } &[data-align="full"] { + grid-column: full; padding-left: 0; padding-right: 0; box-sizing: border-box; - left: -$block-mover-padding-hidden; // compensate for block padding - - @include break-small() { - left: -$block-mover-padding-visible; // compensate for mover and block padding - } &:before { left: 0; diff --git a/editor/layout/index.js b/editor/layout/index.js index 18fb7ef1d26621..c9e3467e8ede71 100644 --- a/editor/layout/index.js +++ b/editor/layout/index.js @@ -11,55 +11,26 @@ import Header from '../header'; import Sidebar from '../sidebar'; import TextEditor from '../modes/text-editor'; import VisualEditor from '../modes/visual-editor'; -import { - getEditorMode, - isEditorSidebarOpened, - getEditorWidth, -} from '../selectors'; - -class Layout extends wp.element.Component { - - componentDidMount() { - window.addEventListener( 'resize', this.props.setEditorWidth ); - } - - componentWillUnmount() { - window.removeEventListener( 'resize', this.props.setEditorWidth ); - } - - componentDidUpdate( newProps ) { - if ( this.props.isSidebarOpened !== newProps.isSidebarOpened ) { - this.props.setEditorWidth(); - } - } - - render() { - const { mode, isSidebarOpened } = this.props; - - const className = classnames( 'editor-layout', { - 'is-sidebar-opened': isSidebarOpened, - } ); - - return ( -
-
-
- { mode === 'text' && } - { mode === 'visual' && } -
- { isSidebarOpened && } +import { getEditorMode, isEditorSidebarOpened } from '../selectors'; + +function Layout( { mode, isSidebarOpened } ) { + const className = classnames( 'editor-layout', { + 'is-sidebar-opened': isSidebarOpened, + } ); + + return ( +
+
+
+ { mode === 'text' && } + { mode === 'visual' && }
- ); - } + { isSidebarOpened && } +
+ ); } -export default connect( - ( state ) => ( { - mode: getEditorMode( state ), - isSidebarOpened: isEditorSidebarOpened( state ), - editorWidth: getEditorWidth( state ), - } ), - ( dispatch ) => ( { - setEditorWidth: () => dispatch( { type: 'SET_EDITOR_WIDTH' } ), - } ) -)( Layout ); +export default connect( ( state ) => ( { + mode: getEditorMode( state ), + isSidebarOpened: isEditorSidebarOpened( state ), +} ) )( Layout ); diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index 0e64769b6f39c8..390e870a973edc 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -37,7 +37,6 @@ import { isFirstSelectedBlock, getSelectedBlocks, isTypingInBlock, - getEditorWidth, } from '../../selectors'; function FirstChild( { children } ) { @@ -171,10 +170,6 @@ class VisualEditorBlock extends wp.element.Component { } } - isFullWidth() { - return this.props.block.attributes.align === 'full'; - } - componentDidMount() { if ( this.props.focus ) { this.node.focus(); @@ -220,7 +215,7 @@ class VisualEditorBlock extends wp.element.Component { } // Generate the wrapper class names handling the different states of the block. - const { isHovered, isSelected, isMultiSelected, isFirstSelected, isTyping, focus, editorWidth } = this.props; + const { isHovered, isSelected, isMultiSelected, isFirstSelected, isTyping, focus } = this.props; const showUI = isSelected && ( ! isTyping || ! focus.collapsed ); const className = classnames( 'editor-visual-editor__block', { 'is-selected': showUI, @@ -236,15 +231,6 @@ class VisualEditorBlock extends wp.element.Component { wrapperProps = blockType.getEditWrapperProps( block.attributes ); } - let style; - - if ( this.isFullWidth() && editorWidth ) { - style = { - width: editorWidth[ 0 ], - marginLeft: -( editorWidth[ 0 ] / 2 ) + ( editorWidth[ 1 ] / 2 ), - }; - } - // Disable reason: Each block can be selected by clicking on it /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */ return ( @@ -263,7 +249,6 @@ class VisualEditorBlock extends wp.element.Component { className={ className } data-type={ block.name } tabIndex="0" - style={ style } { ...wrapperProps } > { ( showUI || isHovered ) && } @@ -327,7 +312,6 @@ export default connect( focus: getBlockFocus( state, ownProps.uid ), isTyping: isTypingInBlock( state, ownProps.uid ), order: getBlockIndex( state, ownProps.uid ), - editorWidth: getEditorWidth( state ), }; }, ( dispatch, ownProps ) => ( { @@ -337,9 +321,6 @@ export default connect( uid, updates, } ); - - // we don't want to do this blindly on every change - dispatch( { type: 'SET_EDITOR_WIDTH' } ); }, onSelect() { dispatch( { diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 39b988c9abe7f8..dc0ebeca86ed09 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,6 @@ .editor-visual-editor { margin: 0 auto; - padding: 50px $block-mover-padding-hidden; // Floating up/down arrows invisible + padding: 50px 0; &, & p { @@ -10,21 +10,26 @@ } @include break-small() { - padding: 50px $block-mover-padding-visible; // Floating up/down appear + padding: 50px 0; } @include break-large() { - padding: 60px $block-mover-padding-visible; + padding: 60px 0; } } .editor-visual-editor { - max-width: $visual-editor-max-width; margin-left: auto; margin-right: auto; + > div { + display: grid; + grid-gap: 20px; + grid-template-columns: [full-start] minmax(1em, 1fr) [content-start] minmax(0, 40em) [content-end] minmax(1em, 1fr) [full-end]; + } } .editor-visual-editor__block { + grid-column: main; position: relative; padding: $block-padding; transition: 0.2s border-color; diff --git a/editor/post-title/style.scss b/editor/post-title/style.scss index f992bc8ed1c370..b2656ab2666fe4 100644 --- a/editor/post-title/style.scss +++ b/editor/post-title/style.scss @@ -1,5 +1,8 @@ .editor-visual-editor > .editor-post-title:not( [ data-align="wide" ] ), .editor-post-title { + margin-left: auto; + margin-right: auto; + max-width: $visual-editor-max-width; position: relative; padding-right: 2 * ( $block-mover-margin + $block-padding ); margin-bottom: 10px; diff --git a/editor/selectors.js b/editor/selectors.js index 992578feff8966..c24555ab172fda 100644 --- a/editor/selectors.js +++ b/editor/selectors.js @@ -28,10 +28,6 @@ export function isEditorSidebarOpened( state ) { return state.isSidebarOpened; } -export function getEditorWidth( state ) { - return state.editorWidth; -} - /** * Returns true if any past editor history snapshots exist, or false otherwise. * diff --git a/editor/state.js b/editor/state.js index 15d08dbb782341..da8f9b125570c5 100644 --- a/editor/state.js +++ b/editor/state.js @@ -375,21 +375,6 @@ export function isSidebarOpened( state = false, action ) { return state; } -export function editorWidth( state = null, action ) { - const layout = document.querySelector( '.editor-layout__content' ); - const innerContent = document.querySelector( '.editor-visual-editor' ); - - if ( layout && innerContent ) { - const width = [ layout.offsetWidth, innerContent.offsetWidth ]; - switch ( action.type ) { - case 'SET_EDITOR_WIDTH': - return width; - } - } - - return state; -} - /** * Reducer returning current network request state (whether a request to the WP * REST API is in progress, successful, or failed). @@ -444,7 +429,6 @@ export function createReduxStore() { mode, isSidebarOpened, saving, - editorWidth, } ); const enhancers = [ applyMiddleware( refx( effects ) ) ]; From b7888a8ac539a869885d190faf6e1f7177f73fd8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 7 Jun 2017 18:00:45 +0200 Subject: [PATCH 10/15] Rework it all again with percentages. --- blocks/library/image/style.scss | 7 ++++--- editor/modes/visual-editor/style.scss | 11 ++++------- 2 files changed, 8 insertions(+), 10 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 53582c1b98ae3c..61eb9b720e7025 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -9,20 +9,21 @@ &[data-align="left"] { float: left; margin-right: $block-padding; + margin-left: calc( 50vw - 500px); } &[data-align="right"] { float: right; margin-left: $block-padding; + margin-right: calc( 50vw - 500px); } &[data-align="wide"] { - margin-left: -24%; - margin-right: -24%; + max-width: 1100px; } &[data-align="full"] { - grid-column: full; + max-width: 100%; padding-left: 0; padding-right: 0; box-sizing: border-box; diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index dc0ebeca86ed09..3d9b56cc7115f7 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -1,6 +1,6 @@ .editor-visual-editor { margin: 0 auto; - padding: 50px 0; + padding: 50px 0; // Floating up/down arrows invisible &, & p { @@ -21,15 +21,12 @@ .editor-visual-editor { margin-left: auto; margin-right: auto; - > div { - display: grid; - grid-gap: 20px; - grid-template-columns: [full-start] minmax(1em, 1fr) [content-start] minmax(0, 40em) [content-end] minmax(1em, 1fr) [full-end]; - } } .editor-visual-editor__block { - grid-column: main; + margin-left: auto; + margin-right: auto; + max-width: $visual-editor-max-width; position: relative; padding: $block-padding; transition: 0.2s border-color; From 5e999c935374e45e2074f4e765bfc2d1e804b60f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mat=C3=ADas=20Ventura?= Date: Wed, 7 Jun 2017 18:54:23 +0200 Subject: [PATCH 11/15] More elegant calculation of margins. --- blocks/library/image/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 61eb9b720e7025..7c86e3c66d0334 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -9,13 +9,17 @@ &[data-align="left"] { float: left; margin-right: $block-padding; - margin-left: calc( 50vw - 500px); + @include break-medium() { + margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } ); + } } &[data-align="right"] { float: right; margin-left: $block-padding; - margin-right: calc( 50vw - 500px); + @include break-medium() { + margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } ); + } } &[data-align="wide"] { From a4d712e4c7de1eb81b5bfab22f56741fac864c34 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 7 Jun 2017 21:19:47 +0200 Subject: [PATCH 12/15] Address responsive issues with emulated floats We are emulating floats using margins. This works well enough, but has some responsive implications. This commit addresses those, by creating a mix-in that simplifies the breakpoints. I couldn't quite figure out where to best place this mixin, and we also probably want to extract both the mixin, the variables, and even the left/right alignment code so that other blocks that utilize these don't have to copy the whole bit of code. But I wanted to push this so we can test, and then discuss. --- blocks/library/image/style.scss | 44 +++++++++++++++++++++++++++++---- 1 file changed, 39 insertions(+), 5 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 7c86e3c66d0334..432250fdbb1f5c 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -1,3 +1,11 @@ +// @todo: these should be moved out to generic .is-left-aligned and .is-right-aligned classes +@mixin editor-width( $width ) { + @media ( min-width: #{ ( $width ) } ) { + @content; + } +} +$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); + .editor-visual-editor__block[data-type="core/image"] { &[data-align="left"], &[data-align="right"] { @@ -8,17 +16,43 @@ &[data-align="left"] { float: left; + + // mobile, and no sidebars margin-right: $block-padding; - @include break-medium() { - margin-left: calc( 50% - #{ $visual-editor-max-width / 2 } ); + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { + margin-left: $float-margin; + } + } + + // 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; + } } } &[data-align="right"] { float: right; - margin-left: $block-padding; - @include break-medium() { - margin-right: calc( 50% - #{ $visual-editor-max-width / 2 } ); + + // mobile, and no sidebars + margin-right: $block-padding; + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-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; + } } } From 3c883b703e69b6aac6eb3640bbb6b72e44c6bd15 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Wed, 7 Jun 2017 21:26:13 +0200 Subject: [PATCH 13/15] Address feedback. Clean up double semicolons, better center toolbars, remove border-box. --- blocks/library/image/style.scss | 31 +++---------------------------- 1 file changed, 3 insertions(+), 28 deletions(-) diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 432250fdbb1f5c..5e389a928c2798 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -64,7 +64,6 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); max-width: 100%; padding-left: 0; padding-right: 0; - box-sizing: border-box; &:before { left: 0; @@ -80,33 +79,9 @@ $float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); &[data-align="full"], &[data-align="wide"] { .editor-visual-editor__block-controls { - max-width: $visual-editor-max-width - ( ( $block-padding + $block-padding + $block-mover-margin ) * 2 );; - // a block is 600px wide inside a 700px container - // with block mover margin, border widths and paddings, toolbars are indented 46px - // that's 2px border plus 10px padding plus 18px mover margin - // these 46px are accounted for on both sides, to make sure the block is centered - - width: auto; - margin-left: $block-mover-padding-hidden + $block-padding; - margin-right: $block-mover-padding-hidden + $block-padding; - - @include break-small() { - width: 100%; - margin-left: auto; - margin-right: auto; - - .is-sidebar-opened & { - padding-left: $block-mover-padding-visible + $block-padding; - padding-right: $block-mover-padding-visible + $block-padding; - } - } - - @include break-large() { - .is-sidebar-opened & { - padding-left: 0; - padding-right: 0; - } - } + width: $visual-editor-max-width - $block-padding - $block-padding; + margin-left: auto; + margin-right: auto; } } } From 9ea37439ca73db091757c6052e18046b23768fca Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 8 Jun 2017 10:39:15 +0200 Subject: [PATCH 14/15] Move mixin, genericize alignments. --- blocks/library/embed/style.scss | 41 ------------ blocks/library/image/style.scss | 88 -------------------------- editor/assets/stylesheets/_mixins.scss | 26 ++++++-- editor/modes/visual-editor/style.scss | 79 +++++++++++++++++++++++ 4 files changed, 99 insertions(+), 135 deletions(-) diff --git a/blocks/library/embed/style.scss b/blocks/library/embed/style.scss index d7d5d4458f1800..f35c8f90fae3fb 100644 --- a/blocks/library/embed/style.scss +++ b/blocks/library/embed/style.scss @@ -33,44 +33,3 @@ width: 100%; height: 100%; } - -div[data-type="core/embed"] { - &[data-align="left"], - &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content - z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); - width: 370px; - } - - &[data-align="left"] { - float: left; - margin-right: $block-padding; - } - - &[data-align="right"] { - float: right; - margin-left: $block-padding; - } - - &[data-align="wide"] { - padding-left: 0; - padding-right: 0; - margin-right: -#{ $block-padding + $block-mover-margin }; /* Compensate for .editor-visual-editor centering padding */ - - &:before { - left: 0; - border-left-width: 0; - border-right-width: 0; - } - - .editor-block-mover { - display: none; - } - - .editor-visual-editor__block-controls { - max-width: #{ $visual-editor-max-width - $block-padding - ( $block-padding * 2 + $block-mover-margin ) }; - margin-left: auto; - margin-right: auto; - } - } -} diff --git a/blocks/library/image/style.scss b/blocks/library/image/style.scss index 5e389a928c2798..b45d7085c0885c 100644 --- a/blocks/library/image/style.scss +++ b/blocks/library/image/style.scss @@ -1,91 +1,3 @@ -// @todo: these should be moved out to generic .is-left-aligned and .is-right-aligned classes -@mixin editor-width( $width ) { - @media ( min-width: #{ ( $width ) } ) { - @content; - } -} -$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); - -.editor-visual-editor__block[data-type="core/image"] { - &[data-align="left"], - &[data-align="right"] { - // Without z-index, won't be clickable as "above" adjacent content - z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); - max-width: 370px; - } - - &[data-align="left"] { - float: left; - - // mobile, and no sidebars - margin-right: $block-padding; - - // sidebar (folded) - .auto-fold .editor-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { - margin-left: $float-margin; - } - } - - // 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; - } - } - } - - &[data-align="right"] { - float: right; - - // mobile, and no sidebars - margin-right: $block-padding; - - // sidebar (folded) - .auto-fold .editor-layout:not( .is-sidebar-opened ) & { - @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-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; - } - } - } - - &[data-align="wide"] { - max-width: 1100px; - } - - &[data-align="full"] { - max-width: 100%; - padding-left: 0; - padding-right: 0; - - &:before { - left: 0; - border-left-width: 0; - border-right-width: 0; - } - - .editor-block-mover { - display: none; - } - } - - &[data-align="full"], - &[data-align="wide"] { - .editor-visual-editor__block-controls { - width: $visual-editor-max-width - $block-padding - $block-padding; - margin-left: auto; - margin-right: auto; - } - } -} - .blocks-image { margin: 0; diff --git a/editor/assets/stylesheets/_mixins.scss b/editor/assets/stylesheets/_mixins.scss index 79084dc57dc1cf..425d35f749296b 100644 --- a/editor/assets/stylesheets/_mixins.scss +++ b/editor/assets/stylesheets/_mixins.scss @@ -34,12 +34,13 @@ } } -// ========================================================================== -// Long content fade mixin -// -// Creates a fading overlay to signify that the content is longer -// than the space allows. -// ========================================================================== +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ + @mixin long-content-fade( $direction: right, $size: 20%, $color: #fff, $edge: 0px, $z-index: false) { content: ''; display: block; @@ -94,3 +95,16 @@ height: auto; } } + +/** + * Editor Width mixin + * + * This mixin seeks to take the vinegar out of the responsive alignments in the editor. + */ + +@mixin editor-width( $width ) { + @media ( min-width: #{ ( $width ) } ) { + @content; + } +} +$float-margin: calc( 50% - #{ $visual-editor-max-width / 2 } ); diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 3d9b56cc7115f7..092dd24ab2444f 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -77,6 +77,85 @@ &.is-selected .iframe-overlay:before { display: none; } + + // Alignments + &[data-align="left"], + &[data-align="right"] { + // Without z-index, won't be clickable as "above" adjacent content + z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); + max-width: 370px; + } + + &[data-align="left"] { + float: left; + + // mobile, and no sidebars + margin-right: $block-padding; + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-width - $block-padding ) { + margin-left: $float-margin; + } + } + + // 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; + } + } + } + + &[data-align="right"] { + float: right; + + // mobile, and no sidebars + margin-right: $block-padding; + + // sidebar (folded) + .auto-fold .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width-collapsed + $visual-editor-max-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; + } + } + } + + &[data-align="wide"] { + max-width: 1100px; + } + + &[data-align="full"] { + max-width: 100%; + padding-left: 0; + padding-right: 0; + + &:before { + left: 0; + border-left-width: 0; + border-right-width: 0; + } + + .editor-block-mover { + display: none; + } + } + + &[data-align="full"], + &[data-align="wide"] { + .editor-visual-editor__block-controls { + width: $visual-editor-max-width - $block-padding - $block-padding; + margin-left: auto; + margin-right: auto; + } + } } .editor-visual-editor__block-controls { From 1923ade6835ed92472548c6199f56a1590ec2102 Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 8 Jun 2017 11:30:42 +0200 Subject: [PATCH 15/15] Hide movers and fix sticky menu This commit hides the movers on floated images. We can look at reintroducing them for floats and full width images in a separate PR. It also fixes another responsive issue where the sidebar is stickied. --- editor/modes/visual-editor/style.scss | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss index 092dd24ab2444f..13cb60ff05fab2 100644 --- a/editor/modes/visual-editor/style.scss +++ b/editor/modes/visual-editor/style.scss @@ -84,6 +84,10 @@ // Without z-index, won't be clickable as "above" adjacent content z-index: z-index( '.editor-visual-editor__block {core/image aligned left or right}' ); max-width: 370px; + + .editor-block-mover { + display: none; + } } &[data-align="left"] { @@ -99,6 +103,13 @@ } } + // sidebar (sticky) + .sticky-menu .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-width - $block-padding ) { + margin-left: $float-margin; + } + } + // sidebar and post settings .auto-fold .is-sidebar-opened & { @include editor-width( $admin-sidebar-width + $visual-editor-max-width + $sidebar-width ) { @@ -120,6 +131,13 @@ } } + // sidebar (sticky) + .sticky-menu .editor-layout:not( .is-sidebar-opened ) & { + @include editor-width( $admin-sidebar-width + $visual-editor-max-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 ) {