Skip to content

Commit

Permalink
Add the template title and type to the site hub
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad committed Dec 22, 2022
1 parent be0def0 commit cc9f480
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 125 deletions.
37 changes: 37 additions & 0 deletions packages/edit-site/src/components/edited-entity-title/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
import { decodeEntities } from '@wordpress/html-entities';

/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../store';

export default function useEditedEntityRecord() {
const { record, title, 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 {
record: _record,
title: getTemplateInfo( _record ).title,
isLoaded: _isLoaded,
};
}, [] );

return {
isLoaded,
record,
getTitle: () => ( title ? decodeEntities( title ) : null ),
};
}
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 '../../edited-entity-title';

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
92 changes: 13 additions & 79 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,54 +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
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
9 changes: 0 additions & 9 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 @@ -51,10 +46,6 @@ $hub-height: $grid-unit-20 * 2 + $button-size;
@include break-small {
width: calc(#{$nav-sidebar-width} - #{$canvas-padding * 2});
}

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

.edit-site-layout__header {
Expand Down

1 comment on commit cc9f480

@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/3757045293
📝 Reported issues:

Please sign in to comment.