diff --git a/packages/block-editor/src/components/list-view/index.js b/packages/block-editor/src/components/list-view/index.js index a910c75de8a959..e50fd086daacb8 100644 --- a/packages/block-editor/src/components/list-view/index.js +++ b/packages/block-editor/src/components/list-view/index.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -61,6 +66,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.__experimentalHideContainerBlockActions Flag to hide actions of top level blocks (like core/widget-area) * @param {string} props.id Unique identifier for the root list element (primarily for a11y purposes). * @param {boolean} props.expandNested Flag to determine whether nested levels are expanded by default. + * @param {boolean} props.__experimentalDarkMode Flag to turn on dark mode * @param {Object} ref Forwarded ref */ function ListView( @@ -69,6 +75,7 @@ function ListView( __experimentalFeatures, __experimentalPersistentListViewFeatures, __experimentalHideContainerBlockActions, + __experimentalDarkMode, showNestedBlocks, showBlockMovers, id, @@ -210,7 +217,9 @@ function ListView( /> + /> { isModalOpen && ( setIsModalOpen( false ) } diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js index 3340d37fb21397..7a1ccdc997428b 100644 --- a/packages/edit-site/src/components/add-new-template/new-template.js +++ b/packages/edit-site/src/components/add-new-template/new-template.js @@ -24,6 +24,7 @@ import { media, notFound, page, + plus, post, postAuthor, postDate, @@ -149,14 +150,14 @@ export default function NewTemplate( { postType } ) { return ( { () => ( diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js index ffac252f3caaa3..5a8637eed8de40 100644 --- a/packages/edit-site/src/components/block-editor/index.js +++ b/packages/edit-site/src/components/block-editor/index.js @@ -102,8 +102,8 @@ export default function BlockEditor( { setIsInserterOpen } ) { const { enableComplementaryArea } = useDispatch( interfaceStore ); const openNavigationSidebar = useCallback( () => { enableComplementaryArea( - 'core/edit-site', - 'edit-site/navigation-menu' + 'core/edit-global', + 'edit-global/navigation-menu' ); }, [ enableComplementaryArea ] ); const contentRef = useRef(); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 73bc535184f9db..6258f3df896562 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -220,7 +220,10 @@ function Editor( { onError } ) { ) } drawer={ - + <> + + + } header={
+ + + ); } diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss index 39f53df6c94d9b..43ff529267f8a8 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-toggle/style.scss @@ -3,21 +3,24 @@ .edit-site-navigation-toggle { align-items: center; - background: $gray-900; + background: $black; border-radius: 0; display: flex; - position: absolute; + margin-right: $grid-unit-20; + padding-right: $grid-unit-20; z-index: z-index(".edit-site-navigation-toggle"); height: $header-height; - width: $header-height; + + button { + color: $white; + } } .edit-site-navigation-toggle__button.components-button { align-items: center; - background: $gray-900; + background: $black; border-radius: 0; - color: $white; - height: $header-height + $border-width; + height: $header-height - 1px; width: $header-height; z-index: 1; margin-bottom: - $border-width; @@ -32,20 +35,6 @@ box-shadow: none; } - &::before { - transition: box-shadow 0.1s ease; - @include reduce-motion("transition"); - content: ""; - display: block; - position: absolute; - top: 9px; - right: 9px; - bottom: 9px; - left: 9px; - border-radius: $radius-block-ui + $border-width + $border-width; - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-900; - } - // Hover color. &:hover::before { box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $gray-700; @@ -69,3 +58,12 @@ margin-top: -($border-width); } } + +.edit-site-navigation-toggle .interface-pinned-items { + button { + background: $black; + } + .is-pressed { + background: $gray-900; + } +} diff --git a/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js b/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js new file mode 100644 index 00000000000000..48c17c51f21433 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/parts-sidebar.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { FlexBlock, Flex } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { sidebar } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from '../sidebar/default-sidebar'; +import TemplateList from './template-list'; +import AddNewTemplate from '../add-new-template'; + +export default function PartsSidebar() { + return ( + + + { __( 'Parts' ) } + + + + + + } + > + + + ); +} diff --git a/packages/edit-site/src/components/navigation-sidebar/style.scss b/packages/edit-site/src/components/navigation-sidebar/style.scss new file mode 100644 index 00000000000000..b5b45c0008376e --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/style.scss @@ -0,0 +1,122 @@ +.edit-site-global-styles-sidebar { + display: flex; + flex-direction: column; + height: 100%; + + &__panel, + &__navigator-provider { + display: flex; + flex-direction: column; + flex: 1; + } + + &__navigator-screen { + flex: 1; + } +} + +.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { + margin-left: 0; +} + +.edit-site-global-styles-sidebar__reset-button.components-button { + margin-left: auto; +} + +.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { + font-size: $default-font-size * 1.2; + font-weight: 500; +} + +.edit-site-global-styles-sidebar .components-navigation__item > button span { + font-weight: 500; +} + +.edit-site-typography-panel, +.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { + border: 0; +} + +.edit-site-global-styles-sidebar .components-tools-panel-item.single-column { + grid-column: span 1; +} + +.edit-site-global-styles-sidebar__blocks-group { + padding-top: $grid-unit-30; + border-top: $border-width solid $gray-200; +} + +.edit-site-global-styles-sidebar__blocks-group-help { + padding: 0 $grid-unit-20; +} + +.edit-site-global-styles-color-palette-panel, +.edit-site-global-styles-gradient-palette-panel { + padding: $grid-unit-20; +} + +.edit-site-global-styles-sidebar__beta { + display: inline-flex; + margin-left: $grid-unit-10; + padding: 0 $grid-unit-10; + height: $grid-unit-30; + border-radius: $radius-block-ui; + background-color: $black; + color: $white; + align-items: center; + font-size: $helptext-font-size; + line-height: 1; +} + +//TODO: add dark mode support to base components instead using emotion +.interface-complementary-area.edit-site-global-styles-sidebar, +.edit-site-global-styles-sidebar .interface-complementary-area-header, +.edit-site-global-styles-sidebar .edit-site-global-styles-sidebar__navigator-provider, +.edit-site-global-styles-sidebar .components-card__body, +.edit-site-global-styles-sidebar .components-card, +.edit-site-global-styles-sidebar .components-button, +.edit-site-global-styles-sidebar .components-flex-item, +.edit-site-global-styles-sidebar .components-heading { + background: $gray-900; + color: $gray-100; + fill: $gray-100; +} + +.edit-site-templates-sidebar { + background: $gray-900; + color: $gray-100; + fill: $gray-100; + + .components-panel { + background: $gray-900; + } + + a { + color: $white; + text-decoration: none; + } + + .components-button { + color: $gray-100; + } +} + +.edit-site-navigation-sidebar-template-list { + + padding: $grid-unit-20; +} + +.edit-site-navigation-sidebar-template-list__item { + display: flex; + justify-content: space-between; + line-height: 2.5; +} + +.edit-site-navigation-sidebar-template-list__name { + display: flex; + align-items: center; + + svg { + margin-right: $grid-unit-10; + } +} diff --git a/packages/edit-site/src/components/navigation-sidebar/template-list.js b/packages/edit-site/src/components/navigation-sidebar/template-list.js new file mode 100644 index 00000000000000..512dc5fbc4d596 --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/template-list.js @@ -0,0 +1,124 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { + store as coreStore, + __experimentalUseEntityRecords as useEntityRecords, +} from '@wordpress/core-data'; +import { __, sprintf } from '@wordpress/i18n'; +import { Icon } from '@wordpress/components'; +import { decodeEntities } from '@wordpress/html-entities'; +import { + archive, + blockMeta, + category, + footer, + header, + home, + layout, + list, + media, + notFound, + page, + post, + postAuthor, + postDate, + search, + sidebar, + tag, +} from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import Link from '../routes/link'; +import Actions from '../list/actions'; + +const TEMPLATE_ICONS = { + 'front-page': home, + 'single-post': post, + page, + archive, + search, + 404: notFound, + index: list, + category, + author: postAuthor, + taxonomy: blockMeta, + date: postDate, + tag, + attachment: media, + footer, + header, + sidebar, +}; + +export default function TemplateList( { templateType } ) { + const { records: templates, isResolving: isLoading } = useEntityRecords( + 'postType', + templateType, + { + per_page: -1, + } + ); + const postType = useSelect( + ( select ) => select( coreStore ).getPostType( templateType ), + [ templateType ] + ); + + if ( ! templates || isLoading ) { + return null; + } + + if ( ! templates.length ) { + return ( +
+ { sprintf( + // translators: The template type name, should be either "templates" or "template parts". + __( 'No %s found.' ), + postType?.labels?.name?.toLowerCase() + ) } +
+ ); + } + + const getIcon = ( slug ) => { + if ( TEMPLATE_ICONS[ slug ] ) { + return TEMPLATE_ICONS[ slug ]; + } + + if ( templateType === 'wp_template' ) { + return layout; + } + + return sidebar; + }; + + return ( +
+ { templates.map( ( template ) => ( +
+
+ + + { decodeEntities( + template.title?.rendered || template.slug + ) } + +
+ +
+ ) ) } +
+ ); +} diff --git a/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js b/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js new file mode 100644 index 00000000000000..0c4c55898d048a --- /dev/null +++ b/packages/edit-site/src/components/navigation-sidebar/templates-sidebar.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { FlexBlock, Flex } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { layout } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import DefaultSidebar from '../sidebar/default-sidebar'; +import TemplateList from './template-list'; +import AddNewTemplate from '../add-new-template'; + +export default function TemplatesSidebar() { + return ( + + + { __( 'Templates' ) } + + + + + + } + > + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/default-sidebar.js b/packages/edit-site/src/components/sidebar/default-sidebar.js index ea494a67b6390c..8028c4149d37fa 100644 --- a/packages/edit-site/src/components/sidebar/default-sidebar.js +++ b/packages/edit-site/src/components/sidebar/default-sidebar.js @@ -8,9 +8,11 @@ import { export default function DefaultSidebar( { className, + scope, identifier, title, icon, + iconSize, children, closeLabel, header, @@ -21,10 +23,11 @@ export default function DefaultSidebar( { <> diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 3788a3aece74bc..1f3633afb9e537 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -13,8 +13,6 @@ import { store as blockEditorStore } from '@wordpress/block-editor'; * Internal dependencies */ import DefaultSidebar from './default-sidebar'; -import GlobalStylesSidebar from './global-styles-sidebar'; -import NavigationMenuSidebar from './navigation-menu-sidebar'; import { STORE_NAME } from '../../store/constants'; import SettingsHeader from './settings-header'; import TemplateCard from './template-card'; @@ -62,6 +60,7 @@ export function SidebarComplementaryAreaFills() { <> ) } - - ); } diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 134efcbc2f1422..d9947460aa6c28 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -16,73 +16,3 @@ margin: 0; } } - -.edit-site-global-styles-sidebar { - display: flex; - flex-direction: column; - min-height: 100%; - - &__panel, - &__navigator-provider { - display: flex; - flex-direction: column; - flex: 1; - } - - &__navigator-screen { - flex: 1; - } -} - -.edit-site-global-styles-sidebar .interface-complementary-area-header .components-button.has-icon { - margin-left: 0; -} - -.edit-site-global-styles-sidebar__reset-button.components-button { - margin-left: auto; -} - -.edit-site-global-styles-sidebar .components-navigation__menu-title-heading { - font-size: $default-font-size * 1.2; - font-weight: 500; -} - -.edit-site-global-styles-sidebar .components-navigation__item > button span { - font-weight: 500; -} - -.edit-site-typography-panel, -.edit-site-global-styles-sidebar .block-editor-panel-color-gradient-settings { - border: 0; -} - -.edit-site-global-styles-sidebar .components-tools-panel-item.single-column { - grid-column: span 1; -} - -.edit-site-global-styles-sidebar__blocks-group { - padding-top: $grid-unit-30; - border-top: $border-width solid $gray-200; -} - -.edit-site-global-styles-sidebar__blocks-group-help { - padding: 0 $grid-unit-20; -} - -.edit-site-global-styles-color-palette-panel, -.edit-site-global-styles-gradient-palette-panel { - padding: $grid-unit-20; -} - -.edit-site-global-styles-sidebar__beta { - display: inline-flex; - margin-left: $grid-unit-10; - padding: 0 $grid-unit-10; - height: $grid-unit-30; - border-radius: $radius-block-ui; - background-color: $black; - color: $white; - align-items: center; - font-size: $helptext-font-size; - line-height: 1; -} diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index b61d06574c7aa0..09f83394f0a7b5 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -11,7 +11,8 @@ @import "./components/add-new-template/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/settings-header/style.scss"; -@import "./components/sidebar/navigation-menu-sidebar/style.scss"; +@import "./components/navigation-sidebar/navigation-menu-sidebar/style.scss"; +@import "./components/navigation-sidebar/style.scss"; @import "./components/sidebar/template-card/style.scss"; @import "./components/editor/style.scss"; @import "./components/template-details/style.scss"; diff --git a/packages/interface/src/components/complementary-area-header/style.scss b/packages/interface/src/components/complementary-area-header/style.scss index 3eb5c897d668dc..238e33a257af42 100644 --- a/packages/interface/src/components/complementary-area-header/style.scss +++ b/packages/interface/src/components/complementary-area-header/style.scss @@ -15,7 +15,6 @@ } .interface-complementary-area-header { - background: $white; padding-right: $grid-unit-05; .components-button.has-icon { diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index a4ba7e095d43b2..47ad0ca32bdc5b 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -20,6 +20,7 @@ function ComplementaryAreaToggle( { scope, identifier, icon, + iconSize, selectedIcon, ...props } ) { @@ -33,9 +34,11 @@ function ComplementaryAreaToggle( { const { enableComplementaryArea, disableComplementaryArea } = useDispatch( interfaceStore ); + return ( { if ( isSelected ) { disableComplementaryArea( scope ); diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index 71fb6a610d6a32..467f972b4209f9 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -88,6 +88,7 @@ function ComplementaryArea( { header, headerClassName, icon, + iconSize, isPinnable = true, panelClassName, scope, @@ -148,6 +149,7 @@ function ComplementaryArea( { aria-expanded={ isActive } label={ title } icon={ showIconLabels ? check : icon } + iconSize={ iconSize } showTooltip={ ! showIconLabels } variant={ showIconLabels ? 'tertiary' : undefined } /> diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js index b7b3864820b650..507bcaebf78612 100644 --- a/packages/interface/src/components/interface-skeleton/index.js +++ b/packages/interface/src/components/interface-skeleton/index.js @@ -78,71 +78,73 @@ function InterfaceSkeleton( !! footer && 'has-footer' ) } > - { !! drawer && ( + { !! header && (
- { drawer } + { header }
) } -
- { !! header && ( +
+ { !! drawer && (
- { header } + { drawer }
) } -
- { !! secondarySidebar && ( +
+
+ { !! secondarySidebar && ( +
+ { secondarySidebar } +
+ ) } + { !! notices && ( +
+ { notices } +
+ ) }
- { secondarySidebar } + { content }
- ) } - { !! notices && ( -
- { notices } -
- ) } -
- { content } + { !! sidebar && ( +
+ { sidebar } +
+ ) } + { !! actions && ( +
+ { actions } +
+ ) }
- { !! sidebar && ( -
- { sidebar } -
- ) } - { !! actions && ( -
- { actions } -
- ) }
{ !! footer && ( diff --git a/packages/interface/src/components/interface-skeleton/style.scss b/packages/interface/src/components/interface-skeleton/style.scss index 12c14cfcd2e319..d31d99102325cf 100644 --- a/packages/interface/src/components/interface-skeleton/style.scss +++ b/packages/interface/src/components/interface-skeleton/style.scss @@ -11,8 +11,6 @@ html.interface-interface-skeleton__html-container { } .interface-interface-skeleton { - display: flex; - flex-direction: row; height: auto; max-height: 100%; @@ -42,6 +40,11 @@ html.interface-interface-skeleton__html-container { @include editor-left(".interface-interface-skeleton"); +.interface-interface-skeleton__wrapper { + display: flex; + height: 100%; +} + .interface-interface-skeleton__body { flex-grow: 1; display: flex; @@ -178,3 +181,8 @@ html.interface-interface-skeleton__html-container { bottom: 0; } } + +.interface-interface-skeleton__drawer { + background: $gray-900; + display: flex; +} diff --git a/packages/interface/src/components/pinned-items/style.scss b/packages/interface/src/components/pinned-items/style.scss index b15a0f4b325f5b..2d76499de0fe6f 100644 --- a/packages/interface/src/components/pinned-items/style.scss +++ b/packages/interface/src/components/pinned-items/style.scss @@ -13,10 +13,5 @@ .components-button { margin-left: $grid-unit-05; - - svg { - max-width: $icon-size; - max-height: $icon-size; - } } }