From 8c81db6738aa75d84111221884dae18e58f7674d Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Mon, 14 Sep 2020 14:43:53 -0700 Subject: [PATCH 01/13] Add basic component centered in edit site header --- .../header/document-actions/index.js | 3 + .../header/document-actions/style.scss | 3 + .../edit-site/src/components/header/index.js | 112 ++++++++++-------- .../src/components/header/style.scss | 12 +- packages/edit-site/src/style.scss | 1 + 5 files changed, 79 insertions(+), 52 deletions(-) create mode 100644 packages/edit-site/src/components/header/document-actions/index.js create mode 100644 packages/edit-site/src/components/header/document-actions/style.scss diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js new file mode 100644 index 0000000000000..53a5912b72241 --- /dev/null +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -0,0 +1,3 @@ +export default function DocumentActions() { + return
Document Actions
; +} diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss new file mode 100644 index 0000000000000..827ef011f9691 --- /dev/null +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -0,0 +1,3 @@ +.edit-site-document-actions { + border: 1px solid; +} diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 1dcdb84737876..77d49a53e91ad 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -27,6 +27,7 @@ import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; import FullscreenModeClose from './fullscreen-mode-close'; +import DocumentActions from './document-actions'; export default function Header( { openEntitiesSavedStates, @@ -81,62 +82,73 @@ export default function Header( { return (
- - - -
- + ); + } } + renderContent={ () =>
TODO: Document Settings
} + /> + ) : ( + __( 'Loading…' ) + ) } +
+ ); } diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index 827ef011f9691..f5f54bb96d0e2 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -1,3 +1,18 @@ -.edit-site-document-actions { - border: 1px solid; +.edit-site-document-actions__document_item { + color: $gray-700; + &.is-active { + color: inherit; + } +} + +// Apply button hover style to text even when grayed out. +button:hover .edit-site-document-actions__document_item { + color: inherit; + &.is-active { + color: inherit; + } +} + +.edit-site-document-actions__separator { + padding-right: 4px; } diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 77d49a53e91ad..d3f391d722fca 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -133,7 +133,7 @@ export default function Header( {
- +
From 0fad29147361e8b27a31f1844246d72b50be0928 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Mon, 14 Sep 2020 16:56:45 -0700 Subject: [PATCH 04/13] Add extra props to dropdown button --- .../src/components/header/document-actions/index.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 2d42726762ab5..481f90ea400e8 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -9,6 +9,7 @@ import classnames from 'classnames'; import { Button, Dropdown } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; +import { DOWN } from '@wordpress/keycodes'; export default function DocumentActions( { templateId, @@ -31,12 +32,22 @@ export default function DocumentActions( { { + const openOnArrowDown = ( event ) => { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + event.stopPropagation(); + onToggle(); + } + }; return ( - ); - } } - renderContent={ () =>
TODO: Document Settings
} - /> + ) } + > + { primaryText } + + { secondaryText && ( + + { secondaryText } + + ) } + ) : ( __( 'Loading…' ) ) } diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index f5f54bb96d0e2..6eeddaea99dbd 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -1,18 +1,14 @@ -.edit-site-document-actions__document_item { - color: $gray-700; - &.is-active { - color: inherit; - } -} +.edit-site-document-actions { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + margin: 5px 0; -// Apply button hover style to text even when grayed out. -button:hover .edit-site-document-actions__document_item { - color: inherit; - &.is-active { - color: inherit; + span { + color: $gray-700; + &.is-active { + color: inherit; + } } } - -.edit-site-document-actions__separator { - padding-right: 4px; -} diff --git a/packages/edit-site/src/components/header/style.scss b/packages/edit-site/src/components/header/style.scss index d1ff11f757d37..a8bf761492269 100644 --- a/packages/edit-site/src/components/header/style.scss +++ b/packages/edit-site/src/components/header/style.scss @@ -10,6 +10,11 @@ display: flex; } + .edit-site-header_center { + display: flex; + height: 100%; + } + .edit-site-header_end { justify-content: flex-end; } From d993cfeef42d8a9ff92708993769a996d901c8f0 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Tue, 15 Sep 2020 13:08:21 -0700 Subject: [PATCH 07/13] Add hook, rework props --- .../header/document-actions/index.js | 52 ++++++++++++++----- .../edit-site/src/components/header/index.js | 5 +- 2 files changed, 40 insertions(+), 17 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 351255c78f97e..979bac0d6329a 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -7,37 +7,63 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { + __experimentalGetBlockLabel as getBlockLabel, + getBlockType, +} from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; -export default function DocumentActions( { - primaryText, - secondaryText, - isSecondaryItemActive = true, -} ) { - const hasSecondaryItem = !! secondaryText?.length; +function useSecondaryText() { + const selectedBlock = useSelect( ( select ) => { + return select( 'core/block-editor' ).getSelectedBlock(); + } ); + + const selectedBlockLabel = + selectedBlock?.name === 'core/template-part' + ? getBlockLabel( + getBlockType( selectedBlock?.name ), + selectedBlock?.attributes + ) + : null; + + if ( selectedBlockLabel ) { + return { + label: selectedBlockLabel, + isActive: true, + }; + } + return {}; +} + +export default function DocumentActions( { documentTitle } ) { + const { label, isActive } = useSecondaryText(); + // Title is active when there is no secondary item, or when the secondary + // item is inactive. + const isTitleActive = ! label?.length || ! isActive; return (
- { primaryText ? ( + { documentTitle ? ( <> - { primaryText } + { documentTitle } - { secondaryText && ( + { label && ( - { secondaryText } + { label } ) } diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index ad090683deace..563a60602dae7 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -138,10 +138,7 @@ export default function Header( {
- +
From 63d1079d12d338e575c0fe7a846d275833a07ced Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Wed, 16 Sep 2020 11:18:37 -0700 Subject: [PATCH 08/13] Update spacing --- .../edit-site/src/components/header/document-actions/style.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index 6eeddaea99dbd..e9f5de748646c 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -3,7 +3,6 @@ flex-direction: column; align-items: center; justify-content: space-evenly; - margin: 5px 0; span { color: $gray-700; From 202d122be0dd944ed4f19de488a790a463569a56 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Wed, 16 Sep 2020 12:36:14 -0700 Subject: [PATCH 09/13] Add CSS transition --- .../header/document-actions/index.js | 35 +++++++++++-------- .../header/document-actions/style.scss | 23 +++++++++++- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 979bac0d6329a..744a886ff34e1 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -18,6 +18,7 @@ function useSecondaryText() { return select( 'core/block-editor' ).getSelectedBlock(); } ); + // TODO: Handle if parent is template part too. const selectedBlockLabel = selectedBlock?.name === 'core/template-part' ? getBlockLabel( @@ -41,11 +42,16 @@ export default function DocumentActions( { documentTitle } ) { // item is inactive. const isTitleActive = ! label?.length || ! isActive; return ( -
+
{ documentTitle ? ( <> - { documentTitle } - - { label && ( - - { label } - - ) } +
+
+ { label ?? '' } +
) : ( __( 'Loading…' ) diff --git a/packages/edit-site/src/components/header/document-actions/style.scss b/packages/edit-site/src/components/header/document-actions/style.scss index e9f5de748646c..e17ca10910ea4 100644 --- a/packages/edit-site/src/components/header/document-actions/style.scss +++ b/packages/edit-site/src/components/header/document-actions/style.scss @@ -4,10 +4,31 @@ align-items: center; justify-content: space-evenly; - span { + .edit-site-document-actions__label { color: $gray-700; + display: flex; + justify-content: center; + align-items: center; + transition: height 0.25s; + &.is-active { color: inherit; } + + &.edit-site-document-actions__title { + height: 100%; + // Otherwise, the secondary item still takes up space with height 0: + flex-grow: 1; + } + + &.edit-site-document-actions__secondary-item { + height: 0; + } + } + + &.has-secondary-label { + .edit-site-document-actions__label { + height: 50%; + } } } From dd5fe253bfbe51aaa9ec75fee27d08e037e684f3 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Wed, 16 Sep 2020 15:07:04 -0700 Subject: [PATCH 10/13] Introduce document settings dropdown --- .../header/document-actions/index.js | 61 ++++++++++++++++--- 1 file changed, 53 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 744a886ff34e1..f1995043200fc 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -6,12 +6,14 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { Button, Dropdown } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { __experimentalGetBlockLabel as getBlockLabel, getBlockType, } from '@wordpress/blocks'; import { useSelect } from '@wordpress/data'; +import { DOWN } from '@wordpress/keycodes'; function useSecondaryText() { const selectedBlock = useSelect( ( select ) => { @@ -41,6 +43,7 @@ export default function DocumentActions( { documentTitle } ) { // Title is active when there is no secondary item, or when the secondary // item is inactive. const isTitleActive = ! label?.length || ! isActive; + return (
{ documentTitle ? ( <> -
{ + const openOnArrowDown = ( event ) => { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + event.stopPropagation(); + onToggle(); + } + }; { - 'is-active': isTitleActive, + /* TODO: Fix vertical text padding */ } + return ( + + ); + } } + renderContent={ () => ( +
+ { /* TODO: Replace inline styles */ } + + URL + + { /* TODO: Don't allow input when there is no page context */ } + +
) } - > - { documentTitle } -
+ >
Date: Wed, 16 Sep 2020 15:23:28 -0700 Subject: [PATCH 11/13] Add site editor page context to document actions --- .../src/components/header/document-actions/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index f1995043200fc..02f8de9fbbfb9 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -44,6 +44,11 @@ export default function DocumentActions( { documentTitle } ) { // item is inactive. const isTitleActive = ! label?.length || ! isActive; + const { page } = useSelect( ( select ) => { + const { getPage } = select( 'core/edit-site' ); + return { page: getPage() }; + } ); + return (
{ /* TODO: Don't allow input when there is no page context */ } From be810661cc2f175fc1c34d57fef34e6f33d67196 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Thu, 17 Sep 2020 10:32:19 -0700 Subject: [PATCH 12/13] Update title in the core data store --- .../header/document-actions/index.js | 26 ++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index 02f8de9fbbfb9..e07f571c49d06 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -12,7 +12,7 @@ import { __experimentalGetBlockLabel as getBlockLabel, getBlockType, } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { DOWN } from '@wordpress/keycodes'; function useSecondaryText() { @@ -46,9 +46,20 @@ export default function DocumentActions( { documentTitle } ) { const { page } = useSelect( ( select ) => { const { getPage } = select( 'core/edit-site' ); - return { page: getPage() }; + const { getEntityRecord } = select( 'core' ); + const _page = getPage(); + return { + page: getEntityRecord( 'postType', 'page', _page?.context?.postId ), + }; } ); + const { editEntityRecord } = useDispatch( 'core' ); + const editTitle = ( title ) => { + editEntityRecord( 'postType', 'page', page.id, { + title, + } ); + }; + return (
{ + const REGEXP_NEWLINES = /[\r\n]+/g; + const title = event.target.value.replace( + REGEXP_NEWLINES, + ' ' + ); + + editTitle( title ); + } } />
) } From a4bc23060a895d9b4eddbd411c5c029b504df117 Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Mon, 21 Sep 2020 11:57:39 -0700 Subject: [PATCH 13/13] Update page slug --- .../edit-site/src/components/header/document-actions/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/header/document-actions/index.js b/packages/edit-site/src/components/header/document-actions/index.js index e07f571c49d06..65d33f2147800 100644 --- a/packages/edit-site/src/components/header/document-actions/index.js +++ b/packages/edit-site/src/components/header/document-actions/index.js @@ -57,6 +57,7 @@ export default function DocumentActions( { documentTitle } ) { const editTitle = ( title ) => { editEntityRecord( 'postType', 'page', page.id, { title, + slug: title, } ); }; @@ -111,7 +112,7 @@ export default function DocumentActions( { documentTitle } ) { > { /* TODO: Replace inline styles */ } - URL + Name { /* TODO: Don't allow input when there is no page context */ }