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

Jump to bottom

Library: Add sync status to pattern details screen #51954

Merged
merged 1 commit into from
Jun 28, 2023
Merged

Library: Add sync status to pattern details screen #51954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 0 additions & 3 deletions packages/edit-site/src/components/sidebar-navigation-screen-pattern/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import SidebarButton from '../sidebar-button';
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url';
import usePatternDetails from './use-pattern-details';
import useNavigationMenuContent from './use-navigation-menu-content';
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';

Expand All @@ -27,7 +26,6 @@ export default function SidebarNavigationScreenPattern() {
useInitEditedEntityFromURL();

const patternDetails = usePatternDetails( postType, postId );
const content = useNavigationMenuContent( postType, postId );

// The absence of a category type in the query params for template parts
// indicates the user has arrived at the template part via the "manage all"
Expand All @@ -47,7 +45,6 @@ export default function SidebarNavigationScreenPattern() {
/>
}
backPath={ backPath }
content={ content }
{ ...patternDetails }
/>
);
Expand Down
44 changes: 43 additions & 1 deletion 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
Expand Up @@ -11,7 +11,14 @@ import { Icon } from '@wordpress/components';
*/
import { useAddedBy } from '../list/added-by';
import useEditedEntityRecord from '../use-edited-entity-record';
import useNavigationMenuContent from './use-navigation-menu-content';
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';
import {
SidebarNavigationScreenDetailsPanel,
SidebarNavigationScreenDetailsPanelRow,
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';

export default function usePatternDetails( postType, postId ) {
const { getDescription, getTitle, record } = useEditedEntityRecord(
Expand Down Expand Up @@ -82,5 +89,40 @@ export default function usePatternDetails( postType, postId ) {
/>
) : null;

return { title, description, footer };
const details = [];
Copy link
Member

Choose a reason for hiding this comment

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

Curious to know why we're creating this array if there are only gonna be 1 or 0 elements in it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

There will be more details to display soon like author etc.

I was playing around with those and then left them out to limit the scope on the PR to the initial issue. Perhaps I was being a little lazy here. I can tweak this if it is an issue but we'll likely need to change it back as soon as we settle on exactly what extra details are to be shown.


if ( postType === 'wp_block' ) {
details.push( {
label: __( 'Syncing' ),
value:
record.meta?.sync_status === 'unsynced'
? __( 'Not synced' )
: __( 'Fully synced' ),
} );
}

const content = (
<>
{ !! details.length && (
<SidebarNavigationScreenDetailsPanel
spacing={ 5 }
title={ __( 'Details' ) }
>
{ details.map( ( { label, value } ) => (
<SidebarNavigationScreenDetailsPanelRow key={ label }>
<SidebarNavigationScreenDetailsPanelLabel>
{ label }
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ value }
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
) ) }
</SidebarNavigationScreenDetailsPanel>
) }
{ useNavigationMenuContent( postType, postId ) }
Copy link
Member

Choose a reason for hiding this comment

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

Should this convert to a component? I just came across this pattern and feel odd 😅

</>
);

return { title, description, content, footer };
}