Skip to content

Commit

Permalink
Site Editor: Use server definition for the Template Areas (#37215)
Browse files Browse the repository at this point in the history
* Site Editor: Use server definition for the Template Areas
* Simplify
  • Loading branch information
Mamaduka authored and noisysocks committed Dec 13, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 9b35177 commit 12b5bea
Showing 3 changed files with 31 additions and 20 deletions.
Original file line number Diff line number Diff line change
@@ -6,27 +6,39 @@ import {
Button,
__experimentalHeading as Heading,
} from '@wordpress/components';
import { getTemplatePartIcon } from '@wordpress/editor';
import { store as editorStore } from '@wordpress/editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';

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

function TemplateAreaItem( { area, clientId } ) {
const { selectBlock, toggleBlockHighlight } = useDispatch(
blockEditorStore
);
const templatePartArea = useSelect(
( select ) => {
const defaultAreas = select(
editorStore
).__experimentalGetDefaultTemplatePartAreas();

return defaultAreas.find(
( defaultArea ) => defaultArea.area === area
);
},
[ area ]
);

const highlightBlock = () => toggleBlockHighlight( clientId, true );
const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );

return (
<Button
className="edit-site-template-card__template-areas-item"
icon={ getTemplatePartIcon( area ) }
icon={ templatePartArea?.icon }
onMouseOver={ highlightBlock }
onMouseLeave={ cancelHighlightBlock }
onFocus={ highlightBlock }
@@ -35,7 +47,7 @@ function TemplateAreaItem( { area, clientId } ) {
selectBlock( clientId );
} }
>
{ TEMPLATE_PART_AREA_TO_NAME[ area ] }
{ templatePartArea?.label }
</Button>
);
}
Original file line number Diff line number Diff line change
@@ -4,15 +4,14 @@
import { sprintf, __ } from '@wordpress/i18n';
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { getTemplatePartIcon } from '@wordpress/editor';
import { store as editorStore } from '@wordpress/editor';
import { store as blockEditorStore } from '@wordpress/block-editor';
import { moreVertical } from '@wordpress/icons';

/**
* Internal dependencies
*/
import { store as editSiteStore } from '../../store';
import { TEMPLATE_PART_AREA_TO_NAME } from '../../store/constants';
import isTemplateRevertable from '../../utils/is-template-revertable';
import { useLink } from '../routes/link';

@@ -72,6 +71,18 @@ function TemplatePartItem( {
const { selectBlock, toggleBlockHighlight } = useDispatch(
blockEditorStore
);
const templatePartArea = useSelect(
( select ) => {
const defaultAreas = select(
editorStore
).__experimentalGetDefaultTemplatePartAreas();

return defaultAreas.find(
( defaultArea ) => defaultArea.area === templatePart.area
);
},
[ templatePart.area ]
);
const highlightBlock = () => toggleBlockHighlight( clientId, true );
const cancelHighlightBlock = () => toggleBlockHighlight( clientId, false );

@@ -82,7 +93,7 @@ function TemplatePartItem( {
>
<MenuItem
role="button"
icon={ getTemplatePartIcon( templatePart.area ) }
icon={ templatePartArea?.icon }
iconPosition="left"
onClick={ () => {
selectBlock( clientId );
@@ -92,7 +103,7 @@ function TemplatePartItem( {
onFocus={ highlightBlock }
onBlur={ cancelHighlightBlock }
>
{ TEMPLATE_PART_AREA_TO_NAME[ templatePart.area ] }
{ templatePartArea?.label }
</MenuItem>

<DropdownMenu
12 changes: 0 additions & 12 deletions packages/edit-site/src/store/constants.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';

/**
* The identifier for the data store.
*
@@ -14,10 +9,3 @@ export const TEMPLATE_PART_AREA_HEADER = 'header';
export const TEMPLATE_PART_AREA_FOOTER = 'footer';
export const TEMPLATE_PART_AREA_SIDEBAR = 'sidebar';
export const TEMPLATE_PART_AREA_GENERAL = 'uncategorized';

export const TEMPLATE_PART_AREA_TO_NAME = {
[ TEMPLATE_PART_AREA_HEADER ]: __( 'Header' ),
[ TEMPLATE_PART_AREA_FOOTER ]: __( 'Footer' ),
[ TEMPLATE_PART_AREA_SIDEBAR ]: __( 'Sidebar' ),
[ TEMPLATE_PART_AREA_GENERAL ]: __( 'General' ),
};

0 comments on commit 12b5bea

Please sign in to comment.