diff --git a/experimental-default-global-styles.json b/experimental-default-global-styles.json deleted file mode 100644 index da4314beaaf322..00000000000000 --- a/experimental-default-global-styles.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "color": { - "primary": "#52accc", - "background": "white", - "text": "black" - } -} diff --git a/lib/demo-block-templates/front-page.html b/lib/demo-block-templates/front-page.html index a78b55b53eb6e4..da11edd68e8754 100644 --- a/lib/demo-block-templates/front-page.html +++ b/lib/demo-block-templates/front-page.html @@ -10,12 +10,12 @@
- - - - - - + + + + + +
@@ -23,7 +23,7 @@ -
+
@@ -35,8 +35,7 @@
-

With full-site editing you can modify all - visual aspects of the site using the block editor.

+

With full-site editing you can modify all visual aspects of the site using the block editor.

@@ -49,19 +48,19 @@
-
- - -
+
+ + +
-
- -

Footer

- -
+
+ +

Footer

+ +
diff --git a/lib/global-styles.php b/lib/global-styles.php index 6c98d272202976..8a2b76c1b86b6d 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -90,11 +90,11 @@ function gutenberg_experimental_global_styles_get_user() { * * @param array $post_status_filter Filter CPT by post status. * By default, only fetches published posts. - * @param bool $should_create_draft Whether a new draft should be created - * if no CPT was found. False by default. + * @param bool $should_create_cpt Whether a new draft should be created + * if no CPT was found. False by default. * @return array Custom Post Type for the user's Global Styles. */ -function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_draft = false ) { +function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter = array( 'publish' ), $should_create_cpt = false ) { $user_cpt = array(); $post_type_filter = 'wp_global_styles'; $post_name_filter = 'wp-global-styles-' . strtolower( wp_get_theme()->get( 'TextDomain' ) ); @@ -111,11 +111,11 @@ function gutenberg_experimental_global_styles_get_user_cpt( $post_status_filter if ( is_array( $recent_posts ) && ( count( $recent_posts ) === 1 ) ) { $user_cpt = $recent_posts[0]; - } elseif ( $should_create_draft ) { + } elseif ( $should_create_cpt ) { $cpt_post_id = wp_insert_post( array( 'post_content' => '{}', - 'post_status' => 'draft', + 'post_status' => 'publish', 'post_type' => $post_type_filter, 'post_name' => $post_name_filter, ), @@ -148,7 +148,7 @@ function gutenberg_experimental_global_styles_get_user_cpt_id() { */ function gutenberg_experimental_global_styles_get_core() { return gutenberg_experimental_global_styles_get_from_file( - dirname( dirname( __FILE__ ) ) . '/experimental-default-global-styles.json' + dirname( __FILE__ ) . '/global-styles/experimental-default-global-styles.json' ); } @@ -164,15 +164,21 @@ function gutenberg_experimental_global_styles_get_theme() { } /** - * Takes a Global Styles tree and returns a CSS rule + * Takes core, theme, and user preferences, + * builds a single global styles tree and returns a CSS rule * that contains the corresponding CSS custom properties. * - * @param array $global_styles Global Styles tree. * @return string CSS rule. */ -function gutenberg_experimental_global_styles_resolver( $global_styles ) { +function gutenberg_experimental_global_styles_resolver() { $css_rule = ''; + $global_styles = array_replace_recursive( + gutenberg_experimental_global_styles_get_core(), + gutenberg_experimental_global_styles_get_theme(), + gutenberg_experimental_global_styles_get_user() + ); + $token = '--'; $prefix = '--wp' . $token; $css_vars = gutenberg_experimental_global_styles_get_css_vars( $global_styles, $prefix, $token ); @@ -208,13 +214,7 @@ function gutenberg_experimental_global_styles_enqueue_assets() { return; } - $global_styles = array_merge( - gutenberg_experimental_global_styles_get_core(), - gutenberg_experimental_global_styles_get_theme(), - gutenberg_experimental_global_styles_get_user() - ); - - $inline_style = gutenberg_experimental_global_styles_resolver( $global_styles ); + $inline_style = gutenberg_experimental_global_styles_resolver(); if ( empty( $inline_style ) ) { return; } @@ -224,37 +224,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_enqueue_style( 'global-styles' ); } -/** - * Adds class wp-gs to the frontend body class. - * - * @param array $classes Existing body classes. - * @return array The filtered array of body classes. - */ -function gutenberg_experimental_global_styles_wp_gs_class_front_end( $classes ) { - if ( ! gutenberg_experimental_global_styles_has_theme_support() ) { - return $classes; - } - - return array_merge( $classes, array( 'wp-gs' ) ); -} - -/** - * Adds class wp-gs to the block-editor body class. - * - * @param string $classes Existing body classes separated by space. - * @return string The filtered string of body classes. - */ -function gutenberg_experimental_global_styles_wp_gs_class_editor( $classes ) { - if ( - ! gutenberg_experimental_global_styles_has_theme_support() || - ! gutenberg_experimental_global_styles_is_site_editor() - ) { - return $classes; - } - - return $classes . ' wp-gs'; -} - /** * Whether the loaded page is the site editor. * @@ -332,8 +301,6 @@ function gutenberg_experimental_global_styles_register_cpt() { if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) { add_action( 'init', 'gutenberg_experimental_global_styles_register_cpt' ); - add_filter( 'body_class', 'gutenberg_experimental_global_styles_wp_gs_class_front_end' ); - add_filter( 'admin_body_class', 'gutenberg_experimental_global_styles_wp_gs_class_editor' ); add_filter( 'block_editor_settings', 'gutenberg_experimental_global_styles_settings' ); // enqueue_block_assets is not fired in edit-site, so we use separate back/front hooks instead. add_action( 'wp_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); diff --git a/lib/global-styles/experimental-default-global-styles.json b/lib/global-styles/experimental-default-global-styles.json new file mode 100644 index 00000000000000..1f9ddc72d724c2 --- /dev/null +++ b/lib/global-styles/experimental-default-global-styles.json @@ -0,0 +1,14 @@ +{ + "color": { + "background": "white", + "text": "black" + }, + "typography": { + "font-base": 16, + "font-scale": 1.2, + "font-weight-base": 400, + "font-weight-heading": 400, + "line-height-base": 1.5, + "line-height-heading": 1.5 + } +} diff --git a/package-lock.json b/package-lock.json index 36fadbdfca0fff..1cefc69eee4a16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10566,7 +10566,6 @@ "@wordpress/editor": "file:packages/editor", "@wordpress/element": "file:packages/element", "@wordpress/escape-html": "file:packages/escape-html", - "@wordpress/global-styles": "file:packages/global-styles", "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", "@wordpress/is-shallow-equal": "file:packages/is-shallow-equal", @@ -11381,10 +11380,10 @@ "version": "file:packages/global-styles", "requires": { "@babel/runtime": "^7.8.3", - "@wordpress/block-editor": "file:packages/block-editor", "@wordpress/components": "file:packages/components", "@wordpress/element": "file:packages/element", - "@wordpress/i18n": "file:packages/i18n" + "@wordpress/i18n": "file:packages/i18n", + "lodash": "4.17.15" } }, "@wordpress/hooks": { diff --git a/package.json b/package.json index e022075331978a..c841530beae073 100644 --- a/package.json +++ b/package.json @@ -46,9 +46,9 @@ "@wordpress/element": "file:packages/element", "@wordpress/escape-html": "file:packages/escape-html", "@wordpress/format-library": "file:packages/format-library", + "@wordpress/global-styles": "file:packages/global-styles", "@wordpress/hooks": "file:packages/hooks", "@wordpress/html-entities": "file:packages/html-entities", - "@wordpress/global-styles": "file:packages/global-styles", "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", "@wordpress/interface": "file:packages/interface", diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 879d034b002f7f..60ef77d36242d1 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -304,10 +304,6 @@ _Returns_ - `string`: String with the class corresponding to the fontSize passed. The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'. -# **ifBlockEditSelected** - -Undocumented declaration. - # **InnerBlocks** _Related_ diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index e1552e2c8ad7b3..3057ff3b4cf72b 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -12,11 +12,7 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import Edit from './edit'; -import { - BlockEditContextProvider, - useBlockEditContext, - ifBlockEditSelected, -} from './context'; +import { BlockEditContextProvider, useBlockEditContext } from './context'; class BlockEdit extends Component { constructor() { @@ -71,4 +67,4 @@ class BlockEdit extends Component { } export default BlockEdit; -export { useBlockEditContext, ifBlockEditSelected }; +export { useBlockEditContext }; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index b6289ba0998f81..3e83be72f19a66 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -10,11 +10,7 @@ export { default as Autocomplete } from './autocomplete'; export { default as BlockAlignmentToolbar } from './block-alignment-toolbar'; export { default as BlockBreadcrumb } from './block-breadcrumb'; export { default as BlockControls } from './block-controls'; -export { - default as BlockEdit, - useBlockEditContext, - ifBlockEditSelected, -} from './block-edit'; +export { default as BlockEdit, useBlockEditContext } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockIcon } from './block-icon'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 44745a64b2dce2..fa44f923af1d37 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -41,7 +41,6 @@ "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", "@wordpress/escape-html": "file:../escape-html", - "@wordpress/global-styles": "file:../global-styles", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", "@wordpress/is-shallow-equal": "file:../is-shallow-equal", diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss index 7bbe8900b8dc29..f2ad6bf77b130c 100644 --- a/packages/block-library/src/button/style.scss +++ b/packages/block-library/src/button/style.scss @@ -36,10 +36,6 @@ $blocks-button__height: 56px; } } -.wp-gs .wp-block-button__link:not(.has-background) { - background-color: var(--wp--color--primary); -} - .is-style-squared .wp-block-button__link { border-radius: 0; } diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index e43f93acfb001f..a9241cab5543e4 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -12,11 +12,7 @@ import HeadingToolbar from './heading-toolbar'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - PanelBody, - __experimentalText, - RangeControl as Text, -} from '@wordpress/components'; +import { PanelBody, __experimentalText as Text } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; import { AlignmentToolbar, @@ -26,14 +22,8 @@ import { __experimentalBlock as Block, } from '@wordpress/block-editor'; import { Platform } from '@wordpress/element'; -import { - GlobalStylesControls, - GlobalStylesPanelBody, - useGlobalStylesState, -} from '@wordpress/global-styles'; function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { - const { headingFontWeight, setStyles } = useGlobalStylesState(); const { align, content, level, placeholder } = attributes; const tagName = 'h' + level; @@ -56,38 +46,20 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { /> { Platform.OS === 'web' && ( - <> - - - - setStyles( { - headingFontWeight: nextValue, - } ) - } - min={ 100 } - max={ 900 } - step={ 100 } - /> - - - - - { __( 'Level' ) } - - setAttributes( { level: newLevel } ) - } - /> - - - + + + { __( 'Level' ) } + + setAttributes( { level: newLevel } ) + } + /> + + ) } - - - - setStyles( { paragraphColor: nextValue } ) - } - /> - - setStyles( { paragraphLineHeight: value } ) - } - /> - - @@ -98,20 +90,6 @@ export default function QuoteEdit( { /> ) } - - - - setStyles( { quoteFontSize: nextValue } ) - } - min={ 10 } - max={ 50 } - step={ 1 } - /> - - ); } diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index 9ff7209112f786..c1206d68958f7b 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -17,9 +17,3 @@ } } } - -.wp-gs .wp-block-quote { - p { - font-size: var(--wp-quote--fontSize); - } -} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index fbdaaf51f5ba2a..99e738bf9fc5fd 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -11,7 +11,6 @@ @import "./columns/style.scss"; @import "./cover/style.scss"; @import "./embed/style.scss"; -@import "./heading/style.scss"; @import "./file/style.scss"; @import "./gallery/style.scss"; @import "./group/style.scss"; diff --git a/packages/components/src/color-control/index.js b/packages/components/src/color-control/index.js deleted file mode 100644 index a9c62562d3a875..00000000000000 --- a/packages/components/src/color-control/index.js +++ /dev/null @@ -1,106 +0,0 @@ -/** - * External dependencies - */ -import colorize from 'tinycolor2'; -import classnames from 'classnames'; -import { noop } from 'lodash'; -/** - * WordPress dependencies - */ -import { useState, useCallback } from '@wordpress/element'; -import { compose, withInstanceId } from '@wordpress/compose'; - -/** - * Internal dependencies - */ -import BaseControl from '../base-control'; -import ColorPicker from '../color-picker'; -import Dropdown from '../dropdown'; - -import { - ControlContainer, - ControlWrapper, - ColorSwatch, - ColorLabel, -} from './styles/color-control-styles'; - -function BaseColorControl( { - className, - instanceId, - label, - value = 'black', - onChange = noop, - ...props -} ) { - const [ isFocused, setIsFocused ] = useState( false ); - const [ isOpen, setIsOpen ] = useState( false ); - - // TODO: Add derived prop/controlled hook to manage state - const [ color, setColor ] = useState( toColor( value ) ); - - const handleOnChange = ( nextColor ) => { - setColor( nextColor ); - onChange( nextColor ); - }; - - const renderToggle = useCallback( - ( { isOpen: isOpenProp, onToggle } ) => { - setIsOpen( isOpenProp ); - return ( - setIsFocused( false ) } - onFocus={ () => setIsFocused( true ) } - style={ { backgroundColor: color } } - onClick={ onToggle } - /> - ); - }, - [ color ] - ); - - const renderContent = useCallback( - () => ( - - handleOnChange( nextColor.hex ) - } - disableAlpha - /> - ), - [ color ] - ); - - const classes = classnames( 'components-color-control', className ); - const id = `inspector-color-control-${ instanceId }`; - const isFocusedOrOpen = isFocused || isOpen; - - return ( - - - - - - { color } - - - - - ); -} - -function toColor( color ) { - return colorize( color ).toHexString(); -} - -export default compose( [ withInstanceId ] )( BaseColorControl ); diff --git a/packages/components/src/color-control/stories/index.js b/packages/components/src/color-control/stories/index.js deleted file mode 100644 index 0e93187751fc93..00000000000000 --- a/packages/components/src/color-control/stories/index.js +++ /dev/null @@ -1,25 +0,0 @@ -/** - * External dependencies - */ -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import ColorControl from '../'; - -export default { title: 'Components/ColorControl', component: ColorControl }; - -export const _default = () => { - return ( - - - - ); -}; - -const Wrapper = styled.div` - padding: 40px; - margin-left: auto; - width: 250px; -`; diff --git a/packages/components/src/color-control/styles/color-control-styles.js b/packages/components/src/color-control/styles/color-control-styles.js deleted file mode 100644 index ddbae7db2cee9a..00000000000000 --- a/packages/components/src/color-control/styles/color-control-styles.js +++ /dev/null @@ -1,57 +0,0 @@ -/** - * External dependencies - */ -import { css } from '@emotion/core'; -import styled from '@emotion/styled'; - -/** - * Internal dependencies - */ -import { color } from '../../utils/colors'; - -export const ControlWrapper = styled.div``; - -const containerFocus = ( { isFocused } ) => { - if ( ! isFocused ) return ''; - - return css` - border: 1px solid ${color( 'blue.medium.focus' )}; - box-shadow: 0 0 0 1px ${color( 'blue.medium.focus' )}; - `; -}; - -export const ControlContainer = styled.div` - align-items: center; - border-radius: 2px; - border: 1px solid ${color( 'lightGray.600' )}; - box-sizing: border-box; - display: flex; - height: 36px; - overflow: hidden; - max-width: 110px; - - ${containerFocus}; -`; - -export const ColorSwatch = styled.button` - appearance: none; - border: none; - border-right: 1px solid ${color( 'lightGray.600' )}; - box-sizing: border-box; - cursor: pointer; - display: block; - height: 36px; - outline: none; - width: 36px; - - &:focus { - outline: none; - } -`; - -export const ColorLabel = styled.div` - box-sizing: border-box; - padding: 4px 8px; - width: 72px; - font-size: 12px; -`; diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 000fe1856144b7..75ddd43d7daf71 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -26,7 +26,6 @@ export { default as CardMedia } from './card/media'; export { default as CheckboxControl } from './checkbox-control'; export { default as ClipboardButton } from './clipboard-button'; export { default as ColorIndicator } from './color-indicator'; -export { default as ColorControl } from './color-control'; export { default as ColorPalette } from './color-palette'; export { default as ColorPicker } from './color-picker'; export { default as CustomSelectControl } from './custom-select-control'; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 45538453570cdb..d9e67bba2ea4c4 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -21,7 +21,7 @@ import { __unstableEditorStyles as EditorStyles, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; -import { GlobalStylesStateProvider } from '@wordpress/global-styles'; +import { GlobalStylesProvider } from '@wordpress/global-styles'; /** * Internal dependencies @@ -65,7 +65,10 @@ function Editor( { settings: _settings } ) { <> - + @@ -96,7 +99,7 @@ function Editor( { settings: _settings } ) { - + ) : null; } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index ce009e1cda25b2..b51adbc9f04267 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -4,15 +4,15 @@ import { createSlotFill } from '@wordpress/components'; import { ComplementaryArea } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; -import { cog, pencil } from '@wordpress/icons'; -import { GlobalStylesPanel } from '@wordpress/global-styles'; +import { cog, typography } from '@wordpress/icons'; +import { GlobalStylesControls } from '@wordpress/global-styles'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' ); function Sidebar() { return ( - <> +
-

Global Styles area

+ - +
); } diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 2d1771f3f796e9..3f49bc831a6f71 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -15,4 +15,20 @@ .block-editor-block-inspector__card { margin: 0; } + + p { + background-color: inherit; + color: $dark-gray-500; + font-size: $default-font-size; + line-height: $default-line-height; + font-weight: 400; + } + + h2 { + background-color: inherit; + font-size: $default-font-size; + line-height: $default-line-height; + font-weight: 500; + } + } diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 9c15d57a346ba1..e74485ba75c55c 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -25,6 +25,10 @@ body.toplevel_page_gutenberg-edit-site { @include reset; } +.components-modal__frame h1 { + background-color: inherit; +} + .edit-site { // On mobile the main content area has to scroll, otherwise you can invoke // the over-scroll bounce on the non-scrolling container, for a bad experience. diff --git a/packages/global-styles/package-lock.json b/packages/global-styles/package-lock.json new file mode 100644 index 00000000000000..34b0869ec7d1b5 --- /dev/null +++ b/packages/global-styles/package-lock.json @@ -0,0 +1,319 @@ +{ + "name": "@wordpress/global-styles", + "version": "0.0.1", + "lockfileVersion": 1, + "requires": true, + "dependencies": { + "@wordpress/compose": { + "version": "3.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/compose/-/compose-3.11.0.tgz", + "integrity": "sha512-CNbLn9NtG2A0X71wjEux126uEHpWp3v546FtSgMoWlq73z3LEEBDoEeS2glIPAbIK6e1X2UibsKrn5Tn651tlg==", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/element": "^2.11.0", + "@wordpress/is-shallow-equal": "^1.8.0", + "lodash": "^4.17.15", + "mousetrap": "^1.6.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "@wordpress/element": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.11.0.tgz", + "integrity": "sha512-56ZO8a+E7QEsYwiqS+3BQPSHrCPsOAIEz5smXzntb2f6BjvOKeA64pup40mdn1pNGexe06LBA8cjoZVdLBHB1w==", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/escape-html": "^1.7.0", + "lodash": "^4.17.15", + "react": "^16.9.0", + "react-dom": "^16.9.0" + } + } + } + }, + "@wordpress/data": { + "version": "4.14.0", + "resolved": "https://registry.npmjs.org/@wordpress/data/-/data-4.14.0.tgz", + "integrity": "sha512-Q4N3DnIgzmYh2xTgBY8e6Mwu6Y8UeBSX686u3Ypu9GjgSj/XJnLD741+eowVGxbZCEA8NnqBL+R40zgoT75YmA==", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/compose": "^3.11.0", + "@wordpress/deprecated": "^2.7.0", + "@wordpress/element": "^2.11.0", + "@wordpress/is-shallow-equal": "^1.8.0", + "@wordpress/priority-queue": "^1.5.0", + "@wordpress/redux-routine": "^3.7.0", + "equivalent-key-map": "^0.2.2", + "is-promise": "^2.1.0", + "lodash": "^4.17.15", + "memize": "^1.0.5", + "redux": "^4.0.0", + "turbo-combine-reducers": "^1.0.2", + "use-memo-one": "^1.1.1" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + }, + "@wordpress/element": { + "version": "2.11.0", + "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-2.11.0.tgz", + "integrity": "sha512-56ZO8a+E7QEsYwiqS+3BQPSHrCPsOAIEz5smXzntb2f6BjvOKeA64pup40mdn1pNGexe06LBA8cjoZVdLBHB1w==", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/escape-html": "^1.7.0", + "lodash": "^4.17.15", + "react": "^16.9.0", + "react-dom": "^16.9.0" + } + } + } + }, + "@wordpress/deprecated": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/deprecated/-/deprecated-2.7.0.tgz", + "integrity": "sha512-Pq5r2/p0+3BgwkinSRMTky+iNerm34qPQeil0UCtFxNP5usJaK2ZI0W/pv6DokomOtxTNZyv2lMRlUoXmglDuQ==", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/hooks": "^2.7.0" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@wordpress/escape-html": { + "version": "1.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-1.7.0.tgz", + "integrity": "sha512-xDOBo0P3Jnbdbb/UypsQaplsD2k4UXgd/EpKhMAKhDa2m20GxWWmEKW9IB3/5bS4Rh2YZjVM9WL4JyWPUo4hEA==", + "requires": { + "@babel/runtime": "^7.8.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@wordpress/hooks": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/hooks/-/hooks-2.7.0.tgz", + "integrity": "sha512-Cr8uGEVxuGLkMq9UsbfAQqSTFVGBDhP8PagyIYJRUX6OkLiUF72OyT3xox7aM+ZlSr3INle2mEO+ZLPw0ieIPg==", + "requires": { + "@babel/runtime": "^7.8.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@wordpress/is-shallow-equal": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@wordpress/is-shallow-equal/-/is-shallow-equal-1.8.0.tgz", + "integrity": "sha512-OV3qJqP9LhjuOzt85TsyBwv+//CvC8Byf/81D3NmjPKlstLaD/bBCC5nBhH6dKAv4bShYtQ2Hmut+V4dZnOM1A==", + "requires": { + "@babel/runtime": "^7.8.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@wordpress/priority-queue": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@wordpress/priority-queue/-/priority-queue-1.5.0.tgz", + "integrity": "sha512-r5Pqv2TXNP7yqDiBhsD/cemnoC/mpnUhOZC1HlJ1mdRSvfIkCk4TDONIAae/MexItVZzxLXdtepIa4FIar1r+w==", + "requires": { + "@babel/runtime": "^7.8.3" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "@wordpress/redux-routine": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@wordpress/redux-routine/-/redux-routine-3.7.0.tgz", + "integrity": "sha512-dnt/NA4bgXDdkoTlmZrb5QFSgYoVH/lHrJEpy32KyIkxgF8SCvu8aU5lz08hQaV2MQ3OCJA8WtLIAMw0nCidPg==", + "requires": { + "@babel/runtime": "^7.8.3", + "is-promise": "^2.1.0", + "lodash": "^4.17.15", + "rungen": "^0.3.2" + }, + "dependencies": { + "@babel/runtime": { + "version": "7.8.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz", + "integrity": "sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==", + "requires": { + "regenerator-runtime": "^0.13.2" + } + } + } + }, + "equivalent-key-map": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/equivalent-key-map/-/equivalent-key-map-0.2.2.tgz", + "integrity": "sha512-xvHeyCDbZzkpN4VHQj/n+j2lOwL0VWszG30X4cOrc9Y7Tuo2qCdZK/0AMod23Z5dCtNUbaju6p0rwOhHUk05ew==" + }, + "is-promise": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", + "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=" + }, + "js-tokens": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" + }, + "lodash": { + "version": "4.17.15", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", + "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" + }, + "loose-envify": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", + "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "requires": { + "js-tokens": "^3.0.0 || ^4.0.0" + } + }, + "memize": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/memize/-/memize-1.0.5.tgz", + "integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg==" + }, + "mousetrap": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz", + "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==" + }, + "object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" + }, + "prop-types": { + "version": "15.7.2", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz", + "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==", + "requires": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.8.1" + } + }, + "react": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react/-/react-16.12.0.tgz", + "integrity": "sha512-fglqy3k5E+81pA8s+7K0/T3DBCF0ZDOher1elBFzF7O6arXJgzyu/FW+COxFvAWXJoJN9KIZbT2LXlukwphYTA==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2" + } + }, + "react-dom": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.12.0.tgz", + "integrity": "sha512-LMxFfAGrcS3kETtQaCkTKjMiifahaMySFDn71fZUNpPHZQEzmk/GiAeIT8JSOrHB23fnuCOMruL2a8NYlw+8Gw==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1", + "prop-types": "^15.6.2", + "scheduler": "^0.18.0" + } + }, + "react-is": { + "version": "16.12.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.12.0.tgz", + "integrity": "sha512-rPCkf/mWBtKc97aLL9/txD8DZdemK0vkA3JMLShjlJB3Pj3s+lpf1KaBzMfQrAmhMQB0n1cU/SUGgKKBCe837Q==" + }, + "redux": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz", + "integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==", + "requires": { + "loose-envify": "^1.4.0", + "symbol-observable": "^1.2.0" + } + }, + "regenerator-runtime": { + "version": "0.13.3", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", + "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw==" + }, + "rungen": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/rungen/-/rungen-0.3.2.tgz", + "integrity": "sha1-QAwJ6+kU57F+C27zJjQA/Cq8fLM=" + }, + "scheduler": { + "version": "0.18.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz", + "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==", + "requires": { + "loose-envify": "^1.1.0", + "object-assign": "^4.1.1" + } + }, + "symbol-observable": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" + }, + "turbo-combine-reducers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/turbo-combine-reducers/-/turbo-combine-reducers-1.0.2.tgz", + "integrity": "sha512-gHbdMZlA6Ym6Ur5pSH/UWrNQMIM9IqTH6SoL1DbHpqEdQ8i+cFunSmSlFykPt0eGQwZ4d/XTHOl74H0/kFBVWw==" + }, + "use-memo-one": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz", + "integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ==" + } + } +} diff --git a/packages/global-styles/package.json b/packages/global-styles/package.json index fbfe8bb34a2bf2..9063779f7a4e0c 100644 --- a/packages/global-styles/package.json +++ b/packages/global-styles/package.json @@ -22,10 +22,11 @@ "react-native": "src/index", "dependencies": { "@babel/runtime": "^7.8.3", - "@wordpress/block-editor": "../block-editor", "@wordpress/components": "../components", + "@wordpress/data": "4.14.0", "@wordpress/element": "../element", - "@wordpress/i18n": "../i18n" + "@wordpress/i18n": "../i18n", + "lodash": "4.17.15" }, "publishConfig": { "access": "public" diff --git a/packages/global-styles/src/controls/color-controls.js b/packages/global-styles/src/controls/color-controls.js deleted file mode 100644 index 9b23a423737e98..00000000000000 --- a/packages/global-styles/src/controls/color-controls.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { ColorControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { GlobalStylesPanelBody } from '../global-styles-panel-body'; -import { useGlobalStylesState } from '../store'; - -export default function ColorControls() { - const { - textColor, - backgroundColor, - primaryColor, - setStyles, - } = useGlobalStylesState(); - - return ( - - setStyles( { textColor: value } ) } - /> - - setStyles( { backgroundColor: value } ) - } - /> - setStyles( { primaryColor: value } ) } - /> - - ); -} diff --git a/packages/global-styles/src/controls/index.js b/packages/global-styles/src/controls/index.js index b09df4b6b98427..fa96e0739a237e 100644 --- a/packages/global-styles/src/controls/index.js +++ b/packages/global-styles/src/controls/index.js @@ -1,2 +1,20 @@ -export { default as ColorControls } from './color-controls'; -export { default as TypographyControls } from './typography-controls'; +/** + * Internal dependencies + */ +import TypographyControls from './typography-controls'; +import { useGlobalStylesContext } from '../provider'; + +export function GlobalStylesControls() { + const { typography, setTypography } = useGlobalStylesContext(); + + if ( typography === undefined ) { + return null; + } + + return ( + + ); +} diff --git a/packages/global-styles/src/controls/typography-controls.js b/packages/global-styles/src/controls/typography-controls.js index 25ee5ad2033c6b..36f7786c1b4a3f 100644 --- a/packages/global-styles/src/controls/typography-controls.js +++ b/packages/global-styles/src/controls/typography-controls.js @@ -2,35 +2,28 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { RangeControl } from '@wordpress/components'; +import { PanelBody, RangeControl } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { GlobalStylesPanelBody } from '../global-styles-panel-body'; -import { useGlobalStylesState } from '../store'; - -export default function TypographyControls() { - const { - fontSize, +export default function TypographyControls( { + typography: { + fontBase, fontScale, - lineHeight, - fontWeight, - setStyles, - } = useGlobalStylesState(); - + lineHeightBase, + lineHeightHeading, + fontWeightBase, + fontWeightHeading, + }, + setTypography, +} ) { return ( - + setStyles( { fontSize: value } ) } + onChange={ ( value ) => setTypography( { fontBase: value } ) } /> setStyles( { fontScale: value } ) } + onChange={ ( value ) => setTypography( { fontScale: value } ) } + /> +

Heading

+ + setTypography( { lineHeightHeading: value } ) + } + /> + + setTypography( { fontWeightHeading: value } ) + } /> +

