Skip to content

Commit

Permalink
Template inspector: Surface related patterns (#55091)
Browse files Browse the repository at this point in the history 
[7bc5ee8707] template-panel/index rebase
[4d47f77146] Make titles tooltips (+8 squashed commits)
Squashed commits:
[3488f2f] Layout tweaks
[f450cd5] remove CSS
[b3990a7] remove unused file
[3bd79a7] update comment
[e07cd80] Add comments
[aaae875] Let users select a pattern
[4aa4272] fetch patterns not template parts
[3f3da4b] Add template parts to template parts (whoops)

* Make things panel open by default for template parts

---------

Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: glendaviesnz <glendaviesnz@git.wordpress.org>
Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: SaxonF <saxonafletcher@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
  • Loading branch information
@scruffian @jorgefilipecosta
@carolinan @draganescu @annezazu @richtabor @oandregal @mtias @jameskoster
15 people authored Feb 20, 2024
1 parent 9ce80a0 commit a016d82
Show file tree
Hide file tree
Showing 5 changed files with 114 additions and 157 deletions.
59 changes: 35 additions & 24 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/hooks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,14 @@ function injectThemeAttributeInBlockTemplateContent(
return block;
}

function preparePatterns( patterns, template, currentThemeStylesheet ) {
/**
* Filter all patterns and return only the ones that are compatible with the current template.
*
* @param {Array} patterns An array of patterns.
* @param {Object} template The current template.
* @return {Array} Array of patterns that are compatible with the current template.
*/
function filterPatterns( patterns, template ) {
// Filter out duplicates.
const filterOutDuplicatesByName = ( currentItem, index, items ) =>
index === items.findIndex( ( item ) => currentItem.name === item.name );
Expand All @@ -45,30 +52,33 @@ function preparePatterns( patterns, template, currentThemeStylesheet ) {
const filterOutExcludedPatternSources = ( pattern ) =>
! EXCLUDED_PATTERN_SOURCES.includes( pattern.source );

// Filter only the patterns that are compatible with the current template.
// Looks for patterns that have the same template type as the current template,
// or have a block type that matches the current template area.
const filterCompatiblePatterns = ( pattern ) =>
pattern.templateTypes?.includes( template.slug );
pattern.templateTypes?.includes( template.slug ) ||
pattern.blockTypes?.includes( 'core/template-part/' + template.area );

return patterns
.filter(
( pattern, index, items ) =>
filterOutExcludedPatternSources( pattern ) &&
filterOutDuplicatesByName( pattern, index, items ) &&
filterCompatiblePatterns( pattern )
)
.map( ( pattern ) => ( {
...pattern,
keywords: pattern.keywords || [],
type: PATTERN_TYPES.theme,
blocks: parse( pattern.content, {
__unstableSkipMigrationLogs: true,
} ).map( ( block ) =>
injectThemeAttributeInBlockTemplateContent(
block,
currentThemeStylesheet
)
),
} ) );
return patterns.filter(
filterOutDuplicatesByName &&
filterOutExcludedPatternSources &&
filterCompatiblePatterns
);
}

function preparePatterns( patterns, template, currentThemeStylesheet ) {
return patterns.map( ( pattern ) => ( {
...pattern,
keywords: pattern.keywords || [],
type: PATTERN_TYPES.theme,
blocks: parse( pattern.content, {
__unstableSkipMigrationLogs: true,
} ).map( ( block ) =>
injectThemeAttributeInBlockTemplateContent(
block,
currentThemeStylesheet
)
),
} ) );
}

export function useAvailablePatterns( template ) {
Expand All @@ -92,8 +102,9 @@ export function useAvailablePatterns( template ) {
...( blockPatterns || [] ),
...( restBlockPatterns || [] ),
];
const filteredPatterns = filterPatterns( mergedPatterns, template );
return preparePatterns(
mergedPatterns,
filteredPatterns,
template,
currentThemeStylesheet
);
Expand Down
91 changes: 73 additions & 18 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { PanelBody } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { PanelBody, PanelRow } from '@wordpress/components';
import {
PageAttributesPanel,
PostDiscussionPanel,
Expand All @@ -15,6 +15,10 @@ import {
import { store as coreStore } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
import { navigation, symbol } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { useAsyncList } from '@wordpress/compose';
import { serialize } from '@wordpress/blocks';
import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -23,36 +27,71 @@ import { store as editSiteStore } from '../../../store';
import TemplateActions from './template-actions';
import TemplateAreas from './template-areas';
import SidebarCard from '../sidebar-card';
import { useAvailablePatterns } from './hooks';
import { TEMPLATE_PART_POST_TYPE } from '../../../utils/constants';

const CARD_ICONS = {
wp_block: symbol,
wp_navigation: navigation,
};

function TemplatesList( { availableTemplates, onSelect } ) {
const shownTemplates = useAsyncList( availableTemplates );
if ( ! availableTemplates || availableTemplates?.length < 2 ) {
return null;
}

return (
<BlockPatternsList
label={ __( 'Templates' ) }
blockPatterns={ availableTemplates }
shownPatterns={ shownTemplates }
onClickPattern={ onSelect }
showTitlesAsTooltip={ true }
/>
);
}

export default function TemplatePanel() {
const { title, description, icon, record } = useSelect( ( select ) => {
const { getEditedPostType, getEditedPostId } = select( editSiteStore );
const { getEditedEntityRecord } = select( coreStore );
const { __experimentalGetTemplateInfo: getTemplateInfo } =
select( editorStore );
const { title, description, icon, record, postType, postId } = useSelect(
( select ) => {
const { getEditedPostType, getEditedPostId } =
select( editSiteStore );
const { getEditedEntityRecord } = select( coreStore );
const { __experimentalGetTemplateInfo: getTemplateInfo } =
select( editorStore );

const type = getEditedPostType();
const _postId = getEditedPostId();
const _record = getEditedEntityRecord( 'postType', type, _postId );
const info = getTemplateInfo( _record );

const type = getEditedPostType();
const postId = getEditedPostId();
const _record = getEditedEntityRecord( 'postType', type, postId );
const info = getTemplateInfo( _record );
return {
title: info.title,
description: info.description,
icon: info.icon,
record: _record,
postType: type,
postId: _postId,
};
},
[]
);

return {
title: info.title,
description: info.description,
icon: info.icon,
record: _record,
};
}, [] );
const availablePatterns = useAvailablePatterns( record );
const { editEntityRecord } = useDispatch( coreStore );

if ( ! title && ! description ) {
return null;
}

const onTemplateSelect = async ( selectedTemplate ) => {
await editEntityRecord( 'postType', postType, postId, {
blocks: selectedTemplate.blocks,
content: serialize( selectedTemplate.blocks ),
} );
};

return (
<>
<PanelBody>
Expand All @@ -66,6 +105,22 @@ export default function TemplatePanel() {
<TemplateAreas />
</SidebarCard>
</PanelBody>
<PanelBody
title={ __( 'Transform into:' ) }
initialOpen={ postType === TEMPLATE_PART_POST_TYPE }
>
<PanelRow>
<p>
{ __(
'Choose a predefined pattern to switch up the look of your template.' // TODO - make this dynamic?
) }
</p>
</PanelRow>
<TemplatesList
availableTemplates={ availablePatterns }
onSelect={ onTemplateSelect }
/>
</PanelBody>
<PostLastRevisionPanel />
<PostTaxonomiesPanel />
<PostFeaturedImagePanel />
Expand Down
89 changes: 0 additions & 89 deletions ...ages/edit-site/src/components/sidebar-edit-mode/template-panel/replace-template-button.js
View file

This file was deleted.

19 changes: 5 additions & 14 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,20 +34,11 @@ h3.edit-site-template-card__template-areas-title {
margin: 0 0 $grid-unit-10;
}


.edit-site-template-panel__replace-template-modal {
z-index: z-index(".edit-site-template-panel__replace-template-modal");
.edit-site-template-card__templates-list {
margin-top: $grid-unit-20;
}

.edit-site-template-panel__replace-template-modal__content {
column-count: 2;
column-gap: $grid-unit-30;

@include break-medium() {
column-count: 3;
}

@include break-wide() {
column-count: 4;
}
.edit-site-template-panel .block-editor-block-preview__container {
border-radius: 2px;
box-shadow: none;
}
13 changes: 1 addition & 12 deletions packages/edit-site/src/components/sidebar-edit-mode/template-panel/template-actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,12 @@ import { moreVertical } from '@wordpress/icons';
*/
import { store as editSiteStore } from '../../../store';
import isTemplateRevertable from '../../../utils/is-template-revertable';
import ReplaceTemplateButton from './replace-template-button';
import { useAvailablePatterns } from './hooks';

export default function Actions( { template } ) {
const availablePatterns = useAvailablePatterns( template );
const { revertTemplate } = useDispatch( editSiteStore );
const isRevertable = isTemplateRevertable( template );

if (
! isRevertable &&
( ! availablePatterns.length || availablePatterns.length < 1 )
) {
if ( ! isRevertable ) {
return null;
}

Expand All @@ -48,11 +42,6 @@ export default function Actions( { template } ) {
{ __( 'Clear customizations' ) }
</MenuItem>
) }
<ReplaceTemplateButton
availableTemplates={ availablePatterns }
template={ template }
onClick={ onClose }
/>
</MenuGroup>
) }
</DropdownMenu>
Expand Down

0 comments on commit a016d82

Please sign in to comment.