Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Site: editor: Add view site link to site editor nav #50420

Merged
merged 14 commits into from
May 28, 2023
Merged

Site: editor: Add view site link to site editor nav #50420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
be6c475
Add view site link to site editor nav
glendaviesnz May 10, 2023
b531dc2
Move link from icon to site title
glendaviesnz May 10, 2023
ec88366
add site view link back
glendaviesnz May 10, 2023
373b7ad
only show underline on hover
glendaviesnz May 11, 2023
9cd6fc7
Switch back to an icon but on hover only
glendaviesnz May 16, 2023
01bc808
Add always view on small screens
glendaviesnz May 16, 2023
b7e4088
Always display on mobile
glendaviesnz May 16, 2023
0a19e1a
revert icon to default 24px
glendaviesnz May 17, 2023
e10c007
Add fade in transition
glendaviesnz May 19, 2023
03cdd29
Update to use button instead of external link
glendaviesnz May 23, 2023
b51d0ca
Show icon when hub content areas focused
glendaviesnz May 23, 2023
aacac08
remove redundant display property
glendaviesnz May 23, 2023
82a7024
Move hover style up one level and remove gap
glendaviesnz May 24, 2023
11f798b
Add aria label to warn of screen readers of opening in new tab
glendaviesnz May 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 20 additions & 3 deletions packages/edit-site/src/components/site-hub/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,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';

/**
Expand All @@ -34,15 +34,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 );
Expand Down Expand Up @@ -87,7 +92,11 @@ const SiteHub = forwardRef( ( props, ref ) => {
ease: 'easeOut',
} }
>
<HStack justify="space-between" alignment="center">
<HStack
justify="space-between"
alignment="center"
className="edit-site-site-hub__container"
>
<HStack
justify="flex-start"
className="edit-site-site-hub__text-content"
Expand Down Expand Up @@ -149,6 +158,14 @@ const SiteHub = forwardRef( ( props, ref ) => {
{ decodeEntities( siteTitle ) }
</motion.div>
</AnimatePresence>
<Button
href={ homeUrl }
target="_blank"
label={ __( 'View site' ) }
aria-label={ __( 'View site (opens in a new tab)' ) }
icon={ external }
className="edit-site-site-hub__site-view-link"
/>
</HStack>
{ window?.__experimentalEnableCommandCenter &&
canvasMode === 'view' && (
Expand Down
26 changes: 26 additions & 0 deletions packages/edit-site/src/components/site-hub/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@
align-items: center;
justify-content: space-between;
gap: $grid-unit-10;

.edit-site-site-hub__container {
gap: 0;
}

.edit-site-site-hub__site-view-link {
flex-grow: 0;
@include break-mobile() {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
&:focus {
outline: none;
box-shadow: none;
opacity: 1;
}
svg {
fill: $white;
}
}
&:hover {
.edit-site-site-hub__site-view-link {
opacity: 1;
}
}
}

.edit-site-site-hub__post-type {
Expand All @@ -29,6 +54,7 @@

.edit-site-site-hub__site-title {
margin-left: $grid-unit-05;
flex-grow: 1;
}

.edit-site-site-hub_toggle-command-center {
Expand Down