From e883aab2b3c115e78045fcf4863ccbc9bf4a1e45 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Thu, 21 May 2020 17:49:06 -0700 Subject: [PATCH] FSE: Add focus mode and top toolbar modes (#22537) --- .../src/components/block-editor/index.js | 31 +++++++--- .../edit-site/src/components/editor/index.js | 14 ++--- .../edit-site/src/components/header/index.js | 21 ++++++- .../src/components/header/more-menu/index.js | 16 +++++ .../src/components/header/style.scss | 58 +++++++++++++++++++ 5 files changed, 122 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index 702e1f3f6bfc35..7e2e1a5d5ec226 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -25,19 +25,31 @@ import Sidebar from '../sidebar'; export default function BlockEditor() { const { settings: _settings, setSettings } = useEditorContext(); - const canUserCreateMedia = useSelect( ( select ) => { - const _canUserCreateMedia = select( 'core' ).canUser( - 'create', - 'media' - ); - return _canUserCreateMedia || _canUserCreateMedia !== false; - }, [] ); + const { canUserCreateMedia, focusMode, hasFixedToolbar } = useSelect( + ( select ) => { + const { isFeatureActive } = select( 'core/edit-site' ); + const _canUserCreateMedia = select( 'core' ).canUser( + 'create', + 'media' + ); + return { + canUserCreateMedia: + _canUserCreateMedia || _canUserCreateMedia !== false, + focusMode: isFeatureActive( 'focusMode' ), + hasFixedToolbar: isFeatureActive( 'fixedToolbar' ), + }; + }, + [] + ); + const settings = useMemo( () => { if ( ! canUserCreateMedia ) { return _settings; } return { ..._settings, + focusMode, + hasFixedToolbar, mediaUpload( { onError, ...rest } ) { uploadMedia( { wpAllowedMimeTypes: _settings.allowedMimeTypes, @@ -46,11 +58,13 @@ export default function BlockEditor() { } ); }, }; - }, [ canUserCreateMedia, _settings ] ); + }, [ canUserCreateMedia, _settings, focusMode, hasFixedToolbar ] ); + const [ blocks, onInput, onChange ] = useEntityBlockEditor( 'postType', settings.templateType ); + const setActiveTemplateId = useCallback( ( newTemplateId ) => setSettings( ( prevSettings ) => ( { @@ -60,6 +74,7 @@ export default function BlockEditor() { } ) ), [] ); + return ( { + const { isFullscreenActive, deviceType } = useSelect( ( select ) => { + const { isFeatureActive, __experimentalGetPreviewDeviceType } = select( + 'core/edit-site' + ); return { - isFullscreenActive: select( 'core/edit-site' ).isFeatureActive( - 'fullscreenMode' - ), + isFullscreenActive: isFeatureActive( 'fullscreenMode' ), + deviceType: __experimentalGetPreviewDeviceType(), }; }, [] ); - const deviceType = useSelect( ( select ) => { - return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType(); - }, [] ); - const inlineStyles = useResizeCanvas( deviceType ); const [ diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 7b2f843aa654b2..ebeafb32cf35ee 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -1,11 +1,13 @@ /** * WordPress dependencies */ +import { useViewportMatch } from '@wordpress/compose'; import { useCallback } from '@wordpress/element'; import { addQueryArgs } from '@wordpress/url'; import { BlockNavigationDropdown, ToolSelector, + BlockToolbar, __experimentalPreviewOptions as PreviewOptions, } from '@wordpress/block-editor'; import { @@ -99,14 +101,24 @@ export default function Header( { } catch ( err ) {} }, [] ); - const deviceType = useSelect( ( select ) => { - return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType(); + const { deviceType, hasFixedToolbar } = useSelect( ( select ) => { + const { __experimentalGetPreviewDeviceType, isFeatureActive } = select( + 'core/edit-site' + ); + return { + deviceType: __experimentalGetPreviewDeviceType(), + hasFixedToolbar: isFeatureActive( 'fixedToolbar' ), + }; }, [] ); const { __experimentalSetPreviewDeviceType: setPreviewDeviceType, } = useDispatch( 'core/edit-site' ); + const isLargeViewport = useViewportMatch( 'medium' ); + const displayBlockToolbar = + ! isLargeViewport || deviceType !== 'Desktop' || hasFixedToolbar; + return (
@@ -127,6 +139,11 @@ export default function Header( { + { displayBlockToolbar && ( +
+ +
+ ) }
( > { () => ( + + * { margin-left: 5px; @@ -47,3 +48,60 @@ } } } + +// Block toolbar when fixed to the top of the screen. +.edit-site-header-toolbar__block-toolbar { + // Stack toolbar below Editor Bar. + position: absolute; + top: $header-height + $border-width; + left: 0; + right: 0; + background: $white; + border-bottom: $border-width solid $light-gray-500; + + &:empty { + display: none; + } + + .block-editor-block-toolbar .components-toolbar-group, + .block-editor-block-toolbar .components-toolbar { + border-top: none; + border-bottom: none; + } + + .is-sidebar-opened & { + display: none; + } + + @include break-medium { + .is-sidebar-opened & { + display: block; + right: $sidebar-width; + } + } + + // Move toolbar into top Editor Bar. + @include break-wide { + padding-left: $grid-unit-10; + position: static; + left: auto; + right: auto; + background: none; + border-bottom: none; + + .is-sidebar-opened & { + right: auto; + } + + .block-editor-block-toolbar { + border-left: $border-width solid $light-gray-500; + } + + .block-editor-block-toolbar .components-toolbar-group, + .block-editor-block-toolbar .components-toolbar { + $top-toolbar-padding: ( $header-height - $grid-unit-60 ) / 2; + height: $header-height; + padding: $top-toolbar-padding 0; + } + } +}