From be6c4756f75cc40d647c5053a0dc410c623227e9 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 May 2023 11:53:28 +1200 Subject: [PATCH 01/14] Add view site link to site editor nav --- .../edit-site/src/components/site-hub/index.js | 9 ++++++++- .../edit-site/src/components/site-hub/style.scss | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index eadd9bbad68b9..8828a1490fea0 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -12,6 +12,8 @@ import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __experimentalHStack as HStack, + ExternalLink, + Tooltip, } from '@wordpress/components'; import { useReducedMotion } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; @@ -34,15 +36,20 @@ const { store: commandsStore } = unlock( commandsPrivateApis ); const HUB_ANIMATION_DURATION = 0.3; const SiteHub = forwardRef( ( props, ref ) => { - const { canvasMode, dashboardLink } = useSelect( ( select ) => { + const { canvasMode, dashboardLink, homeUrl } = useSelect( ( select ) => { const { getCanvasMode, getSettings } = unlock( select( editSiteStore ) ); + const { + getUnstableBase, // Site index. + } = select( coreStore ); + return { canvasMode: getCanvasMode(), dashboardLink: getSettings().__experimentalDashboardLink || 'index.php', + homeUrl: getUnstableBase()?.home, }; }, [] ); const { open: openCommandCenter } = useDispatch( commandsStore ); diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 90a9c37011cf5..a29ca79a727cb 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -29,6 +29,21 @@ .edit-site-site-hub__site-title { margin-left: $grid-unit-05; + flex-grow: 1; +} + +.edit-site-site-hub__site-view { + outline: none; + .components-external-link:focus { + outline: 0; + box-shadow: none; + } + .components-external-link__icon { + height: $grid-unit-30; + width: $grid-unit-30; + color: $white; + outline: none; + } } .edit-site-site-hub_toggle-command-center { From b531dc2d08d9df8b2ebe3f9b300ec467afa4c93d Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 May 2023 11:54:24 +1200 Subject: [PATCH 02/14] Move link from icon to site title --- .../src/components/site-hub/style.scss | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index a29ca79a727cb..9a205469e229c 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -30,19 +30,16 @@ .edit-site-site-hub__site-title { margin-left: $grid-unit-05; flex-grow: 1; -} - -.edit-site-site-hub__site-view { - outline: none; - .components-external-link:focus { - outline: 0; - box-shadow: none; + .components-external-link { + color: $white; + text-decoration: underline; + &:focus { + outline: none; + box-shadow: none; + } } .components-external-link__icon { - height: $grid-unit-30; - width: $grid-unit-30; - color: $white; - outline: none; + display: none; } } From ec88366a3b4ae2410bb9ca3719c19677d232dde7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 11 May 2023 11:55:55 +1200 Subject: [PATCH 03/14] add site view link back --- packages/edit-site/src/components/site-hub/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 8828a1490fea0..69f293af07889 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -153,7 +153,11 @@ const SiteHub = forwardRef( ( props, ref ) => { delay: canvasMode === 'view' ? 0.1 : 0, } } > - { decodeEntities( siteTitle ) } + + + { decodeEntities( siteTitle ) } + + From 373b7addbaf5cd727db7b0bcbc3bfacac301fe9e Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 12 May 2023 10:19:08 +1200 Subject: [PATCH 04/14] only show underline on hover --- packages/edit-site/src/components/site-hub/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 9a205469e229c..f7ebfe834cbf9 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -32,7 +32,10 @@ flex-grow: 1; .components-external-link { color: $white; - text-decoration: underline; + text-decoration: none; + &:hover { + text-decoration: underline; + } &:focus { outline: none; box-shadow: none; From 9cd6fc7c52aec236511ea2346488eeea84aa11b6 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 16 May 2023 12:40:14 +1200 Subject: [PATCH 05/14] Switch back to an icon but on hover only --- .../src/components/site-hub/index.js | 9 +++--- .../src/components/site-hub/style.scss | 32 +++++++++++-------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index 69f293af07889..b06426d3210c7 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -153,13 +153,12 @@ const SiteHub = forwardRef( ( props, ref ) => { delay: canvasMode === 'view' ? 0.1 : 0, } } > - - - { decodeEntities( siteTitle ) } - - + { decodeEntities( siteTitle ) } + + + { window?.__experimentalEnableCommandCenter && canvasMode === 'view' && ( diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index f7ebfe834cbf9..89dee3a7a9fa3 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -19,6 +19,24 @@ .edit-site-site-hub__text-content { // Necessary for the ellipsis to work. overflow: hidden; + .components-external-link { + flex-grow: 0; + display: none; + &:focus { + outline: none; + box-shadow: none; + } + .components-external-link__icon { + fill: $white; + height: 18px; + width: 18px; + } + } + &:hover { + .components-external-link { + display: inline-block; + } + } } .edit-site-site-hub__title { @@ -30,20 +48,6 @@ .edit-site-site-hub__site-title { margin-left: $grid-unit-05; flex-grow: 1; - .components-external-link { - color: $white; - text-decoration: none; - &:hover { - text-decoration: underline; - } - &:focus { - outline: none; - box-shadow: none; - } - } - .components-external-link__icon { - display: none; - } } .edit-site-site-hub_toggle-command-center { From 01bc808858c57f76969a071962a36e8e27ca61cd Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 16 May 2023 12:46:12 +1200 Subject: [PATCH 06/14] Add always view on small screens --- packages/edit-site/src/components/site-hub/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 89dee3a7a9fa3..94979b1cc1d81 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -21,7 +21,9 @@ overflow: hidden; .components-external-link { flex-grow: 0; - display: none; + @media (min-width: 600px) { + display: none; + } &:focus { outline: none; box-shadow: none; From b7e4088cf48594c12d8af4a244faa4bcbfda3433 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 16 May 2023 12:48:39 +1200 Subject: [PATCH 07/14] Always display on mobile --- packages/edit-site/src/components/site-hub/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 94979b1cc1d81..92b2b040838f0 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -21,7 +21,7 @@ overflow: hidden; .components-external-link { flex-grow: 0; - @media (min-width: 600px) { + @include break-mobile() { display: none; } &:focus { From 0a19e1a0dbf7ca18eecd3a4a422c077daf7ff603 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 18 May 2023 10:35:50 +1200 Subject: [PATCH 08/14] revert icon to default 24px --- packages/edit-site/src/components/site-hub/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 92b2b040838f0..90a16616c2ac8 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -30,8 +30,8 @@ } .components-external-link__icon { fill: $white; - height: 18px; - width: 18px; + height: initial; + width: initial; } } &:hover { From e10c007bb8ee209604d3e8e20fb8c83b68ec8bb1 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 19 May 2023 13:09:13 +1200 Subject: [PATCH 09/14] Add fade in transition --- packages/edit-site/src/components/site-hub/style.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/site-hub/style.scss b/packages/edit-site/src/components/site-hub/style.scss index 90a16616c2ac8..a3f85acf3a5c8 100644 --- a/packages/edit-site/src/components/site-hub/style.scss +++ b/packages/edit-site/src/components/site-hub/style.scss @@ -22,7 +22,8 @@ .components-external-link { flex-grow: 0; @include break-mobile() { - display: none; + opacity: 0; + transition: opacity 0.2s ease-in-out; } &:focus { outline: none; @@ -37,6 +38,7 @@ &:hover { .components-external-link { display: inline-block; + opacity: 1; } } } From 03cdd29000ad6c74b64db9761421f99343ef5e63 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 24 May 2023 10:54:47 +1200 Subject: [PATCH 10/14] Update to use button instead of external link --- .../edit-site/src/components/site-hub/index.js | 14 ++++++++------ .../edit-site/src/components/site-hub/style.scss | 8 +++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/site-hub/index.js b/packages/edit-site/src/components/site-hub/index.js index b06426d3210c7..b0ea857d5894d 100644 --- a/packages/edit-site/src/components/site-hub/index.js +++ b/packages/edit-site/src/components/site-hub/index.js @@ -12,8 +12,6 @@ import { __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence, __experimentalHStack as HStack, - ExternalLink, - Tooltip, } from '@wordpress/components'; import { useReducedMotion } from '@wordpress/compose'; import { __ } from '@wordpress/i18n'; @@ -21,7 +19,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; import { store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; import { forwardRef } from '@wordpress/element'; -import { search } from '@wordpress/icons'; +import { search, external } from '@wordpress/icons'; import { privateApis as commandsPrivateApis } from '@wordpress/commands'; /** @@ -156,9 +154,13 @@ const SiteHub = forwardRef( ( props, ref ) => { { decodeEntities( siteTitle ) } - - - +