Skip to content

Commit

Permalink
Add the template title and type to the site hub (#46736)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Dec 23, 2022
1 parent 2248470 commit 52f3db6
Show file tree
Hide file tree
Showing 9 changed files with 257 additions and 137 deletions.
2 changes: 1 addition & 1 deletion packages/e2e-test-utils-playwright/src/site-editor/toggle-canvas-mode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,5 @@
* @this {import('.').SiteEditor}
*/
export async function enterEditMode() {
await this.page.click( '.edit-site-layout__edit-button' );
await this.page.click( '.edit-site-site-hub__edit-button' );
}
4 changes: 2 additions & 2 deletions packages/e2e-test-utils/src/site-editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,11 +166,11 @@ export async function openPreviousGlobalStylesPanel() {
* Enters edit mode.
*/
export async function enterEditMode() {
const editSiteToggle = await page.$( '.edit-site-layout__edit-button' );
const editSiteToggle = await page.$( '.edit-site-site-hub__edit-button' );
// This check is necessary for the performance tests in old branches
// where the site editor toggle was not implemented yet.
if ( ! editSiteToggle ) {
return;
}
await page.click( '.edit-site-layout__edit-button' );
await page.click( '.edit-site-site-hub__edit-button' );
}
55 changes: 18 additions & 37 deletions packages/edit-site/src/components/header-edit-mode/document-actions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,16 +25,13 @@ import {
useBlockDisplayInformation,
BlockIcon,
} from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
import { store as preferencesStore } from '@wordpress/preferences';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import TemplateDetails from '../../template-details';
import { store as editSiteStore } from '../../../store';
import useEditedEntityRecord from '../../use-edited-entity-record';

function getBlockDisplayText( block ) {
if ( block ) {
Expand Down Expand Up @@ -70,36 +67,15 @@ function useSecondaryText() {
}

export default function DocumentActions() {
const { showIconLabels, entityTitle, template, templateType, isLoaded } =
useSelect( ( select ) => {
const { getEditedPostType, getEditedPostId } =
select( editSiteStore );
const { getEditedEntityRecord } = select( coreStore );
const { __experimentalGetTemplateInfo: getTemplateInfo } =
select( editorStore );
const postType = getEditedPostType();
const postId = getEditedPostId();
const record = getEditedEntityRecord(
'postType',
postType,
postId
);
const _isLoaded = !! postId;

return {
showIconLabels: select( preferencesStore ).get(
'core/edit-site',
'showIconLabels'
),
entityTitle: getTemplateInfo( record ).title,
isLoaded: _isLoaded,
template: record,
templateType: postType,
};
}, [] );

const entityLabel =
templateType === 'wp_template_part' ? 'template part' : 'template';
const showIconLabels = useSelect(
( select ) =>
select( preferencesStore ).get(
'core/edit-site',
'showIconLabels'
),
[]
);
const { isLoaded, record, getTitle } = useEditedEntityRecord();
const { label, icon } = useSecondaryText();

// Use internal state instead of a ref to make sure that the component
Expand All @@ -126,14 +102,19 @@ export default function DocumentActions() {
}

// Return feedback that the template does not seem to exist.
if ( ! entityTitle ) {
if ( ! record ) {
return (
<div className="edit-site-document-actions">
{ __( 'Template not found' ) }
</div>
);
}

const entityLabel =
record.type === 'wp_template_part'
? __( 'template part' )
: __( 'template' );

return (
<div
className={ classnames( 'edit-site-document-actions', {
Expand All @@ -156,7 +137,7 @@ export default function DocumentActions() {
entityLabel
) }
</VisuallyHidden>
{ decodeEntities( entityTitle ) }
{ getTitle() }
</Text>
<div className="edit-site-document-actions__secondary-item">
<BlockIcon icon={ icon } showColors />
Expand Down Expand Up @@ -186,7 +167,7 @@ export default function DocumentActions() {
contentClassName="edit-site-document-actions__info-dropdown"
renderContent={ ( { onClose } ) => (
<TemplateDetails
template={ template }
template={ record }
onClose={ onClose }
/>
) }
Expand Down
93 changes: 13 additions & 80 deletions packages/edit-site/src/components/layout/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import classnames from 'classnames';
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { useSelect } from '@wordpress/data';
import {
Button,
__unstableMotion as motion,
__unstableAnimatePresence as AnimatePresence,
__unstableUseNavigateRegions as useNavigateRegions,
Expand All @@ -19,7 +18,6 @@ import {
useResizeObserver,
} from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { useState, useEffect } from '@wordpress/element';
import { NavigableRegion } from '@wordpress/interface';
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
Expand All @@ -35,11 +33,10 @@ import { store as editSiteStore } from '../../store';
import { useLocation } from '../routes';
import getIsListPage from '../../utils/get-is-list-page';
import Header from '../header-edit-mode';
import SiteIcon from '../site-icon';
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
import SiteHub from '../site-hub';

const ANIMATION_DURATION = 0.5;
const HUB_ANIMATION_DURATION = 0.3;

export default function Layout( { onError } ) {
// This ensures the edited entity id and type are initialized properly.
Expand All @@ -48,30 +45,28 @@ export default function Layout( { onError } ) {
const { params } = useLocation();
const isListPage = getIsListPage( params );
const isEditorPage = ! isListPage;
const { canvasMode, dashboardLink, previousShortcut, nextShortcut } =
useSelect( ( select ) => {
const { canvasMode, previousShortcut, nextShortcut } = useSelect(
( select ) => {
const { getAllShortcutKeyCombinations } = select(
keyboardShortcutsStore
);
const { __unstableGetCanvasMode, getSettings } =
select( editSiteStore );
const { __unstableGetCanvasMode } = select( editSiteStore );
return {
canvasMode: __unstableGetCanvasMode(),
dashboardLink: getSettings().__experimentalDashboardLink,
previousShortcut: getAllShortcutKeyCombinations(
'core/edit-site/previous-region'
),
nextShortcut: getAllShortcutKeyCombinations(
'core/edit-site/next-region'
),
};
}, [] );
},
[]
);
const navigateRegionsProps = useNavigateRegions( {
previous: previousShortcut,
next: nextShortcut,
} );
const { __unstableSetCanvasMode } = useDispatch( editSiteStore );
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const disableMotion = useReducedMotion();
const isMobileViewport = useViewportMatch( 'medium', '<' );
const [ isMobileCanvasVisible, setIsMobileCanvasVisible ] =
Expand All @@ -84,12 +79,7 @@ export default function Layout( { onError } ) {
( isMobileViewport && isMobileCanvasVisible ) || ! isMobileViewport;
const showFrame =
! isEditorPage || ( canvasMode === 'view' && ! isMobileViewport );
const showEditButton =
( isEditorPage && canvasMode === 'view' && ! isMobileViewport ) ||
( isMobileViewport && canvasMode === 'view' && isMobileCanvasVisible );
const isBackToDashboardButton =
( ! isMobileViewport && canvasMode === 'view' ) ||
( isMobileViewport && ! isMobileCanvasVisible );

const isFullCanvas =
( isEditorPage && canvasMode === 'edit' && ! isMobileViewport ) ||
isMobileCanvasVisible;
Expand All @@ -105,19 +95,6 @@ export default function Layout( { onError } ) {
setIsMobileCanvasVisible( true );
}
}, [ canvasMode, isMobileViewport ] );
const siteIconButtonProps = isBackToDashboardButton
? {
href: dashboardLink || 'index.php',
'aria-label': __( 'Go back to the dashboard' ),
}
: {
label: __( 'Open Navigation Sidebar' ),
onClick: () => {
clearSelectedBlock();
setIsMobileCanvasVisible( false );
__unstableSetCanvasMode( 'view' );
},
};

return (
<>
Expand All @@ -134,55 +111,11 @@ export default function Layout( { onError } ) {
}
) }
>
<motion.div
<SiteHub
className="edit-site-layout__hub"
layout
transition={ {
type: 'tween',
duration: disableMotion ? 0 : HUB_ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<motion.div
className="edit-site-layout__view-mode-toggle-container"
layout
transition={ {
type: 'tween',
duration: disableMotion
? 0
: HUB_ANIMATION_DURATION,
ease: 'easeOut',
} }
>
<Button
{ ...siteIconButtonProps }
className="edit-site-layout__view-mode-toggle"
>
<SiteIcon className="edit-site-layout__view-mode-toggle-icon" />
</Button>
</motion.div>
{ showEditButton && (
<Button
className="edit-site-layout__edit-button"
label={ __( 'Open the editor' ) }
onClick={ () => {
__unstableSetCanvasMode( 'edit' );
} }
variant="primary"
>
{ __( 'Edit' ) }
</Button>
) }

{ isMobileViewport && ! isMobileCanvasVisible && (
<Button
onClick={ () => setIsMobileCanvasVisible( true ) }
variant="primary"
>
{ __( 'View Editor' ) }
</Button>
) }
</motion.div>
isMobileCanvasVisible={ isMobileCanvasVisible }
setIsMobileCanvasVisible={ setIsMobileCanvasVisible }
/>

<AnimatePresence initial={ false }>
{ isEditorPage &&
Expand Down
21 changes: 4 additions & 17 deletions packages/edit-site/src/components/layout/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
border-radius: $radius-block-ui * 4;
box-shadow: $shadow-modal;

display: flex;
align-items: center;
justify-content: space-between;
gap: $grid-unit-10;

.edit-site-layout.is-full-canvas & {
top: 0;
left: 0;
Expand All @@ -37,7 +32,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
width: 100vw;
box-shadow: none;

@include break-small {
@include break-medium {
width: auto;
padding-right: 0;
}
Expand All @@ -48,13 +43,9 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
padding-right: 0;
}

@include break-small {
@include break-medium {
width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
}

.components-button {
height: $grid-unit-40;
}
}

.edit-site-layout__header {
Expand Down Expand Up @@ -83,7 +74,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
width: 100vw;
@include custom-scrollbars-on-hover;

@include break-small {
@include break-medium {
width: $nav-sidebar-width;
}

Expand Down Expand Up @@ -114,7 +105,7 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
color: $gray-900;
background: $white;
}
@include break-small {
@include break-medium {
top: $canvas-padding;
bottom: $canvas-padding;
width: calc(100% - #{$canvas-padding});
Expand Down Expand Up @@ -144,10 +135,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
min-height: 100% !important;
}

.edit-site-layout__view-mode-toggle-container {
height: $header-height;
width: $header-height;
}
.edit-site-layout__view-mode-toggle.components-button {
position: relative;
color: $white;
Expand Down
Loading

1 comment on commit 52f3db6

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3766476458
📝 Reported issues:

Please sign in to comment.