From 43d777b1a0c3b413c7b63156930f3103fef7ddf0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 5 May 2023 09:12:49 +0100 Subject: [PATCH] Unify the global block styles panel with the block inspector panels (#49428) --- .../global-styles/block-preview-panel.js | 2 +- .../components/global-styles/border-panel.js | 4 +- .../components/global-styles/context-menu.js | 175 ---------------- .../components/global-styles/custom-css.js | 32 --- .../global-styles/dimensions-panel.js | 18 +- .../components/global-styles/effects-panel.js | 40 ---- .../components/global-styles/filters-panel.js | 39 ---- .../src/components/global-styles/root-menu.js | 66 ++++++ .../global-styles/screen-block-list.js | 4 +- .../components/global-styles/screen-block.js | 191 +++++++++++++++++- .../components/global-styles/screen-border.js | 35 ---- .../components/global-styles/screen-colors.js | 25 +-- .../components/global-styles/screen-css.js | 42 ++-- .../global-styles/screen-effects.js | 35 ---- .../global-styles/screen-filters.js | 27 --- .../components/global-styles/screen-layout.js | 14 +- .../components/global-styles/screen-root.js | 4 +- .../screen-typography-element.js | 4 +- .../global-styles/screen-typography.js | 123 ++++------- .../global-styles/screen-variations.js | 46 ----- .../global-styles/typography-panel.js | 25 ++- .../src/components/global-styles/ui.js | 137 ++++--------- .../global-styles/variations-panel.js | 29 +-- .../site-editor/push-to-global-styles.spec.js | 2 - test/e2e/specs/site-editor/style-book.spec.js | 1 - 25 files changed, 398 insertions(+), 722 deletions(-) delete mode 100644 packages/edit-site/src/components/global-styles/context-menu.js delete mode 100644 packages/edit-site/src/components/global-styles/custom-css.js delete mode 100644 packages/edit-site/src/components/global-styles/effects-panel.js delete mode 100644 packages/edit-site/src/components/global-styles/filters-panel.js create mode 100644 packages/edit-site/src/components/global-styles/root-menu.js delete mode 100644 packages/edit-site/src/components/global-styles/screen-border.js delete mode 100644 packages/edit-site/src/components/global-styles/screen-effects.js delete mode 100644 packages/edit-site/src/components/global-styles/screen-filters.js delete mode 100644 packages/edit-site/src/components/global-styles/screen-variations.js diff --git a/packages/edit-site/src/components/global-styles/block-preview-panel.js b/packages/edit-site/src/components/global-styles/block-preview-panel.js index 9ff5a47f77f08..584df056ddee0 100644 --- a/packages/edit-site/src/components/global-styles/block-preview-panel.js +++ b/packages/edit-site/src/components/global-styles/block-preview-panel.js @@ -11,7 +11,7 @@ const BlockPreviewPanel = ( { name, variation = '' } ) => { ...blockExample, attributes: { ...blockExample?.attributes, - className: variation, + className: 'is-style-' + variation, }, }; const blocks = diff --git a/packages/edit-site/src/components/global-styles/border-panel.js b/packages/edit-site/src/components/global-styles/border-panel.js index fd127039be748..997a565060532 100644 --- a/packages/edit-site/src/components/global-styles/border-panel.js +++ b/packages/edit-site/src/components/global-styles/border-panel.js @@ -58,7 +58,9 @@ export default function BorderPanel( { name, variation = '' } ) { } const prefix = prefixParts.join( '.' ); - const [ style ] = useGlobalStyle( prefix, name, 'user', false ); + const [ style ] = useGlobalStyle( prefix, name, 'user', { + shouldDecodeEncode: false, + } ); const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { shouldDecodeEncode: false, } ); diff --git a/packages/edit-site/src/components/global-styles/context-menu.js b/packages/edit-site/src/components/global-styles/context-menu.js deleted file mode 100644 index dca571881cd4e..0000000000000 --- a/packages/edit-site/src/components/global-styles/context-menu.js +++ /dev/null @@ -1,175 +0,0 @@ -/** - * WordPress dependencies - */ -import { - __experimentalItemGroup as ItemGroup, - __experimentalHStack as HStack, - __experimentalSpacer as Spacer, - FlexItem, - CardBody, - CardDivider, -} from '@wordpress/components'; -import { - typography, - border, - filter, - shadow, - color, - layout, - chevronLeft, - chevronRight, -} from '@wordpress/icons'; -import { isRTL, __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { useHasVariationsPanel } from './variations-panel'; -import { NavigationButtonAsItem } from './navigation-button'; -import { IconWithCurrentColor } from './icon-with-current-color'; -import { ScreenVariations } from './screen-variations'; -import { unlock } from '../../private-apis'; - -const { - useHasDimensionsPanel, - useHasTypographyPanel, - useHasBorderPanel, - useHasColorPanel, - useHasEffectsPanel, - useHasFiltersPanel, - useGlobalSetting, - useSettingsForBlockElement, -} = unlock( blockEditorPrivateApis ); - -function ContextMenu( { name, parentMenu = '' } ) { - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); - const hasTypographyPanel = useHasTypographyPanel( settings ); - const hasColorPanel = useHasColorPanel( settings ); - const hasBorderPanel = useHasBorderPanel( settings ); - const hasEffectsPanel = useHasEffectsPanel( settings ); - const hasFilterPanel = useHasFiltersPanel( settings ); - const hasDimensionsPanel = useHasDimensionsPanel( settings ); - const hasLayoutPanel = hasDimensionsPanel; - const hasVariationsPanel = useHasVariationsPanel( name, parentMenu ); - - const { canEditCSS } = useSelect( ( select ) => { - const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = - select( coreStore ); - - const globalStylesId = __experimentalGetCurrentGlobalStylesId(); - const globalStyles = globalStylesId - ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) - : undefined; - - return { - canEditCSS: - !! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false, - }; - }, [] ); - - const isBlocksPanel = - parentMenu.includes( 'blocks' ) && - ! parentMenu.includes( 'variations' ); - - return ( - <> - - { hasTypographyPanel && ( - - { __( 'Typography' ) } - - ) } - { hasColorPanel && ( - - { __( 'Colors' ) } - - ) } - { hasBorderPanel && ( - - { __( 'Border' ) } - - ) } - { hasEffectsPanel && ( - - { __( 'Effects' ) } - - ) } - { hasFilterPanel && ( - - { __( 'Filters' ) } - - ) } - { hasLayoutPanel && ( - - { __( 'Layout' ) } - - ) } - { hasVariationsPanel && ( - - ) } - { isBlocksPanel && canEditCSS && ( - <> - - - - { __( - 'Add your own CSS to customize the block appearance.' - ) } - - - - - - { __( 'Additional block CSS' ) } - - - - - - - - - ) } - - - ); -} - -export default ContextMenu; diff --git a/packages/edit-site/src/components/global-styles/custom-css.js b/packages/edit-site/src/components/global-styles/custom-css.js deleted file mode 100644 index 897c17633700e..0000000000000 --- a/packages/edit-site/src/components/global-styles/custom-css.js +++ /dev/null @@ -1,32 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../private-apis'; - -const { useGlobalStyle, AdvancedPanel: StylesAdvancedPanel } = unlock( - blockEditorPrivateApis -); - -function CustomCSSControl( { blockName } ) { - const [ style ] = useGlobalStyle( '', blockName, 'user', { - shouldDecodeEncode: false, - } ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( '', blockName, 'all', { - shouldDecodeEncode: false, - } ); - - return ( - - ); -} - -export default CustomCSSControl; diff --git a/packages/edit-site/src/components/global-styles/dimensions-panel.js b/packages/edit-site/src/components/global-styles/dimensions-panel.js index d2555a14bea64..11b44cd20092f 100644 --- a/packages/edit-site/src/components/global-styles/dimensions-panel.js +++ b/packages/edit-site/src/components/global-styles/dimensions-panel.js @@ -26,19 +26,15 @@ const DEFAULT_CONTROLS = { childLayout: false, }; -export default function DimensionsPanel( { name, variation = '' } ) { - let prefixParts = []; - if ( variation ) { - prefixParts = [ 'variations', variation ].concat( prefixParts ); - } - const prefix = prefixParts.join( '.' ); - - const [ style ] = useGlobalStyle( prefix, name, 'user', false ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { +export default function DimensionsPanel() { + const [ style ] = useGlobalStyle( '', undefined, 'user', { + shouldDecodeEncode: false, + } ); + const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', { shouldDecodeEncode: false, } ); - const [ rawSettings, setSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); + const [ rawSettings, setSettings ] = useGlobalSetting( '' ); + const settings = useSettingsForBlockElement( rawSettings ); // These intermediary objects are needed because the "layout" property is stored // in settings rather than styles. diff --git a/packages/edit-site/src/components/global-styles/effects-panel.js b/packages/edit-site/src/components/global-styles/effects-panel.js deleted file mode 100644 index dfba278139fc0..0000000000000 --- a/packages/edit-site/src/components/global-styles/effects-panel.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../private-apis'; - -const { - useGlobalSetting, - useGlobalStyle, - EffectsPanel: StylesEffectsPanel, - useSettingsForBlockElement, -} = unlock( blockEditorPrivateApis ); - -export default function EffectsPanel( { name, variation = '' } ) { - let prefixParts = []; - if ( variation ) { - prefixParts = [ 'variations', variation ].concat( prefixParts ); - } - const prefix = prefixParts.join( '.' ); - - const [ style ] = useGlobalStyle( prefix, name, 'user', false ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { - shouldDecodeEncode: false, - } ); - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); - - return ( - - ); -} diff --git a/packages/edit-site/src/components/global-styles/filters-panel.js b/packages/edit-site/src/components/global-styles/filters-panel.js deleted file mode 100644 index f62d6901073f3..0000000000000 --- a/packages/edit-site/src/components/global-styles/filters-panel.js +++ /dev/null @@ -1,39 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import { unlock } from '../../private-apis'; -const { - useGlobalStyle, - useGlobalSetting, - useSettingsForBlockElement, - FiltersPanel: StylesFiltersPanel, -} = unlock( blockEditorPrivateApis ); - -export default function FiltersPanel( { name } ) { - const [ style ] = useGlobalStyle( '', name, 'user', false ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( '', name, 'all', { - shouldDecodeEncode: false, - } ); - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); - - return ( - - ); -} diff --git a/packages/edit-site/src/components/global-styles/root-menu.js b/packages/edit-site/src/components/global-styles/root-menu.js new file mode 100644 index 0000000000000..14c5c344e5f64 --- /dev/null +++ b/packages/edit-site/src/components/global-styles/root-menu.js @@ -0,0 +1,66 @@ +/** + * WordPress dependencies + */ +import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; +import { typography, color, layout } from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import { NavigationButtonAsItem } from './navigation-button'; +import { unlock } from '../../private-apis'; + +const { + useHasDimensionsPanel, + useHasTypographyPanel, + useHasColorPanel, + useGlobalSetting, + useSettingsForBlockElement, +} = unlock( blockEditorPrivateApis ); + +function RootMenu() { + const [ rawSettings ] = useGlobalSetting( '' ); + const settings = useSettingsForBlockElement( rawSettings ); + const hasTypographyPanel = useHasTypographyPanel( settings ); + const hasColorPanel = useHasColorPanel( settings ); + const hasDimensionsPanel = useHasDimensionsPanel( settings ); + const hasLayoutPanel = hasDimensionsPanel; + + return ( + <> + + { hasTypographyPanel && ( + + { __( 'Typography' ) } + + ) } + { hasColorPanel && ( + + { __( 'Colors' ) } + + ) } + { hasLayoutPanel && ( + + { __( 'Layout' ) } + + ) } + + + ); +} + +export default RootMenu; diff --git a/packages/edit-site/src/components/global-styles/screen-block-list.js b/packages/edit-site/src/components/global-styles/screen-block-list.js index b929339860b2a..88c826c42e0d0 100644 --- a/packages/edit-site/src/components/global-styles/screen-block-list.js +++ b/packages/edit-site/src/components/global-styles/screen-block-list.js @@ -20,7 +20,7 @@ import { speak } from '@wordpress/a11y'; /** * Internal dependencies */ -import { useHasVariationsPanel } from './variations-panel'; +import { useBlockVariations } from './variations-panel'; import ScreenHeader from './header'; import { NavigationButtonAsItem } from './navigation-button'; import { unlock } from '../../private-apis'; @@ -65,7 +65,7 @@ export function useBlockHasGlobalStyles( blockName ) { const hasBorderPanel = useHasBorderPanel( settings ); const hasDimensionsPanel = useHasDimensionsPanel( settings ); const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel; - const hasVariationsPanel = useHasVariationsPanel( blockName ); + const hasVariationsPanel = !! useBlockVariations( blockName )?.length; const hasGlobalStyles = hasTypographyPanel || hasColorPanel || diff --git a/packages/edit-site/src/components/global-styles/screen-block.js b/packages/edit-site/src/components/global-styles/screen-block.js index 9e9d585e88d31..08659279f19e0 100644 --- a/packages/edit-site/src/components/global-styles/screen-block.js +++ b/packages/edit-site/src/components/global-styles/screen-block.js @@ -2,25 +2,202 @@ * WordPress dependencies */ import { getBlockType } from '@wordpress/blocks'; +import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { + PanelBody, + __experimentalVStack as VStack, +} from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import ContextMenu from './context-menu'; import ScreenHeader from './header'; import BlockPreviewPanel from './block-preview-panel'; +import { unlock } from '../../private-apis'; +import Subtitle from './subtitle'; +import { useBlockVariations, VariationsPanel } from './variations-panel'; -function ScreenBlock( { name } ) { +const { + useHasDimensionsPanel, + useHasTypographyPanel, + useHasBorderPanel, + useGlobalSetting, + useSettingsForBlockElement, + useHasColorPanel, + useHasEffectsPanel, + useHasFiltersPanel, + useGlobalStyle, + BorderPanel: StylesBorderPanel, + ColorPanel: StylesColorPanel, + TypographyPanel: StylesTypographyPanel, + DimensionsPanel: StylesDimensionsPanel, + EffectsPanel: StylesEffectsPanel, + FiltersPanel: StylesFiltersPanel, + AdvancedPanel: StylesAdvancedPanel, +} = unlock( blockEditorPrivateApis ); + +function ScreenBlock( { name, variation } ) { + let prefixParts = []; + if ( variation ) { + prefixParts = [ 'variations', variation ].concat( prefixParts ); + } + const prefix = prefixParts.join( '.' ); + + const [ style ] = useGlobalStyle( prefix, name, 'user', { + shouldDecodeEncode: false, + } ); + const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { + shouldDecodeEncode: false, + } ); + const [ rawSettings, setSettings ] = useGlobalSetting( '', name ); + const settings = useSettingsForBlockElement( rawSettings, name ); const blockType = getBlockType( name ); + const blockVariations = useBlockVariations( name ); + const hasTypographyPanel = useHasTypographyPanel( settings ); + const hasColorPanel = useHasColorPanel( settings ); + const hasBorderPanel = useHasBorderPanel( settings ); + const hasDimensionsPanel = useHasDimensionsPanel( settings ); + const hasEffectsPanel = useHasEffectsPanel( settings ); + const hasFiltersPanel = useHasFiltersPanel( settings ); + const hasVariationsPanel = !! blockVariations?.length && ! variation; + const { canEditCSS } = useSelect( ( select ) => { + const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = + select( coreStore ); + + const globalStylesId = __experimentalGetCurrentGlobalStylesId(); + const globalStyles = globalStylesId + ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) + : undefined; + + return { + canEditCSS: + !! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false, + }; + }, [] ); + const currentBlockStyle = variation + ? blockVariations.find( ( s ) => s.name === variation ) + : null; + + // These intermediary objects are needed because the "layout" property is stored + // in settings rather than styles. + const inheritedStyleWithLayout = useMemo( () => { + return { + ...inheritedStyle, + layout: settings.layout, + }; + }, [ inheritedStyle, settings.layout ] ); + const styleWithLayout = useMemo( () => { + return { + ...style, + layout: settings.layout, + }; + }, [ style, settings.layout ] ); + const onChangeDimensions = ( newStyle ) => { + const updatedStyle = { ...newStyle }; + delete updatedStyle.layout; + setStyle( updatedStyle ); + + if ( newStyle.layout !== settings.layout ) { + setSettings( { + ...rawSettings, + layout: newStyle.layout, + } ); + } + }; return ( <> - - - + + { hasVariationsPanel && ( +
+ + { __( 'Style Variations' ) } + + +
+ ) } + { hasColorPanel && ( + + ) } + { hasTypographyPanel && ( + + ) } + { hasDimensionsPanel && ( + + ) } + { hasBorderPanel && ( + + ) } + { hasEffectsPanel && ( + + ) } + { hasFiltersPanel && ( + + ) } + { canEditCSS && ( + +

+ { sprintf( + // translators: %s: is the name of a block e.g., 'Image' or 'Table'. + __( + 'Add your own CSS to customize the appearance of the %s block.' + ), + blockType?.title + ) } +

+ + + ) } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-border.js b/packages/edit-site/src/components/global-styles/screen-border.js deleted file mode 100644 index f700f2676448f..0000000000000 --- a/packages/edit-site/src/components/global-styles/screen-border.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import ScreenHeader from './header'; -import BorderPanel from './border-panel'; -import BlockPreviewPanel from './block-preview-panel'; -import { getVariationClassName } from './utils'; -import { unlock } from '../../private-apis'; - -const { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } = - unlock( blockEditorPrivateApis ); - -function ScreenBorder( { name, variation = '' } ) { - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); - const hasBorderPanel = useHasBorderPanel( settings ); - const variationClassName = getVariationClassName( variation ); - return ( - <> - - - { hasBorderPanel && ( - - ) } - - ); -} - -export default ScreenBorder; diff --git a/packages/edit-site/src/components/global-styles/screen-colors.js b/packages/edit-site/src/components/global-styles/screen-colors.js index 1624bdefc7ae9..dc56bbc074b8b 100644 --- a/packages/edit-site/src/components/global-styles/screen-colors.js +++ b/packages/edit-site/src/components/global-styles/screen-colors.js @@ -11,7 +11,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import ScreenHeader from './header'; import Palette from './palette'; import BlockPreviewPanel from './block-preview-panel'; -import { getVariationClassName } from './utils'; import { unlock } from '../../private-apis'; const { @@ -21,21 +20,15 @@ const { ColorPanel: StylesColorPanel, } = unlock( blockEditorPrivateApis ); -function ScreenColors( { name, variation = '' } ) { - const variationClassName = getVariationClassName( variation ); - - let prefixParts = []; - if ( variation ) { - prefixParts = [ 'variations', variation ].concat( prefixParts ); - } - const prefix = prefixParts.join( '.' ); - - const [ style ] = useGlobalStyle( prefix, name, 'user', false ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { +function ScreenColors() { + const [ style ] = useGlobalStyle( '', undefined, 'user', { + shouldDecodeEncode: false, + } ); + const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', { shouldDecodeEncode: false, } ); - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); + const [ rawSettings ] = useGlobalSetting( '' ); + const settings = useSettingsForBlockElement( rawSettings ); return ( <> @@ -46,11 +39,11 @@ function ScreenColors( { name, variation = '' } ) { ) } /> - +
- + @@ -47,7 +43,11 @@ function ScreenCSS( { name } ) { } />
- +
); diff --git a/packages/edit-site/src/components/global-styles/screen-effects.js b/packages/edit-site/src/components/global-styles/screen-effects.js deleted file mode 100644 index cc6b4c3ece0f7..0000000000000 --- a/packages/edit-site/src/components/global-styles/screen-effects.js +++ /dev/null @@ -1,35 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import ScreenHeader from './header'; -import BlockPreviewPanel from './block-preview-panel'; -import { getVariationClassName } from './utils'; -import { unlock } from '../../private-apis'; -import EffectsPanel from './effects-panel'; - -const { useGlobalSetting, useSettingsForBlockElement, useHasEffectsPanel } = - unlock( blockEditorPrivateApis ); - -function ScreenEffects( { name, variation = '' } ) { - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); - const variationClassName = getVariationClassName( variation ); - const hasEffectsPanel = useHasEffectsPanel( settings ); - return ( - <> - - - { hasEffectsPanel && ( - - ) } - - ); -} - -export default ScreenEffects; diff --git a/packages/edit-site/src/components/global-styles/screen-filters.js b/packages/edit-site/src/components/global-styles/screen-filters.js deleted file mode 100644 index e9ba07d935370..0000000000000 --- a/packages/edit-site/src/components/global-styles/screen-filters.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import FiltersPanel from './filters-panel'; -import BlockPreviewPanel from './block-preview-panel'; - -/** - * Internal dependencies - */ -import ScreenHeader from './header'; - -function ScreenFilters( { name } ) { - return ( - <> - - - - - ); -} - -export default ScreenFilters; diff --git a/packages/edit-site/src/components/global-styles/screen-layout.js b/packages/edit-site/src/components/global-styles/screen-layout.js index 02d28d3c9c6da..66626fa82e705 100644 --- a/packages/edit-site/src/components/global-styles/screen-layout.js +++ b/packages/edit-site/src/components/global-styles/screen-layout.js @@ -10,24 +10,20 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import DimensionsPanel from './dimensions-panel'; import ScreenHeader from './header'; import BlockPreviewPanel from './block-preview-panel'; -import { getVariationClassName } from './utils'; import { unlock } from '../../private-apis'; const { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } = unlock( blockEditorPrivateApis ); -function ScreenLayout( { name, variation = '' } ) { - const [ rawSettings ] = useGlobalSetting( '', name ); - const settings = useSettingsForBlockElement( rawSettings, name ); +function ScreenLayout() { + const [ rawSettings ] = useGlobalSetting( '' ); + const settings = useSettingsForBlockElement( rawSettings ); const hasDimensionsPanel = useHasDimensionsPanel( settings ); - const variationClassName = getVariationClassName( variation ); return ( <> - - { hasDimensionsPanel && ( - - ) } + + { hasDimensionsPanel && } ); } diff --git a/packages/edit-site/src/components/global-styles/screen-root.js b/packages/edit-site/src/components/global-styles/screen-root.js index 3372826869b3b..4a4ce14e82e6f 100644 --- a/packages/edit-site/src/components/global-styles/screen-root.js +++ b/packages/edit-site/src/components/global-styles/screen-root.js @@ -23,7 +23,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { IconWithCurrentColor } from './icon-with-current-color'; import { NavigationButtonAsItem } from './navigation-button'; -import ContextMenu from './context-menu'; +import RootMenu from './root-menu'; import StylesPreview from './preview'; import { unlock } from '../../private-apis'; @@ -78,7 +78,7 @@ function ScreenRoot() { ) } - + diff --git a/packages/edit-site/src/components/global-styles/screen-typography-element.js b/packages/edit-site/src/components/global-styles/screen-typography-element.js index f28bf2bfe1706..c5e4239930649 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-element.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-element.js @@ -39,7 +39,7 @@ const elements = { }, }; -function ScreenTypographyElement( { name, element } ) { +function ScreenTypographyElement( { element } ) { const [ headingLevel, setHeadingLevel ] = useState( 'heading' ); return ( @@ -50,7 +50,6 @@ function ScreenTypographyElement( { name, element } ) { /> @@ -100,7 +99,6 @@ function ScreenTypographyElement( { name, element } ) { ) } diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js index 239b1e05950c2..bfbff7f180ff3 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography.js +++ b/packages/edit-site/src/components/global-styles/screen-typography.js @@ -16,15 +16,12 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; import ScreenHeader from './header'; import { NavigationButtonAsItem } from './navigation-button'; import Subtitle from './subtitle'; -import TypographyPanel from './typography-panel'; import BlockPreviewPanel from './block-preview-panel'; -import { getVariationClassName } from './utils'; import { unlock } from '../../private-apis'; const { useGlobalStyle } = unlock( blockEditorPrivateApis ); -function Item( { name, parentMenu, element, label } ) { - const hasSupport = ! name; +function Item( { parentMenu, element, label } ) { const prefix = element === 'text' || ! element ? '' : `elements.${ element }.`; const extraStyles = @@ -33,32 +30,15 @@ function Item( { name, parentMenu, element, label } ) { textDecoration: 'underline', } : {}; - const [ fontFamily ] = useGlobalStyle( - prefix + 'typography.fontFamily', - name - ); - const [ fontStyle ] = useGlobalStyle( - prefix + 'typography.fontStyle', - name - ); - const [ fontWeight ] = useGlobalStyle( - prefix + 'typography.fontWeight', - name - ); + const [ fontFamily ] = useGlobalStyle( prefix + 'typography.fontFamily' ); + const [ fontStyle ] = useGlobalStyle( prefix + 'typography.fontStyle' ); + const [ fontWeight ] = useGlobalStyle( prefix + 'typography.fontWeight' ); const [ letterSpacing ] = useGlobalStyle( - prefix + 'typography.letterSpacing', - name + prefix + 'typography.letterSpacing' ); - const [ backgroundColor ] = useGlobalStyle( - prefix + 'color.background', - name - ); - const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient', name ); - const [ color ] = useGlobalStyle( prefix + 'color.text', name ); - - if ( ! hasSupport ) { - return null; - } + const [ backgroundColor ] = useGlobalStyle( prefix + 'color.background' ); + const [ gradientValue ] = useGlobalStyle( prefix + 'color.gradient' ); + const [ color ] = useGlobalStyle( prefix + 'color.text' ); const navigationButtonLabel = sprintf( // translators: %s: is a subset of Typography, e.g., 'text' or 'links'. @@ -92,9 +72,9 @@ function Item( { name, parentMenu, element, label } ) { ); } -function ScreenTypography( { name, variation = '' } ) { - const parentMenu = name === undefined ? '' : '/blocks/' + name; - const variationClassName = getVariationClassName( variation ); +function ScreenTypography() { + const parentMenu = ''; + return ( <> - + - { ! name && ( -
- - { __( 'Elements' ) } - - - - - - - - -
- ) } - { /* No typography elements support yet for blocks. */ } - { !! name && ( - - ) } +
+ + { __( 'Elements' ) } + + + + + + + + +
); } diff --git a/packages/edit-site/src/components/global-styles/screen-variations.js b/packages/edit-site/src/components/global-styles/screen-variations.js deleted file mode 100644 index 53023115caa26..0000000000000 --- a/packages/edit-site/src/components/global-styles/screen-variations.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { __experimentalVStack as VStack } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { - VariationPanel, - VariationsPanel, - useHasVariationsPanel, -} from './variations-panel'; -import ScreenHeader from './header'; -import BlockPreviewPanel from './block-preview-panel'; -import Subtitle from './subtitle'; - -export function ScreenVariations( { name, path = '' } ) { - const hasVariationsPanel = useHasVariationsPanel( name, path ); - - if ( ! hasVariationsPanel ) { - return null; - } - return ( -
- - { __( 'Style Variations' ) } - - -
- ); -} - -export function ScreenVariation( { blockName, style } ) { - const { name: styleName, label: styleLabel } = style; - return ( - <> - - - - - ); -} diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js index ebdc59484f182..ce5aa95b7246e 100644 --- a/packages/edit-site/src/components/global-styles/typography-panel.js +++ b/packages/edit-site/src/components/global-styles/typography-panel.js @@ -15,32 +15,31 @@ const { TypographyPanel: StylesTypographyPanel, } = unlock( blockEditorPrivateApis ); -export default function TypographyPanel( { - name, - element, - headingLevel, - variation = '', -} ) { +export default function TypographyPanel( { element, headingLevel } ) { let prefixParts = []; if ( element === 'heading' ) { prefixParts = prefixParts.concat( [ 'elements', headingLevel ] ); } else if ( element && element !== 'text' ) { prefixParts = prefixParts.concat( [ 'elements', element ] ); } - if ( variation ) { - prefixParts = [ 'variations', variation ].concat( prefixParts ); - } const prefix = prefixParts.join( '.' ); - const [ style ] = useGlobalStyle( prefix, name, 'user', false ); - const [ inheritedStyle, setStyle ] = useGlobalStyle( prefix, name, 'all', { + const [ style ] = useGlobalStyle( prefix, undefined, 'user', { shouldDecodeEncode: false, } ); - const [ rawSettings ] = useGlobalSetting( '', name ); + const [ inheritedStyle, setStyle ] = useGlobalStyle( + prefix, + undefined, + 'all', + { + shouldDecodeEncode: false, + } + ); + const [ rawSettings ] = useGlobalSetting( '' ); const usedElement = element === 'heading' ? headingLevel : element; const settings = useSettingsForBlockElement( rawSettings, - name, + undefined, usedElement ); diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index a536014180a27..ebc2ae164aa41 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -31,17 +31,13 @@ import { import ScreenBlock from './screen-block'; import ScreenTypography from './screen-typography'; import ScreenTypographyElement from './screen-typography-element'; -import ScreenFilters from './screen-filters'; import ScreenColors from './screen-colors'; import ScreenColorPalette from './screen-color-palette'; import ScreenLayout from './screen-layout'; import ScreenStyleVariations from './screen-style-variations'; -import { ScreenVariation } from './screen-variations'; -import ScreenBorder from './screen-border'; import StyleBook from '../style-book'; import ScreenCSS from './screen-css'; import { unlock } from '../../private-apis'; -import ScreenEffects from './screen-effects'; import { store as editSiteStore } from '../../store'; const SLOT_FILL_NAME = 'GlobalStylesMenu'; @@ -112,33 +108,6 @@ function GlobalStylesNavigationScreen( { className, ...props } ) { ); } -function BlockStyleVariationsScreens( { name } ) { - const blockStyleVariations = useSelect( - ( select ) => { - const { getBlockStyles } = select( blocksStore ); - return getBlockStyles( name ); - }, - [ name ] - ); - if ( ! blockStyleVariations?.length ) { - return null; - } - - return blockStyleVariations.map( ( variation ) => ( - - ) ); -} - function BlockStylesNavigationScreens( { parentMenu, blockStyles, @@ -149,12 +118,12 @@ function BlockStylesNavigationScreens( { key={ index } path={ parentMenu + '/variations/' + style.name } > - + ) ); } -function ContextScreens( { name, parentMenu = '', variation = '' } ) { +function ContextScreens( { name, parentMenu = '' } ) { const blockStyleVariations = useSelect( ( select ) => { const { getBlockStyles } = select( blocksStore ); @@ -165,70 +134,12 @@ function ContextScreens( { name, parentMenu = '', variation = '' } ) { return ( <> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - { !! blockStyleVariations?.length && ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + { blocks.map( ( block ) => ( ) ) } - { blocks.map( ( block, index ) => { - return ( - - ); - } ) } { 'style-book' === editorCanvasContainerView && ( ) } diff --git a/packages/edit-site/src/components/global-styles/variations-panel.js b/packages/edit-site/src/components/global-styles/variations-panel.js index 7cfeb4301750d..823e27038defb 100644 --- a/packages/edit-site/src/components/global-styles/variations-panel.js +++ b/packages/edit-site/src/components/global-styles/variations-panel.js @@ -9,14 +9,12 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components'; */ import { NavigationButtonAsItem } from './navigation-button'; -import ContextMenu from './context-menu'; function getCoreBlockStyles( blockStyles ) { return blockStyles?.filter( ( style ) => style.source === 'block' ); } -export function useHasVariationsPanel( name, parentMenu = '' ) { - const isInsideVariationsPanel = parentMenu.includes( 'variations' ); +export function useBlockVariations( name ) { const blockStyles = useSelect( ( select ) => { const { getBlockStyles } = select( blocksStore ); @@ -25,18 +23,11 @@ export function useHasVariationsPanel( name, parentMenu = '' ) { [ name ] ); const coreBlockStyles = getCoreBlockStyles( blockStyles ); - return !! coreBlockStyles?.length && ! isInsideVariationsPanel; + return coreBlockStyles; } export function VariationsPanel( { name } ) { - const blockStyles = useSelect( - ( select ) => { - const { getBlockStyles } = select( blocksStore ); - return getBlockStyles( name ); - }, - [ name ] - ); - const coreBlockStyles = getCoreBlockStyles( blockStyles ); + const coreBlockStyles = useBlockVariations( name ); return ( @@ -62,17 +53,3 @@ export function VariationsPanel( { name } ) { ); } - -export function VariationPanel( { blockName, styleName } ) { - return ( - - ); -} diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index 06c634a1f5498..57e7e3aea34d9 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js @@ -35,7 +35,6 @@ test.describe( 'Push to Global Styles button', () => { await page .getByRole( 'button', { name: 'Heading block styles' } ) .click(); - await page.getByRole( 'button', { name: 'Typography styles' } ).click(); // Headings should not have uppercase await expect( @@ -87,7 +86,6 @@ test.describe( 'Push to Global Styles button', () => { await page .getByRole( 'button', { name: 'Heading block styles' } ) .click(); - await page.getByRole( 'button', { name: 'Typography styles' } ).click(); // Headings should now have uppercase await expect( diff --git a/test/e2e/specs/site-editor/style-book.spec.js b/test/e2e/specs/site-editor/style-book.spec.js index 56d0ca0cf20f1..28040d40796c8 100644 --- a/test/e2e/specs/site-editor/style-book.spec.js +++ b/test/e2e/specs/site-editor/style-book.spec.js @@ -111,7 +111,6 @@ test.describe( 'Style Book', () => { } ) => { await page.click( 'role=button[name="Blocks styles"]' ); await page.click( 'role=button[name="Heading block styles"]' ); - await page.click( 'role=button[name="Typography styles"]' ); await page .frameLocator( '[name="style-book-canvas"]' )