From d214452a1cf02838d5f007c7eacf8bc96af8103d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Aug 2018 10:08:39 +0100 Subject: [PATCH 01/16] More Menu: Rename the "Fixed toolbar to the top" into "Focus Mode" --- .../components/header/fixed-toolbar-toggle/index.js | 2 +- edit-post/components/header/more-menu/index.js | 8 ++++---- test/e2e/specs/links.test.js | 10 +++++----- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/fixed-toolbar-toggle/index.js index c80452c12a7f32..e3924c0c435e3c 100644 --- a/edit-post/components/header/fixed-toolbar-toggle/index.js +++ b/edit-post/components/header/fixed-toolbar-toggle/index.js @@ -19,7 +19,7 @@ function FixedToolbarToggle( { onToggle, isActive } ) { onClick={ onToggle } role="menuitemcheckbox" > - { __( 'Fix Toolbar to Top' ) } + { __( 'Focus Mode' ) } ); } diff --git a/edit-post/components/header/more-menu/index.js b/edit-post/components/header/more-menu/index.js index 74327c6df032cf..387ab689d13f2b 100644 --- a/edit-post/components/header/more-menu/index.js +++ b/edit-post/components/header/more-menu/index.js @@ -30,19 +30,19 @@ const MoreMenu = () => ( ) } renderContent={ ( { onClose } ) => ( - - + + diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js index 7dd10ff5d664af..a96599d052ebf5 100644 --- a/test/e2e/specs/links.test.js +++ b/test/e2e/specs/links.test.js @@ -195,9 +195,9 @@ describe( 'Links', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); - const setFixedToolbar = async ( b ) => { + const setFocusMode = async ( b ) => { await page.click( '.edit-post-more-menu button' ); - const button = ( await page.$x( "//button[contains(text(), 'Fix Toolbar to Top')]" ) )[ 0 ]; + const button = ( await page.$x( "//button[contains(text(), 'Focus Mode')]" ) )[ 0 ]; const buttonClassNameProperty = await button.getProperty( 'className' ); const buttonClassName = await buttonClassNameProperty.jsonValue(); const isSelected = buttonClassName.indexOf( 'is-selected' ) !== -1; @@ -208,8 +208,8 @@ describe( 'Links', () => { } }; - it( 'allows Left to be pressed during creation in "Fixed to Toolbar" mode', async () => { - await setFixedToolbar( true ); + it( 'allows Left to be pressed during creation in Focus mode', async () => { + await setFocusMode( true ); await clickBlockAppender(); await page.keyboard.type( 'Text' ); @@ -227,7 +227,7 @@ describe( 'Links', () => { } ); it( 'allows Left to be pressed during creation in "Docked Toolbar" mode', async () => { - await setFixedToolbar( false ); + await setFocusMode( false ); await clickBlockAppender(); await page.keyboard.type( 'Text' ); From daaadd15e542292c2ee9dbf7ed9f05a90cda826b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 28 Aug 2018 10:29:28 +0100 Subject: [PATCH 02/16] Hide Block Outlines in Focus Mode --- .../header/fixed-toolbar-toggle/index.js | 2 -- .../components/header/more-menu/index.js | 9 ++----- .../components/header/writing-menu/index.js | 24 +++++++++++++++++++ .../editor/src/components/block-list/block.js | 18 +++++++------- .../src/components/post-permalink/style.scss | 1 - .../editor/src/components/post-title/index.js | 10 +++++--- .../src/components/post-title/style.scss | 6 ++--- 7 files changed, 45 insertions(+), 25 deletions(-) create mode 100644 edit-post/components/header/writing-menu/index.js diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/fixed-toolbar-toggle/index.js index e3924c0c435e3c..75e52569828748 100644 --- a/edit-post/components/header/fixed-toolbar-toggle/index.js +++ b/edit-post/components/header/fixed-toolbar-toggle/index.js @@ -9,7 +9,6 @@ import { withSelect, withDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; -import { ifViewportMatches } from '@wordpress/viewport'; function FixedToolbarToggle( { onToggle, isActive } ) { return ( @@ -34,5 +33,4 @@ export default compose( [ ownProps.onToggle(); }, } ) ), - ifViewportMatches( 'medium' ), ] )( FixedToolbarToggle ); diff --git a/edit-post/components/header/more-menu/index.js b/edit-post/components/header/more-menu/index.js index 387ab689d13f2b..42ab8d1756e84a 100644 --- a/edit-post/components/header/more-menu/index.js +++ b/edit-post/components/header/more-menu/index.js @@ -10,10 +10,10 @@ import { Fragment } from '@wordpress/element'; */ import './style.scss'; import ModeSwitcher from '../mode-switcher'; -import FixedToolbarToggle from '../fixed-toolbar-toggle'; import PluginMoreMenuGroup from '../plugins-more-menu-group'; import TipsToggle from '../tips-toggle'; import KeyboardShortcutsHelpMenuItem from '../keyboard-shortcuts-help-menu-item'; +import WritingMenu from '../writing-menu'; const MoreMenu = () => ( ( ) } renderContent={ ( { onClose } ) => ( - - - + + + + ); +} + +export default ifViewportMatches( 'medium' )( WritingMenu ); diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index e0509e56ff0a6b..cc0da4168f2fd9 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -354,7 +354,7 @@ export class BlockListBlock extends Component { block, order, mode, - hasFixedToolbar, + isFocusMode, isLocked, isFirst, isLast, @@ -367,7 +367,6 @@ export class BlockListBlock extends Component { isTypingWithinBlock, isMultiSelecting, hoverArea, - isLargeViewport, isEmptyDefaultBlock, isMovable, isPreviousBlockADefaultEmptyBlock, @@ -385,13 +384,14 @@ export class BlockListBlock extends Component { // Empty paragraph blocks should always show up as unselected. const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock; const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock; - const shouldAppearSelected = ! showSideInserter && isSelected && ! isTypingWithinBlock; - const shouldAppearSelectedParent = ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock; + const shouldAppearSelected = ! isFocusMode && ! showSideInserter && isSelected && ! isTypingWithinBlock; + const shouldAppearSelectedParent = ! isFocusMode && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock; + const shouldAppearHovered = ! isFocusMode && isHovered && ! isEmptyDefaultBlock; // We render block movers and block settings to keep them tabbale even if hidden const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection; const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock; - const shouldShowContextualToolbar = ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ) && ( ! hasFixedToolbar || ! isLargeViewport ); + const shouldShowContextualToolbar = ! isFocusMode && ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ); const shouldShowMobileToolbar = shouldAppearSelected; const { error, dragging } = this.state; @@ -407,7 +407,7 @@ export class BlockListBlock extends Component { 'is-selected': shouldAppearSelected, 'is-multi-selected': isPartOfMultiSelection, 'is-selected-parent': shouldAppearSelectedParent, - 'is-hovered': isHovered && ! isEmptyDefaultBlock, + 'is-hovered': shouldAppearHovered, 'is-reusable': isReusableBlock( blockType ), 'is-hidden': dragging, 'is-typing': isTypingWithinBlock, @@ -584,7 +584,7 @@ export class BlockListBlock extends Component { } } -const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => { +const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeViewport } ) => { const { isBlockSelected, getPreviousBlockClientId, @@ -630,10 +630,10 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId } ) => { isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ), isMovable: 'all' !== templateLock, isLocked: !! templateLock, + isFocusMode: hasFixedToolbar && isLargeViewport, previousBlockClientId, block, isSelected, - hasFixedToolbar, }; } ); @@ -689,9 +689,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => { } ); export default compose( + withViewportMatch( { isLargeViewport: 'medium' } ), applyWithSelect, applyWithDispatch, - withViewportMatch( { isLargeViewport: 'medium' } ), withFilters( 'editor.BlockListBlock' ), withHoverAreas, )( BlockListBlock ); diff --git a/packages/editor/src/components/post-permalink/style.scss b/packages/editor/src/components/post-permalink/style.scss index dfe7b7270f9db9..bb94a759def88c 100644 --- a/packages/editor/src/components/post-permalink/style.scss +++ b/packages/editor/src/components/post-permalink/style.scss @@ -10,7 +10,6 @@ // Use opacity to work in various editor styles. border: $border-width solid $dark-opacity-light-500; - border-bottom: none; background-clip: padding-box; // Put toolbar snugly to edge on mobile. diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index af836f6c89de3c..17ceb365020f0d 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -88,9 +88,12 @@ class PostTitle extends Component { } render() { - const { title, placeholder, instanceId, isPostTypeViewable } = this.props; + const { title, placeholder, instanceId, isPostTypeViewable, hasFixedToolbar } = this.props; const { isSelected } = this.state; - const className = classnames( 'editor-post-title__block', { 'is-selected': isSelected } ); + const className = classnames( 'editor-post-title__block', { + 'is-selected': isSelected, + 'is-focus-mode': hasFixedToolbar, + } ); const decodedPlaceholder = decodeEntities( placeholder ); return ( @@ -129,12 +132,13 @@ const applyWithSelect = withSelect( ( select ) => { const { getEditedPostAttribute, getEditorSettings } = select( 'core/editor' ); const { getPostType } = select( 'core' ); const postType = getPostType( getEditedPostAttribute( 'type' ) ); - const { titlePlaceholder } = getEditorSettings(); + const { titlePlaceholder, hasFixedToolbar } = getEditorSettings(); return { title: getEditedPostAttribute( 'title' ), isPostTypeViewable: get( postType, [ 'viewable' ], false ), placeholder: titlePlaceholder, + hasFixedToolbar, }; } ); diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index 35536b6b41fa07..aa2d129aca6f07 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -37,7 +37,7 @@ font-weight: 600; } - &.is-selected .editor-post-title__input { + &.is-selected:not(.is-focus-mode) .editor-post-title__input { // use opacity to work in various editor styles border-color: $dark-opacity-light-500; @@ -46,7 +46,7 @@ } } - .editor-post-title__input:hover { + &:not(.is-focus-mode) .editor-post-title__input:hover { border-color: theme(outlines); } } @@ -55,7 +55,7 @@ font-size: $default-font-size; color: $dark-gray-900; position: absolute; - top: -$block-toolbar-height + $border-width + $border-width; // Shift this element upward the same height as the block toolbar, minus the border size + top: -$block-toolbar-height + $border-width + $border-width + 1px; // Shift this element upward the same height as the block toolbar, minus the border size left: 0; right: 0; From 50e47b027563c44bb14f1a1f3a5675c769f1ad72 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 Aug 2018 10:10:30 +0100 Subject: [PATCH 03/16] Separate the two options "Fixed Toolbar to Top" and "Focus Mode" --- .../index.js | 12 ++++++------ .../components/header/writing-menu/index.js | 5 +++-- edit-post/editor.js | 18 ++++++++++++++++-- .../editor/src/components/block-list/block.js | 8 +++++--- .../editor/src/components/post-title/index.js | 8 ++++---- packages/editor/src/store/defaults.js | 1 + test/e2e/specs/links.test.js | 10 +++++----- 7 files changed, 40 insertions(+), 22 deletions(-) rename edit-post/components/header/{fixed-toolbar-toggle => feature-toggle}/index.js (66%) diff --git a/edit-post/components/header/fixed-toolbar-toggle/index.js b/edit-post/components/header/feature-toggle/index.js similarity index 66% rename from edit-post/components/header/fixed-toolbar-toggle/index.js rename to edit-post/components/header/feature-toggle/index.js index 75e52569828748..4afd00721e5b35 100644 --- a/edit-post/components/header/fixed-toolbar-toggle/index.js +++ b/edit-post/components/header/feature-toggle/index.js @@ -10,7 +10,7 @@ import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; -function FixedToolbarToggle( { onToggle, isActive } ) { +function FeatureToggle( { onToggle, isActive, label } ) { return ( - { __( 'Focus Mode' ) } + { __( label ) } ); } export default compose( [ - withSelect( ( select ) => ( { - isActive: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), + withSelect( ( select, { feature } ) => ( { + isActive: select( 'core/edit-post' ).isFeatureActive( feature ), } ) ), withDispatch( ( dispatch, ownProps ) => ( { onToggle() { - dispatch( 'core/edit-post' ).toggleFeature( 'fixedToolbar' ); + dispatch( 'core/edit-post' ).toggleFeature( ownProps.feature ); ownProps.onToggle(); }, } ) ), -] )( FixedToolbarToggle ); +] )( FeatureToggle ); diff --git a/edit-post/components/header/writing-menu/index.js b/edit-post/components/header/writing-menu/index.js index b45ded127746b9..7484b781025034 100644 --- a/edit-post/components/header/writing-menu/index.js +++ b/edit-post/components/header/writing-menu/index.js @@ -8,7 +8,7 @@ import { ifViewportMatches } from '@wordpress/viewport'; /** * Internal dependencies */ -import FixedToolbarToggle from '../fixed-toolbar-toggle'; +import FeatureToggle from '../feature-toggle'; function WritingMenu( { onClose } ) { return ( @@ -16,7 +16,8 @@ function WritingMenu( { onClose } ) { label={ __( 'Writing' ) } filterName="editPost.MoreMenu.writing" > - + + ); } diff --git a/edit-post/editor.js b/edit-post/editor.js index 42ff1f5da83031..1ed71dacf372e6 100644 --- a/edit-post/editor.js +++ b/edit-post/editor.js @@ -10,7 +10,15 @@ import { StrictMode } from '@wordpress/element'; */ import Layout from './components/layout'; -function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...props } ) { +function Editor( { + settings, + hasFixedToolbar, + focusMode, + post, + overridePost, + onError, + ...props +} ) { if ( ! post ) { return null; } @@ -18,11 +26,16 @@ function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...pr const editorSettings = { ...settings, hasFixedToolbar, + focusMode, }; return ( - + @@ -33,5 +46,6 @@ function Editor( { settings, hasFixedToolbar, post, overridePost, onError, ...pr export default withSelect( ( select, { postId, postType } ) => ( { hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ), + focusMode: select( 'core/edit-post' ).isFeatureActive( 'focusMode' ), post: select( 'core' ).getEntityRecord( 'postType', postType, postId ), } ) )( Editor ); diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index cc0da4168f2fd9..4a8411cb9d12e9 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -355,6 +355,7 @@ export class BlockListBlock extends Component { order, mode, isFocusMode, + hasFixedToolbar, isLocked, isFirst, isLast, @@ -391,7 +392,7 @@ export class BlockListBlock extends Component { const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection; const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock; - const shouldShowContextualToolbar = ! isFocusMode && ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ); + const shouldShowContextualToolbar = ! hasFixedToolbar && ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ); const shouldShowMobileToolbar = shouldAppearSelected; const { error, dragging } = this.state; @@ -606,7 +607,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV } = select( 'core/editor' ); const isSelected = isBlockSelected( clientId ); const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId ); - const { hasFixedToolbar } = getEditorSettings(); + const { hasFixedToolbar, focusMode } = getEditorSettings(); const block = getBlock( clientId ); const previousBlockClientId = getPreviousBlockClientId( clientId ); const previousBlock = getBlock( previousBlockClientId ); @@ -630,7 +631,8 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV isPreviousBlockADefaultEmptyBlock: previousBlock && isUnmodifiedDefaultBlock( previousBlock ), isMovable: 'all' !== templateLock, isLocked: !! templateLock, - isFocusMode: hasFixedToolbar && isLargeViewport, + isFocusMode: focusMode && isLargeViewport, + hasFixedToolbar: hasFixedToolbar && isLargeViewport, previousBlockClientId, block, isSelected, diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index 17ceb365020f0d..d1f3367abb215d 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -88,11 +88,11 @@ class PostTitle extends Component { } render() { - const { title, placeholder, instanceId, isPostTypeViewable, hasFixedToolbar } = this.props; + const { title, placeholder, instanceId, isPostTypeViewable, isFocusMode } = this.props; const { isSelected } = this.state; const className = classnames( 'editor-post-title__block', { 'is-selected': isSelected, - 'is-focus-mode': hasFixedToolbar, + 'is-focus-mode': isFocusMode, } ); const decodedPlaceholder = decodeEntities( placeholder ); @@ -132,13 +132,13 @@ const applyWithSelect = withSelect( ( select ) => { const { getEditedPostAttribute, getEditorSettings } = select( 'core/editor' ); const { getPostType } = select( 'core' ); const postType = getPostType( getEditedPostAttribute( 'type' ) ); - const { titlePlaceholder, hasFixedToolbar } = getEditorSettings(); + const { titlePlaceholder, focusMode } = getEditorSettings(); return { title: getEditedPostAttribute( 'title' ), isPostTypeViewable: get( postType, [ 'viewable' ], false ), placeholder: titlePlaceholder, - hasFixedToolbar, + isFocusMode: focusMode, }; } ); diff --git a/packages/editor/src/store/defaults.js b/packages/editor/src/store/defaults.js index 56a7db862be1c5..bc4be6692059b6 100644 --- a/packages/editor/src/store/defaults.js +++ b/packages/editor/src/store/defaults.js @@ -16,6 +16,7 @@ export const PREFERENCES_DEFAULTS = { * maxWidth number Max width to constraint resizing * blockTypes boolean|Array Allowed block types * hasFixedToolbar boolean Whether or not the editor toolbar is fixed + * focusMode boolean Whether the focus mode is enabled or not */ export const EDITOR_SETTINGS_DEFAULTS = { alignWide: false, diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js index a96599d052ebf5..52a0ee0b64fa44 100644 --- a/test/e2e/specs/links.test.js +++ b/test/e2e/specs/links.test.js @@ -195,9 +195,9 @@ describe( 'Links', () => { expect( await getEditedPostContent() ).toMatchSnapshot(); } ); - const setFocusMode = async ( b ) => { + const toggleFixedToolbar = async ( b ) => { await page.click( '.edit-post-more-menu button' ); - const button = ( await page.$x( "//button[contains(text(), 'Focus Mode')]" ) )[ 0 ]; + const button = ( await page.$x( "//button[contains(text(), 'Fix Toolbar To Top')]" ) )[ 0 ]; const buttonClassNameProperty = await button.getProperty( 'className' ); const buttonClassName = await buttonClassNameProperty.jsonValue(); const isSelected = buttonClassName.indexOf( 'is-selected' ) !== -1; @@ -208,8 +208,8 @@ describe( 'Links', () => { } }; - it( 'allows Left to be pressed during creation in Focus mode', async () => { - await setFocusMode( true ); + it( 'allows Left to be pressed during creation when the toolbar is fixed to top', async () => { + await toggleFixedToolbar( true ); await clickBlockAppender(); await page.keyboard.type( 'Text' ); @@ -227,7 +227,7 @@ describe( 'Links', () => { } ); it( 'allows Left to be pressed during creation in "Docked Toolbar" mode', async () => { - await setFocusMode( false ); + await toggleFixedToolbar( false ); await clickBlockAppender(); await page.keyboard.type( 'Text' ); From baa9c7134d4f2e81cd8e2a8682648e6d979262eb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 Aug 2018 10:16:32 +0100 Subject: [PATCH 04/16] Focus Mode: Unfocus the unselected blocks --- packages/editor/src/components/block-list/block.js | 3 ++- packages/editor/src/components/block-list/style.scss | 4 ++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index 4a8411cb9d12e9..ed511acee820ec 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -391,7 +391,7 @@ export class BlockListBlock extends Component { // We render block movers and block settings to keep them tabbale even if hidden const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection; - const shouldShowBreadcrumb = isHovered && ! isEmptyDefaultBlock; + const shouldShowBreadcrumb = ! isFocusMode && isHovered && ! isEmptyDefaultBlock; const shouldShowContextualToolbar = ! hasFixedToolbar && ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ); const shouldShowMobileToolbar = shouldAppearSelected; const { error, dragging } = this.state; @@ -412,6 +412,7 @@ export class BlockListBlock extends Component { 'is-reusable': isReusableBlock( blockType ), 'is-hidden': dragging, 'is-typing': isTypingWithinBlock, + 'is-not-focused': isFocusMode && ! isSelected, } ); const { onReplace } = this.props; diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index c7b82bd04c1e80..84dc3e5650b768 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -101,6 +101,10 @@ .editor-block-list__block-edit .reusable-block-edit-panel * { z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); } + + &.is-not-focused { + opacity: 0.6; + } } From 05769a5c322bf0e5e5d5896bcff4cb32f396c20a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 Aug 2018 14:51:09 +0100 Subject: [PATCH 05/16] Fix toolbar position and nested focused blocks --- packages/editor/src/components/block-list/block.js | 9 ++++++--- packages/editor/src/components/block-list/style.scss | 12 ++++++++++-- packages/editor/src/store/selectors.js | 12 ++++++++---- 3 files changed, 24 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index ed511acee820ec..a09c16399c3c38 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -372,6 +372,7 @@ export class BlockListBlock extends Component { isMovable, isPreviousBlockADefaultEmptyBlock, hasSelectedInnerBlock, + isParentOfSelectedBlock, } = this.props; const isHovered = this.state.isHovered && ! isMultiSelecting; const { name: blockName, isValid } = block; @@ -412,7 +413,8 @@ export class BlockListBlock extends Component { 'is-reusable': isReusableBlock( blockType ), 'is-hidden': dragging, 'is-typing': isTypingWithinBlock, - 'is-not-focused': isFocusMode && ! isSelected, + 'is-focused': isFocusMode && ( isSelected || isParentOfSelectedBlock ), + 'is-focus-mode': isFocusMode, } ); const { onReplace } = this.props; @@ -607,19 +609,19 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV getTemplateLock, } = select( 'core/editor' ); const isSelected = isBlockSelected( clientId ); - const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId ); const { hasFixedToolbar, focusMode } = getEditorSettings(); const block = getBlock( clientId ); const previousBlockClientId = getPreviousBlockClientId( clientId ); const previousBlock = getBlock( previousBlockClientId ); const templateLock = getTemplateLock( rootClientId ); + const isParentOfSelectedBlock = hasSelectedInnerBlock( clientId, true ); return { nextBlockClientId: getNextBlockClientId( clientId ), isPartOfMultiSelection: isBlockMultiSelected( clientId ) || isAncestorMultiSelected( clientId ), isFirstMultiSelected: isFirstMultiSelectedBlock( clientId ), isMultiSelecting: isMultiSelecting(), - hasSelectedInnerBlock: isParentOfSelectedBlock, + hasSelectedInnerBlock: hasSelectedInnerBlock( clientId, false ), // We only care about this prop when the block is selected // Thus to avoid unnecessary rerenders we avoid updating the prop if the block is not selected. isTypingWithinBlock: ( isSelected || isParentOfSelectedBlock ) && isTyping(), @@ -637,6 +639,7 @@ const applyWithSelect = withSelect( ( select, { clientId, rootClientId, isLargeV previousBlockClientId, block, isSelected, + isParentOfSelectedBlock, }; } ); diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 84dc3e5650b768..5ae7a6abac2981 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -102,8 +102,13 @@ z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); } - &.is-not-focused { + &.is-focus-mode { opacity: 0.6; + + &:not(.is-focused) .editor-block-list__block, + &.is-focused { + opacity: 1; + } } } @@ -856,7 +861,6 @@ .components-toolbar { border-top: none; border-bottom: none; - } @include break-small() { @@ -901,6 +905,10 @@ } } +.editor-block-list__block.is-focus-mode > .editor-block-contextual-toolbar { + margin-left: -$block-side-ui-width; +} + // Enable toolbar footprint collapsing .editor-block-contextual-toolbar { // Position the contextual toolbar above the block. diff --git a/packages/editor/src/store/selectors.js b/packages/editor/src/store/selectors.js index a1edb8e88149a1..efe607f96075ce 100644 --- a/packages/editor/src/store/selectors.js +++ b/packages/editor/src/store/selectors.js @@ -1101,15 +1101,19 @@ export function isBlockSelected( state, clientId ) { /** * Returns true if one of the block's inner blocks is selected. * - * @param {Object} state Editor state. - * @param {string} clientId Block client ID. + * @param {Object} state Editor state. + * @param {string} clientId Block client ID. + * @param {boolean} deep Perform a deep check. * * @return {boolean} Whether the block as an inner block selected */ -export function hasSelectedInnerBlock( state, clientId ) { +export function hasSelectedInnerBlock( state, clientId, deep = false ) { return some( getBlockOrder( state, clientId ), - ( innerClientId ) => isBlockSelected( state, innerClientId ) + ( innerClientId ) => ( + isBlockSelected( state, innerClientId ) || + ( deep && hasSelectedInnerBlock( state, innerClientId, deep ) ) + ) ); } From ce86caceb036e04c7c6fa197c7e189d0c83a93aa Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 29 Aug 2018 14:53:40 +0100 Subject: [PATCH 06/16] Animate opacity transitions --- packages/editor/src/components/block-list/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 5ae7a6abac2981..ed460d96665d78 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -104,6 +104,7 @@ &.is-focus-mode { opacity: 0.6; + transition: opacity 0.1s linear; &:not(.is-focused) .editor-block-list__block, &.is-focused { From fdbcd89c4870ea6330d35677349199924063f0d2 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 09:17:07 +0100 Subject: [PATCH 07/16] Rename the writing options --- edit-post/components/header/writing-menu/index.js | 4 ++-- test/e2e/specs/links.test.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/edit-post/components/header/writing-menu/index.js b/edit-post/components/header/writing-menu/index.js index 7484b781025034..1444d2383dd547 100644 --- a/edit-post/components/header/writing-menu/index.js +++ b/edit-post/components/header/writing-menu/index.js @@ -16,8 +16,8 @@ function WritingMenu( { onClose } ) { label={ __( 'Writing' ) } filterName="editPost.MoreMenu.writing" > - - + + ); } diff --git a/test/e2e/specs/links.test.js b/test/e2e/specs/links.test.js index 52a0ee0b64fa44..0968805fbd49d4 100644 --- a/test/e2e/specs/links.test.js +++ b/test/e2e/specs/links.test.js @@ -197,7 +197,7 @@ describe( 'Links', () => { const toggleFixedToolbar = async ( b ) => { await page.click( '.edit-post-more-menu button' ); - const button = ( await page.$x( "//button[contains(text(), 'Fix Toolbar To Top')]" ) )[ 0 ]; + const button = ( await page.$x( "//button[contains(text(), 'Unified Toolbar')]" ) )[ 0 ]; const buttonClassNameProperty = await button.getProperty( 'className' ); const buttonClassName = await buttonClassNameProperty.jsonValue(); const isSelected = buttonClassName.indexOf( 'is-selected' ) !== -1; From e55fb0a9237d2f992f1c92f619d1430b303fd86d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 09:20:11 +0100 Subject: [PATCH 08/16] Avoid focus mode on multi-selected blocks --- packages/editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index ed460d96665d78..f92b3eec46f885 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -102,7 +102,7 @@ z-index: z-index(".editor-block-list__block-edit .reusable-block-edit-panel *"); } - &.is-focus-mode { + &.is-focus-mode:not(.is-multi-selected) { opacity: 0.6; transition: opacity 0.1s linear; From 6388348d52769416b09b1b3f3c4de99cdcb48394 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 10:13:22 +0100 Subject: [PATCH 09/16] Fix FeatureToggle label --- edit-post/components/header/feature-toggle/index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/edit-post/components/header/feature-toggle/index.js b/edit-post/components/header/feature-toggle/index.js index 4afd00721e5b35..e5ff0ca0c8a50e 100644 --- a/edit-post/components/header/feature-toggle/index.js +++ b/edit-post/components/header/feature-toggle/index.js @@ -6,7 +6,6 @@ import { withSelect, withDispatch } from '@wordpress/data'; /** * WordPress Dependencies */ -import { __ } from '@wordpress/i18n'; import { compose } from '@wordpress/compose'; import { MenuItem } from '@wordpress/components'; @@ -18,7 +17,7 @@ function FeatureToggle( { onToggle, isActive, label } ) { onClick={ onToggle } role="menuitemcheckbox" > - { __( label ) } + { label } ); } From d573e4092cf37ecd24820cc2d4102dba7f5632f5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 13:57:56 +0100 Subject: [PATCH 10/16] Lighter UI for the fixed toolbar --- packages/editor/src/components/block-list/block.js | 6 +++--- .../editor/src/components/block-list/breadcrumb.js | 14 +++++++++++--- .../editor/src/components/block-list/style.scss | 5 +++++ 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index a09c16399c3c38..81516eec577348 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -386,9 +386,9 @@ export class BlockListBlock extends Component { // Empty paragraph blocks should always show up as unselected. const showEmptyBlockSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock; const showSideInserter = ( isSelected || isHovered ) && isEmptyDefaultBlock; - const shouldAppearSelected = ! isFocusMode && ! showSideInserter && isSelected && ! isTypingWithinBlock; - const shouldAppearSelectedParent = ! isFocusMode && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock; - const shouldAppearHovered = ! isFocusMode && isHovered && ! isEmptyDefaultBlock; + const shouldAppearSelected = ! isFocusMode && ! hasFixedToolbar && ! showSideInserter && isSelected && ! isTypingWithinBlock; + const shouldAppearSelectedParent = ! isFocusMode && ! hasFixedToolbar && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock; + const shouldAppearHovered = ! isFocusMode && ! hasFixedToolbar && isHovered && ! isEmptyDefaultBlock; // We render block movers and block settings to keep them tabbale even if hidden const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection; diff --git a/packages/editor/src/components/block-list/breadcrumb.js b/packages/editor/src/components/block-list/breadcrumb.js index ca14b1d346c947..2699fb22811614 100644 --- a/packages/editor/src/components/block-list/breadcrumb.js +++ b/packages/editor/src/components/block-list/breadcrumb.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -48,10 +53,12 @@ export class BlockBreadcrumb extends Component { } render() { - const { clientId, rootClientId } = this.props; + const { clientId, rootClientId, isLight } = this.props; return ( -
+
{ rootClientId && ( @@ -68,11 +75,12 @@ export class BlockBreadcrumb extends Component { export default compose( [ withSelect( ( select, ownProps ) => { - const { getBlockRootClientId } = select( 'core/editor' ); + const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' ); const { clientId } = ownProps; return { rootClientId: getBlockRootClientId( clientId ), + isLight: getEditorSettings().hasFixedToolbar, }; } ), ] )( BlockBreadcrumb ); diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index f92b3eec46f885..7c4bee490326b9 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -1021,6 +1021,11 @@ @include fade_in(60ms, 0.5s); } } + + &.is-light .components-toolbar { + background: rgba($white, 0.5); + color: $dark-gray-700; + } } .editor-block-list__descendant-arrow::before { From 2de3bab9a104f98e72da783d57dca186753e500e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 14:15:52 +0100 Subject: [PATCH 11/16] Slightlty quicker focus animation --- packages/editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 7c4bee490326b9..8019de5434109d 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -103,7 +103,7 @@ } &.is-focus-mode:not(.is-multi-selected) { - opacity: 0.6; + opacity: 0.5; transition: opacity 0.1s linear; &:not(.is-focused) .editor-block-list__block, From 9ad5b0a0db803ba031a993a8318dcf887a02a961 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 15:17:56 +0100 Subject: [PATCH 12/16] Fix the post title in both modes --- .../editor/src/components/post-title/index.js | 7 ++++-- .../src/components/post-title/style.scss | 25 +++++++++++++------ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index d1f3367abb215d..b783b7d55e55de 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -88,11 +88,13 @@ class PostTitle extends Component { } render() { - const { title, placeholder, instanceId, isPostTypeViewable, isFocusMode } = this.props; + const { title, placeholder, instanceId, isPostTypeViewable, isFocusMode, hasFixedToolbar } = this.props; const { isSelected } = this.state; const className = classnames( 'editor-post-title__block', { 'is-selected': isSelected, 'is-focus-mode': isFocusMode, + 'has-fixed-toolbar': hasFixedToolbar, + 'is-focused': isFocusMode && isSelected, } ); const decodedPlaceholder = decodeEntities( placeholder ); @@ -132,13 +134,14 @@ const applyWithSelect = withSelect( ( select ) => { const { getEditedPostAttribute, getEditorSettings } = select( 'core/editor' ); const { getPostType } = select( 'core' ); const postType = getPostType( getEditedPostAttribute( 'type' ) ); - const { titlePlaceholder, focusMode } = getEditorSettings(); + const { titlePlaceholder, focusMode, hasFixedToolbar } = getEditorSettings(); return { title: getEditedPostAttribute( 'title' ), isPostTypeViewable: get( postType, [ 'viewable' ], false ), placeholder: titlePlaceholder, isFocusMode: focusMode, + hasFixedToolbar, }; } ); diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index aa2d129aca6f07..fbee766a0151fd 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -37,17 +37,28 @@ font-weight: 600; } - &.is-selected:not(.is-focus-mode) .editor-post-title__input { - // use opacity to work in various editor styles - border-color: $dark-opacity-light-500; + &:not(.is-focus-mode):not(.has-fixed-toolbar) { + &.is-selected .editor-post-title__input { + // use opacity to work in various editor styles + border-color: $dark-opacity-light-500; - .is-dark-theme & { - border-color: $light-opacity-light-500; + .is-dark-theme & { + border-color: $light-opacity-light-500; + } + } + + .editor-post-title__input:hover { + border-color: theme(outlines); } } - &:not(.is-focus-mode) .editor-post-title__input:hover { - border-color: theme(outlines); + &.is-focus-mode { + opacity: 0.5; + transition: opacity 0.1s linear; + + &.is-focused { + opacity: 1; + } } } From 32552f6629344967c9719229037b4004413014a3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 15:52:39 +0100 Subject: [PATCH 13/16] Hide the movers in Spotlight mode --- packages/editor/src/components/block-list/block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js index 81516eec577348..1001e9acb1e084 100644 --- a/packages/editor/src/components/block-list/block.js +++ b/packages/editor/src/components/block-list/block.js @@ -390,7 +390,7 @@ export class BlockListBlock extends Component { const shouldAppearSelectedParent = ! isFocusMode && ! hasFixedToolbar && ! showSideInserter && hasSelectedInnerBlock && ! isTypingWithinBlock; const shouldAppearHovered = ! isFocusMode && ! hasFixedToolbar && isHovered && ! isEmptyDefaultBlock; // We render block movers and block settings to keep them tabbale even if hidden - const shouldRenderMovers = ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; + const shouldRenderMovers = ! isFocusMode && ( isSelected || hoverArea === 'left' ) && ! showEmptyBlockSideInserter && ! isMultiSelecting && ! isPartOfMultiSelection && ! isTypingWithinBlock; const shouldRenderBlockSettings = ( isSelected || hoverArea === 'right' ) && ! isMultiSelecting && ! isPartOfMultiSelection; const shouldShowBreadcrumb = ! isFocusMode && isHovered && ! isEmptyDefaultBlock; const shouldShowContextualToolbar = ! hasFixedToolbar && ! showSideInserter && ( ( isSelected && ! isTypingWithinBlock && isValid ) || isFirstMultiSelected ); From 1a81e49fd6b3d9967c172a601a704cff42801dee Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 16:06:20 +0100 Subject: [PATCH 14/16] Fix block deletion e2e test --- test/e2e/specs/block-deletion.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/block-deletion.test.js b/test/e2e/specs/block-deletion.test.js index 8cd8b1c5fbbc16..d2d70eb6de337d 100644 --- a/test/e2e/specs/block-deletion.test.js +++ b/test/e2e/specs/block-deletion.test.js @@ -42,7 +42,7 @@ describe( 'block deletion -', () => { describe( 'deleting the third block using the Remove Block shortcut', () => { it( 'results in two remaining blocks and positions the caret at the end of the second block', async () => { - await pressWithModifier( [ 'Shift', META_KEY ], 'x' ); + await pressWithModifier( [ 'Shift', META_KEY ], 'Backspace' ); expect( await getEditedPostContent() ).toMatchSnapshot(); // Type additional text and assert that caret position is correct by comparing to snapshot. From ef3abd12ff90eff4c2daea9ae25af9a64eda0139 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 16:26:35 +0100 Subject: [PATCH 15/16] Fix post title focus when typing --- packages/editor/src/components/post-title/index.js | 1 - packages/editor/src/components/post-title/style.scss | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/post-title/index.js b/packages/editor/src/components/post-title/index.js index b783b7d55e55de..8393c2d4d67aee 100644 --- a/packages/editor/src/components/post-title/index.js +++ b/packages/editor/src/components/post-title/index.js @@ -94,7 +94,6 @@ class PostTitle extends Component { 'is-selected': isSelected, 'is-focus-mode': isFocusMode, 'has-fixed-toolbar': hasFixedToolbar, - 'is-focused': isFocusMode && isSelected, } ); const decodedPlaceholder = decodeEntities( placeholder ); diff --git a/packages/editor/src/components/post-title/style.scss b/packages/editor/src/components/post-title/style.scss index fbee766a0151fd..eebb13bf32868d 100644 --- a/packages/editor/src/components/post-title/style.scss +++ b/packages/editor/src/components/post-title/style.scss @@ -52,11 +52,11 @@ } } - &.is-focus-mode { + &.is-focus-mode .editor-post-title__input { opacity: 0.5; transition: opacity 0.1s linear; - &.is-focused { + &:focus { opacity: 1; } } From 95520a4979ca192b84bcc87b4295a95a81904340 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Aug 2018 16:28:59 +0100 Subject: [PATCH 16/16] Fix multi-selection contextual toolbar in focus mode --- packages/editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 8019de5434109d..f082c5d255c697 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -906,7 +906,7 @@ } } -.editor-block-list__block.is-focus-mode > .editor-block-contextual-toolbar { +.editor-block-list__block.is-focus-mode:not(.is-multi-selected) > .editor-block-contextual-toolbar { margin-left: -$block-side-ui-width; }