diff --git a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js index b8b09461b5e79..36ef7ac2ac1ca 100644 --- a/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js +++ b/packages/block-editor/src/components/colors-gradients/panel-color-gradient-settings.js @@ -89,6 +89,7 @@ export const PanelColorGradientSettingsInner = ( { children, settings, title, + showTitle = true, ...props } ) => { if ( @@ -120,13 +121,14 @@ export const PanelColorGradientSettingsInner = ( { /> ); + return ( { settings.map( ( setting, index ) => ( diff --git a/packages/block-editor/src/hooks/color-panel.js b/packages/block-editor/src/hooks/color-panel.js index eacc2bbbc413b..34cc486ee08df 100644 --- a/packages/block-editor/src/hooks/color-panel.js +++ b/packages/block-editor/src/hooks/color-panel.js @@ -1,8 +1,8 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies @@ -20,6 +20,7 @@ export default function ColorPanel( { settings, clientId, enableContrastChecking = true, + showTitle = true, } ) { const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState(); const [ detectedColor, setDetectedColor ] = useState(); @@ -58,6 +59,7 @@ export default function ColorPanel( { title={ __( 'Color' ) } initialOpen={ false } settings={ settings } + showTitle={ showTitle } > { enableContrastChecking && ( ) } - + { title && ( + + ) }
    diff --git a/packages/components/src/navigation/styles/navigation-styles.js b/packages/components/src/navigation/styles/navigation-styles.js index 12603f6d4d108..81bb9bbdc5692 100644 --- a/packages/components/src/navigation/styles/navigation-styles.js +++ b/packages/components/src/navigation/styles/navigation-styles.js @@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n'; /** * Internal dependencies */ -import { G2, UI } from '../../utils/colors-values'; +import { BASE, G2, UI } from '../../utils/colors-values'; import Button from '../../button'; import { Text } from '../../text'; import { reduceMotion, rtl } from '../../utils'; @@ -19,9 +19,7 @@ import { space } from '../../ui/utils/space'; export const NavigationUI = styled.div` width: 100%; - background-color: ${ G2.darkGray.primary }; box-sizing: border-box; - color: #f0f0f0; padding: 0 ${ space( 4 ) }; overflow: hidden; `; @@ -47,16 +45,19 @@ export const MenuUI = styled.div` export const MenuBackButtonUI = styled( Button )` &.is-tertiary { - color: ${ G2.lightGray.ui }; + color: inherit; + opacity: 0.7; &:hover:not( :disabled ) { - color: #ddd; + opacity: 1; box-shadow: none; + color: inherit; } &:active:not( :disabled ) { background: transparent; - color: #ddd; + opacity: 1; + color: inherit; } } `; @@ -68,7 +69,7 @@ export const MenuTitleUI = styled.div` export const MenuTitleHeadingUI = styled( Text )` align-items: center; - color: ${ G2.gray[ 100 ] }; + color: inherit; display: flex; justify-content: space-between; margin-bottom: ${ space( 2 ) }; @@ -84,17 +85,20 @@ export const MenuTitleActionsUI = styled.span` height: ${ space( 6 ) }; // 24px, same height as the buttons inside .components-button.is-small { - color: ${ G2.lightGray.ui }; + color: inherit; + opacity: 0.7; margin-right: ${ space( 1 ) }; // Avoid hiding the focus outline padding: 0; &:active:not( :disabled ) { background: none; - color: ${ G2.gray[ 200 ] }; + opacity: 1; + color: inherit; } &:hover:not( :disabled ) { box-shadow: none; - color: ${ G2.gray[ 200 ] }; + opacity: 1; + color: inherit; } } `; @@ -142,46 +146,49 @@ export const MenuTitleSearchUI = styled.div` `; export const GroupTitleUI = styled( Text )` + color: inherit; margin-top: ${ space( 2 ) }; padding: ${ () => isRTL() ? `${ space( 1 ) } ${ space( 4 ) } ${ space( 1 ) } 0` : `${ space( 1 ) } 0 ${ space( 1 ) } ${ space( 4 ) }` }; text-transform: uppercase; - color: ${ G2.gray[ 100 ] }; `; export const ItemBaseUI = styled.li` border-radius: 2px; - color: ${ G2.lightGray.ui }; + color: inherit; margin-bottom: 0; - button, - a.components-button, - a { + > button, + > a.components-button, + > a { width: 100%; - color: ${ G2.lightGray.ui }; + color: inherit; + opacity: 0.7; padding: ${ space( 2 ) } ${ space( 4 ) }; /* 8px 16px */ ${ rtl( { textAlign: 'left' }, { textAlign: 'right' } ) } &:hover, &:focus:not( [aria-disabled='true'] ):active, &:active:not( [aria-disabled='true'] ):active { - color: #ddd; + color: inherit; + opacity: 1; } } &.is-active { background-color: ${ UI.theme }; - color: ${ UI.textDark }; + color: ${ BASE.white }; - button, - a { - color: ${ UI.textDark }; + > button, + > a { + color: ${ BASE.white }; + opacity: 1; } } - svg path { + > svg path { color: ${ G2.lightGray.ui }; } `; @@ -196,7 +203,8 @@ export const ItemUI = styled.div` font-weight: 400; line-height: 20px; width: 100%; - color: ${ G2.lightGray.ui }; + color: inherit; + opacity: 0.7; `; export const ItemBadgeUI = styled.span` diff --git a/packages/edit-post/src/components/preferences-modal/style.scss b/packages/edit-post/src/components/preferences-modal/style.scss index 71ac420cd2aba..2fbae2cbfa263 100644 --- a/packages/edit-post/src/components/preferences-modal/style.scss +++ b/packages/edit-post/src/components/preferences-modal/style.scss @@ -26,10 +26,10 @@ $vertical-tabs-width: 160px; } .components-navigation { - background-color: $white; padding: 0; max-height: 100%; overflow-y: auto; + color: $black; > * { // Matches spacing cleared from the modal content element. @@ -38,42 +38,26 @@ $vertical-tabs-width: 160px; .components-navigation__menu { margin: 0; - color: $gray-900; .components-navigation__item { - color: $gray-900; // The inheritance of some items is quite strong, so we have to duplicate this one. - & > button { - color: inherit; padding: 3px $grid-unit-20; height: $grid-unit-60; // Aligns button text instead of button box. margin: 0 #{-$grid-unit-20}; width: calc(#{$grid-unit-40} + 100%); &:focus { - background: $gray-100; font-weight: 500; } - &:hover { - color: var(--wp-admin-theme-color); - } - } - .components-toggle-control__label { - color: inherit; } } .components-navigation__menu-title-heading { - color: inherit; border-bottom: 1px solid $gray-300; padding-left: 0; padding-right: 0; } .components-navigation__back-button { - color: inherit; padding-left: 0; - &:hover { - color: var(--wp-admin-theme-color); - } } .edit-post-preferences-modal__custom-fields-confirmation-button { width: auto; diff --git a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss index eec2ca5c784a9..07e80af11e65a 100644 --- a/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss +++ b/packages/edit-site/src/components/navigation-sidebar/navigation-panel/style.scss @@ -4,6 +4,7 @@ width: 0; overflow: hidden; background: $gray-900; + color: $white; transition: width 100ms linear; @include reduce-motion("transition"); diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index ddd01fbc0789f..adf9ea969be1a 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -123,6 +123,7 @@ export default function ColorPanel( { gradients={ gradients } disableCustomColors={ ! areCustomSolidsEnabled } disableCustomGradients={ ! areCustomGradientsEnabled } + showTitle={ false } > - { hasTypographyPanel && ( - - ) } - { hasColorPanel && ( - - ) } - { hasDimensionsPanel && ( - - ) } - { hasBorderPanel && ( - - ) } - - ); - if ( ! wrapperPanelTitle ) { - return content; - } - return ( - - { content } - - ); -} - function getPanelTitle( blockName ) { const blockType = getBlockType( blockName ); @@ -103,49 +48,111 @@ function getPanelTitle( blockName ) { return blockType.title; } -function GlobalStylesBlockPanels( { - blocks, +function GlobalStylesLevel( { + context, getStyle, setStyle, getSetting, setSetting, + parentMenu = 'root', } ) { - const panels = useMemo( - () => - sortBy( - map( blocks, ( block, name ) => { - return { - block, - name, - wrapperPanelTitle: getPanelTitle( name ), - }; - } ), - ( { wrapperPanelTitle } ) => wrapperPanelTitle - ), - [ blocks ] - ); + const hasTypographyPanel = useHasTypographyPanel( context ); + const hasColorPanel = useHasColorPanel( context ); + const hasBorderPanel = useHasBorderPanel( context ); + const hasDimensionsPanel = useHasDimensionsPanel( context ); + const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel; + + return ( + <> + + { hasTypographyPanel && ( + + ) } + { hasColorPanel && ( + + ) } + { hasLayoutPanel && ( + + ) } + + + { hasTypographyPanel && ( + + + + + + ) } + + { hasColorPanel && ( + + + + + + ) } - return map( panels, ( { block, name, wrapperPanelTitle } ) => { - return ( - - ); - } ); + { hasLayoutPanel && ( + + + { hasDimensionsPanel && ( + + ) } + { hasBorderPanel && ( + + ) } + + + ) } + + ); } -export default function GlobalStylesSidebar( { - identifier, - title, - icon, - closeLabel, -} ) { +export default function GlobalStylesSidebar() { const { root, blocks, @@ -154,23 +161,19 @@ export default function GlobalStylesSidebar( { getSetting, setSetting, } = useGlobalStylesContext(); - const [ canRestart, onReset ] = useGlobalStylesReset(); - if ( typeof blocks !== 'object' || ! root ) { - // No sidebar is shown. - return null; - } + const [ canRestart, onReset ] = useGlobalStylesReset(); return ( - { title } + { __( 'Styles' ) }