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.

Sign up for GitHub

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

Template Parts: Add further details to template part panel #52476

Merged
merged 7 commits into from
Aug 1, 2023
+70 −41
Merged

Template Parts: Add further details to template part panel #52476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8066609
Add template part details
jameskoster Jul 10, 2023
eddde51
Simplify
jameskoster Jul 19, 2023
df68100
Use registered template part areas to display area detail
aaronrobertshaw Jul 19, 2023
065ca5c
Clean up customized detail
aaronrobertshaw Jul 20, 2023
0a145e7
Add fallback for orphaned template part
aaronrobertshaw Jul 26, 2023
e6a5063
Sentence case area slug for details
aaronrobertshaw Jul 27, 2023
9770c76
Navigation before details
jameskoster Jul 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
color: $gray-600;
width: 100px;
flex-shrink: 0;
}

.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
Expand Down
110 changes: 69 additions & 41 deletions packages/edit-site/src/components/sidebar-navigation-screen-pattern/use-pattern-details.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
/**
* External dependencies
*/
import { sentenceCase } from 'change-case';

/**
* WordPress dependencies
*/
import { __, sprintf, _x } from '@wordpress/i18n';
import { __, sprintf } from '@wordpress/i18n';
import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { Icon } from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -28,6 +33,11 @@ export default function usePatternDetails( postType, postId ) {
postType,
postId
);
const templatePartAreas = useSelect(
( select ) =>
select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
[]
);
const currentTheme = useSelect(
( select ) => select( coreStore ).getCurrentTheme(),
[]
Expand All @@ -36,56 +46,24 @@ export default function usePatternDetails( postType, postId ) {
const isAddedByActiveTheme =
addedBy.type === 'theme' && record.theme === currentTheme?.stylesheet;
const title = getTitle();
let descriptionText = getDescription();
let description = getDescription();

if ( ! descriptionText && addedBy.text ) {
descriptionText = sprintf(
if ( ! description && addedBy.text ) {
description = sprintf(
// translators: %s: pattern title e.g: "Header".
__( 'This is the %s pattern.' ),
getTitle()
);
}

if ( ! descriptionText && postType === 'wp_block' && record?.title ) {
descriptionText = sprintf(
if ( ! description && postType === 'wp_block' && record?.title ) {
description = sprintf(
// translators: %s: user created pattern title e.g. "Footer".
__( 'This is the %s pattern.' ),
record.title
);
}

const description = (
<>
{ descriptionText }

{ addedBy.text && ! isAddedByActiveTheme && (
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description">
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author-icon">
{ addedBy.imageUrl ? (
<img
src={ addedBy.imageUrl }
alt=""
width="24"
height="24"
/>
) : (
<Icon icon={ addedBy.icon } />
) }
</span>
{ addedBy.text }
</span>

{ addedBy.isCustomized && (
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
{ _x( '(Customized)', 'pattern' ) }
</span>
) }
</span>
) }
</>
);

const footer = !! record?.modified ? (
<SidebarNavigationScreenDetailsFooter
lastModifiedDateTime={ record.modified }
Expand All @@ -94,7 +72,7 @@ export default function usePatternDetails( postType, postId ) {

const details = [];

if ( postType === 'wp_block' ) {
if ( postType === 'wp_block' || 'wp_template_part' ) {
details.push( {
label: __( 'Syncing' ),
value:
Expand All @@ -104,8 +82,59 @@ export default function usePatternDetails( postType, postId ) {
} );
}

if ( postType === 'wp_template_part' ) {
const templatePartArea = templatePartAreas.find(
( area ) => area.area === record.area
);

let areaDetailValue = templatePartArea?.label;

if ( ! areaDetailValue ) {
areaDetailValue = record.area
? sprintf(
// translators: %s: Sentenced cased template part area e.g: "My custom area".
__( '%s (removed)' ),
sentenceCase( record.area )
)
: __( 'None' );
}

details.push( { label: __( 'Area' ), value: areaDetailValue } );
}

if (
postType === 'wp_template_part' &&
addedBy.text &&
! isAddedByActiveTheme
) {
details.push( {
label: __( 'Added by' ),
value: (
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-author">
{ addedBy.text }
</span>
),
} );
}

if (
postType === 'wp_template_part' &&
addedBy.text &&
( record.origin === 'plugin' || record.has_theme_file === true )
) {
details.push( {
label: __( 'Customized' ),
value: (
<span className="edit-site-sidebar-navigation-screen-pattern__added-by-description-customized">
{ addedBy.isCustomized ? __( 'Yes' ) : __( 'No' ) }
</span>
),
} );
}

const content = (
<>
{ useNavigationMenuContent( postType, postId ) }
{ !! details.length && (
<SidebarNavigationScreenDetailsPanel
spacing={ 5 }
Expand All @@ -123,7 +152,6 @@ export default function usePatternDetails( postType, postId ) {
) ) }
</SidebarNavigationScreenDetailsPanel>
) }
{ useNavigationMenuContent( postType, postId ) }
</>
);

Expand Down