diff --git a/lib/client-assets.php b/lib/client-assets.php index fae60149ceaea..f1a72422ba00d 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -619,3 +619,23 @@ function gutenberg_extend_block_editor_styles( $settings ) { return $settings; } add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_styles' ); + +/** + * Load the default editor styles. + * These styles are used if the "no theme styles" options is triggered. + * + * @param array $settings Default editor settings. + * + * @return array Filtered editor settings. + */ +function gutenberg_extend_block_editor_settings_with_default_editor_styles( $settings ) { + $editor_styles_file = gutenberg_dir_path() . 'build/editor/editor-styles.css'; + $settings['defaultEditorStyles'] = array( + array( + 'css' => file_get_contents( $editor_styles_file ), + ), + ); + + return $settings; +} +add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_settings_with_default_editor_styles' ); diff --git a/packages/block-editor/src/components/block-list/insertion-point.js b/packages/block-editor/src/components/block-list/insertion-point.js index c7eb0e8d6ee80..8562b088bb9ee 100644 --- a/packages/block-editor/src/components/block-list/insertion-point.js +++ b/packages/block-editor/src/components/block-list/insertion-point.js @@ -31,10 +31,14 @@ function InsertionPointInserter( { getMultiSelectedBlockClientIds, getSelectedBlockClientId, hasMultiSelection, + getSettings, } = select( 'core/block-editor' ); + const { hasReducedUI } = getSettings(); + if ( hasReducedUI ) { + return true; + } const multiSelectedBlockClientIds = getMultiSelectedBlockClientIds(); const selectedBlockClientId = getSelectedBlockClientId(); - return hasMultiSelection() ? multiSelectedBlockClientIds.includes( clientId ) : clientId === selectedBlockClientId; diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 06929a56076c0..bed8b921a2fe9 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -33,6 +33,7 @@ export default function BlockToolbar( { blockClientId, blockType, hasFixedToolbar, + hasReducedUI, isValid, isVisual, } = useSelect( ( select ) => { @@ -47,6 +48,7 @@ export default function BlockToolbar( { const selectedBlockClientIds = getSelectedBlockClientIds(); const selectedBlockClientId = selectedBlockClientIds[ 0 ]; const blockRootClientId = getBlockRootClientId( selectedBlockClientId ); + const settings = getSettings(); return { blockClientIds: selectedBlockClientIds, @@ -54,7 +56,8 @@ export default function BlockToolbar( { blockType: selectedBlockClientId && getBlockType( getBlockName( selectedBlockClientId ) ), - hasFixedToolbar: getSettings().hasFixedToolbar, + hasFixedToolbar: settings.hasFixedToolbar, + hasReducedUI: settings.hasReducedUI, rootClientId: blockRootClientId, isValid: selectedBlockClientIds.every( ( id ) => isBlockValid( id ) @@ -72,6 +75,9 @@ export default function BlockToolbar( { { ref: nodeRef, onChange( isFocused ) { + if ( isFocused && hasReducedUI ) { + return; + } toggleBlockHighlight( blockClientId, isFocused ); }, } @@ -117,7 +123,7 @@ export default function BlockToolbar( { ) } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index b1f97a9eb60dd..bffe229b714e0 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -105,11 +105,6 @@ opacity: 1; transform: translateY(-($block-toolbar-height + $grid-unit-15)); } - - // Hide the Parent button in Top Toolbar mode. - .edit-post-header-toolbar__block-toolbar & { - display: none; - } } .block-editor-block-toolbar-animated-width-container { diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 8de40fc51784a..2c90e5ab1e1a1 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -307,6 +307,7 @@ } &:hover:not(:disabled) { + color: $white; background: $gray-900; } } diff --git a/packages/edit-post/src/components/header/header-toolbar/index.js b/packages/edit-post/src/components/header/header-toolbar/index.js index 50959fed4fcb2..ff8226f101a08 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -29,6 +29,7 @@ function HeaderToolbar() { const inserterButton = useRef(); const { setIsInserterOpened } = useDispatch( 'core/edit-post' ); const { + hasReducedUI, hasFixedToolbar, isInserterEnabled, isInserterOpened, @@ -64,11 +65,15 @@ function HeaderToolbar() { 'showIconLabels' ), isNavigationTool: select( 'core/block-editor' ).isNavigationMode(), + hasReducedUI: select( 'core/edit-post' ).isFeatureActive( + 'reducedUI' + ), }; }, [] ); const isLargeViewport = useViewportMatch( 'medium' ); const isWideViewport = useViewportMatch( 'wide' ); const isSmallViewport = useViewportMatch( 'small', '<' ); + const { setNavigationMode } = useDispatch( 'core/block-editor' ); const displayBlockToolbar = ! isLargeViewport || previewDeviceType !== 'Desktop' || hasFixedToolbar; @@ -79,8 +84,6 @@ function HeaderToolbar() { : /* translators: accessibility text for the editor toolbar when Top Toolbar is off */ __( 'Document tools' ); - const { setNavigationMode } = useDispatch( 'core/block-editor' ); - const onSwitchMode = ( mode ) => { setNavigationMode( mode === 'edit' ? false : true ); }; @@ -108,102 +111,110 @@ function HeaderToolbar() { className="edit-post-header-toolbar" aria-label={ toolbarAriaLabel } > - { - event.preventDefault(); - } } - onClick={ () => { - if ( isInserterOpened ) { - // Focusing the inserter button closes the inserter popover - inserterButton.current.focus(); - } else { - setIsInserterOpened( true ); - } - } } - disabled={ ! isInserterEnabled } - icon={ plus } - /* translators: button label text should, if possible, be under 16 +
+ { + event.preventDefault(); + } } + onClick={ () => { + if ( isInserterOpened ) { + // Focusing the inserter button closes the inserter popover + inserterButton.current.focus(); + } else { + setIsInserterOpened( true ); + } + } } + disabled={ ! isInserterEnabled } + icon={ plus } + /* translators: button label text should, if possible, be under 16 characters. */ - label={ _x( - 'Add block', - 'Generic label for block inserter button' - ) } - showTooltip={ ! showIconLabels } - > - { showIconLabels && __( 'Add' ) } - - { ( isWideViewport || ! showIconLabels ) && ( - <> - { isLargeViewport && ( + label={ _x( + 'Add block', + 'Generic label for block inserter button' + ) } + showTooltip={ ! showIconLabels } + > + { showIconLabels && __( 'Add' ) } + + { ! hasReducedUI && ( isWideViewport || ! showIconLabels ) && ( + <> + { isLargeViewport && ( + + ) } - ) } - - - { overflowItems } - - ) } - { ! isWideViewport && ! isSmallViewport && showIconLabels && ( - + { overflowItems } + + ) } + { ! hasReducedUI && + ! isWideViewport && + ! isSmallViewport && + showIconLabels && ( + - { () => ( -
- - - - - - - - { overflowItems } -
+ __( 'Tools' ) + } + > + { () => ( +
+ + + + + + + + { overflowItems } +
+ ) } + ) } - - ) } +
+ { displayBlockToolbar && (
diff --git a/packages/edit-post/src/components/header/header-toolbar/style.scss b/packages/edit-post/src/components/header/header-toolbar/style.scss index eb5040bd72553..494bfb78d4349 100644 --- a/packages/edit-post/src/components/header/header-toolbar/style.scss +++ b/packages/edit-post/src/components/header/header-toolbar/style.scss @@ -4,7 +4,7 @@ border: none; // Hide all action buttons except the inserter on mobile. - > .components-button { + .edit-post-header-toolbar__left > .components-button { display: none; @include break-small() { @@ -12,7 +12,7 @@ } } - > .edit-post-header-toolbar__inserter-toggle { + .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle { display: inline-flex; } @@ -27,8 +27,8 @@ // The Toolbar component adds different styles to buttons, so we reset them // here to the original button styles - > .components-button.has-icon, - > .components-dropdown > .components-button.has-icon { + .edit-post-header-toolbar__left > .components-button.has-icon, + .edit-post-header-toolbar__left > .components-dropdown > .components-button.has-icon { height: $button-size; min-width: $button-size; padding: 6px; @@ -48,6 +48,20 @@ } } +.edit-post-header-toolbar__left { + display: inline-flex; + align-items: center; + padding-left: $grid-unit-10; + + @include break-small() { + padding-left: $grid-unit-30; + } + + @include break-wide() { + padding-right: $grid-unit-10; + } +} + // Block toolbar when fixed to the top of the screen. .edit-post-header-toolbar__block-toolbar { // Stack toolbar below Editor Bar. @@ -72,6 +86,10 @@ display: none; } + .block-editor-block-toolbar__block-parent-selector-wrapper { + display: none; + } + @include break-medium { .is-sidebar-opened & { display: block; @@ -81,7 +99,6 @@ // Move toolbar into top Editor Bar. @include break-wide { - padding-left: $grid-unit-10; position: static; left: auto; right: auto; @@ -105,13 +122,17 @@ } } -.edit-post-header-toolbar .edit-post-header-toolbar__inserter-toggle.has-icon { +.edit-post-header-toolbar .edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle.has-icon { margin-right: $grid-unit-10; // Special dimensions for this button. min-width: 32px; width: 32px; height: 32px; padding: 0; + + .show-icon-labels & { + height: 36px; + } } .show-icon-labels { @@ -133,7 +154,4 @@ } } } - .edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle.edit-post-header-toolbar__inserter-toggle { - height: 36px; - } } diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 631e22db0ca6d..a23b7f10c86fc 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -24,6 +24,7 @@ function Header( { setEntitiesSavedStatesCallback } ) { isPublishSidebarOpened, isSaving, showIconLabels, + hasReducedUI, } = useSelect( ( select ) => ( { hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), @@ -34,6 +35,9 @@ function Header( { setEntitiesSavedStatesCallback } ) { showIconLabels: select( 'core/edit-post' ).isFeatureActive( 'showIconLabels' ), + hasReducedUI: select( 'core/edit-post' ).isFeatureActive( + 'reducedUI' + ), } ), [] ); @@ -49,23 +53,27 @@ function Header( { setEntitiesSavedStatesCallback } ) {
- { ! isPublishSidebarOpened && ( - // This button isn't completely hidden by the publish sidebar. - // We can't hide the whole toolbar when the publish sidebar is open because - // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. - // We track that DOM node to return focus to the PostPublishButtonOrToggle - // when the publish sidebar has been closed. - + { ! hasReducedUI && ( + <> + { ! isPublishSidebarOpened && ( + // This button isn't completely hidden by the publish sidebar. + // We can't hide the whole toolbar when the publish sidebar is open because + // we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node. + // We track that DOM node to return focus to the PostPublishButtonOrToggle + // when the publish sidebar has been closed. + + ) } + + + ) } - - { return { hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( @@ -119,6 +120,9 @@ function Layout() { showIconLabels: select( 'core/edit-post' ).isFeatureActive( 'showIconLabels' ), + hasReducedUI: select( 'core/edit-post' ).isFeatureActive( + 'reducedUI' + ), }; }, [] ); const className = classnames( 'edit-post-layout', 'is-mode-' + mode, { @@ -258,6 +262,7 @@ function Layout() { } footer={ + ! hasReducedUI && ! isMobileViewport && isRichEditingEnabled && mode === 'visual' && ( diff --git a/packages/edit-post/src/components/options-modal/index.js b/packages/edit-post/src/components/options-modal/index.js index 0a983af5709c4..eb187adc5aa9e 100644 --- a/packages/edit-post/src/components/options-modal/index.js +++ b/packages/edit-post/src/components/options-modal/index.js @@ -65,6 +65,20 @@ export function OptionsModal( { isModalActive, isViewable, closeModal } ) { label={ __( 'Contain text cursor inside active block' ) } /> +
+ + + +
{ isViewable && ( diff --git a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap index 0bf5becdb51b3..d9491d05f9ec6 100644 --- a/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/options-modal/test/__snapshots__/index.js.snap @@ -29,6 +29,22 @@ exports[`OptionsModal should match snapshot when the modal is active 1`] = ` label="Contain text cursor inside active block" />
+
+ + + +
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js index 4ba0d7304b777..d7b01fb351f62 100644 --- a/packages/edit-post/src/editor.js +++ b/packages/edit-post/src/editor.js @@ -2,7 +2,7 @@ * External dependencies */ import memize from 'memize'; -import { size, map, without } from 'lodash'; +import { size, map, without, omit } from 'lodash'; /** * WordPress dependencies @@ -42,6 +42,8 @@ class Editor extends Component { settings, hasFixedToolbar, focusMode, + hasReducedUI, + hasThemeStyles, hiddenBlockTypes, blockTypes, preferredStyleVariations, @@ -51,18 +53,24 @@ class Editor extends Component { keepCaretInsideBlock ) { settings = { - ...settings, + ...( hasThemeStyles + ? settings + : omit( settings, [ 'defaultEditorStyles' ] ) ), __experimentalPreferredStyleVariations: { value: preferredStyleVariations, onChange: updatePreferredStyleVariations, }, hasFixedToolbar, focusMode, + hasReducedUI, __experimentalLocalAutosaveInterval, // This is marked as experimental to give time for the quick inserter to mature. __experimentalSetIsInserterOpened, keepCaretInsideBlock, + styles: hasThemeStyles + ? settings.styles + : settings.defaultEditorStyles, }; // Omit hidden block types if exists and non-empty. @@ -89,6 +97,8 @@ class Editor extends Component { settings, hasFixedToolbar, focusMode, + hasReducedUI, + hasThemeStyles, post, postId, initialEdits, @@ -111,6 +121,8 @@ class Editor extends Component { settings, hasFixedToolbar, focusMode, + hasReducedUI, + hasThemeStyles, hiddenBlockTypes, blockTypes, preferredStyleVariations, @@ -164,6 +176,8 @@ export default compose( [ isFeatureActive( 'fixedToolbar' ) || __experimentalGetPreviewDeviceType() !== 'Desktop', focusMode: isFeatureActive( 'focusMode' ), + hasReducedUI: isFeatureActive( 'reducedUI' ), + hasThemeStyles: isFeatureActive( 'themeStyles' ), post: getEntityRecord( 'postType', postType, postId ), preferredStyleVariations: getPreference( 'preferredStyleVariations' diff --git a/packages/edit-post/src/store/defaults.js b/packages/edit-post/src/store/defaults.js index 46949ec9cea19..f89258e22b3c0 100644 --- a/packages/edit-post/src/store/defaults.js +++ b/packages/edit-post/src/store/defaults.js @@ -10,6 +10,7 @@ export const PREFERENCES_DEFAULTS = { welcomeGuide: true, fullscreenMode: true, showIconLabels: false, + themeStyles: true, }, hiddenBlockTypes: [], preferredStyleVariations: {}, diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 0feefedff42f8..257ab1adb738b 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -193,6 +193,7 @@ class EditorProvider extends Component { 'fontSizes', 'gradients', 'hasFixedToolbar', + 'hasReducedUI', 'hasPermissionsToManageWidgets', 'imageEditing', 'imageSizes', diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 71e8ee6e4e7b0..83520dd3c0df9 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -148,6 +148,7 @@ function ComplementaryArea( { label={ title } icon={ showIconLabels ? check : icon } showTooltip={ ! showIconLabels } + isTertiary={ showIconLabels } /> ) }