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.

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

Site editor sidebar: home template details #51223

Merged
merged 26 commits into from
Jun 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
26 commits
Select commit Hold shift + click to select a range
ffa68fe
Initial commit:
ramonjd Jun 5, 2023
bbdecb2
- displaying template areas
ramonjd Jun 6, 2023
69a7c26
- bare bones rest controller changes to return modified for `get_item`
ramonjd Jun 7, 2023
c869804
- passing footer class to row
ramonjd Jun 7, 2023
d7b7519
- hooking into settings.
ramonjd Jun 7, 2023
d857c7a
Refactoring input controls layout
ramonjd Jun 8, 2023
4859f0e
Reverted prefix change to file that was not copied to GB
ramonjd Jun 8, 2023
bed5420
Removing last modified changes until the templates API supports it.
ramonjd Jun 9, 2023
4970d48
Showing the details pages for the index template
ramonjd Jun 9, 2023
4860c8f
Fixed new unlock path
ramonjd Jun 13, 2023
076d6cb
updating design of area buttons
ramonjd Jun 14, 2023
d0679a7
Updated hover states of area buttons
ramonjd Jun 14, 2023
09601a6
This commit:
ramonjd Jun 15, 2023
6096d07
Don't need these
ramonjd Jun 15, 2023
8b37c3c
Reinstate post title and posts per page controls
ramonjd Jun 16, 2023
374bb50
Updated copy
ramonjd Jun 16, 2023
484e981
Update help text
jameskoster Jun 16, 2023
1316ff9
SidebarNavigationItem instead of button for links to template parts f…
ramonjd Jun 19, 2023
0c8f0b6
Wrap areas in ItemGroup
jameskoster Jun 19, 2023
dfe8f75
Remove bottom margin on last detail panel
jameskoster Jun 19, 2023
424cec1
Spacing
jameskoster Jun 19, 2023
aa2af8e
Large inputs
jameskoster Jun 19, 2023
88787ed
Leave border radius on inputs as 2px for now
jameskoster Jun 19, 2023
90c3d79
Use NumberControl
jameskoster Jun 19, 2023
a7d95ff
Remove debounce
ramonjd Jun 20, 2023
2ade33c
Restore since annotation change made in https://github.com/WordPress/…
ramonjd Jun 20, 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
4 changes: 4 additions & 0 deletions packages/core-data/src/entity-types/wp-template.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,10 @@ declare module './base-entity-records' {
* Whether a template is a custom template.
*/
is_custom: Record< string, string >;
/**
* The date the template was last modified, in the site's timezone.
*/
modified: ContextualField< string, 'view' | 'edit', C >;
}
}
}
Expand Down
3 changes: 3 additions & 0 deletions packages/edit-site/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,9 @@

## Unreleased

