diff --git a/packages/core-data/src/entity-types/wp-template.ts b/packages/core-data/src/entity-types/wp-template.ts index 544476bbb7f36e..ac6db09035f193 100644 --- a/packages/core-data/src/entity-types/wp-template.ts +++ b/packages/core-data/src/entity-types/wp-template.ts @@ -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 >; } } } diff --git a/packages/edit-site/CHANGELOG.md b/packages/edit-site/CHANGELOG.md index 0b81a94ee6b1ec..808554a1c5b1ee 100644 --- a/packages/edit-site/CHANGELOG.md +++ b/packages/edit-site/CHANGELOG.md @@ -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) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js new file mode 100644 index 00000000000000..4b5c4fb7de8808 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js @@ -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 ( + + + { __( 'Last modified' ) } + + + { createInterpolateElement( + sprintf( + /* translators: %s: is the relative time when the post was last modified. */ + __( '' ), + humanTimeDiff( lastModifiedDateTime ) + ), + { + time: + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss new file mode 100644 index 00000000000000..fcd20d64696eb5 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-footer/style.scss @@ -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; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js new file mode 100644 index 00000000000000..f95ec59b4d80e9 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/index.js @@ -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 ( + + { title && ( + + { title } + + ) } + { children } + + ); +} + +export { + SidebarNavigationScreenDetailsPanel, + SidebarNavigationScreenDetailsPanelRow, + SidebarNavigationScreenDetailsPanelLabel, + SidebarNavigationScreenDetailsPanelValue, +}; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js new file mode 100644 index 00000000000000..157eecd557519c --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-label.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { __experimentalText as Text } from '@wordpress/components'; + +export default function SidebarNavigationScreenDetailsPanelLabel( { + children, +} ) { + return ( + + { children } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js new file mode 100644 index 00000000000000..541e654b0933ed --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-row.js @@ -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 ( + + { children } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js new file mode 100644 index 00000000000000..80e8ba8cf1d538 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/sidebar-navigation-screen-details-panel-value.js @@ -0,0 +1,14 @@ +/** + * WordPress dependencies + */ +import { __experimentalText as Text } from '@wordpress/components'; + +export default function SidebarNavigationScreenDetailsPanelValue( { + children, +} ) { + return ( + + { children } + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss new file mode 100644 index 00000000000000..e94894c0d6ea39 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-details-panel/style.scss @@ -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; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js index 536da766b668c9..55ca9b646f423b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/index.js @@ -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'; @@ -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(); @@ -121,35 +117,14 @@ export default function SidebarNavigationScreenPage() { { stripHTML( record.excerpt.rendered ) } ) } - - { __( 'Details' ) } - } footer={ !! record?.modified && ( - - - { __( 'Last modified' ) } - - - { createInterpolateElement( - sprintf( - /* translators: %s: is the relative time when the post was last modified. */ - __( '' ), - humanTimeDiff( record.modified ) - ), - { - time: - + ) } /> diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js index 290ae4907f9a9e..56a94dc64a2a97 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/page-details.js @@ -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'; @@ -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; @@ -138,26 +139,21 @@ export default function PageDetails( { id } ) { [ record?.parent ] ); return ( - + { getPageDetails( { parentTitle, templateTitle, ...record, } ).map( ( { label, value } ) => ( - - + + { label } - - + + { value } - - + + ) ) } - + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss index c58e9f09392465..66efe31726e8b7 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-page/style.scss @@ -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 { @@ -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; - } -} - diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js new file mode 100644 index 00000000000000..51c3d7e5f78e9a --- /dev/null +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/home-template-details.js @@ -0,0 +1,223 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { debounce } from '@wordpress/compose'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { + CheckboxControl, + __experimentalUseNavigator as useNavigator, + __experimentalInputControl as InputControl, + __experimentalNumberControl as NumberControl, + __experimentalTruncate as Truncate, + __experimentalItemGroup as ItemGroup, +} from '@wordpress/components'; +import { header, footer, layout } from '@wordpress/icons'; +import { useMemo, useState, useEffect } from '@wordpress/element'; +import { decodeEntities } from '@wordpress/html-entities'; + +/** + * Internal dependencies + */ +import { + SidebarNavigationScreenDetailsPanel, + SidebarNavigationScreenDetailsPanelRow, +} from '../sidebar-navigation-screen-details-panel'; +import { unlock } from '../../lock-unlock'; +import { store as editSiteStore } from '../../store'; +import { useLink } from '../routes/link'; +import SidebarNavigationItem from '../sidebar-navigation-item'; + +const EMPTY_OBJECT = {}; + +function TemplateAreaButton( { postId, icon, title } ) { + const icons = { + header, + footer, + }; + const linkInfo = useLink( { + postType: 'wp_template_part', + postId, + } ); + + return ( + + + { decodeEntities( title ) } + + + ); +} + +export default function HomeTemplateDetails() { + const navigator = useNavigator(); + const { + params: { postType, postId }, + } = navigator; + const { editEntityRecord } = useDispatch( coreStore ); + + const { + allowCommentsOnNewPosts, + templatePartAreas, + postsPerPage, + postsPageTitle, + postsPageId, + templateRecord, + } = useSelect( + ( select ) => { + const { getEntityRecord } = select( coreStore ); + const siteSettings = getEntityRecord( 'root', 'site' ); + const { getSettings } = unlock( select( editSiteStore ) ); + const siteEditorSettings = getSettings(); + const _templateRecord = + select( coreStore ).getEditedEntityRecord( + 'postType', + postType, + postId + ) || EMPTY_OBJECT; + const _postsPageRecord = siteSettings?.page_for_posts + ? select( coreStore ).getEntityRecord( + 'postType', + 'page', + siteSettings?.page_for_posts + ) + : EMPTY_OBJECT; + + return { + templateRecord: _templateRecord, + allowCommentsOnNewPosts: + siteSettings?.default_comment_status === 'open', + postsPageTitle: _postsPageRecord?.title?.rendered, + postsPageId: _postsPageRecord?.id, + postsPerPage: siteSettings?.posts_per_page, + templatePartAreas: siteEditorSettings?.defaultTemplatePartAreas, + }; + }, + [ postType, postId ] + ); + + const [ commentsOnNewPostsValue, setCommentsOnNewPostsValue ] = + useState( '' ); + const [ postsCountValue, setPostsCountValue ] = useState( 1 ); + const [ postsPageTitleValue, setPostsPageTitleValue ] = useState( '' ); + + useEffect( () => { + setCommentsOnNewPostsValue( allowCommentsOnNewPosts ); + setPostsPageTitleValue( postsPageTitle ); + setPostsCountValue( postsPerPage ); + }, [ postsPageTitle, allowCommentsOnNewPosts, postsPerPage ] ); + + const templateAreas = useMemo( () => { + return templateRecord?.blocks && templatePartAreas + ? templateRecord.blocks + .filter( ( { name } ) => name === 'core/template-part' ) + .map( ( { attributes } ) => ( { + ...templatePartAreas?.find( + ( { area } ) => area === attributes?.tagName + ), + ...attributes, + } ) ) + : []; + }, [ templateRecord?.blocks, templatePartAreas ] ); + + const setAllowCommentsOnNewPosts = ( newValue ) => { + setCommentsOnNewPostsValue( newValue ); + editEntityRecord( 'root', 'site', undefined, { + default_comment_status: newValue ? 'open' : null, + } ); + }; + + const setPostsPageTitle = ( newValue ) => { + setPostsPageTitleValue( newValue ); + editEntityRecord( 'postType', 'page', postsPageId, { + title: newValue, + } ); + }; + + const setPostsPerPage = ( newValue ) => { + setPostsCountValue( newValue ); + editEntityRecord( 'root', 'site', undefined, { + posts_per_page: newValue, + } ); + }; + + return ( + <> + + { postsPageId && ( + + + + ) } + + + + + + + + + + + + + { templateAreas.map( ( { label, icon, theme, slug } ) => ( + + + + ) ) } + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js index ecc07deceed35f..3b1bdf71fa99f0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js @@ -9,7 +9,6 @@ import { Icon, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; - /** * Internal dependencies */ @@ -20,8 +19,10 @@ import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import { useAddedBy } from '../list/added-by'; import TemplateActions from '../template-actions'; +import HomeTemplateDetails from './home-template-details'; +import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -function useTemplateTitleAndDescription( postType, postId ) { +function useTemplateDetails( postType, postId ) { const { getDescription, getTitle, record } = useEditedEntityRecord( postType, postId @@ -42,6 +43,20 @@ function useTemplateTitleAndDescription( postType, postId ) { ); } + let content = null; + if ( record?.slug === 'home' || record?.slug === 'index' ) { + content = ; + } + + let footer = null; + if ( !! record?.modified ) { + footer = ( + + ); + } + const description = ( <> { descriptionText } @@ -74,7 +89,7 @@ function useTemplateTitleAndDescription( postType, postId ) { ); - return { title, description }; + return { title, description, content, footer }; } export default function SidebarNavigationScreenTemplate() { @@ -83,7 +98,7 @@ export default function SidebarNavigationScreenTemplate() { params: { postType, postId }, } = navigator; const { setCanvasMode } = unlock( useDispatch( editSiteStore ) ); - const { title, description } = useTemplateTitleAndDescription( + const { title, content, description, footer } = useTemplateDetails( postType, postId ); @@ -109,6 +124,8 @@ export default function SidebarNavigationScreenTemplate() { } description={ description } + content={ content } + footer={ footer } /> ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss index e86c137a574d5f..8b1cf5bbf456ca 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/style.scss @@ -23,3 +23,26 @@ } } } + +.edit-site-sidebar-navigation-screen-template__template-area-button { + color: $white; + display: flex; + align-items: center; + width: 100%; + flex-wrap: nowrap; + border-radius: 4px; + &:hover, + &:focus { + background: $gray-800; + color: $white; + } +} + +.edit-site-sidebar-navigation-screen-template__template-area-label-text { + margin: 0 $grid-unit-20 0 $grid-unit-05; + flex-grow: 1; +} + +.edit-site-sidebar-navigation-screen-template__template-icon { + display: flex; +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 9b54e06ca77e72..417dc7d6b1f059 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -97,3 +97,25 @@ border-top: 1px solid $gray-800; } +/* In general style overrides are discouraged. + * This is a temporary solution to override the InputControl component's styles. + * The `Theme` component will potentially be the more appropriate approach + * once that component is stabilized. + * See: packages/components/src/theme + */ +.edit-site-sidebar-navigation-screen__input-control { + width: 100%; + .components-input-control__container { + background: transparent; + } + .components-input-control__input { + color: $gray-200 !important; + background: $gray-800 !important; + } + .components-input-control__backdrop { + border: 4px !important; + } + .components-base-control__help { + color: $gray-600; + } +} diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js b/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js deleted file mode 100644 index 2a20f31ce7fb48..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-subtitle/index.js +++ /dev/null @@ -1,5 +0,0 @@ -export default function SidebarNavigationSubtitle( { children } ) { - return ( -

{ children }

- ); -} diff --git a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss b/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss deleted file mode 100644 index b7ff9faba49f38..00000000000000 --- a/packages/edit-site/src/components/sidebar-navigation-subtitle/style.scss +++ /dev/null @@ -1,7 +0,0 @@ -.edit-site-sidebar-navigation-subtitle { - color: $gray-400; - text-transform: uppercase; - font-weight: 500; - font-size: 11px; - padding: $grid-unit-10 0; -} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 916d8291532449..5f434bb84f8f7c 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -29,11 +29,12 @@ @import "./components/sidebar-button/style.scss"; @import "./components/sidebar-navigation-item/style.scss"; @import "./components/sidebar-navigation-screen/style.scss"; +@import "./components/sidebar-navigation-screen-details-footer/style.scss"; @import "./components/sidebar-navigation-screen-global-styles/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menu/style.scss"; @import "./components/sidebar-navigation-screen-page/style.scss"; +@import "components/sidebar-navigation-screen-details-panel/style.scss"; @import "./components/sidebar-navigation-screen-template/style.scss"; -@import "./components/sidebar-navigation-subtitle/style.scss"; @import "./components/site-hub/style.scss"; @import "./components/sidebar-navigation-screen-navigation-menus/style.scss"; @import "./components/site-icon/style.scss"; diff --git a/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js b/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js index e1adc68c7a82ae..7906dd800c6610 100644 --- a/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js +++ b/packages/editor/src/components/entities-saved-states/hooks/use-is-dirty.js @@ -13,6 +13,8 @@ const TRANSLATED_SITE_PROPERTIES = { site_icon: __( 'Icon' ), show_on_front: __( 'Show on front' ), page_on_front: __( 'Page on front' ), + posts_per_page: __( 'Maximum posts per page' ), + default_comment_status: __( 'Allow comments on new posts' ), }; export const useIsDirty = () => {