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.

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

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

Merged
merged 14 commits into from
May 28, 2023
Merged
16 changes: 14 additions & 2 deletions packages/edit-site/src/components/site-hub/index.js
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 @@ -149,6 +154,13 @@ const SiteHub = forwardRef( ( props, ref ) => {
{ decodeEntities( siteTitle ) }
</motion.div>
</AnimatePresence>
<Button
href={ homeUrl }
target="_blank"
label={ __( 'View site' ) }
icon={ external }
className="edit-site-site-hub__site-view-link"
/>
</HStack>
{ window?.__experimentalEnableCommandCenter &&
canvasMode === 'view' && (
Expand Down
25 changes: 25 additions & 0 deletions packages/edit-site/src/components/site-hub/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,30 @@
.edit-site-site-hub__text-content {
// Necessary for the ellipsis to work.
overflow: hidden;
.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;
}
svg {
fill: $white;
}
}
&:hover {
.edit-site-site-hub__site-view-link {
opacity: 1;
}
}
&:focus {
.edit-site-site-hub__site-view-link {
opacity: 1;
}
}
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
}

.edit-site-site-hub__title {
Expand All @@ -29,6 +53,7 @@

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

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