Skip to content

Commit

Permalink
Initial commit:
Browse files Browse the repository at this point in the history
- refactoring page details so that the styles and components can be used in templates
- getting home template details in order
  • Loading branch information
ramonjd committed Jun 6, 2023
1 parent a59c1b6 commit 0f733d6
Show file tree
Hide file tree
Showing 13 changed files with 233 additions and 51 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* 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 } ) {
return (
<VStack
className="edit-site-sidebar-navigation-details-screen-panel"
spacing={ 5 }
>
<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,20 @@
/**
* WordPress dependencies
*/
import { __experimentalHStack as HStack } from '@wordpress/components';

export default function SidebarNavigationScreenDetailsPanelRow( {
label,
children,
} ) {
return (
<HStack
key={ label }
spacing={ 5 }
alignment="left"
className="edit-site-sidebar-navigation-details-screen-panel__row"
>
{ 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,22 @@
.edit-site-sidebar-navigation-details-screen-panel {
margin-bottom: $grid-unit-30;

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

.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
Expand Up @@ -31,7 +31,6 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
import { unlock } from '../../private-apis';
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';

Expand Down Expand Up @@ -136,9 +135,6 @@ export default function SidebarNavigationScreenPage() {
{ stripHTML( record.excerpt.rendered ) }
</Truncate>
) }
<SidebarNavigationSubtitle>
{ __( 'Details' ) }
</SidebarNavigationSubtitle>
<PageDetails id={ postId } />
</>
}
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 '../../private-apis';
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 ]
);
return (
<VStack spacing={ 5 }>
<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-20;
}

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

.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;
}
}

Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { CheckboxControl } from '@wordpress/components';
import { store as blockEditorStore } from '@wordpress/block-editor';

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

export default function HomeTemplateDetails() {
const { commentOrder, isHomePageBlog, postsPerPage, siteTitle } = useSelect(
( select ) => {
const { getEntityRecord } = select( coreStore );
const siteSettings = getEntityRecord( 'root', 'site' );
const { getSettings } = select( blockEditorStore );

return {
isHomePageBlog:
siteSettings?.page_for_posts ===
siteSettings?.page_on_front,
siteTitle: siteSettings?.title,
postsPerPage: siteSettings?.posts_per_page,
commentOrder:
getSettings()?.__experimentalDiscussionSettings
?.commentOrder,
};
},
[]
);

const noop = () => {};

return (
<>
<SidebarNavigationScreenDetailsPanel title={ __( 'Settings' ) }>
{ isHomePageBlog && (
<SidebarNavigationScreenDetailsPanelRow>
<SidebarNavigationScreenDetailsPanelLabel>
{ __( 'Posts per page' ) }
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ postsPerPage }
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
) }
<SidebarNavigationScreenDetailsPanelRow>
<SidebarNavigationScreenDetailsPanelLabel>
{ __( 'Blog title' ) }
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ siteTitle }
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
</SidebarNavigationScreenDetailsPanel>

<SidebarNavigationScreenDetailsPanel title={ __( 'Discussion' ) }>
<SidebarNavigationScreenDetailsPanelRow>
<CheckboxControl
label="Allow comments on new posts"
help="Individual posts may override these settings. Changes here will only be applied to new posts."
checked={ true }
onChange={ noop }
/>
</SidebarNavigationScreenDetailsPanelRow>
<SidebarNavigationScreenDetailsPanelRow>
<CheckboxControl
label="Allow guest comments"
help="Users do not have to be registered and logged in to comment."
checked={ true }
onChange={ noop }
/>
</SidebarNavigationScreenDetailsPanelRow>
<SidebarNavigationScreenDetailsPanelRow>
<SidebarNavigationScreenDetailsPanelLabel>
{ __( 'Comment order' ) }
</SidebarNavigationScreenDetailsPanelLabel>
<SidebarNavigationScreenDetailsPanelValue>
{ commentOrder }
</SidebarNavigationScreenDetailsPanelValue>
</SidebarNavigationScreenDetailsPanelRow>
</SidebarNavigationScreenDetailsPanel>
<SidebarNavigationScreenDetailsPanel title={ __( 'Areas' ) }>
Test
</SidebarNavigationScreenDetailsPanel>
</>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,14 @@ 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';

function useTemplateTitleAndDescription( postType, postId ) {
function useTemplateDetails( postType, postId ) {
const { getDescription, getTitle, record } = useEditedEntityRecord(
postType,
postId
);

const currentTheme = useSelect(
( select ) => select( coreStore ).getCurrentTheme(),
[]
Expand All @@ -42,6 +44,11 @@ function useTemplateTitleAndDescription( postType, postId ) {
);
}

let content = null;
if ( record?.slug === 'home' ) {
content = <HomeTemplateDetails />;
}

const description = (
<>
{ descriptionText }
Expand Down Expand Up @@ -74,7 +81,7 @@ function useTemplateTitleAndDescription( postType, postId ) {
</>
);

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

export default function SidebarNavigationScreenTemplate() {
Expand All @@ -83,7 +90,7 @@ export default function SidebarNavigationScreenTemplate() {
params: { postType, postId },
} = navigator;
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { title, description } = useTemplateTitleAndDescription(
const { title, content, description } = useTemplateDetails(
postType,
postId
);
Expand All @@ -109,6 +116,7 @@ export default function SidebarNavigationScreenTemplate() {
</>
}
description={ description }
content={ content }
/>
);
}

This file was deleted.

This file was deleted.

2 changes: 1 addition & 1 deletion packages/edit-site/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@
@import "./components/sidebar-navigation-item/style.scss";
@import "./components/sidebar-navigation-screen/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-screen-templates/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";
Expand Down

0 comments on commit 0f733d6

Please sign in to comment.