Base

setStyles( { lineHeight: value } ) } + onChange={ ( value ) => + setTypography( { lineHeightBase: value } ) + } /> setStyles( { fontWeight: value } ) } + onChange={ ( value ) => + setTypography( { fontWeightBase: value } ) + } /> - + ); } diff --git a/packages/global-styles/src/global-styles-controls.js b/packages/global-styles/src/global-styles-controls.js deleted file mode 100644 index 3d6c36b5eb44c8..00000000000000 --- a/packages/global-styles/src/global-styles-controls.js +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Internal dependencies - */ -import { Fill } from './slot'; -import { isEditSite } from './utils'; - -export function GlobalStylesControls( { children } ) { - if ( ! isEditSite() ) return null; - - return { children }; -} diff --git a/packages/global-styles/src/global-styles-panel-body.js b/packages/global-styles/src/global-styles-panel-body.js deleted file mode 100644 index 78963132a45368..00000000000000 --- a/packages/global-styles/src/global-styles-panel-body.js +++ /dev/null @@ -1,14 +0,0 @@ -/** - * WordPress dependencies - */ -import { PanelBody } from '@wordpress/components'; -/** - * Internal dependencies - */ -import { isEditSite } from './utils'; - -export function GlobalStylesPanelBody( props ) { - if ( ! isEditSite() ) return null; - - return ; -} diff --git a/packages/global-styles/src/global-styles-panel.js b/packages/global-styles/src/global-styles-panel.js deleted file mode 100644 index d5d8c19ccf39f9..00000000000000 --- a/packages/global-styles/src/global-styles-panel.js +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Internal dependencies - */ - -import { Slot } from './slot'; - -import { ColorControls, TypographyControls } from './controls'; - -export function GlobalStylesPanel() { - return ( - <> - - - - - ); -} diff --git a/packages/global-styles/src/index.js b/packages/global-styles/src/index.js index 2db07eb4412bd9..5b1005d29e9d08 100644 --- a/packages/global-styles/src/index.js +++ b/packages/global-styles/src/index.js @@ -1,5 +1,2 @@ -export * from './store'; -export * from './global-styles-controls'; -export * from './global-styles-panel'; -export * from './global-styles-panel-body'; -export * from './utils'; +export * from './provider'; +export * from './controls'; diff --git a/packages/global-styles/src/provider.js b/packages/global-styles/src/provider.js new file mode 100644 index 00000000000000..37e78f9f646910 --- /dev/null +++ b/packages/global-styles/src/provider.js @@ -0,0 +1,142 @@ +/** + * External dependencies + */ +import { camelCase, kebabCase } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useContext, createContext } from '@wordpress/element'; +import { useDispatch, useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { useRenderedGlobalStyles } from './renderer'; + +const GlobalStylesContext = createContext( {} ); +export const useGlobalStylesContext = () => useContext( GlobalStylesContext ); + +export function GlobalStylesProvider( { children, baseStyles, userEntityId } ) { + // Trigger entity retrieval. + useSelect( ( select ) => + select( 'core' ).getEntityRecord( + 'postType', + 'wp_global_styles', + userEntityId + ) + ); + const globalStyles = useGlobalStyles( baseStyles, userEntityId ); + + return ( + + { children } + + ); +} + +function toCase( tree, transformCase ) { + if ( ! ( tree instanceof Object ) ) { + return tree; + } + + const newTree = {}; + for ( const key in tree ) { + if ( ! tree.hasOwnProperty( key ) ) continue; + + if ( tree[ key ] instanceof Object ) { + newTree[ transformCase( key ) ] = toCase( + tree[ key ], + transformCase + ); + } else { + newTree[ transformCase( key ) ] = tree[ key ]; + } + } + return newTree; +} + +// Make object reference immutable +// so it stays the same in the function setters. +let styles = {}; +function useGlobalStyles( baseStyles, userEntityId ) { + // Start with base styles. + styles = { + ...toCase( baseStyles, camelCase ), + }; + + // Merge user styles, if any. + const userData = useSelect( ( select ) => + select( 'core' ).getEditedEntityRecord( + 'postType', + 'wp_global_styles', + userEntityId + ) + ); + let userStyles = {}; + if ( Object.keys( userData ).length > 0 ) { + userStyles = toCase( JSON.parse( userData.content ), camelCase ); + styles = { + color: { + ...styles.color, + ...userStyles.color, + }, + typography: { + ...styles.typography, + ...userStyles.typography, + }, + }; + } + + // Convert styles to CSS props. + useRenderedGlobalStyles( toCase( styles, kebabCase ) ); + + // Create and bind function settters to context, + // so controls can modify the styles. + const { editEntityRecord } = useDispatch( 'core' ); + + const setColor = ( newStyles ) => { + editEntityRecord( 'postType', 'wp_global_styles', userEntityId, { + content: JSON.stringify( + toCase( + { + typography: { + ...userStyles.typography, + }, + color: { + ...userStyles.color, + ...newStyles, + }, + }, + kebabCase + ) + ), + } ); + }; + + const setTypography = ( newStyles ) => { + editEntityRecord( 'postType', 'wp_global_styles', userEntityId, { + content: JSON.stringify( + toCase( + { + color: { + ...userStyles.color, + }, + typography: { + ...userStyles.typography, + ...newStyles, + }, + }, + kebabCase + ) + ), + } ); + }; + + // Return context value. + return { + ...styles, + setColor, + setTypography, + }; +} diff --git a/packages/global-styles/src/renderer.js b/packages/global-styles/src/renderer.js index d9135b98abc6fa..a956ee94603342 100644 --- a/packages/global-styles/src/renderer.js +++ b/packages/global-styles/src/renderer.js @@ -1,18 +1,14 @@ /** * WordPress dependencies */ -import { useEffect, useLayoutEffect } from '@wordpress/element'; - -/** - * TODO: Replace everything below with client-side style rendering mechanism - */ +import { useEffect } from '@wordpress/element'; export function useRenderedGlobalStyles( styles = {} ) { - useGlobalStylesEnvironment(); const generatedStyles = compileStyles( styles ); useEffect( () => { - const styleNodeId = 'wp-global-styles-tag'; + // styleNodeId should match server ID, see global-styles.php + const styleNodeId = 'global-styles-inline-css'; let styleNode = document.getElementById( styleNodeId ); if ( ! styleNode ) { @@ -27,36 +23,18 @@ export function useRenderedGlobalStyles( styles = {} ) { }, [ generatedStyles ] ); } -function useGlobalStylesEnvironment() { - useLayoutEffect( () => { - // Adding a slight async delay to give the Gutenberg editor time to render. - window.requestAnimationFrame( () => { - // Getting the Gutenberg editor content wrapper DOM node. - const editorNode = document.getElementsByClassName( - 'editor-styles-wrapper' - )[ 0 ]; - - const targetNode = editorNode || document.documentElement; - - if ( ! targetNode.classList.contains( 'wp-gs' ) ) { - targetNode.classList.add( 'wp-gs' ); - } - } ); - }, [] ); -} - -function flattenObject( ob ) { +function flattenObject( ob, token = '' ) { const toReturn = {}; for ( const i in ob ) { if ( ! ob.hasOwnProperty( i ) ) continue; if ( typeof ob[ i ] === 'object' ) { - const flatObject = flattenObject( ob[ i ] ); + const flatObject = flattenObject( ob[ i ], token ); for ( const x in flatObject ) { if ( ! flatObject.hasOwnProperty( x ) ) continue; - toReturn[ i + '.' + x ] = flatObject[ x ]; + toReturn[ i + token + x ] = flatObject[ x ]; } } else { toReturn[ i ] = ob[ i ]; @@ -66,22 +44,20 @@ function flattenObject( ob ) { } function compileStyles( styles = {} ) { - const flattenedStyles = { ...flattenObject( styles ) }; + const prefix = '--wp'; + const token = '--'; + const flattenedStyles = { ...flattenObject( styles, token ) }; const html = []; html.push( ':root {' ); for ( const key in flattenedStyles ) { const value = flattenedStyles[ key ]; if ( value ) { - const style = `--wp-${ key.replace( /\./g, '--' ) }: ${ value };`; + const style = `${ prefix + token + key }: ${ value };`; html.push( style ); } } html.push( '}' ); - html.push( - '.editor-styles-wrapper { background-color: var(--wp-color--background); }' - ); - - return html.join( '\n' ); + return html.join( '' ); } diff --git a/packages/global-styles/src/slot.js b/packages/global-styles/src/slot.js deleted file mode 100644 index 83d2bd48b44db7..00000000000000 --- a/packages/global-styles/src/slot.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * WordPress dependencies - */ -import { createSlotFill } from '@wordpress/components'; -import { ifBlockEditSelected } from '@wordpress/block-editor'; - -export const GlobalStylesSlot = createSlotFill( '__GLOBAL_STYLES_SLOT__' ); -export const { Slot, Fill: BaseFill } = GlobalStylesSlot; - -export const Fill = ifBlockEditSelected( BaseFill ); diff --git a/packages/global-styles/src/store.js b/packages/global-styles/src/store.js deleted file mode 100644 index 764ef9ec4e7b75..00000000000000 --- a/packages/global-styles/src/store.js +++ /dev/null @@ -1,132 +0,0 @@ -/** - * WordPress dependencies - */ -import { useState, useContext, createContext } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { useRenderedGlobalStyles } from './renderer'; - -/** - * TODO: Replace everything below with wp.data store mechanism - */ - -export const GlobalStylesContext = createContext( {} ); -export const useGlobalStylesState = () => useContext( GlobalStylesContext ); - -export function GlobalStylesStateProvider( { children } ) { - const state = useGlobalStylesStore(); - - return ( - - { children } - - ); -} - -export function useGlobalStylesDataState() { - const initialState = { - fontSize: 16, - fontWeight: 400, - headingFontWeight: 600, - fontScale: 1.2, - lineHeight: 1.5, - quoteFontSize: 24, - textColor: '#000000', - backgroundColor: '#ffffff', - primaryColor: '#0000ff', - paragraphColor: null, - paragraphLineHeight: null, - }; - - const [ state, _setState ] = useState( initialState ); - - const setState = ( nextState = {} ) => { - const mergedState = { ...state, ...nextState }; - _setState( mergedState ); - }; - - return [ state, setState ]; -} - -export function useGlobalStylesStore() { - // TODO: Replace with data/actions from wp.data - const [ styleState, setStyles ] = useGlobalStylesDataState(); - const { - fontSize, - fontScale, - lineHeight, - fontWeight, - headingFontWeight, - paragraphColor, - paragraphLineHeight, - quoteFontSize, - textColor, - backgroundColor, - primaryColor, - } = styleState; - - const styles = { - color: { - text: textColor, - background: backgroundColor, - primary: primaryColor, - }, - typography: { - ...generateFontSizes( { fontSize, fontScale } ), - ...generateLineHeight( { lineHeight } ), - fontScale, - fontWeight, - }, - heading: { - fontWeight: headingFontWeight, - }, - quote: { - fontSize: toPx( quoteFontSize ), - }, - paragraph: { - color: paragraphColor, - lineHeight: paragraphLineHeight, - }, - }; - - useRenderedGlobalStyles( styles ); - - return { - ...styleState, - setStyles, - }; -} - -/** - * NOTE: Generators for extra computed values. - */ - -function generateLineHeight( { lineHeight = 1.5 } ) { - return { - lineHeight, - titleLineHeight: ( lineHeight * 0.8 ).toFixed( 2 ), - }; -} - -function generateFontSizes( { fontSize = 16, fontScale = 1.2 } ) { - const toScaledPx = ( size ) => { - const value = ( Math.pow( fontScale, size ) * fontSize ).toFixed( 2 ); - return toPx( value ); - }; - - return { - fontSize: `${ fontSize }px`, - fontSizeH1: toScaledPx( 5 ), - fontSizeH2: toScaledPx( 4 ), - fontSizeH3: toScaledPx( 3 ), - fontSizeH4: toScaledPx( 2 ), - fontSizeH5: toScaledPx( 1 ), - fontSizeH6: toScaledPx( 0.5 ), - }; -} - -function toPx( value ) { - return `${ value }px`; -} diff --git a/packages/global-styles/src/utils.js b/packages/global-styles/src/utils.js deleted file mode 100644 index b7edfd6161deed..00000000000000 --- a/packages/global-styles/src/utils.js +++ /dev/null @@ -1,3 +0,0 @@ -export function isEditSite() { - return window.location.search.indexOf( 'page=gutenberg-edit-site' ) >= 0; -} diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index e2e558416cba6c..6c6f1e246e5915 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -1972,98 +1972,6 @@ exports[`Storyshots Components/ClipboardButton Default 1`] = ` `; -exports[`Storyshots Components/ColorControl Default 1`] = ` -.emotion-8 { - padding: 40px; - margin-left: auto; - width: 250px; -} - -.emotion-4 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border-radius: 2px; - border: 1px solid #d7dade; - box-sizing: border-box; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - height: 36px; - overflow: hidden; - max-width: 110px; -} - -.emotion-0 { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - border: none; - border-right: 1px solid #d7dade; - box-sizing: border-box; - cursor: pointer; - display: block; - height: 36px; - outline: none; - width: 36px; -} - -.emotion-0:focus { - outline: none; -} - -.emotion-2 { - box-sizing: border-box; - padding: 4px 8px; - width: 72px; - font-size: 12px; -} - -
-
-
-
-
-
-
-
- #000000 -
-
-
-
-
-
-`; - exports[`Storyshots Components/ColorIndicator Default 1`] = `