From 15947bee2d5d3c93381a3ab95d6a3dc2a8c7ce21 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 17 Mar 2020 11:21:08 +0100 Subject: [PATCH 01/41] Move the Block Patterns UI to the inserter --- .../src/components/block-patterns/style.scss | 40 ----- packages/block-editor/src/components/index.js | 1 - .../src/components/inserter/block-list.js | 126 +++---------- .../index.js => inserter/block-patterns.js} | 34 ++-- .../src/components/inserter/menu.js | 167 ++++++++++++++++-- .../src/components/inserter/style.scss | 70 +++++++- .../use-async-list.js | 0 packages/block-editor/src/style.scss | 1 - .../src/plugins/block-patterns/index.js | 42 ----- packages/edit-post/src/plugins/index.js | 7 - .../editor/src/components/provider/index.js | 1 + 11 files changed, 255 insertions(+), 234 deletions(-) delete mode 100644 packages/block-editor/src/components/block-patterns/style.scss rename packages/block-editor/src/components/{block-patterns/index.js => inserter/block-patterns.js} (66%) rename packages/block-editor/src/components/{block-patterns => inserter}/use-async-list.js (100%) delete mode 100644 packages/edit-post/src/plugins/block-patterns/index.js diff --git a/packages/block-editor/src/components/block-patterns/style.scss b/packages/block-editor/src/components/block-patterns/style.scss deleted file mode 100644 index 3d668004212c9..0000000000000 --- a/packages/block-editor/src/components/block-patterns/style.scss +++ /dev/null @@ -1,40 +0,0 @@ -.block-editor-patterns { - background: $light-gray-200; - padding: $grid-unit-20; -} - -.block-editor-patterns__item { - background: $white; - border-radius: $radius-block-ui; - - &.is-placeholder .block-editor-patterns__item-preview { - min-height: 100px; - } -} - -.block-editor-patterns__item { - border-radius: $radius-block-ui; - cursor: pointer; - margin-bottom: $grid-unit-20; - border: 1px solid $light-gray-500; - transition: all 0.05s ease-in-out; - position: relative; - - &:hover { - background: $white; - box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-500; - } - - &:focus { - box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; - - // Windows High Contrast mode will show this outline, but not the box-shadow. - outline: 2px solid transparent; - } -} - -.block-editor-patterns__item-title { - text-align: center; - padding: 10px 0; - padding: $grid-unit-20; -} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index ae163f11df919..fcacd90703a13 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -15,7 +15,6 @@ export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { default as __experimentalBlockNavigationList } from './block-navigation/list'; -export { default as __experimentalBlockPatterns } from './block-patterns'; export { default as __experimentalBlockVariationPicker } from './block-variation-picker'; export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export { default as ButtonBlockerAppender } from './button-block-appender'; diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index acb1a68c55ee2..5789de3128e10 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -3,7 +3,6 @@ */ import { map, - pick, includes, filter, findIndex, @@ -23,9 +22,9 @@ import { PanelBody, withSpokenMessages } from '@wordpress/components'; import { addQueryArgs } from '@wordpress/url'; import { controlsRepeat } from '@wordpress/icons'; import { speak } from '@wordpress/a11y'; -import { createBlock, isUnmodifiedDefaultBlock } from '@wordpress/blocks'; +import { createBlock } from '@wordpress/blocks'; import { useMemo, useEffect, useState, useRef } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; import { compose, withSafeTimeout } from '@wordpress/compose'; /** @@ -54,10 +53,8 @@ const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ]; const MAX_SUGGESTED_ITEMS = 9; function InserterBlockList( { - clientId, - isAppender, rootClientId, - onSelect, + onInsert, onHover, __experimentalSelectBlockOnInsert: selectBlockOnInsert, filterValue, @@ -69,61 +66,30 @@ function InserterBlockList( { collections, items, rootChildBlocks, - getSelectedBlock, - destinationRootClientId, - getBlockIndex, - getBlockSelectionEnd, - getBlockOrder, fetchReusableBlocks, } = useSelect( ( select ) => { - const { - getInserterItems, - getBlockName, - getBlockRootClientId, - getBlockSelectionEnd: _getBlockSelectionEnd, - getSettings, - } = select( 'core/block-editor' ); + const { getInserterItems, getBlockName, getSettings } = select( + 'core/block-editor' + ); const { getCategories, getCollections, getChildBlockNames, } = select( 'core/blocks' ); - - let destRootClientId = rootClientId; - if ( ! destRootClientId && ! clientId && ! isAppender ) { - const end = _getBlockSelectionEnd(); - if ( end ) { - destRootClientId = getBlockRootClientId( end ) || undefined; - } - } - const destinationRootBlockName = getBlockName( destRootClientId ); - + const rootBlockName = getBlockName( rootClientId ); const { __experimentalFetchReusableBlocks } = getSettings(); return { categories: getCategories(), collections: getCollections(), - rootChildBlocks: getChildBlockNames( destinationRootBlockName ), - items: getInserterItems( destRootClientId ), - destinationRootClientId: destRootClientId, + rootChildBlocks: getChildBlockNames( rootBlockName ), + items: getInserterItems( rootClientId ), fetchReusableBlocks: __experimentalFetchReusableBlocks, - ...pick( select( 'core/block-editor' ), [ - 'getSelectedBlock', - 'getBlockIndex', - 'getBlockSelectionEnd', - 'getBlockOrder', - ] ), }; }, - [ clientId, isAppender, rootClientId ] + [ rootClientId ] ); - const { - replaceBlocks, - insertBlock, - showInsertionPoint, - hideInsertionPoint, - } = useDispatch( 'core/block-editor' ); // Fetch resuable blocks on mount useEffect( () => { @@ -132,68 +98,21 @@ function InserterBlockList( { } }, [] ); - // To avoid duplication, getInsertionIndex is extracted and used in two event handlers - // This breaks the withDispatch not containing any logic rule. - // Since it's a function only called when the event handlers are called, - // it's fine to extract it. - // eslint-disable-next-line no-restricted-syntax - function getInsertionIndex() { - // If the clientId is defined, we insert at the position of the block. - if ( clientId ) { - return getBlockIndex( clientId, destinationRootClientId ); - } - - // If there a selected block, we insert after the selected block. - const end = getBlockSelectionEnd(); - if ( ! isAppender && end ) { - return getBlockIndex( end, destinationRootClientId ) + 1; - } - - // Otherwise, we insert at the end of the current rootClientId - return getBlockOrder( destinationRootClientId ).length; - } - - const onHoverItem = ( item ) => { - onHover( item ); - if ( item ) { - const index = getInsertionIndex(); - showInsertionPoint( destinationRootClientId, index ); - } else { - hideInsertionPoint(); - } - }; - const onSelectItem = ( item ) => { const { name, title, initialAttributes, innerBlocks } = item; - const selectedBlock = getSelectedBlock(); const insertedBlock = createBlock( name, initialAttributes, createBlocksFromInnerBlocksTemplate( innerBlocks ) ); - if ( - ! isAppender && - selectedBlock && - isUnmodifiedDefaultBlock( selectedBlock ) - ) { - replaceBlocks( selectedBlock.clientId, insertedBlock ); - } else { - insertBlock( - insertedBlock, - getInsertionIndex(), - destinationRootClientId, - selectBlockOnInsert - ); - if ( ! selectBlockOnInsert ) { - // translators: %s: the name of the block that has been added - const message = sprintf( __( '%s block added' ), title ); - speak( message ); - } - } + onInsert( insertedBlock ); - onSelect(); - return insertedBlock; + if ( ! selectBlockOnInsert ) { + // translators: %s: the name of the block that has been added + const message = sprintf( __( '%s block added' ), title ); + speak( message ); + } }; const filteredItems = useMemo( () => { @@ -328,7 +247,6 @@ function InserterBlockList( { return (
{ !! suggestedItems.length && ! filterValue && ( @@ -351,7 +269,7 @@ function InserterBlockList( { ) } @@ -373,7 +291,7 @@ function InserterBlockList( { ); @@ -397,7 +315,7 @@ function InserterBlockList( { ); @@ -415,7 +333,7 @@ function InserterBlockList( { onClick( pattern, blocks ) } onKeyDown={ ( event ) => { @@ -34,10 +34,12 @@ function BlockPattern( { pattern, onClick } ) { } } tabIndex={ 0 } > -
+
-
{ title }
+
+ { title } +
); } @@ -46,28 +48,20 @@ function BlockPatternPlaceholder( { pattern } ) { const { title } = pattern; return ( -
-
-
{ title }
+
+
+
+ { title } +
); } -function BlockPatterns( { patterns } ) { +function BlockPatterns( { patterns, onInsert } ) { const currentShownPatterns = useAsyncList( patterns ); - const getBlockInsertionPoint = useSelect( ( select ) => { - return select( 'core/block-editor' ).getBlockInsertionPoint; - } ); - const { insertBlocks } = useDispatch( 'core/block-editor' ); const { createSuccessNotice } = useDispatch( 'core/notices' ); const onClickPattern = useCallback( ( pattern, blocks ) => { - const { index, rootClientId } = getBlockInsertionPoint(); - insertBlocks( - map( blocks, ( block ) => cloneBlock( block ) ), - index, - rootClientId, - false - ); + onInsert( map( blocks, ( block ) => cloneBlock( block ) ) ); createSuccessNotice( sprintf( /* translators: %s: block pattern title. */ @@ -81,7 +75,7 @@ function BlockPatterns( { patterns } ) { }, [] ); return ( -
+
{ patterns.map( ( pattern, index ) => currentShownPatterns[ index ] === pattern ? ( event.stopPropagation(); @@ -29,6 +34,49 @@ function InserterMenu( { } ) { const [ filterValue, setFilterValue ] = useState( '' ); const [ hoveredItem, setHoveredItem ] = useState( null ); + const { + destinationRootClientId, + patterns, + getSelectedBlock, + getBlockIndex, + getBlockSelectionEnd, + getBlockOrder, + } = useSelect( ( select ) => { + const { + getSettings, + getBlockRootClientId, + getBlockSelectionEnd: _getBlockSelectionEnd, + } = select( 'core/block-editor' ); + + let destRootClientId = rootClientId; + if ( ! destRootClientId && ! clientId && ! isAppender ) { + const end = _getBlockSelectionEnd(); + if ( end ) { + destRootClientId = getBlockRootClientId( end ) || undefined; + } + } + return { + patterns: getSettings().__experimentalBlockPatterns, + destinationRootClientId: destRootClientId, + ...pick( select( 'core/block-editor' ), [ + 'getSelectedBlock', + 'getBlockIndex', + 'getBlockSelectionEnd', + 'getBlockOrder', + ] ), + }; + }, [] ); + const { + replaceBlocks, + insertBlocks, + showInsertionPoint, + hideInsertionPoint, + } = useDispatch( 'core/block-editor' ); + const hasPatterns = + ! destinationRootClientId && + !! patterns && + !! patterns.length && + ! filterValue; const onKeyDown = ( event ) => { if ( includes( @@ -41,6 +89,86 @@ function InserterMenu( { } }; + // To avoid duplication, getInsertionIndex is extracted and used in two event handlers + // This breaks the withDispatch not containing any logic rule. + // Since it's a function only called when the event handlers are called, + // it's fine to extract it. + // eslint-disable-next-line no-restricted-syntax + function getInsertionIndex() { + // If the clientId is defined, we insert at the position of the block. + if ( clientId ) { + return getBlockIndex( clientId, destinationRootClientId ); + } + + // If there a selected block, we insert after the selected block. + const end = getBlockSelectionEnd(); + if ( ! isAppender && end ) { + return getBlockIndex( end, destinationRootClientId ) + 1; + } + + // Otherwise, we insert at the end of the current rootClientId + return getBlockOrder( destinationRootClientId ).length; + } + + const onInsertBlocks = ( blocks ) => { + const selectedBlock = getSelectedBlock(); + if ( + ! isAppender && + selectedBlock && + isUnmodifiedDefaultBlock( selectedBlock ) + ) { + replaceBlocks( selectedBlock.clientId, blocks ); + } else { + insertBlocks( + blocks, + getInsertionIndex(), + destinationRootClientId, + __experimentalSelectBlockOnInsert + ); + } + + onSelect(); + }; + + const onHover = ( item ) => { + setHoveredItem( item ); + if ( item ) { + const index = getInsertionIndex(); + showInsertionPoint( destinationRootClientId, index ); + } else { + hideInsertionPoint(); + } + }; + + const blocksTab = ( + <> +
+
+ +
+
+ { showInserterHelpPanel && ( +
+ +
+ ) } + + ); + + const patternsTab = ( +
+ +
+ ); + // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via // Popover's focusOnMount. @@ -55,22 +183,29 @@ function InserterMenu( { >
- - { showInserterHelpPanel && ( -
- -
+ { hasPatterns && ( + + { ( tab ) => { + if ( tab.name === 'blocks' ) { + return blocksTab; + } + return patternsTab; + } } + ) } + { ! hasPatterns && blocksTab }
{ showInserterHelpPanel && hoveredItem && ( diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 7adfb07c597f6..02b09b6022a26 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,6 +1,5 @@ $block-inserter-preview-height: 350px; $block-inserter-tabs-height: 44px; -$block-inserter-search-height: 38px; .block-editor-inserter { display: inline-block; @@ -82,9 +81,28 @@ $block-inserter-search-height: 38px; } } -.block-editor-inserter__results { +.block-editor-inserter__tabs { + display: flex; + flex-grow: 1; + flex-direction: column; + margin-top: -$grid-unit-20; + + .components-tab-panel__tabs { + padding: 0 $grid-unit-20; + margin-bottom: -1px; + border-bottom: $border-width solid $light-gray-secondary; + } + + .components-tab-panel__tab-content { + display: flex; + flex-grow: 1; + flex-direction: column; + position: relative; + } +} + +.block-editor-inserter__block-list { flex-grow: 1; - overflow: auto; position: relative; z-index: 1; // Necessary for the stacked card below parent blocks to show up. padding: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20; @@ -99,6 +117,17 @@ $block-inserter-search-height: 38px; } } +// This extra div is needed because +// flex grow and overflow auto doesn't work well together. +.block-editor-inserter__scrollable { + overflow: auto; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; +} + .block-editor-inserter__popover .block-editor-block-types-list { margin: 0 -8px; } @@ -227,3 +256,38 @@ $block-inserter-search-height: 38px; padding: $grid-unit-20; flex-shrink: 0; } + +.block-editor-inserter__patterns { + padding: $grid-unit-20; +} + +.block-editor-inserter__patterns-item { + border-radius: $radius-block-ui; + cursor: pointer; + margin-bottom: $grid-unit-20; + border: 1px solid $light-gray-500; + transition: all 0.05s ease-in-out; + position: relative; + + &:hover { + background: $white; + box-shadow: 0 0 0 1px $white, 0 0 0 3px $dark-gray-500; + } + + &:focus { + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + } + + &.is-placeholder .block-editor-patterns__item-preview { + min-height: 100px; + } +} + +.block-editor-inserter__patterns-item-title { + text-align: center; + padding: 10px 0; + padding: $grid-unit-20; +} diff --git a/packages/block-editor/src/components/block-patterns/use-async-list.js b/packages/block-editor/src/components/inserter/use-async-list.js similarity index 100% rename from packages/block-editor/src/components/block-patterns/use-async-list.js rename to packages/block-editor/src/components/inserter/use-async-list.js diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 1a426760ff9c7..ba14cf1e346cb 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -16,7 +16,6 @@ @import "./components/block-mobile-toolbar/style.scss"; @import "./components/block-mover/style.scss"; @import "./components/block-navigation/style.scss"; -@import "./components/block-patterns/style.scss"; @import "./components/block-preview/style.scss"; @import "./components/block-settings-menu/style.scss"; @import "./components/block-styles/style.scss"; diff --git a/packages/edit-post/src/plugins/block-patterns/index.js b/packages/edit-post/src/plugins/block-patterns/index.js deleted file mode 100644 index e9018bbfd3ed9..0000000000000 --- a/packages/edit-post/src/plugins/block-patterns/index.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * WordPress dependencies - */ -import { layout } from '@wordpress/icons'; -import { __ } from '@wordpress/i18n'; -import { __experimentalBlockPatterns as BlockPatternsList } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import PluginSidebar from '../../components/sidebar/plugin-sidebar'; -import PluginSidebarMoreMenuItem from '../../components/header/plugin-sidebar-more-menu-item'; - -function BlockPatterns() { - const { __experimentalBlockPatterns: blockPatterns = [] } = useSelect( - ( select ) => { - return select( 'core/editor' ).getEditorSettings(); - }, - [] - ); - - return ( - <> - - - - - { __( 'Block Patterns' ) } - - - ); -} - -export default BlockPatterns; diff --git a/packages/edit-post/src/plugins/index.js b/packages/edit-post/src/plugins/index.js index 5b0395de59eca..cbdc9b2bb7ace 100644 --- a/packages/edit-post/src/plugins/index.js +++ b/packages/edit-post/src/plugins/index.js @@ -14,13 +14,6 @@ import ManageBlocksMenuItem from './manage-blocks-menu-item'; import KeyboardShortcutsHelpMenuItem from './keyboard-shortcuts-help-menu-item'; import ToolsMoreMenuGroup from '../components/header/tools-more-menu-group'; import WelcomeGuideMenuItem from './welcome-guide-menu-item'; -import BlockPatterns from './block-patterns'; - -registerPlugin( 'edit-post-block-patterns', { - render() { - return ; - }, -} ); registerPlugin( 'edit-post', { render() { diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js index 74c7b2f67cf72..d57ceeede790a 100644 --- a/packages/editor/src/components/provider/index.js +++ b/packages/editor/src/components/provider/index.js @@ -125,6 +125,7 @@ class EditorProvider extends Component { '__experimentalGlobalStylesUserEntityId', '__experimentalGlobalStylesBase', '__experimentalDisableCustomLineHeight', + '__experimentalBlockPatterns', 'gradients', ] ), mediaUpload: hasUploadPermissions ? mediaUpload : undefined, From 377a533bb4da1b740f3bdf671b80d78808bc7cbb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 1 Apr 2020 09:51:08 +0100 Subject: [PATCH 02/41] Restore the patterns panel gray background --- packages/block-editor/src/components/inserter/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 02b09b6022a26..560fb6af6b62a 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -89,7 +89,6 @@ $block-inserter-tabs-height: 44px; .components-tab-panel__tabs { padding: 0 $grid-unit-20; - margin-bottom: -1px; border-bottom: $border-width solid $light-gray-secondary; } @@ -106,6 +105,7 @@ $block-inserter-tabs-height: 44px; position: relative; z-index: 1; // Necessary for the stacked card below parent blocks to show up. padding: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20; + margin-top: -$border-width; &:focus { outline: $border-width dotted $dark-gray-500; @@ -259,9 +259,11 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__patterns { padding: $grid-unit-20; + background: $light-gray-200; } .block-editor-inserter__patterns-item { + background: $white; border-radius: $radius-block-ui; cursor: pointer; margin-bottom: $grid-unit-20; From 8c6bd6cc7b31cd77d06fa64fc97d7ce773cfa190 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Apr 2020 11:04:56 +0100 Subject: [PATCH 03/41] Redesign search form and tabs --- packages/base-styles/_variables.scss | 1 + .../src/components/inserter/search-form.js | 11 +++-- .../src/components/inserter/style.scss | 47 +++++++++++++------ packages/components/src/tab-panel/style.scss | 8 ++-- 4 files changed, 45 insertions(+), 22 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 1d33712cc44e6..8935761075ed9 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -38,6 +38,7 @@ $grid-unit-60: 6 * $grid-unit; // 48px * Dimensions. */ +$icon-size: 24px; $button-size: 36px; $button-size-small: 24px; $panel-padding: 16px; diff --git a/packages/block-editor/src/components/inserter/search-form.js b/packages/block-editor/src/components/inserter/search-form.js index ca326e003d709..f8c845c7977a4 100644 --- a/packages/block-editor/src/components/inserter/search-form.js +++ b/packages/block-editor/src/components/inserter/search-form.js @@ -4,6 +4,7 @@ import { useInstanceId } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; import { VisuallyHidden } from '@wordpress/components'; +import { Icon, search } from '@wordpress/icons'; function InserterSearchForm( { onChange } ) { const instanceId = useInstanceId( InserterSearchForm ); @@ -13,7 +14,7 @@ function InserterSearchForm( { onChange } ) { // Popover's focusOnMount. /* eslint-disable jsx-a11y/no-autofocus */ return ( - <> +
onChange( event.target.value ) } /> - + +
); /* eslint-enable jsx-a11y/no-autofocus */ } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 560fb6af6b62a..d766a4ddd8a00 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -61,35 +61,52 @@ $block-inserter-tabs-height: 44px; z-index: z-index(".components-popover.block-editor-inserter__popover"); } -.components-popover input[type="search"].block-editor-inserter__search { - display: block; - margin: $grid-unit-20; - padding: 11px $grid-unit-20; - position: relative; +.block-editor-inserter__search { + padding: $grid-unit-20; z-index: 1; - border-radius: $radius-round-rectangle; flex-shrink: 0; + position: relative; - /* Fonts smaller than 16px causes mobile safari to zoom. */ - font-size: $mobile-text-min-font-size; - @include break-small { - font-size: $default-font-size; - } + input[type="search"].block-editor-inserter__search-input { + display: block; + padding: $grid-unit-20 $grid-unit-60 $grid-unit-20 $grid-unit-20; + border-radius: $radius-block-ui; + background: $light-gray-200; + border: none; + width: 100%; + height: $grid-unit-60; + + /* Fonts smaller than 16px causes mobile safari to zoom. */ + font-size: $mobile-text-min-font-size; + @include break-small { + font-size: $default-font-size; + } - &:focus { - @include input-style__focus(); + &:focus { + @include input-style__focus(); + } } } +.block-editor-inserter__search-icon { + position: absolute; + top: $grid-unit-20 + ($grid-unit-60 - $icon-size) / 2; + right: $grid-unit-20 + ($grid-unit-60 - $icon-size) / 2; +} + .block-editor-inserter__tabs { display: flex; flex-grow: 1; flex-direction: column; - margin-top: -$grid-unit-20; + margin-top: -$grid-unit-10; .components-tab-panel__tabs { - padding: 0 $grid-unit-20; border-bottom: $border-width solid $light-gray-secondary; + + .components-tab-panel__tabs-item { + flex-grow: 1; + margin-bottom: -$border-width; + } } .components-tab-panel__tab-content { diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index b4238983bb9b2..a3c2939c014c5 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -9,16 +9,16 @@ border-radius: 0; box-shadow: none; cursor: pointer; - height: 50px; - padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode + height: $grid-unit-60; + padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode margin-left: 0; - font-weight: 400; + font-weight: 500; transition: box-shadow 0.1s linear; + box-sizing: border-box; &:focus:enabled, &.is-active { box-shadow: inset 0 -3px theme(outlines); - font-weight: 600; position: relative; background: transparent; From 5be21ae47e9c8378eb7c913a20f2829776103534 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Apr 2020 11:26:51 +0100 Subject: [PATCH 04/41] Redesign the inserter panels and resize it --- .../src/components/inserter/block-list.js | 103 +++--------------- .../src/components/inserter/panel.js | 22 ++++ .../src/components/inserter/style.scss | 36 +++--- 3 files changed, 57 insertions(+), 104 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/panel.js diff --git a/packages/block-editor/src/components/inserter/block-list.js b/packages/block-editor/src/components/inserter/block-list.js index 5789de3128e10..58a0c76a151bf 100644 --- a/packages/block-editor/src/components/inserter/block-list.js +++ b/packages/block-editor/src/components/inserter/block-list.js @@ -10,22 +10,20 @@ import { sortBy, groupBy, isEmpty, - without, } from 'lodash'; -import scrollIntoView from 'dom-scroll-into-view'; /** * WordPress dependencies */ import { __, _x, _n, sprintf } from '@wordpress/i18n'; -import { PanelBody, withSpokenMessages } from '@wordpress/components'; +import { withSpokenMessages } from '@wordpress/components'; import { addQueryArgs } from '@wordpress/url'; import { controlsRepeat } from '@wordpress/icons'; import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; -import { useMemo, useEffect, useState, useRef } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; -import { compose, withSafeTimeout } from '@wordpress/compose'; +import { compose } from '@wordpress/compose'; /** * Internal dependencies @@ -34,6 +32,7 @@ import BlockTypesList from '../block-types-list'; import ChildBlocks from './child-blocks'; import __experimentalInserterMenuExtension from '../inserter-menu-extension'; import { searchItems } from './search-items'; +import InserterPanel from './panel'; // Copied over from the Columns block. It seems like it should become part of public API. const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => { @@ -59,7 +58,6 @@ function InserterBlockList( { __experimentalSelectBlockOnInsert: selectBlockOnInsert, filterValue, debouncedSpeak, - setTimeout: safeSetTimeout, } ) { const { categories, @@ -167,61 +165,6 @@ function InserterBlockList( { return result; }, [ filteredItems, collections ] ); - const inserterResults = useRef(); - const panels = useRef( [] ); - const bindPanel = ( name ) => ( ref ) => { - panels.current[ name ] = ref; - }; - const [ openPanels, setOpenPanels ] = useState( [ 'suggested' ] ); - - const onTogglePanel = ( panel ) => { - return () => { - const isOpened = openPanels.indexOf( panel ) !== -1; - if ( isOpened ) { - setOpenPanels( without( openPanels, panel ) ); - } else { - setOpenPanels( [ ...openPanels, panel ] ); - - safeSetTimeout( () => { - // We need a generic way to access the panel's container - scrollIntoView( - panels.current[ panel ], - inserterResults.current, - { - alignWithTop: true, - } - ); - } ); - } - }; - }; - - // Update the open panels on search - useEffect( () => { - if ( ! filterValue ) { - setOpenPanels( [ 'suggested' ] ); - return; - } - let newOpenPanels = []; - if ( reusableItems.length > 0 ) { - newOpenPanels.push( 'reusable' ); - } - if ( filteredItems.length > 0 ) { - newOpenPanels = newOpenPanels.concat( - Object.keys( itemsPerCategory ), - Object.keys( itemsPerCollection ) - ); - } - - setOpenPanels( newOpenPanels ); - }, [ - filterValue, - filteredItems, - reusableItems, - itemsPerCategory, - itemsPerCollection, - ] ); - // Announce search results on change useEffect( () => { const resultCount = Object.keys( itemsPerCategory ).reduce( @@ -241,13 +184,10 @@ function InserterBlockList( { debouncedSpeak( resultsFoundMessage ); }, [ itemsPerCategory, debouncedSpeak ] ); - const isPanelOpen = ( panel ) => openPanels.indexOf( panel ) !== -1; - const hasItems = ! isEmpty( filteredItems ); return (
{ !! suggestedItems.length && ! filterValue && ( - + - + ) } { map( categories, ( category ) => { @@ -280,20 +215,17 @@ function InserterBlockList( { return null; } return ( - - + ); } ) } @@ -304,31 +236,25 @@ function InserterBlockList( { } return ( - - + ); } ) } { !! reusableItems.length && ( - { __( 'Manage all reusable blocks' ) } - + ) } <__experimentalInserterMenuExtension.Slot @@ -372,7 +298,4 @@ function InserterBlockList( { ); } -export default compose( - withSpokenMessages, - withSafeTimeout -)( InserterBlockList ); +export default compose( withSpokenMessages )( InserterBlockList ); diff --git a/packages/block-editor/src/components/inserter/panel.js b/packages/block-editor/src/components/inserter/panel.js new file mode 100644 index 0000000000000..6258cc68bedd4 --- /dev/null +++ b/packages/block-editor/src/components/inserter/panel.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { Icon } from '@wordpress/components'; + +function InserterPanel( { title, icon, children } ) { + return ( +
+
+ + { title } + + +
+
+ { children } +
+
+ ); +} + +export default InserterPanel; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index d766a4ddd8a00..6ba2bc842a612 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,4 +1,5 @@ $block-inserter-preview-height: 350px; +$block-inserter-width: 350px; $block-inserter-tabs-height: 44px; .block-editor-inserter { @@ -44,7 +45,7 @@ $block-inserter-tabs-height: 44px; flex-direction: column; height: 100%; @include break-medium { - width: 400px; + width: $block-inserter-width; position: relative; } } @@ -117,21 +118,27 @@ $block-inserter-tabs-height: 44px; } } +.block-editor-inserter__panel-header { + display: inline-flex; + align-items: center; + padding: $grid-unit-20; +} + +.block-editor-inserter__panel-content { + padding: 0 $grid-unit-20; +} + +.block-editor-inserter__panel-title { + color: $theme-color; + text-transform: uppercase; + font-size: 11px; + font-weight: 500; + margin-right: $grid-unit-10; +} + .block-editor-inserter__block-list { flex-grow: 1; position: relative; - z-index: 1; // Necessary for the stacked card below parent blocks to show up. - padding: 0 $grid-unit-20 $grid-unit-20 $grid-unit-20; - margin-top: -$border-width; - - &:focus { - outline: $border-width dotted $dark-gray-500; - } - - // Don't show the top border on the first panel, let the Search border be the border. - [role="presentation"] + .components-panel__body { - border-top: none; - } } // This extra div is needed because @@ -155,7 +162,8 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__manage-reusable-blocks { - margin: $grid-unit-20 0 0 $grid-unit-20; + display: inline-block; + margin: $grid-unit-20; } .block-editor-inserter__no-results { From c2759c7fd4c790f47cdbe87e82a2e81c2700ce90 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 2 Apr 2020 11:46:38 +0100 Subject: [PATCH 05/41] Redesign the preview panel --- .../src/components/inserter/preview-panel.js | 4 +- .../src/components/inserter/style.scss | 60 ++----------------- 2 files changed, 8 insertions(+), 56 deletions(-) diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js index 06f989a2a9bb0..8f147c9fdd26b 100644 --- a/packages/block-editor/src/components/inserter/preview-panel.js +++ b/packages/block-editor/src/components/inserter/preview-panel.js @@ -18,8 +18,7 @@ import BlockPreview from '../block-preview'; function InserterPreviewPanel( { item } ) { const hoveredItemBlockType = getBlockType( item.name ); return ( -
- { ! isReusableBlock( item ) && } +
{ isReusableBlock( item ) || hoveredItemBlockType.example ? (
@@ -50,6 +49,7 @@ function InserterPreviewPanel( { item } ) {
) }
+ { ! isReusableBlock( item ) && }
); } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 6ba2bc842a612..177bf18811395 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -189,12 +189,11 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__menu-help-panel { +.block-editor-inserter__menu-preview-panel { display: none; border: $border-width solid $light-gray-secondary; width: 300px; margin-right: 20px; - padding: 20px; background: $white; box-shadow: $shadow-popover; border-radius: $radius-block-ui; @@ -207,74 +206,27 @@ $block-inserter-tabs-height: 44px; } .block-editor-block-card { - padding-bottom: 20px; - margin-bottom: 20px; - border-bottom: $border-width solid $light-gray-500; - @include edit-post__fade-in-animation(); + padding: $grid-unit-20; } } -.block-editor-inserter__menu-help-panel-no-block { - display: flex; - height: 100%; - flex-direction: column; - @include edit-post__fade-in-animation(); - - .block-editor-inserter__menu-help-panel-no-block-text { - flex-grow: 1; - - h4 { - font-size: $big-font-size; - } - } - - .components-notice { - margin: 0; - } - - h4 { - margin-top: 0; - } -} - -.block-editor-inserter__menu-help-panel-hover-area { - flex-grow: 1; - margin-top: 20px; - padding: 20px; - border: 1px dotted $light-gray-500; - display: flex; - align-items: center; - text-align: center; -} - -.block-editor-inserter__menu-help-panel-title { - font-size: $big-font-size; - font-weight: 600; - margin-bottom: 20px; -} - .block-editor-inserter__preview-content { - border: $border-width solid $light-gray-500; - border-radius: $radius-round-rectangle; min-height: $grid-unit-60 * 3; + background: $light-gray-200; display: grid; flex-grow: 1; align-items: center; - - .block-editor-block-preview__container { - padding: 10px; - } + padding: $grid-unit-20; } .block-editor-inserter__preview-content-missing { flex: 1; display: flex; justify-content: center; - color: $dark-gray-400; - border: $border-width solid $light-gray-500; - border-radius: $radius-round-rectangle; align-items: center; min-height: $grid-unit-60 * 3; + color: $dark-gray-400; + background: $light-gray-200; } .block-editor-inserter__tips { From 726d3747c6c4d01db18f5a46176dae2767f6db21 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 10:47:57 +0100 Subject: [PATCH 06/41] Try using a panel instead of a dropdown --- packages/block-editor/src/components/index.js | 1 + .../src/components/inserter/library.js | 47 +++++++++++++++++++ .../src/components/inserter/style.scss | 2 +- .../components/header/header-toolbar/index.js | 21 +++++---- .../edit-post/src/components/header/index.js | 4 +- .../edit-post/src/components/layout/index.js | 19 +++++++- packages/edit-post/src/style.scss | 1 + .../components/interface-skeleton/index.js | 13 +++++ .../components/interface-skeleton/style.scss | 14 +++++- 9 files changed, 107 insertions(+), 15 deletions(-) create mode 100644 packages/block-editor/src/components/inserter/library.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index fcacd90703a13..7b2414c3daf02 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -73,6 +73,7 @@ export { default as CopyHandler } from './copy-handler'; export { default as DefaultBlockAppender } from './default-block-appender'; export { default as __unstableEditorStyles } from './editor-styles'; export { default as Inserter } from './inserter'; +export { default as __experimentalLibrary } from './inserter/library'; export { default as BlockEditorKeyboardShortcuts } from './keyboard-shortcuts'; export { default as MultiSelectScrollIntoView } from './multi-select-scroll-into-view'; export { default as NavigableToolbar } from './navigable-toolbar'; diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js new file mode 100644 index 0000000000000..a5e7094f54d4a --- /dev/null +++ b/packages/block-editor/src/components/inserter/library.js @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import InserterMenu from './menu'; + +function InserterLibrary( { + rootClientId, + clientId, + isAppender, + showInserterHelpPanel, + __experimentalSelectBlockOnInsert: selectBlockOnInsert, + onSelect = noop, +} ) { + const { destinationRootClientId } = useSelect( ( select ) => { + const { getBlockRootClientId } = select( 'core/block-editor' ); + + rootClientId = + rootClientId || getBlockRootClientId( clientId ) || undefined; + + return { + rootClientId, + }; + } ); + + return ( + + ); +} + +export default InserterLibrary; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 177bf18811395..f344bc564e71f 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,5 +1,5 @@ $block-inserter-preview-height: 350px; -$block-inserter-width: 350px; +$block-inserter-width: 300px; $block-inserter-tabs-height: 44px; .block-editor-inserter { 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 080f9e2c25825..2890d01a5d048 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -3,9 +3,8 @@ */ import { useViewportMatch } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { - Inserter, BlockToolbar, NavigableToolbar, BlockNavigationDropdown, @@ -16,10 +15,10 @@ import { EditorHistoryRedo, EditorHistoryUndo, } from '@wordpress/editor'; +import { Button } from '@wordpress/components'; +import { plus } from '@wordpress/icons'; -const inserterToggleProps = { isPrimary: true }; - -function HeaderToolbar() { +function HeaderToolbar( { onToggleInserter } ) { const { hasFixedToolbar, showInserter, @@ -58,11 +57,15 @@ function HeaderToolbar() { className="edit-post-header-toolbar" aria-label={ toolbarAriaLabel } > - diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index 7dca19d07f57a..fbd86927bb7a3 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -17,7 +17,7 @@ import MoreMenu from './more-menu'; import PostPublishButtonOrToggle from './post-publish-button-or-toggle'; import PreviewOptions from '../preview-options'; -function Header() { +function Header( { onToggleInserter } ) { const { shortcut, hasActiveMetaboxes, @@ -60,7 +60,7 @@ function Header() {
- +
{ ! isPublishSidebarOpened && ( diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index de11658f603ad..bd69612af81f1 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -15,7 +15,10 @@ import { EditorKeyboardShortcutsRegister, } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; -import { BlockBreadcrumb } from '@wordpress/block-editor'; +import { + BlockBreadcrumb, + __experimentalLibrary as Library, +} from '@wordpress/block-editor'; import { Button, ScrollLock, @@ -30,6 +33,7 @@ import { FullscreenMode, InterfaceSkeleton, } from '@wordpress/interface'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -49,6 +53,7 @@ import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel'; import WelcomeGuide from '../welcome-guide'; function Layout() { + const [ isInserterOpen, setIsInserterOpen ] = useState( false ); const isMobileViewport = useViewportMatch( 'medium', '<' ); const { closePublishSidebar, @@ -124,7 +129,17 @@ function Layout() { } + header={ +
+ setIsInserterOpen( ! isInserterOpen ) + } + /> + } + leftSidebar={ + mode === 'visual' && + isInserterOpen && + } sidebar={ ( ! isMobileViewport || sidebarIsOpened ) && ( <> diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index 4e6fea9f88bee..e95fa222d8d0a 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,6 +2,7 @@ $footer-height: $button-size-small; @import "../../interface/src/style.scss"; + @import "./components/header/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/header-toolbar/style.scss"; diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index d106560237360..85904da2cb0c7 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -28,6 +28,7 @@ function InterfaceSkeleton( { footer, header, sidebar, + leftSidebar, content, actions, labels, @@ -38,6 +39,7 @@ function InterfaceSkeleton( { const defaultLabels = { header: __( 'Header' ), body: __( 'Content' ), + leftSidebar: __( 'Left sidebar' ), sidebar: __( 'Settings' ), actions: __( 'Publish' ), footer: __( 'Footer' ), @@ -64,6 +66,17 @@ function InterfaceSkeleton( {
) }
+ { !! leftSidebar && ( +
+ { leftSidebar } +
+ ) }
Date: Fri, 10 Apr 2020 11:12:17 +0100 Subject: [PATCH 07/41] Use a popover for the block preview --- packages/block-editor/src/components/inserter/menu.js | 9 +++++++-- packages/block-editor/src/components/inserter/style.scss | 9 ++------- packages/edit-post/src/style.scss | 1 - 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 4da5338b5fbff..2d2345e9fc007 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -8,7 +8,7 @@ import { includes, pick } from 'lodash'; */ import { useState } from '@wordpress/element'; import { LEFT, RIGHT, UP, DOWN, BACKSPACE, ENTER } from '@wordpress/keycodes'; -import { TabPanel } from '@wordpress/components'; +import { TabPanel, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; @@ -208,7 +208,12 @@ function InserterMenu( { { ! hasPatterns && blocksTab }
{ showInserterHelpPanel && hoveredItem && ( - + + + ) }
); diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index f344bc564e71f..2602e69ef5e59 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -189,19 +189,14 @@ $block-inserter-tabs-height: 44px; } } -.block-editor-inserter__menu-preview-panel { +.block-editor-inserter__preview-popover .components-popover__content { display: none; - border: $border-width solid $light-gray-secondary; width: 300px; - margin-right: 20px; background: $white; - box-shadow: $shadow-popover; border-radius: $radius-block-ui; + margin-left: $grid-unit-20; @include break-medium { - position: absolute; - top: -$border-width; - left: calc(100% + #{$grid-unit-15}); display: block; } diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index e95fa222d8d0a..4e6fea9f88bee 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -2,7 +2,6 @@ $footer-height: $button-size-small; @import "../../interface/src/style.scss"; - @import "./components/header/style.scss"; @import "./components/header/fullscreen-mode-close/style.scss"; @import "./components/header/header-toolbar/style.scss"; From 60345c191ea90464ab54982570b87724517ca1ab Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 11:14:00 +0100 Subject: [PATCH 08/41] User a border to separate the tips from the rest --- packages/block-editor/src/components/inserter/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 2602e69ef5e59..41d07e9bbf41b 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -225,6 +225,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__tips { + border-top: $border-width solid $light-gray-secondary; padding: $grid-unit-20; flex-shrink: 0; } From 962ecac1059a7d46cd76da78d66735defb518bd7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 11:16:09 +0100 Subject: [PATCH 09/41] Rename block patterns to just patterns --- docs/designers-developers/glossary.md | 4 ++-- lib/client-assets.php | 2 +- packages/block-editor/src/components/inserter/menu.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/designers-developers/glossary.md b/docs/designers-developers/glossary.md index 97c512dbc2624..5a53c51bf2f5f 100644 --- a/docs/designers-developers/glossary.md +++ b/docs/designers-developers/glossary.md @@ -19,8 +19,8 @@
Block name
A unique identifier for a block type, consisting of a plugin-specific namespace and a short label describing the block's intent. e.g. core/image
-
Block patterns
-
Block patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.
+
Patterns
+
Patterns are predefined layouts of blocks that can be inserted as starter content that are meant to be changed by the user every time. Once inserted, they exist as a local save and are not global.
Block type
In contrast with the blocks composing a particular post, a block type describes the blueprint by which any block of that type should behave. So while there may be many images within a post, each behaves consistent with a unified image block type definition.
diff --git a/lib/client-assets.php b/lib/client-assets.php index 609627dc1e3ed..32b92c7bdbde6 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -636,7 +636,7 @@ function gutenberg_load_block_pattern( $name ) { } /** - * Extends block editor settings to include a list of default block patterns. + * Extends block editor settings to include a list of default patterns. * * @param array $settings Default editor settings. * diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 2d2345e9fc007..9994a03f1cc9d 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -193,7 +193,7 @@ function InserterMenu( { }, { name: 'patterns', - title: __( 'Block Patterns' ), + title: __( 'Patterns' ), }, ] } > From 7360585b9a4a842bfa133218599646e66300f9cb Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 11:56:41 +0100 Subject: [PATCH 10/41] design tweaks --- .../src/components/inserter-list-item/style.scss | 1 + packages/block-editor/src/components/inserter/style.scss | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 00c9eae4ed38f..0b24371ee50b4 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -66,4 +66,5 @@ .block-editor-block-types-list__item-title { padding: 4px 2px 8px; + font-size: 12px; } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 41d07e9bbf41b..36bd565efe2c4 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -1,5 +1,5 @@ $block-inserter-preview-height: 350px; -$block-inserter-width: 300px; +$block-inserter-width: 350px; $block-inserter-tabs-height: 44px; .block-editor-inserter { @@ -102,7 +102,7 @@ $block-inserter-tabs-height: 44px; margin-top: -$grid-unit-10; .components-tab-panel__tabs { - border-bottom: $border-width solid $light-gray-secondary; + border-bottom: $border-width solid $light-gray-500; .components-tab-panel__tabs-item { flex-grow: 1; @@ -195,6 +195,7 @@ $block-inserter-tabs-height: 44px; background: $white; border-radius: $radius-block-ui; margin-left: $grid-unit-20; + border-color: $light-gray-500; @include break-medium { display: block; @@ -225,7 +226,7 @@ $block-inserter-tabs-height: 44px; } .block-editor-inserter__tips { - border-top: $border-width solid $light-gray-secondary; + border-top: $border-width solid $light-gray-500; padding: $grid-unit-20; flex-shrink: 0; } @@ -265,4 +266,5 @@ $block-inserter-tabs-height: 44px; text-align: center; padding: 10px 0; padding: $grid-unit-20; + font-size: 12px; } From b6050c49f9728561dfd11d14b39b8a19d23919bd Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 12:01:53 +0100 Subject: [PATCH 11/41] update the search focus style --- packages/block-editor/src/components/inserter/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 36bd565efe2c4..d123d13292515 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -84,7 +84,8 @@ $block-inserter-tabs-height: 44px; } &:focus { - @include input-style__focus(); + background: $white; + box-shadow: 0 0 0 $border-width-focus $theme-color; } } } From 3a819eae6caea35c5f9b8bcd277420ca77f5821c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 12:11:27 +0100 Subject: [PATCH 12/41] better spacing --- .../block-editor/src/components/inserter-list-item/style.scss | 4 ++-- packages/block-editor/src/components/inserter/style.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter-list-item/style.scss b/packages/block-editor/src/components/inserter-list-item/style.scss index 0b24371ee50b4..b492ad7504bb2 100644 --- a/packages/block-editor/src/components/inserter-list-item/style.scss +++ b/packages/block-editor/src/components/inserter-list-item/style.scss @@ -2,7 +2,7 @@ display: block; width: 33.33%; padding: 0; - margin: 0 0 12px; + margin: 0; } .components-button.block-editor-block-types-list__item { @@ -11,7 +11,7 @@ width: 100%; font-size: $default-font-size; color: $dark-gray-700; - padding: 0 4px; + padding: $grid-unit-10; align-items: stretch; justify-content: center; cursor: pointer; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index d123d13292515..73af9ed82ed01 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -122,7 +122,7 @@ $block-inserter-tabs-height: 44px; .block-editor-inserter__panel-header { display: inline-flex; align-items: center; - padding: $grid-unit-20; + padding: $grid-unit-20 $grid-unit-20 0; } .block-editor-inserter__panel-content { From 4404f05ac45c1f1acb06b9be87cb5420f01c88df Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 12:20:25 +0100 Subject: [PATCH 13/41] Mutually exclusive sidebars --- packages/edit-post/src/components/layout/index.js | 15 ++++++++++++++- packages/edit-post/src/store/reducer.js | 7 ------- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index bd69612af81f1..9ea901a27eae2 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -33,7 +33,7 @@ import { FullscreenMode, InterfaceSkeleton, } from '@wordpress/interface'; -import { useState } from '@wordpress/element'; +import { useState, useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -58,6 +58,7 @@ function Layout() { const { closePublishSidebar, openGeneralSidebar, + closeGeneralSidebar, togglePublishSidebar, } = useDispatch( 'core/edit-post' ); const { @@ -117,6 +118,18 @@ function Layout() { hasBlockSelected ? 'edit-post/block' : 'edit-post/document' ); + // Inserter and Sidebars are mutually exclusive + useEffect( () => { + if ( sidebarIsOpened ) { + setIsInserterOpen( false ); + } + }, [ sidebarIsOpened ] ); + useEffect( () => { + if ( isInserterOpen ) { + closeGeneralSidebar(); + } + }, [ isInserterOpen ] ); + return ( <> diff --git a/packages/edit-post/src/store/reducer.js b/packages/edit-post/src/store/reducer.js index de17f27eedde0..6f77bb46e0937 100644 --- a/packages/edit-post/src/store/reducer.js +++ b/packages/edit-post/src/store/reducer.js @@ -13,13 +13,6 @@ import { combineReducers } from '@wordpress/data'; */ import { PREFERENCES_DEFAULTS } from './defaults'; -/** - * The default active general sidebar: The "Document" tab. - * - * @type {string} - */ -export const DEFAULT_ACTIVE_GENERAL_SIDEBAR = 'edit-post/document'; - /** * Higher-order reducer creator which provides the given initial state for the * original reducer. From d364be4767dc0a85da4ba9bfe536486815aa8f1d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 10 Apr 2020 13:39:49 +0100 Subject: [PATCH 14/41] Fix the inserter toggle --- packages/components/src/button/style.scss | 13 ++++++++++ packages/components/src/toolbar/style.scss | 2 +- .../components/header/header-toolbar/index.js | 4 +++- .../header/header-toolbar/style.scss | 4 ++++ .../edit-post/src/components/header/index.js | 7 ++++-- .../src/components/header/style.scss | 24 ------------------- .../edit-post/src/components/layout/index.js | 1 + 7 files changed, 27 insertions(+), 28 deletions(-) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index 1ad73b8d4f142..b93ea0db51dbe 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -258,6 +258,19 @@ } } + // Toggled style. + &.is-pressed { + color: $white; + background: $dark-gray-primary; + + &:focus:not(:disabled) { + box-shadow: inset 0 0 0 1px $white, 0 0 0 $border-width-focus $theme-color; + + // Windows High Contrast mode will show this outline, but not the box-shadow. + outline: 2px solid transparent; + } + } + svg { fill: currentColor; outline: none; diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 74afbf16b7c81..6c63452fbdd93 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -56,7 +56,7 @@ // Toggled style. &.is-pressed { - color: $white; + background: transparent; &::before { background: $dark-gray-primary; 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 2890d01a5d048..3929425516a21 100644 --- a/packages/edit-post/src/components/header/header-toolbar/index.js +++ b/packages/edit-post/src/components/header/header-toolbar/index.js @@ -18,7 +18,7 @@ import { import { Button } from '@wordpress/components'; import { plus } from '@wordpress/icons'; -function HeaderToolbar( { onToggleInserter } ) { +function HeaderToolbar( { onToggleInserter, isInserterOpen } ) { const { hasFixedToolbar, showInserter, @@ -58,7 +58,9 @@ function HeaderToolbar( { onToggleInserter } ) { aria-label={ toolbarAriaLabel } >
+
+ { + if ( isMobileViewport ) { + setIsInserterOpen( + false + ); + } + } } + /> +
+
) } ) diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index cdab72c4bed4c..340284a8613b1 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -110,3 +110,28 @@ background-color: $light-gray-700; } +.edit-post-layout__inserter-panel { + height: 100%; + display: flex; + flex-direction: column; +} + +.edit-post-layout__inserter-panel-header { + padding-top: $grid-unit-10; + padding-right: $grid-unit-10; + display: flex; + justify-content: flex-end; + + @include break-medium() { + display: none; + } +} + +.edit-post-layout__inserter-panel-content { + // Leave space for the close button + height: calc(100% - #{$button-size} - #{$grid-unit-10}); + + @include break-medium() { + height: 100%; + } +} From 95ae982ca9149417b80761be67e547b7bad4cd5a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 09:44:51 +0100 Subject: [PATCH 29/41] remove tab stop from the inserter --- packages/components/src/tab-panel/index.js | 1 - packages/components/src/tab-panel/style.scss | 4 ---- 2 files changed, 5 deletions(-) diff --git a/packages/components/src/tab-panel/index.js b/packages/components/src/tab-panel/index.js index 1940ef4de9c01..682ac3fcfe102 100644 --- a/packages/components/src/tab-panel/index.js +++ b/packages/components/src/tab-panel/index.js @@ -103,7 +103,6 @@ class TabPanel extends Component { role="tabpanel" id={ selectedId + '-view' } className="components-tab-panel__tab-content" - tabIndex="0" > { this.props.children( selectedTab ) }
diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index 04819dc6a05a1..f4a93314bdf3b 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -45,7 +45,3 @@ } } - -.components-tab-panel__tab-content:focus { - box-shadow: 0 0 0 $border-width-focus $theme-color; -} From 3ef11ebc74ebad18b1f64efa5260b7c3276b3f3b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 09:47:03 +0100 Subject: [PATCH 30/41] Rename the left sidebar label --- packages/edit-post/src/components/layout/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 9fcde5cc927f1..f609d41af6bdf 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -54,6 +54,10 @@ import PluginPostPublishPanel from '../sidebar/plugin-post-publish-panel'; import PluginPrePublishPanel from '../sidebar/plugin-pre-publish-panel'; import WelcomeGuide from '../welcome-guide'; +const interfaceLabels = { + leftSidebar: __( 'Block Library' ), +}; + function Layout() { const [ isInserterOpen, setIsInserterOpen ] = useState( false ); const isMobileViewport = useViewportMatch( 'medium', '<' ); @@ -145,6 +149,7 @@ function Layout() { Date: Fri, 17 Apr 2020 09:49:34 +0100 Subject: [PATCH 31/41] fix translator comments --- .../src/components/interface-skeleton/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index 85904da2cb0c7..7ba335b9dffa6 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -37,11 +37,17 @@ function InterfaceSkeleton( { useHTMLClass( 'interface-interface-skeleton__html-container' ); const defaultLabels = { + /* translators: accessibility text for the top bar landmark region. */ header: __( 'Header' ), + /* translators: accessibility text for the content landmark region. */ body: __( 'Content' ), + /* translators: accessibility text for the left sidebar landmark region. */ leftSidebar: __( 'Left sidebar' ), + /* translators: accessibility text for the settings landmark region. */ sidebar: __( 'Settings' ), + /* translators: accessibility text for the publish landmark region. */ actions: __( 'Publish' ), + /* translators: accessibility text for the footer landmark region. */ footer: __( 'Footer' ), }; @@ -58,7 +64,6 @@ function InterfaceSkeleton( {
@@ -70,7 +75,6 @@ function InterfaceSkeleton( {
@@ -80,7 +84,6 @@ function InterfaceSkeleton( {
@@ -90,7 +93,6 @@ function InterfaceSkeleton( {
@@ -101,7 +103,6 @@ function InterfaceSkeleton( {
@@ -113,7 +114,6 @@ function InterfaceSkeleton( {
From 2430eccf3932163db73b9959991f9bfdea3b65ef Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 09:52:46 +0100 Subject: [PATCH 32/41] fix isPressed buttons hover styles --- packages/components/src/button/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss index b93ea0db51dbe..559d207972bb9 100644 --- a/packages/components/src/button/style.scss +++ b/packages/components/src/button/style.scss @@ -269,6 +269,10 @@ // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } + + &:hover:not(:disabled) { + background: $dark-gray-primary; + } } svg { From 43fa8a00d5ae9c64afe26bc572a2fb347fe495c5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 09:55:10 +0100 Subject: [PATCH 33/41] More translator comments for the inserter tabs --- packages/block-editor/src/components/inserter/menu.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 8b2741ec79fe9..6e446717f3751 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -189,10 +189,12 @@ function InserterMenu( { tabs={ [ { name: 'blocks', + /* translators: Blocks tab title in the block inserter. */ title: __( 'Blocks' ), }, { name: 'patterns', + /* translators: Patterns tab title in the block inserter. */ title: __( 'Patterns' ), }, ] } From 78fea84836c4ae548676505924d039edbf1b9853 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 10:28:37 +0100 Subject: [PATCH 34/41] Remove the animation and fix e2e test --- .../editor/various/adding-blocks.test.js | 10 ++-- .../edit-post/src/components/layout/index.js | 55 +++++++------------ 2 files changed, 25 insertions(+), 40 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js index a453b9b1f1095..65fd287650b46 100644 --- a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js +++ b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js @@ -150,27 +150,27 @@ describe( 'adding blocks', () => { 'block-editor-inserter__search-input' ); - // Tab to the block search results + // Tab to the block list await page.keyboard.press( 'Tab' ); await page.keyboard.press( 'Tab' ); - // Expect the search results to be the active element. + // Expect the block list to be the active element. activeElementClassList = await page.evaluate( () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'components-tab-panel__tab-content' + 'block-editor-block-types-list__item' ); // Try using the up arrow key await page.keyboard.press( 'ArrowUp' ); - // Expect the search results to still be the active element. + // Expect the block list to still be the active element. activeElementClassList = await page.evaluate( () => document.activeElement.classList ); expect( Object.values( activeElementClassList ) ).toContain( - 'components-tab-panel__tab-content' + 'block-editor-block-types-list__item' ); // Press escape to close the block inserter. diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index f609d41af6bdf..c25ace812ff87 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -24,7 +24,6 @@ import { ScrollLock, Popover, FocusReturnProvider, - Animate, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { PluginArea } from '@wordpress/plugins'; @@ -161,40 +160,26 @@ function Layout() { leftSidebar={ mode === 'visual' && isInserterOpen && ( - - { ( { className: animationClassName } ) => ( -
-
-
-
- { - if ( isMobileViewport ) { - setIsInserterOpen( - false - ); - } - } } - /> -
-
- ) } - +
+
+
+
+ { + if ( isMobileViewport ) { + setIsInserterOpen( false ); + } + } } + /> +
+
) } sidebar={ From 0dec07537575a601d0224080e866f6df5e41275d Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 10:29:35 +0100 Subject: [PATCH 35/41] Remove useless div --- packages/block-editor/src/components/inserter/panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/panel.js b/packages/block-editor/src/components/inserter/panel.js index 6258cc68bedd4..aa53395d55dd6 100644 --- a/packages/block-editor/src/components/inserter/panel.js +++ b/packages/block-editor/src/components/inserter/panel.js @@ -5,7 +5,7 @@ import { Icon } from '@wordpress/components'; function InserterPanel( { title, icon, children } ) { return ( -
+ <>
{ title } @@ -15,7 +15,7 @@ function InserterPanel( { title, icon, children } ) {
{ children }
-
+ ); } From 911a5f41493ceb904c516a838c687a2b38edebf3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 10:42:27 +0100 Subject: [PATCH 36/41] Improve preview --- packages/block-editor/src/components/block-preview/auto.js | 1 - packages/block-editor/src/components/inserter/preview-panel.js | 1 + packages/block-editor/src/components/inserter/style.scss | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-preview/auto.js b/packages/block-editor/src/components/block-preview/auto.js index d819680b24053..b02b362390e46 100644 --- a/packages/block-editor/src/components/block-preview/auto.js +++ b/packages/block-editor/src/components/block-preview/auto.js @@ -31,7 +31,6 @@ function AutoBlockPreview( { viewportWidth, __experimentalPadding } ) { aria-hidden style={ { height: contentHeight * scale + 2 * __experimentalPadding, - padding: __experimentalPadding, } } > { containerResizeListener } diff --git a/packages/block-editor/src/components/inserter/preview-panel.js b/packages/block-editor/src/components/inserter/preview-panel.js index 8f147c9fdd26b..763edbbd50637 100644 --- a/packages/block-editor/src/components/inserter/preview-panel.js +++ b/packages/block-editor/src/components/inserter/preview-panel.js @@ -23,6 +23,7 @@ function InserterPreviewPanel( { item } ) { { isReusableBlock( item ) || hoveredItemBlockType.example ? (
Date: Fri, 17 Apr 2020 11:55:10 +0100 Subject: [PATCH 37/41] Center blocks by default --- packages/block-editor/src/components/block-list/style.scss | 5 +++++ packages/block-library/src/image/editor.scss | 4 ---- packages/edit-post/src/components/visual-editor/style.scss | 6 ------ 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 2c7fa2e36003b..f7dc606b69cb1 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -1,3 +1,8 @@ +.block-editor-block-list__block { + margin-left: auto; + margin-right: auto; +} + .block-editor-block-list__layout .block-editor-block-list__block { // Needs specificity to override inherited styles. // While block is being dragged, dim the slot dragged from, and hide some UI. &.is-dragging { diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index e23efffc0eb4d..6fc8a48bc6b48 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -1,10 +1,6 @@ .wp-block-image { position: relative; - // This resets the intrinsic margin on the figure in non-floated, wide, and full-wide alignments. - margin-left: 0; - margin-right: 0; - &.is-transient img { opacity: 0.3; } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index acdf055d22faa..0093354ef12e0 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -36,12 +36,6 @@ height: 0; } -// The base width of blocks -.edit-post-visual-editor .block-editor-block-list__block { - margin-left: auto; - margin-right: auto; -} - // Ideally this wrapper div is not needed but if we waant to match the positionning of blocks // .block-editor-block-list__layout and block-editor-block-list__block // We need to have two DOM elements. From ea6a3445b0d55704de24997c9e0859eb771bbd03 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 12:00:43 +0100 Subject: [PATCH 38/41] Smaller breakpoint for the mutually exclusive sidebar closing --- packages/edit-post/src/components/layout/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c25ace812ff87..15cdc0854cbf3 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -60,7 +60,7 @@ const interfaceLabels = { function Layout() { const [ isInserterOpen, setIsInserterOpen ] = useState( false ); const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isHugeViewport = useViewportMatch( 'huge', '>=' ); + const isLargeViewport = useViewportMatch( 'large', '>=' ); const { closePublishSidebar, openGeneralSidebar, @@ -126,15 +126,15 @@ function Layout() { // Inserter and Sidebars are mutually exclusive useEffect( () => { - if ( sidebarIsOpened && ! isHugeViewport ) { + if ( sidebarIsOpened && ! isLargeViewport ) { setIsInserterOpen( false ); } - }, [ sidebarIsOpened, isHugeViewport ] ); + }, [ sidebarIsOpened, isLargeViewport ] ); useEffect( () => { - if ( isInserterOpen && ! isHugeViewport ) { + if ( isInserterOpen && ! isLargeViewport ) { closeGeneralSidebar(); } - }, [ isInserterOpen, isHugeViewport ] ); + }, [ isInserterOpen, isLargeViewport ] ); return ( <> From 276188f91858e444e0651b377c7a459cf97fb158 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 12:19:02 +0100 Subject: [PATCH 39/41] tweak tab styles --- packages/components/src/tab-panel/style.scss | 37 +++++++++++++------- 1 file changed, 25 insertions(+), 12 deletions(-) diff --git a/packages/components/src/tab-panel/style.scss b/packages/components/src/tab-panel/style.scss index f4a93314bdf3b..fbc051f407e45 100644 --- a/packages/components/src/tab-panel/style.scss +++ b/packages/components/src/tab-panel/style.scss @@ -5,9 +5,9 @@ .components-tab-panel__tabs-item { background: transparent; - border: 1.5px solid transparent; - border-radius: 0; + border: none; box-shadow: none; + border-radius: 0; cursor: pointer; height: $grid-unit-60; padding: 3px $grid-unit-20; // Use padding to offset the is-active border, this benefits Windows High Contrast mode @@ -16,16 +16,27 @@ transition: box-shadow 0.1s linear; box-sizing: border-box; + // This pseudo-element "duplicates" the tab label and sets the text to bold. + // This ensures that the tab doesn't change width when selected. + // See: https://github.com/WordPress/gutenberg/pull/9793 + &::after { + content: attr(data-label); + display: block; + height: 0; + overflow: hidden; + speak: none; + visibility: hidden; + } + &:focus:not(:disabled) { - border: $border-width-focus solid $theme-color; - box-shadow: none; + box-shadow: inset 0 $border-width-focus $theme-color; } + &.is-active { - box-shadow: inset 0 -3px $theme-color; - border-bottom: 0; + // The transparent shadow ensures no jumpiness when focus animates on an active tab. + box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color; position: relative; - background: transparent; // This border appears in Windows High Contrast mode instead of the box-shadow. &::before { @@ -35,13 +46,15 @@ bottom: 1px; right: 0; left: 0; - border-bottom: 3px solid transparent; + border-bottom: $border-width-tab solid transparent; } + } - &:focus:not(:disabled) { - border-bottom: none; - box-shadow: inset 0 -3px $theme-color; - } + &:focus { + box-shadow: inset 0 0 0 $border-width-focus $theme-color; } + &.is-active:focus { + box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color; + } } From a91a671c28984db080aa0d685ef8ff582918e01c Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 13:11:23 +0100 Subject: [PATCH 40/41] Fix toolbar hover styles --- packages/components/src/toolbar/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/src/toolbar/style.scss b/packages/components/src/toolbar/style.scss index 6c63452fbdd93..fdbcccb3f2029 100644 --- a/packages/components/src/toolbar/style.scss +++ b/packages/components/src/toolbar/style.scss @@ -58,6 +58,10 @@ &.is-pressed { background: transparent; + &:hover { + background: transparent; + } + &::before { background: $dark-gray-primary; } From 3868f57941be519e682fa850eb05750599a578e4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 17 Apr 2020 13:28:24 +0100 Subject: [PATCH 41/41] Revert "Smaller breakpoint for the mutually exclusive sidebar closing" This reverts commit ea6a3445b0d55704de24997c9e0859eb771bbd03. --- packages/edit-post/src/components/layout/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 15cdc0854cbf3..c25ace812ff87 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -60,7 +60,7 @@ const interfaceLabels = { function Layout() { const [ isInserterOpen, setIsInserterOpen ] = useState( false ); const isMobileViewport = useViewportMatch( 'medium', '<' ); - const isLargeViewport = useViewportMatch( 'large', '>=' ); + const isHugeViewport = useViewportMatch( 'huge', '>=' ); const { closePublishSidebar, openGeneralSidebar, @@ -126,15 +126,15 @@ function Layout() { // Inserter and Sidebars are mutually exclusive useEffect( () => { - if ( sidebarIsOpened && ! isLargeViewport ) { + if ( sidebarIsOpened && ! isHugeViewport ) { setIsInserterOpen( false ); } - }, [ sidebarIsOpened, isLargeViewport ] ); + }, [ sidebarIsOpened, isHugeViewport ] ); useEffect( () => { - if ( isInserterOpen && ! isLargeViewport ) { + if ( isInserterOpen && ! isHugeViewport ) { closeGeneralSidebar(); } - }, [ isInserterOpen, isLargeViewport ] ); + }, [ isInserterOpen, isHugeViewport ] ); return ( <>