@wordpress/edit-site 5.6.0 → 5.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/build/components/add-new-template/new-template-part.js +3 -11
- package/build/components/add-new-template/new-template-part.js.map +1 -1
- package/build/components/add-new-template/new-template.js +7 -7
- package/build/components/add-new-template/new-template.js.map +1 -1
- package/build/components/add-new-template/utils.js +1 -1
- package/build/components/add-new-template/utils.js.map +1 -1
- package/build/components/block-editor/editor-canvas.js +7 -10
- package/build/components/block-editor/editor-canvas.js.map +1 -1
- package/build/components/global-styles/context-menu.js +2 -3
- package/build/components/global-styles/context-menu.js.map +1 -1
- package/build/components/global-styles/hooks.js +1 -58
- package/build/components/global-styles/hooks.js.map +1 -1
- package/build/components/global-styles/preview.js +3 -4
- package/build/components/global-styles/preview.js.map +1 -1
- package/build/components/global-styles/screen-block-list.js +3 -4
- package/build/components/global-styles/screen-block-list.js.map +1 -1
- package/build/components/global-styles/screen-colors.js +22 -211
- package/build/components/global-styles/screen-colors.js.map +1 -1
- package/build/components/global-styles/screen-typography-element.js +4 -0
- package/build/components/global-styles/screen-typography-element.js.map +1 -1
- package/build/components/global-styles/screen-typography.js +5 -0
- package/build/components/global-styles/screen-typography.js.map +1 -1
- package/build/components/global-styles/ui.js +5 -35
- package/build/components/global-styles/ui.js.map +1 -1
- package/build/components/global-styles-renderer/index.js +1 -2
- package/build/components/global-styles-renderer/index.js.map +1 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js +6 -1
- package/build/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build/components/start-template-options/index.js +44 -9
- package/build/components/start-template-options/index.js.map +1 -1
- package/build/components/style-book/index.js +6 -7
- package/build/components/style-book/index.js.map +1 -1
- package/build/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build-module/components/add-new-template/new-template-part.js +3 -9
- package/build-module/components/add-new-template/new-template-part.js.map +1 -1
- package/build-module/components/add-new-template/new-template.js +7 -7
- package/build-module/components/add-new-template/new-template.js.map +1 -1
- package/build-module/components/add-new-template/utils.js +1 -1
- package/build-module/components/add-new-template/utils.js.map +1 -1
- package/build-module/components/block-editor/editor-canvas.js +8 -11
- package/build-module/components/block-editor/editor-canvas.js.map +1 -1
- package/build-module/components/global-styles/context-menu.js +2 -2
- package/build-module/components/global-styles/context-menu.js.map +1 -1
- package/build-module/components/global-styles/hooks.js +1 -52
- package/build-module/components/global-styles/hooks.js.map +1 -1
- package/build-module/components/global-styles/preview.js +3 -4
- package/build-module/components/global-styles/preview.js.map +1 -1
- package/build-module/components/global-styles/screen-block-list.js +3 -3
- package/build-module/components/global-styles/screen-block-list.js.map +1 -1
- package/build-module/components/global-styles/screen-colors.js +23 -208
- package/build-module/components/global-styles/screen-colors.js.map +1 -1
- package/build-module/components/global-styles/screen-typography-element.js +4 -0
- package/build-module/components/global-styles/screen-typography-element.js.map +1 -1
- package/build-module/components/global-styles/screen-typography.js +5 -0
- package/build-module/components/global-styles/screen-typography.js.map +1 -1
- package/build-module/components/global-styles/ui.js +5 -30
- package/build-module/components/global-styles/ui.js.map +1 -1
- package/build-module/components/global-styles-renderer/index.js +1 -2
- package/build-module/components/global-styles-renderer/index.js.map +1 -1
- package/build-module/components/secondary-sidebar/list-view-sidebar.js +6 -2
- package/build-module/components/secondary-sidebar/list-view-sidebar.js.map +1 -1
- package/build-module/components/start-template-options/index.js +45 -10
- package/build-module/components/start-template-options/index.js.map +1 -1
- package/build-module/components/style-book/index.js +7 -8
- package/build-module/components/style-book/index.js.map +1 -1
- package/build-module/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build-module/hooks/push-changes-to-global-styles/index.js.map +1 -1
- package/build-style/style-rtl.css +4 -17
- package/build-style/style.css +4 -17
- package/package.json +31 -31
- package/src/components/add-new-template/new-template-part.js +1 -6
- package/src/components/add-new-template/new-template.js +3 -6
- package/src/components/add-new-template/utils.js +1 -1
- package/src/components/block-editor/editor-canvas.js +13 -23
- package/src/components/global-styles/context-menu.js +2 -2
- package/src/components/global-styles/hooks.js +1 -78
- package/src/components/global-styles/preview.js +1 -1
- package/src/components/global-styles/screen-block-list.js +2 -2
- package/src/components/global-styles/screen-colors.js +25 -229
- package/src/components/global-styles/screen-typography-element.js +4 -0
- package/src/components/global-styles/screen-typography.js +6 -0
- package/src/components/global-styles/stories/index.js +425 -0
- package/src/components/global-styles/style.scss +4 -18
- package/src/components/global-styles/ui.js +6 -31
- package/src/components/global-styles-renderer/index.js +1 -2
- package/src/components/secondary-sidebar/list-view-sidebar.js +4 -3
- package/src/components/start-template-options/index.js +40 -8
- package/src/components/style-book/index.js +10 -16
- package/src/components/style-book/style.scss +1 -1
- package/src/hooks/push-changes-to-global-styles/index.js +1 -0
- package/build/components/global-styles/color-utils.js +0 -17
- package/build/components/global-styles/color-utils.js.map +0 -1
- package/build/components/global-styles/screen-background-color.js +0 -114
- package/build/components/global-styles/screen-background-color.js.map +0 -1
- package/build/components/global-styles/screen-button-color.js +0 -88
- package/build/components/global-styles/screen-button-color.js.map +0 -1
- package/build/components/global-styles/screen-heading-color.js +0 -165
- package/build/components/global-styles/screen-heading-color.js.map +0 -1
- package/build/components/global-styles/screen-link-color.js +0 -105
- package/build/components/global-styles/screen-link-color.js.map +0 -1
- package/build/components/global-styles/screen-text-color.js +0 -71
- package/build/components/global-styles/screen-text-color.js.map +0 -1
- package/build-module/components/global-styles/color-utils.js +0 -9
- package/build-module/components/global-styles/color-utils.js.map +0 -1
- package/build-module/components/global-styles/screen-background-color.js +0 -97
- package/build-module/components/global-styles/screen-background-color.js.map +0 -1
- package/build-module/components/global-styles/screen-button-color.js +0 -73
- package/build-module/components/global-styles/screen-button-color.js.map +0 -1
- package/build-module/components/global-styles/screen-heading-color.js +0 -149
- package/build-module/components/global-styles/screen-heading-color.js.map +0 -1
- package/build-module/components/global-styles/screen-link-color.js +0 -89
- package/build-module/components/global-styles/screen-link-color.js.map +0 -1
- package/build-module/components/global-styles/screen-text-color.js +0 -56
- package/build-module/components/global-styles/screen-text-color.js.map +0 -1
- package/src/components/global-styles/color-utils.js +0 -14
- package/src/components/global-styles/screen-background-color.js +0 -132
- package/src/components/global-styles/screen-button-color.js +0 -104
- package/src/components/global-styles/screen-heading-color.js +0 -206
- package/src/components/global-styles/screen-link-color.js +0 -124
- package/src/components/global-styles/screen-text-color.js +0 -62
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalSpacer","Spacer","FlexItem","CardBody","CardDivider","typography","border","filter","shadow","color","layout","chevronLeft","chevronRight","isRTL","__","useSelect","store","coreStore","privateApis","blockEditorPrivateApis","useHasColorPanel","useHasFilterPanel","useHasVariationsPanel","NavigationButtonAsItem","IconWithCurrentColor","ScreenVariations","useHasShadowControl","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","ContextMenu","name","parentMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasFilterPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tFlexItem,\n\tCardBody,\n\tCardDivider,\n} from '@wordpress/components';\nimport {\n\ttypography,\n\tborder,\n\tfilter,\n\tshadow,\n\tcolor,\n\tlayout,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasColorPanel } from './color-utils';\nimport { useHasFilterPanel } from './filter-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasFilterPanel = useHasFilterPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\tconst isBlocksPanel =\n\t\tparentMenu.includes( 'blocks' ) &&\n\t\t! parentMenu.includes( 'variations' );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBorderPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ border }\n\t\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\t\taria-label={ __( 'Border' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasFilterPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ filter }\n\t\t\t\t\t\tpath={ parentMenu + '/filters' }\n\t\t\t\t\t\taria-label={ __( 'Filters styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Filters' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasVariationsPanel && (\n\t\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t\t) }\n\t\t\t\t{ isBlocksPanel && canEditCSS && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<Spacer as=\"p\" paddingTop={ 2 } marginBottom={ 4 }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Add your own CSS to customize the block appearance.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\t\tpath={ parentMenu + '/css' }\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default ContextMenu;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/context-menu.js"],"names":["__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalSpacer","Spacer","FlexItem","CardBody","CardDivider","typography","border","filter","shadow","color","layout","chevronLeft","chevronRight","isRTL","__","useSelect","store","coreStore","privateApis","blockEditorPrivateApis","useHasFilterPanel","useHasVariationsPanel","NavigationButtonAsItem","IconWithCurrentColor","ScreenVariations","useHasShadowControl","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","ContextMenu","name","parentMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasEffectsPanel","hasFilterPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","canEditCSS","select","getEntityRecord","__experimentalGetCurrentGlobalStylesId","globalStylesId","globalStyles","undefined","_links","isBlocksPanel","includes"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalSpacer as Spacer,\n\tFlexItem,\n\tCardBody,\n\tCardDivider,\n} from '@wordpress/components';\nimport {\n\ttypography,\n\tborder,\n\tfilter,\n\tshadow,\n\tcolor,\n\tlayout,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { useHasFilterPanel } from './filter-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { IconWithCurrentColor } from './icon-with-current-color';\nimport { ScreenVariations } from './screen-variations';\nimport { useHasShadowControl } from './shadow-panel';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction ContextMenu( { name, parentMenu = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasEffectsPanel = useHasShadowControl( name );\n\tconst hasFilterPanel = useHasFilterPanel( name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( name, parentMenu );\n\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS:\n\t\t\t\t!! globalStyles?._links?.[ 'wp:action-edit-css' ] ?? false,\n\t\t};\n\t}, [] );\n\n\tconst isBlocksPanel =\n\t\tparentMenu.includes( 'blocks' ) &&\n\t\t! parentMenu.includes( 'variations' );\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath={ parentMenu + '/typography' }\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath={ parentMenu + '/colors' }\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasBorderPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ border }\n\t\t\t\t\t\tpath={ parentMenu + '/border' }\n\t\t\t\t\t\taria-label={ __( 'Border' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Border' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasEffectsPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ shadow }\n\t\t\t\t\t\tpath={ parentMenu + '/effects' }\n\t\t\t\t\t\taria-label={ __( 'Shadow' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Shadow' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasFilterPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ filter }\n\t\t\t\t\t\tpath={ parentMenu + '/filters' }\n\t\t\t\t\t\taria-label={ __( 'Filters styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Filters' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath={ parentMenu + '/layout' }\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasVariationsPanel && (\n\t\t\t\t\t<ScreenVariations name={ name } path={ parentMenu } />\n\t\t\t\t) }\n\t\t\t\t{ isBlocksPanel && canEditCSS && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<Spacer as=\"p\" paddingTop={ 2 } marginBottom={ 4 }>\n\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t'Add your own CSS to customize the block appearance.'\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\t\t\t\tpath={ parentMenu + '/css' }\n\t\t\t\t\t\t\t\t\taria-label={ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t{ __( 'Additional block CSS' ) }\n\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t<IconWithCurrentColor\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t\t\t\t</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t\t<CardDivider />\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default ContextMenu;\n"]}
|
|
@@ -7,8 +7,6 @@ import a11yPlugin from 'colord/plugins/a11y';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
import { _x } from '@wordpress/i18n';
|
|
11
|
-
import { useMemo } from '@wordpress/element';
|
|
12
10
|
import { store as blocksStore } from '@wordpress/blocks';
|
|
13
11
|
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
14
12
|
/**
|
|
@@ -18,59 +16,10 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
|
18
16
|
import { unlock } from '../../private-apis';
|
|
19
17
|
import { useSelect } from '@wordpress/data';
|
|
20
18
|
const {
|
|
21
|
-
useGlobalSetting
|
|
22
|
-
useColorsPerOrigin: useColorsPerOriginFromSettings
|
|
19
|
+
useGlobalSetting
|
|
23
20
|
} = unlock(blockEditorPrivateApis); // Enable colord's a11y plugin.
|
|
24
21
|
|
|
25
22
|
extend([a11yPlugin]);
|
|
26
|
-
export function useColorsPerOrigin(name) {
|
|
27
|
-
const [customColors] = useGlobalSetting('color.palette.custom', name);
|
|
28
|
-
const [themeColors] = useGlobalSetting('color.palette.theme', name);
|
|
29
|
-
const [defaultColors] = useGlobalSetting('color.palette.default', name);
|
|
30
|
-
const [shouldDisplayDefaultColors] = useGlobalSetting('color.defaultPalette');
|
|
31
|
-
return useColorsPerOriginFromSettings({
|
|
32
|
-
color: {
|
|
33
|
-
palette: {
|
|
34
|
-
custom: customColors,
|
|
35
|
-
theme: themeColors,
|
|
36
|
-
default: defaultColors
|
|
37
|
-
},
|
|
38
|
-
defaultPalette: shouldDisplayDefaultColors
|
|
39
|
-
}
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
export function useGradientsPerOrigin(name) {
|
|
43
|
-
const [customGradients] = useGlobalSetting('color.gradients.custom', name);
|
|
44
|
-
const [themeGradients] = useGlobalSetting('color.gradients.theme', name);
|
|
45
|
-
const [defaultGradients] = useGlobalSetting('color.gradients.default', name);
|
|
46
|
-
const [shouldDisplayDefaultGradients] = useGlobalSetting('color.defaultGradients');
|
|
47
|
-
return useMemo(() => {
|
|
48
|
-
const result = [];
|
|
49
|
-
|
|
50
|
-
if (themeGradients && themeGradients.length) {
|
|
51
|
-
result.push({
|
|
52
|
-
name: _x('Theme', 'Indicates this palette comes from the theme.'),
|
|
53
|
-
gradients: themeGradients
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
if (shouldDisplayDefaultGradients && defaultGradients && defaultGradients.length) {
|
|
58
|
-
result.push({
|
|
59
|
-
name: _x('Default', 'Indicates this palette comes from WordPress.'),
|
|
60
|
-
gradients: defaultGradients
|
|
61
|
-
});
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
if (customGradients && customGradients.length) {
|
|
65
|
-
result.push({
|
|
66
|
-
name: _x('Custom', 'Indicates this palette is created by the user.'),
|
|
67
|
-
gradients: customGradients
|
|
68
|
-
});
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return result;
|
|
72
|
-
}, [customGradients, themeGradients, defaultGradients]);
|
|
73
|
-
}
|
|
74
23
|
export function useColorRandomizer(name) {
|
|
75
24
|
const [themeColors, setThemeColors] = useGlobalSetting('color.palette.theme', name);
|
|
76
25
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["colord","extend","a11yPlugin","
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAuBF,MAAM,CAAED,sBAAF,CAAnC,C,CAEA;;AACAL,MAAM,CAAE,CAAEC,UAAF,CAAF,CAAN;AAEA,OAAO,SAASQ,kBAAT,CAA6BC,IAA7B,EAAoC;AAC1C,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCJ,gBAAgB,CACvD,qBADuD,EAEvDE,IAFuD,CAAxD;;AAKA,WAASG,eAAT,GAA2B;AAC1B;AACA,UAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAL,CAAYD,IAAI,CAACE,MAAL,KAAgB,GAA5B,CAA5B;AACA;;AAEA,UAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAZ,CAAmBC,WAAF,IAAmB;AACrD,YAAM;AAAEC,QAAAA;AAAF,UAAYD,WAAlB;AACA,YAAME,QAAQ,GAAGvB,MAAM,CAAEsB,KAAF,CAAN,CACfE,MADe,CACPT,mBADO,EAEfU,KAFe,EAAjB;AAIA,aAAO,EACN,GAAGJ,WADG;AAENC,QAAAA,KAAK,EAAEC;AAFD,OAAP;AAIA,KAViB,CAAlB;AAYAV,IAAAA,cAAc,CAAEM,SAAF,CAAd;AACA;;AAED,SAAOO,MAAM,CAACC,mCAAP,GACJ,CAAEb,eAAF,CADI,GAEJ,EAFH;AAGA;AAED,OAAO,SAASc,kBAAT,CAA6BjB,IAA7B,EAAmCkB,OAAnC,EAA6C;AACnD,QAAM;AAAEC,IAAAA;AAAF,MAAsBtB,SAAS,CAClCuB,MAAF,IAAc;AACb,WAAO;AACND,MAAAA,eAAe,EAAEvB,MAAM,CACtBwB,MAAM,CAAE3B,WAAF,CADgB,CAAN,CAEf4B,kBAFe,CAEKrB,IAFL,EAEWkB,OAFX;AADX,KAAP;AAKA,GAPmC,EAQpC,CAAElB,IAAF,EAAQkB,OAAR,CARoC,CAArC;AAWA,SAAOC,eAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"]}
|
|
@@ -99,16 +99,15 @@ const StylesPreview = _ref => {
|
|
|
99
99
|
}
|
|
100
100
|
}, containerResizeListener), isReady && createElement(Iframe, {
|
|
101
101
|
className: "edit-site-global-styles-preview__iframe",
|
|
102
|
-
head: createElement(EditorStyles, {
|
|
103
|
-
styles: editorStyles
|
|
104
|
-
}),
|
|
105
102
|
style: {
|
|
106
103
|
height: normalizedHeight * ratio
|
|
107
104
|
},
|
|
108
105
|
onMouseEnter: () => setIsHovered(true),
|
|
109
106
|
onMouseLeave: () => setIsHovered(false),
|
|
110
107
|
tabIndex: -1
|
|
111
|
-
}, createElement(
|
|
108
|
+
}, createElement(EditorStyles, {
|
|
109
|
+
styles: editorStyles
|
|
110
|
+
}), createElement(motion.div, {
|
|
112
111
|
style: {
|
|
113
112
|
height: normalizedHeight * ratio,
|
|
114
113
|
width: '100%',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","isReady","position","height","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","isReady","position","height","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<EditorStyles styles={ editorStyles } />\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"]}
|
|
@@ -15,7 +15,6 @@ import { speak } from '@wordpress/a11y';
|
|
|
15
15
|
* Internal dependencies
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
|
-
import { useHasColorPanel } from './color-utils';
|
|
19
18
|
import { useHasVariationsPanel } from './variations-panel';
|
|
20
19
|
import ScreenHeader from './header';
|
|
21
20
|
import { NavigationButtonAsItem } from './navigation-button';
|
|
@@ -25,7 +24,8 @@ const {
|
|
|
25
24
|
useHasTypographyPanel,
|
|
26
25
|
useHasBorderPanel,
|
|
27
26
|
useGlobalSetting,
|
|
28
|
-
useSettingsForBlockElement
|
|
27
|
+
useSettingsForBlockElement,
|
|
28
|
+
useHasColorPanel
|
|
29
29
|
} = unlock(blockEditorPrivateApis);
|
|
30
30
|
|
|
31
31
|
function useSortedBlockTypes() {
|
|
@@ -62,7 +62,7 @@ function BlockMenuItem(_ref) {
|
|
|
62
62
|
const [rawSettings] = useGlobalSetting('', block.name);
|
|
63
63
|
const settings = useSettingsForBlockElement(rawSettings, block.name);
|
|
64
64
|
const hasTypographyPanel = useHasTypographyPanel(settings);
|
|
65
|
-
const hasColorPanel = useHasColorPanel(
|
|
65
|
+
const hasColorPanel = useHasColorPanel(settings);
|
|
66
66
|
const hasBorderPanel = useHasBorderPanel(settings);
|
|
67
67
|
const hasDimensionsPanel = useHasDimensionsPanel(settings);
|
|
68
68
|
const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasColorPanel","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasColorPanel } from './color-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useHasColorPanel","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
|
|
@@ -4,7 +4,7 @@ import { createElement, Fragment } from "@wordpress/element";
|
|
|
4
4
|
* WordPress dependencies
|
|
5
5
|
*/
|
|
6
6
|
import { __ } from '@wordpress/i18n';
|
|
7
|
-
import {
|
|
7
|
+
import { __experimentalVStack as VStack } from '@wordpress/components';
|
|
8
8
|
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
9
9
|
/**
|
|
10
10
|
* Internal dependencies
|
|
@@ -12,198 +12,35 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
|
|
|
12
12
|
|
|
13
13
|
import ScreenHeader from './header';
|
|
14
14
|
import Palette from './palette';
|
|
15
|
-
import { NavigationButtonAsItem } from './navigation-button';
|
|
16
|
-
import { useSupportedStyles } from './hooks';
|
|
17
|
-
import Subtitle from './subtitle';
|
|
18
|
-
import ColorIndicatorWrapper from './color-indicator-wrapper';
|
|
19
15
|
import BlockPreviewPanel from './block-preview-panel';
|
|
20
16
|
import { getVariationClassName } from './utils';
|
|
21
17
|
import { unlock } from '../../private-apis';
|
|
22
18
|
const {
|
|
23
|
-
useGlobalStyle
|
|
19
|
+
useGlobalStyle,
|
|
20
|
+
useGlobalSetting,
|
|
21
|
+
useSettingsForBlockElement,
|
|
22
|
+
ColorPanel: StylesColorPanel
|
|
24
23
|
} = unlock(blockEditorPrivateApis);
|
|
25
24
|
|
|
26
|
-
function
|
|
25
|
+
function ScreenColors(_ref) {
|
|
27
26
|
let {
|
|
28
27
|
name,
|
|
29
|
-
parentMenu,
|
|
30
28
|
variation = ''
|
|
31
29
|
} = _ref;
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
const supports = useSupportedStyles(name);
|
|
35
|
-
const hasSupport = supports.includes('backgroundColor') || supports.includes('background');
|
|
36
|
-
const [backgroundColor] = useGlobalStyle(prefix + 'color.background', name);
|
|
37
|
-
const [gradientValue] = useGlobalStyle(prefix + 'color.gradient', name);
|
|
38
|
-
|
|
39
|
-
if (!hasSupport) {
|
|
40
|
-
return null;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return createElement(NavigationButtonAsItem, {
|
|
44
|
-
path: parentMenu + urlPrefix + '/colors/background',
|
|
45
|
-
"aria-label": __('Colors background styles')
|
|
46
|
-
}, createElement(HStack, {
|
|
47
|
-
justify: "flex-start"
|
|
48
|
-
}, createElement(ColorIndicatorWrapper, {
|
|
49
|
-
expanded: false
|
|
50
|
-
}, createElement(ColorIndicator, {
|
|
51
|
-
colorValue: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
|
|
52
|
-
"data-testid": "background-color-indicator"
|
|
53
|
-
})), createElement(FlexItem, {
|
|
54
|
-
className: "edit-site-global-styles__color-label"
|
|
55
|
-
}, __('Background'))));
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
function TextColorItem(_ref2) {
|
|
59
|
-
let {
|
|
60
|
-
name,
|
|
61
|
-
parentMenu,
|
|
62
|
-
variation = ''
|
|
63
|
-
} = _ref2;
|
|
64
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
65
|
-
const urlPrefix = variation ? `/variations/${variation}` : '';
|
|
66
|
-
const supports = useSupportedStyles(name);
|
|
67
|
-
const hasSupport = supports.includes('color');
|
|
68
|
-
const [color] = useGlobalStyle(prefix + 'color.text', name);
|
|
69
|
-
|
|
70
|
-
if (!hasSupport) {
|
|
71
|
-
return null;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
return createElement(NavigationButtonAsItem, {
|
|
75
|
-
path: parentMenu + urlPrefix + '/colors/text',
|
|
76
|
-
"aria-label": __('Colors text styles')
|
|
77
|
-
}, createElement(HStack, {
|
|
78
|
-
justify: "flex-start"
|
|
79
|
-
}, createElement(ColorIndicatorWrapper, {
|
|
80
|
-
expanded: false
|
|
81
|
-
}, createElement(ColorIndicator, {
|
|
82
|
-
colorValue: color,
|
|
83
|
-
"data-testid": "text-color-indicator"
|
|
84
|
-
})), createElement(FlexItem, {
|
|
85
|
-
className: "edit-site-global-styles__color-label"
|
|
86
|
-
}, __('Text'))));
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
function LinkColorItem(_ref3) {
|
|
90
|
-
let {
|
|
91
|
-
name,
|
|
92
|
-
parentMenu,
|
|
93
|
-
variation = ''
|
|
94
|
-
} = _ref3;
|
|
95
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
96
|
-
const urlPrefix = variation ? `/variations/${variation}` : '';
|
|
97
|
-
const supports = useSupportedStyles(name);
|
|
98
|
-
const hasSupport = supports.includes('linkColor');
|
|
99
|
-
const [color] = useGlobalStyle(prefix + 'elements.link.color.text', name);
|
|
100
|
-
const [colorHover] = useGlobalStyle(prefix + 'elements.link.:hover.color.text', name);
|
|
101
|
-
|
|
102
|
-
if (!hasSupport) {
|
|
103
|
-
return null;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
return createElement(NavigationButtonAsItem, {
|
|
107
|
-
path: parentMenu + urlPrefix + '/colors/link',
|
|
108
|
-
"aria-label": __('Colors link styles')
|
|
109
|
-
}, createElement(HStack, {
|
|
110
|
-
justify: "flex-start"
|
|
111
|
-
}, createElement(ZStack, {
|
|
112
|
-
isLayered: false,
|
|
113
|
-
offset: -8
|
|
114
|
-
}, createElement(ColorIndicatorWrapper, {
|
|
115
|
-
expanded: false
|
|
116
|
-
}, createElement(ColorIndicator, {
|
|
117
|
-
colorValue: color
|
|
118
|
-
})), createElement(ColorIndicatorWrapper, {
|
|
119
|
-
expanded: false
|
|
120
|
-
}, createElement(ColorIndicator, {
|
|
121
|
-
colorValue: colorHover
|
|
122
|
-
}))), createElement(FlexItem, {
|
|
123
|
-
className: "edit-site-global-styles__color-label"
|
|
124
|
-
}, __('Links'))));
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
function HeadingColorItem(_ref4) {
|
|
128
|
-
let {
|
|
129
|
-
name,
|
|
130
|
-
parentMenu,
|
|
131
|
-
variation = ''
|
|
132
|
-
} = _ref4;
|
|
133
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
134
|
-
const urlPrefix = variation ? `/variations/${variation}` : '';
|
|
135
|
-
const supports = useSupportedStyles(name);
|
|
136
|
-
const hasSupport = supports.includes('color');
|
|
137
|
-
const [color] = useGlobalStyle(prefix + 'elements.heading.color.text', name);
|
|
138
|
-
const [bgColor] = useGlobalStyle(prefix + 'elements.heading.color.background', name);
|
|
139
|
-
|
|
140
|
-
if (!hasSupport) {
|
|
141
|
-
return null;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
return createElement(NavigationButtonAsItem, {
|
|
145
|
-
path: parentMenu + urlPrefix + '/colors/heading',
|
|
146
|
-
"aria-label": __('Colors heading styles')
|
|
147
|
-
}, createElement(HStack, {
|
|
148
|
-
justify: "flex-start"
|
|
149
|
-
}, createElement(ZStack, {
|
|
150
|
-
isLayered: false,
|
|
151
|
-
offset: -8
|
|
152
|
-
}, createElement(ColorIndicatorWrapper, {
|
|
153
|
-
expanded: false
|
|
154
|
-
}, createElement(ColorIndicator, {
|
|
155
|
-
colorValue: bgColor
|
|
156
|
-
})), createElement(ColorIndicatorWrapper, {
|
|
157
|
-
expanded: false
|
|
158
|
-
}, createElement(ColorIndicator, {
|
|
159
|
-
colorValue: color
|
|
160
|
-
}))), createElement(FlexItem, null, __('Headings'))));
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
function ButtonColorItem(_ref5) {
|
|
164
|
-
let {
|
|
165
|
-
name,
|
|
166
|
-
parentMenu,
|
|
167
|
-
variation = ''
|
|
168
|
-
} = _ref5;
|
|
169
|
-
const prefix = variation ? `variations.${variation}.` : '';
|
|
170
|
-
const urlPrefix = variation ? `/variations/${variation}` : '';
|
|
171
|
-
const supports = useSupportedStyles(name);
|
|
172
|
-
const hasSupport = supports.includes('buttonColor');
|
|
173
|
-
const [color] = useGlobalStyle(prefix + 'elements.button.color.text', name);
|
|
174
|
-
const [bgColor] = useGlobalStyle(prefix + 'elements.button.color.background', name);
|
|
30
|
+
const variationClassName = getVariationClassName(variation);
|
|
31
|
+
let prefixParts = [];
|
|
175
32
|
|
|
176
|
-
if (
|
|
177
|
-
|
|
33
|
+
if (variation) {
|
|
34
|
+
prefixParts = ['variations', variation].concat(prefixParts);
|
|
178
35
|
}
|
|
179
36
|
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
}, createElement(ColorIndicatorWrapper, {
|
|
188
|
-
expanded: false
|
|
189
|
-
}, createElement(ColorIndicator, {
|
|
190
|
-
colorValue: bgColor
|
|
191
|
-
})), createElement(ColorIndicatorWrapper, {
|
|
192
|
-
expanded: false
|
|
193
|
-
}, createElement(ColorIndicator, {
|
|
194
|
-
colorValue: color
|
|
195
|
-
}))), createElement(FlexItem, {
|
|
196
|
-
className: "edit-site-global-styles__color-label"
|
|
197
|
-
}, __('Buttons'))));
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
function ScreenColors(_ref6) {
|
|
201
|
-
let {
|
|
202
|
-
name,
|
|
203
|
-
variation = ''
|
|
204
|
-
} = _ref6;
|
|
205
|
-
const parentMenu = name === undefined ? '' : '/blocks/' + encodeURIComponent(name);
|
|
206
|
-
const variationClassName = getVariationClassName(variation);
|
|
37
|
+
const prefix = prefixParts.join('.');
|
|
38
|
+
const [style] = useGlobalStyle(prefix, name, 'user', false);
|
|
39
|
+
const [inheritedStyle, setStyle] = useGlobalStyle(prefix, name, 'all', {
|
|
40
|
+
shouldDecodeEncode: false
|
|
41
|
+
});
|
|
42
|
+
const [rawSettings] = useGlobalSetting('', name);
|
|
43
|
+
const settings = useSettingsForBlockElement(rawSettings, name);
|
|
207
44
|
return createElement(Fragment, null, createElement(ScreenHeader, {
|
|
208
45
|
title: __('Colors'),
|
|
209
46
|
description: __('Manage palettes and the default color of different global elements on the site.')
|
|
@@ -216,34 +53,12 @@ function ScreenColors(_ref6) {
|
|
|
216
53
|
spacing: 10
|
|
217
54
|
}, createElement(Palette, {
|
|
218
55
|
name: name
|
|
219
|
-
}), createElement(
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
isSeparated: true
|
|
226
|
-
}, createElement(BackgroundColorItem, {
|
|
227
|
-
name: name,
|
|
228
|
-
parentMenu: parentMenu,
|
|
229
|
-
variation: variation
|
|
230
|
-
}), createElement(TextColorItem, {
|
|
231
|
-
name: name,
|
|
232
|
-
parentMenu: parentMenu,
|
|
233
|
-
variation: variation
|
|
234
|
-
}), createElement(LinkColorItem, {
|
|
235
|
-
name: name,
|
|
236
|
-
parentMenu: parentMenu,
|
|
237
|
-
variation: variation
|
|
238
|
-
}), createElement(HeadingColorItem, {
|
|
239
|
-
name: name,
|
|
240
|
-
parentMenu: parentMenu,
|
|
241
|
-
variation: variation
|
|
242
|
-
}), createElement(ButtonColorItem, {
|
|
243
|
-
name: name,
|
|
244
|
-
parentMenu: parentMenu,
|
|
245
|
-
variation: variation
|
|
246
|
-
}))))));
|
|
56
|
+
}), createElement(StylesColorPanel, {
|
|
57
|
+
inheritedValue: inheritedStyle,
|
|
58
|
+
value: style,
|
|
59
|
+
onChange: setStyle,
|
|
60
|
+
settings: settings
|
|
61
|
+
}))));
|
|
247
62
|
}
|
|
248
63
|
|
|
249
64
|
export default ScreenColors;
|