### Enhancements
- Site editor sidebar: add home template details and controls [#51223](https://github.com/WordPress/gutenberg/pull/51223).

## 5.12.0 (2023-06-07)

## 5.11.0 (2023-05-24)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { humanTimeDiff } from '@wordpress/date';
import { createInterpolateElement } from '@wordpress/element';

/**
* Internal dependencies
*/
import {
SidebarNavigationScreenDetailsPanelRow,
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';

export default function SidebarNavigationScreenDetailsFooter( {
lastModifiedDateTime,
Copy link
Contributor

Choose a reason for hiding this comment

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

Tiny nit: again not-blocking, but since this is a generic footer component, I was wondering if the check for whether or not to render the last modified row should exist within this component instead?

Just a thought though, and I wouldn't worry about changing it in this PR.

Copy link
Member Author

Choose a reason for hiding this comment

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

Excellent. I'll add it to the imminent follow-up

} ) {
return (
<SidebarNavigationScreenDetailsPanelRow className="edit-site-sidebar-navigation-screen-details-footer">
<SidebarNavigationScreenDetailsPanelLabel>
{ __( 'Last modified' ) }
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ createInterpolateElement(
sprintf(
/* translators: %s: is the relative time when the post was last modified. */
__( '<time>%s</time>' ),
humanTimeDiff( lastModifiedDateTime )
),
{
time: <time dateTime={ lastModifiedDateTime } />,
}
) }
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.edit-site-sidebar-navigation-screen-details-footer {
padding-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
padding-left: $grid-unit-20;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/**
* WordPress dependencies
*/
import {
__experimentalVStack as VStack,
__experimentalHeading as Heading,
} from '@wordpress/components';

/**
* Internal dependencies
*/
import SidebarNavigationScreenDetailsPanelLabel from './sidebar-navigation-screen-details-panel-label';
import SidebarNavigationScreenDetailsPanelRow from './sidebar-navigation-screen-details-panel-row';
import SidebarNavigationScreenDetailsPanelValue from './sidebar-navigation-screen-details-panel-value';

function SidebarNavigationScreenDetailsPanel( { title, children, spacing } ) {
return (
<VStack
className="edit-site-sidebar-navigation-details-screen-panel"
spacing={ spacing }
>
{ title && (
<Heading
className="edit-site-sidebar-navigation-details-screen-panel__heading"
level={ 3 }
>
{ title }
</Heading>
) }
{ children }
</VStack>
);
}

export {
SidebarNavigationScreenDetailsPanel,
SidebarNavigationScreenDetailsPanelRow,
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/
import { __experimentalText as Text } from '@wordpress/components';

export default function SidebarNavigationScreenDetailsPanelLabel( {
children,
} ) {
return (
<Text className="edit-site-sidebar-navigation-details-screen-panel__label">
{ children }
</Text>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __experimentalHStack as HStack } from '@wordpress/components';

export default function SidebarNavigationScreenDetailsPanelRow( {
label,
children,
className,
} ) {
return (
<HStack
key={ label }
spacing={ 5 }
alignment="left"
className={ classnames(
'edit-site-sidebar-navigation-details-screen-panel__row',
className
) }
>
{ children }
</HStack>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/
import { __experimentalText as Text } from '@wordpress/components';

export default function SidebarNavigationScreenDetailsPanelValue( {
children,
} ) {
return (
<Text className="edit-site-sidebar-navigation-details-screen-panel__value">
{ children }
</Text>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
.edit-site-sidebar-navigation-details-screen-panel {
margin-bottom: $grid-unit-30;

&:last-of-type {
margin-bottom: 0;
}

.edit-site-sidebar-navigation-details-screen-panel__heading {
color: $gray-400;
text-transform: uppercase;
font-weight: 500;
font-size: 11px;
padding: 0;
margin-bottom: 0;
}
}

.edit-site-sidebar-navigation-details-screen-panel__label.edit-site-sidebar-navigation-details-screen-panel__label {
color: $gray-600;
width: 100px;
}

.edit-site-sidebar-navigation-details-screen-panel__value.edit-site-sidebar-navigation-details-screen-panel__value {
color: $gray-200;
}
Original file line number Diff line number Diff line change
@@ -1,21 +1,17 @@
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { useDispatch, useSelect } from '@wordpress/data';
import {
__experimentalUseNavigator as useNavigator,
__experimentalVStack as VStack,
ExternalLink,
__experimentalTruncate as Truncate,
__experimentalHStack as HStack,
__experimentalText as Text,
} from '@wordpress/components';
import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
import { decodeEntities } from '@wordpress/html-entities';
import { pencil } from '@wordpress/icons';
import { humanTimeDiff } from '@wordpress/date';
import { createInterpolateElement } from '@wordpress/element';
import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
import { escapeAttribute } from '@wordpress/escape-html';

Expand All @@ -26,9 +22,9 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarButton from '../sidebar-button';
import SidebarNavigationSubtitle from '../sidebar-navigation-subtitle';
import PageDetails from './page-details';
import PageActions from '../page-actions';
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

export default function SidebarNavigationScreenPage() {
const navigator = useNavigator();
Expand Down Expand Up @@ -121,35 +117,14 @@ export default function SidebarNavigationScreenPage() {
{ stripHTML( record.excerpt.rendered ) }
</Truncate>
) }
<SidebarNavigationSubtitle>
{ __( 'Details' ) }
</SidebarNavigationSubtitle>
<PageDetails id={ postId } />
</>
}
footer={
!! record?.modified && (
<HStack
spacing={ 5 }
alignment="left"
className="edit-site-sidebar-navigation-screen-page__details edit-site-sidebar-navigation-screen-page__footer"
>
<Text className="edit-site-sidebar-navigation-screen-page__details-label">
{ __( 'Last modified' ) }
</Text>
<Text className="edit-site-sidebar-navigation-screen-page__details-value">
{ createInterpolateElement(
sprintf(
/* translators: %s: is the relative time when the post was last modified. */
__( '<time>%s</time>' ),
humanTimeDiff( record.modified )
),
{
time: <time dateTime={ record.modified } />,
}
) }
</Text>
</HStack>
<SidebarNavigationScreenDetailsFooter
lastModifiedDateTime={ record.modified }
/>
)
}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,7 @@
* WordPress dependencies
*/
import { __, _x, sprintf } from '@wordpress/i18n';
import {
__experimentalHStack as HStack,
__experimentalText as Text,
__experimentalVStack as VStack,
__experimentalTruncate as Truncate,
} from '@wordpress/components';
import { __experimentalTruncate as Truncate } from '@wordpress/components';
import { count as wordCount } from '@wordpress/wordcount';
import { useSelect } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
Expand All @@ -19,6 +14,12 @@ import { store as coreStore, useEntityRecord } from '@wordpress/core-data';
import StatusLabel from './status-label';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import {
SidebarNavigationScreenDetailsPanel,
SidebarNavigationScreenDetailsPanelRow,
SidebarNavigationScreenDetailsPanelLabel,
SidebarNavigationScreenDetailsPanelValue,
} from '../sidebar-navigation-screen-details-panel';

// Taken from packages/editor/src/components/time-to-read/index.js.
const AVERAGE_READING_RATE = 189;
Expand Down Expand Up @@ -138,26 +139,21 @@ export default function PageDetails( { id } ) {
[ record?.parent ]
);
return (
<VStack spacing={ 5 }>
andrewserong marked this conversation as resolved.
Show resolved Hide resolved
<SidebarNavigationScreenDetailsPanel title={ __( 'Details' ) }>
{ getPageDetails( {
parentTitle,
templateTitle,
...record,
} ).map( ( { label, value } ) => (
<HStack
key={ label }
spacing={ 5 }
alignment="left"
className="edit-site-sidebar-navigation-screen-page__details"
>
<Text className="edit-site-sidebar-navigation-screen-page__details-label">
<SidebarNavigationScreenDetailsPanelRow key={ label }>
<SidebarNavigationScreenDetailsPanelLabel>
{ label }
</Text>
<Text className="edit-site-sidebar-navigation-screen-page__details-value">
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ value }
</Text>
</HStack>
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
) ) }
</VStack>
</SidebarNavigationScreenDetailsPanel>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@

.edit-site-sidebar-navigation-screen-page__excerpt {
font-size: $helptext-font-size;
margin-bottom: $grid-unit-30;
}

.edit-site-sidebar-navigation-screen-page__modified {
Expand Down Expand Up @@ -60,21 +61,3 @@
fill: $alert-green;
}
}

.edit-site-sidebar-navigation-screen-page__footer {
padding-top: $grid-unit-10;
padding-bottom: $grid-unit-10;
padding-left: $grid-unit-20;
}

.edit-site-sidebar-navigation-screen-page__details {
.edit-site-sidebar-navigation-screen-page__details-label {
color: $gray-600;
width: 100px;
}

.edit-site-sidebar-navigation-screen-page__details-value.edit-site-sidebar-navigation-screen-page__details-value {
color: $gray-200;
}
}

Loading