-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Site editor sidebar: home template details (#51223)
* Initial commit: - refactoring page details so that the styles and components can be used in templates - getting home template details in order * - displaying template areas - refactoring footer to show last modified in template and page details * - bare bones rest controller changes to return modified for `get_item` - linking up template areas * - passing footer class to row * - hooking into settings. * Refactoring input controls layout Tweaking CSS accordingly * Reverted prefix change to file that was not copied to GB * Removing last modified changes until the templates API supports it. We can reinstate these changes once it's merged (also adding the property to core-data/src/entity-types/wp-template-part.ts) * Showing the details pages for the index template Updating translations for entity types when saving * Fixed new unlock path * updating design of area buttons switching over site title editing to posts page title editing * Updated hover states of area buttons * This commit: - adds a last updated footer (if the modified property is available) - removes all controls and addes details * Don't need these * Reinstate post title and posts per page controls Reinstate allow comments control Abstract last modified footer * Updated copy * Update help text * SidebarNavigationItem instead of button for links to template parts from the home template * Wrap areas in ItemGroup * Remove bottom margin on last detail panel * Spacing * Large inputs * Leave border radius on inputs as 2px for now * Use NumberControl * Remove debounce Use spin custom controls on the number control component Update changelog * Restore since annotation change made in #51362 --------- Co-authored-by: James Koster <james@jameskoster.co.uk>
- Loading branch information
1 parent
c5d2660
commit 7efbf84
Showing
20 changed files
with
487 additions
and
84 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
39 changes: 39 additions & 0 deletions
39
packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | ||
| } ) { | ||
| 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> | ||
| ); | ||
| } |
5 changes: 5 additions & 0 deletions
5
packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
40 changes: 40 additions & 0 deletions
40
packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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, | ||
| }; |
14 changes: 14 additions & 0 deletions
14
.../sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
29 changes: 29 additions & 0 deletions
29
...ts/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
14 changes: 14 additions & 0 deletions
14
.../sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
| ); | ||
| } |
25 changes: 25 additions & 0 deletions
25
packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
7efbf84There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in 7efbf84.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5317672081
📝 Reported issues:
/test/e2e/specs/editor/blocks/image.spec.jsspecs/editor/various/autosave.test.js