From ddcb8f83df0044e235d79ecbd6e01135106b20c7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 8 Oct 2019 11:20:26 +0100 Subject: [PATCH 01/16] Add a block selection breadcrumb to the bottom of the editor --- packages/base-styles/_z-index.scss | 1 + packages/block-editor/README.md | 14 +++++ .../src/components/block-breadcrumb/index.js | 52 +++++++++++++++++++ .../components/block-breadcrumb/style.scss | 24 +++++++++ packages/block-editor/src/components/index.js | 1 + packages/block-editor/src/store/selectors.js | 16 ++++++ packages/block-editor/src/style.scss | 1 + .../edit-post/src/components/layout/index.js | 14 ++++- .../src/components/layout/style.scss | 25 +++++++++ 9 files changed, 147 insertions(+), 1 deletion(-) create mode 100644 packages/block-editor/src/components/block-breadcrumb/index.js create mode 100644 packages/block-editor/src/components/block-breadcrumb/style.scss diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index c4e7c3a02aa356..36cc265a0b7f64 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -24,6 +24,7 @@ $z-layers: ( ".block-editor-warning": 5, ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, + ".edit-post-layout__footer": 30, ".edit-post-header": 30, ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index a3f84683e02af2..31529fc4ba1e68 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -82,6 +82,20 @@ _Related_ Undocumented declaration. +# **BlockBreadcrumb** + +Block breadcrumb component, displaying the label of the block. If the block +descends from a root block, a button is displayed enabling the user to select +the root block. + +_Parameters_ + +- _props.clientId_ `string`: Client ID of block. + +_Returns_ + +- `WPElement`: Block Breadcrumb. + # **BlockControls** Undocumented declaration. diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js new file mode 100644 index 00000000000000..57b46acafe7416 --- /dev/null +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import BlockTitle from '../block-title'; + +/** + * Block breadcrumb component, displaying the label of the block. If the block + * descends from a root block, a button is displayed enabling the user to select + * the root block. + * + * @param {string} props.clientId Client ID of block. + * @return {WPElement} Block Breadcrumb. + */ +const BlockBreadcrumb = function() { + const { selectBlock } = useDispatch( 'core/block-editor' ); + const { clientId, parents } = useSelect( ( select ) => { + const selectedBlockClientId = select( 'core/block-editor' ).getSelectedBlockClientId(); + return { + parents: select( 'core/block-editor' ).getBlockParents( selectedBlockClientId ), + clientId: selectedBlockClientId, + }; + }, [] ); + + return ( + + ); +}; + +export default BlockBreadcrumb; diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss new file mode 100644 index 00000000000000..fa71051fee331b --- /dev/null +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -0,0 +1,24 @@ +.block-editor-block-breadcrumb { + list-style: none; + padding: 0; + margin: 0; + + li { + display: inline-block; + margin: 0; + + &:not(.block-editor-block-breadcrumb__current)::after { + content: "▸"; + } + } +} + +.block-editor-block-breadcrumb__button.components-button { + color: inherit; + font-size: inherit; +} + +.block-editor-block-breadcrumb__current { + padding: 0 10px; + font-size: inherit; +} diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 798566bda67088..1c07bbd80e38e9 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -7,6 +7,7 @@ export * from './font-sizes'; export { default as AlignmentToolbar } from './alignment-toolbar'; export { default as Autocomplete } from './autocomplete'; export { default as BlockAlignmentToolbar } from './block-alignment-toolbar'; +export { default as BlockBreadcrumb } from './block-breadcrumb'; export { default as BlockControls } from './block-controls'; export { default as BlockEdit } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index ad3cde1d7cb775..6b36e6746d97e2 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -420,6 +420,22 @@ export function getBlockRootClientId( state, clientId ) { null; } +export const getBlockParents = createSelector( + ( state, clientId ) => { + const parents = []; + let current = clientId; + while ( !! state.blocks.parents[ current ] ) { + current = state.blocks.parents[ current ]; + parents.push( current ); + } + + return parents.reverse(); + }, + ( state ) => [ + state.blocks.parents, + ] +); + /** * Given a block client ID, returns the root of the hierarchy from which the block is nested, return the block itself for root level blocks. * diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 8ebb2e487a4f29..7296c0fa788620 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -3,6 +3,7 @@ @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; @import "./components/block-list-appender/style.scss"; +@import "./components/block-breadcrumb/style.scss"; @import "./components/block-card/style.scss"; @import "./components/block-compare/style.scss"; @import "./components/block-mover/style.scss"; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index e29011c8cec529..22e570423c4493 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -21,6 +21,7 @@ import { EditorNotices, PostPublishPanel, } from '@wordpress/editor'; +import { BlockBreadcrumb } from '@wordpress/block-editor'; import { withDispatch, withSelect } from '@wordpress/data'; import { PluginArea } from '@wordpress/plugins'; import { withViewportMatch } from '@wordpress/viewport'; @@ -56,6 +57,7 @@ function Layout( { isSaving, isMobileViewport, isRichEditingEnabled, + showFooter, } ) { const sidebarIsOpened = editorSidebarOpened || pluginSidebarOpened || publishSidebarOpened; @@ -92,7 +94,16 @@ function Layout( { { ( mode === 'text' || ! isRichEditingEnabled ) && } - { isRichEditingEnabled && mode === 'visual' && } + { isRichEditingEnabled && mode === 'visual' && ( + <> + + { showFooter && ( +
+ +
+ ) } + + ) }
@@ -145,6 +156,7 @@ export default compose( hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(), isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(), isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled, + showFooter: !! select( 'core/block-editor' ).getSelectedBlockClientId(), } ) ), withDispatch( ( dispatch ) => { const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' ); diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss index 43996d98f8c8f0..7e3d4cf30e5320 100644 --- a/packages/edit-post/src/components/layout/style.scss +++ b/packages/edit-post/src/components/layout/style.scss @@ -234,3 +234,28 @@ } } } + +.edit-post-layout__footer { + display: none; + z-index: z-index(".edit-post-layout__footer"); + + // Stretch to mimic outline padding on desktop. + @include break-medium() { + display: inline-flex; + position: fixed; + bottom: 0; + right: 0; + background: $white; + height: 30px; + padding: 0 10px; + align-items: center; + border-top: $border-width solid $light-gray-500; + font-size: 12px; + + .edit-post-layout.is-sidebar-opened & { + right: $sidebar-width; + } + } +} +@include editor-left(".edit-post-layout__footer"); + From d23209d8c9a23b437a82e29c85e2833cd4e85cc8 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 16 Oct 2019 11:31:59 +0100 Subject: [PATCH 02/16] Always show the block breadcrumb --- .../src/components/block-breadcrumb/index.js | 24 +++++++++++++++---- .../components/block-breadcrumb/style.scss | 2 +- .../edit-post/src/components/layout/index.js | 10 +++----- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index 57b46acafe7416..1f42b0e51eb679 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -3,6 +3,7 @@ */ import { Button } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -18,17 +19,32 @@ import BlockTitle from '../block-title'; * @return {WPElement} Block Breadcrumb. */ const BlockBreadcrumb = function() { - const { selectBlock } = useDispatch( 'core/block-editor' ); - const { clientId, parents } = useSelect( ( select ) => { - const selectedBlockClientId = select( 'core/block-editor' ).getSelectedBlockClientId(); + const { selectBlock, clearSelectedBlock } = useDispatch( 'core/block-editor' ); + const { clientId, parents, hasSelection } = useSelect( ( select ) => { + const { + getSelectionStart, + getSelectedBlockClientId, + getBlockParents, + } = select( 'core/block-editor' ); + const selectedBlockClientId = getSelectedBlockClientId(); return { - parents: select( 'core/block-editor' ).getBlockParents( selectedBlockClientId ), + parents: getBlockParents( selectedBlockClientId ), clientId: selectedBlockClientId, + hasSelection: getSelectionStart(), }; }, [] ); return (
    +
  • + +
    • { parents.map( ( parent ) => (
+ /* eslint-enable jsx-a11y/no-redundant-roles */ ); }; diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index ccdd7f3dc3af4d..b8cb779603410c 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -103,7 +103,13 @@ function Layout( { { isMobileViewport && sidebarIsOpened && } { isRichEditingEnabled && mode === 'visual' && ( -
+
) } From 11db67b0e6960498ac003752cb15fa95be19926b Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Oct 2019 14:59:33 +0100 Subject: [PATCH 10/16] Changes per review --- .../developers/data/data-core-block-editor.md | 2 +- .../block-editor/src/components/block-breadcrumb/index.js | 8 ++++---- packages/block-editor/src/store/selectors.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index bb72f6a1f276bb..ac50b42d83b114 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -191,7 +191,7 @@ _Returns_ # **getBlockParents** -Given a block client ID, returns the list of all its parents. +Given a block client ID, returns the list of all its parents from top to bottom. _Parameters_ diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index 81d537c79c175e..089cacf5859cb1 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -47,14 +47,14 @@ const BlockBreadcrumb = function() { { __( 'Document' ) } - { parents.map( ( parent ) => ( -
  • + { parents.map( ( parentClientId ) => ( +
    • ) ) } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 5730d8dcf176cd..a0fd75a3a7b816 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -421,7 +421,7 @@ export function getBlockRootClientId( state, clientId ) { } /** - * Given a block client ID, returns the list of all its parents. + * Given a block client ID, returns the list of all its parents from top to bottom. * * @param {Object} state Editor state. * @param {string} clientId Block from which to find root client ID. From f44b5781d774e1ced6d6f86a4591b38fa13aa885 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 23 Oct 2019 15:05:44 +0100 Subject: [PATCH 11/16] Fix text position in firefox --- .../block-editor/src/components/block-breadcrumb/style.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/style.scss b/packages/block-editor/src/components/block-breadcrumb/style.scss index e5224ba26cd837..b20cdd273b2566 100644 --- a/packages/block-editor/src/components/block-breadcrumb/style.scss +++ b/packages/block-editor/src/components/block-breadcrumb/style.scss @@ -15,7 +15,8 @@ .block-editor-block-breadcrumb__button.components-button { height: $icon-button-size-small; - line-height: 100%; + line-height: $icon-button-size-small; + padding: 0; &:hover { text-decoration: underline; From bb0e14c60726aa32056eddd2a90999878495a729 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 08:40:23 +0100 Subject: [PATCH 12/16] Accessibility fixes --- .../src/components/block-breadcrumb/index.js | 45 ++++++++++--------- 1 file changed, 24 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index 089cacf5859cb1..f1f80a575866d2 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -37,33 +37,36 @@ const BlockBreadcrumb = function() { */ /* eslint-disable jsx-a11y/no-redundant-roles */ return ( -
      -
    • - -
      • - { parents.map( ( parentClientId ) => ( -
    • +
    + /* eslint-enable jsx-a11y/no-redundant-roles */ ); }; From 49fc623f9af697aa21697b938878addcfe20d258 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 24 Oct 2019 11:11:40 +0100 Subject: [PATCH 13/16] Changes per review --- .../src/components/block-breadcrumb/index.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/block-editor/src/components/block-breadcrumb/index.js b/packages/block-editor/src/components/block-breadcrumb/index.js index f1f80a575866d2..4dfc1fb93b01c6 100644 --- a/packages/block-editor/src/components/block-breadcrumb/index.js +++ b/packages/block-editor/src/components/block-breadcrumb/index.js @@ -27,7 +27,7 @@ const BlockBreadcrumb = function() { return { parents: getBlockParents( selectedBlockClientId ), clientId: selectedBlockClientId, - hasSelection: getSelectionStart(), + hasSelection: getSelectionStart().clientId, }; }, [] ); @@ -37,17 +37,22 @@ const BlockBreadcrumb = function() { */ /* eslint-disable jsx-a11y/no-redundant-roles */ return ( -