From 6bd655c8238273343d81f684d61ff7a49bf89d97 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 5 Feb 2020 19:02:38 -0500 Subject: [PATCH 01/21] Create initial GlobalStyle component within SiteEdit --- docs/manifest.json | 6 + lib/demo-block-templates/front-page.html | 35 ++--- package-lock.json | 12 ++ package.json | 1 + packages/block-editor/README.md | 4 + .../src/components/block-edit/index.js | 8 +- packages/block-editor/src/components/index.js | 6 +- packages/block-library/package.json | 1 + packages/block-library/src/heading/edit.js | 58 ++++++-- packages/block-library/src/heading/style.scss | 31 ++++ packages/block-library/src/paragraph/edit.js | 40 +++++- .../block-library/src/paragraph/style.scss | 8 ++ packages/block-library/src/quote/edit.js | 24 +++- packages/block-library/src/quote/style.scss | 6 + packages/block-library/src/style.scss | 1 + .../components/src/color-control/index.js | 106 ++++++++++++++ .../src/color-control/stories/index.js | 25 ++++ .../styles/color-control-styles.js | 57 ++++++++ packages/components/src/index.js | 1 + packages/edit-site/package.json | 1 + .../edit-site/src/components/editor/index.js | 59 ++++---- .../edit-site/src/components/sidebar/index.js | 1 + packages/global-styles/README.md | 3 + packages/global-styles/package.json | 33 +++++ .../src/controls/color-controls.js | 42 ++++++ packages/global-styles/src/controls/index.js | 2 + .../src/controls/typography-controls.js | 61 ++++++++ .../src/global-styles-controls.js | 11 ++ .../src/global-styles-panel-body.js | 14 ++ .../global-styles/src/global-styles-panel.js | 17 +++ packages/global-styles/src/index.js | 5 + packages/global-styles/src/renderer.js | 87 ++++++++++++ packages/global-styles/src/slot.js | 10 ++ packages/global-styles/src/store.js | 132 ++++++++++++++++++ packages/global-styles/src/utils.js | 3 + storybook/test/__snapshots__/index.js.snap | 92 ++++++++++++ 36 files changed, 939 insertions(+), 64 deletions(-) create mode 100644 packages/components/src/color-control/index.js create mode 100644 packages/components/src/color-control/stories/index.js create mode 100644 packages/components/src/color-control/styles/color-control-styles.js create mode 100644 packages/global-styles/README.md create mode 100644 packages/global-styles/package.json create mode 100644 packages/global-styles/src/controls/color-controls.js create mode 100644 packages/global-styles/src/controls/index.js create mode 100644 packages/global-styles/src/controls/typography-controls.js create mode 100644 packages/global-styles/src/global-styles-controls.js create mode 100644 packages/global-styles/src/global-styles-panel-body.js create mode 100644 packages/global-styles/src/global-styles-panel.js create mode 100644 packages/global-styles/src/index.js create mode 100644 packages/global-styles/src/renderer.js create mode 100644 packages/global-styles/src/slot.js create mode 100644 packages/global-styles/src/store.js create mode 100644 packages/global-styles/src/utils.js diff --git a/docs/manifest.json b/docs/manifest.json index 75b5514dca1e96..f085fcbe45fa06 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1361,6 +1361,12 @@ "markdown_source": "../packages/format-library/README.md", "parent": "packages" }, + { + "title": "@wordpress/global-styles", + "slug": "packages-global-styles", + "markdown_source": "../packages/global-styles/README.md", + "parent": "packages" + }, { "title": "@wordpress/hooks", "slug": "packages-hooks", diff --git a/lib/demo-block-templates/front-page.html b/lib/demo-block-templates/front-page.html index da11edd68e8754..a78b55b53eb6e4 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,7 +35,8 @@
-

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.

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

Footer

- -
+
+ +

Footer

+ +
diff --git a/package-lock.json b/package-lock.json index 277652195f2763..6932c8033fe3e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10578,6 +10578,7 @@ "@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", @@ -11013,6 +11014,7 @@ "@wordpress/data": "file:packages/data", "@wordpress/editor": "file:packages/editor", "@wordpress/element": "file:packages/element", + "@wordpress/global-styles": "file:packages/global-styles", "@wordpress/hooks": "file:packages/hooks", "@wordpress/i18n": "file:packages/i18n", "@wordpress/icons": "file:packages/icons", @@ -11387,6 +11389,16 @@ "lodash": "^4.17.15" } }, + "@wordpress/global-styles": { + "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/hooks": { "version": "file:packages/hooks", "requires": { diff --git a/package.json b/package.json index ebdbd2d6dc50a1..2da7e38584ece9 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@wordpress/format-library": "file:packages/format-library", "@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 60ef77d36242d1..879d034b002f7f 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -304,6 +304,10 @@ _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 3057ff3b4cf72b..e1552e2c8ad7b3 100644 --- a/packages/block-editor/src/components/block-edit/index.js +++ b/packages/block-editor/src/components/block-edit/index.js @@ -12,7 +12,11 @@ import { Component } from '@wordpress/element'; * Internal dependencies */ import Edit from './edit'; -import { BlockEditContextProvider, useBlockEditContext } from './context'; +import { + BlockEditContextProvider, + useBlockEditContext, + ifBlockEditSelected, +} from './context'; class BlockEdit extends Component { constructor() { @@ -67,4 +71,4 @@ class BlockEdit extends Component { } export default BlockEdit; -export { useBlockEditContext }; +export { useBlockEditContext, ifBlockEditSelected }; diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 3e83be72f19a66..b6289ba0998f81 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -10,7 +10,11 @@ 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 } from './block-edit'; +export { + default as BlockEdit, + useBlockEditContext, + ifBlockEditSelected, +} 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 de5e6ff693d7fe..748ef786acad4c 100644 --- a/packages/block-library/package.json +++ b/packages/block-library/package.json @@ -41,6 +41,7 @@ "@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/heading/edit.js b/packages/block-library/src/heading/edit.js index 28f9a6da5be576..734c2b2f7d0e79 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -12,7 +12,11 @@ import HeadingToolbar from './heading-toolbar'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, __experimentalText as Text } from '@wordpress/components'; +import { + PanelBody, + __experimentalText, + RangeControl as Text, +} from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; import { AlignmentToolbar, @@ -22,8 +26,14 @@ 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, style } = attributes; const tagName = 'h' + level; const isAndroid = Platform.select( { @@ -57,20 +67,38 @@ function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { ) } { Platform.OS === 'web' && ( - - - { __( 'Level' ) } - - setAttributes( { level: newLevel } ) - } - /> - - + <> + + + + setStyles( { + headingFontWeight: nextValue, + } ) + } + min={ 100 } + max={ 900 } + step={ 100 } + /> + + + + + { __( 'Level' ) } + + setAttributes( { level: newLevel } ) + } + /> + + + ) } + + + + setStyles( { paragraphColor: nextValue } ) + } + /> + + setStyles( { paragraphLineHeight: value } ) + } + /> + + @@ -90,6 +98,20 @@ 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 c1206d68958f7b..9ff7209112f786 100644 --- a/packages/block-library/src/quote/style.scss +++ b/packages/block-library/src/quote/style.scss @@ -17,3 +17,9 @@ } } } + +.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 99e738bf9fc5fd..fbdaaf51f5ba2a 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -11,6 +11,7 @@ @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 new file mode 100644 index 00000000000000..a9c62562d3a875 --- /dev/null +++ b/packages/components/src/color-control/index.js @@ -0,0 +1,106 @@ +/** + * 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 new file mode 100644 index 00000000000000..0e93187751fc93 --- /dev/null +++ b/packages/components/src/color-control/stories/index.js @@ -0,0 +1,25 @@ +/** + * 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 new file mode 100644 index 00000000000000..ddbae7db2cee9a --- /dev/null +++ b/packages/components/src/color-control/styles/color-control-styles.js @@ -0,0 +1,57 @@ +/** + * 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 75ddd43d7daf71..000fe1856144b7 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -26,6 +26,7 @@ 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/package.json b/packages/edit-site/package.json index 67f140d977d0d3..adbd9cd31110ed 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -30,6 +30,7 @@ "@wordpress/data": "file:../data", "@wordpress/editor": "file:../editor", "@wordpress/element": "file:../element", + "@wordpress/global-styles": "file:../global-styles", "@wordpress/hooks": "file:../hooks", "@wordpress/i18n": "file:../i18n", "@wordpress/icons": "file:../icons", diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 11531062934865..45538453570cdb 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -21,6 +21,7 @@ import { __unstableEditorStyles as EditorStyles, } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; +import { GlobalStylesStateProvider } from '@wordpress/global-styles'; /** * Internal dependencies @@ -64,34 +65,38 @@ function Editor( { settings: _settings } ) { <> - - - - - - - } - header={
} - content={ - <> - - - - - } - /> - - - + + + + + + + + + } + header={
} + content={ + <> + + + + + } + /> + + + + - - - + + + ) : null; } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index f5ee7eda2d9a23..ce009e1cda25b2 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -5,6 +5,7 @@ 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'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' diff --git a/packages/global-styles/README.md b/packages/global-styles/README.md new file mode 100644 index 00000000000000..5d765ae85542e8 --- /dev/null +++ b/packages/global-styles/README.md @@ -0,0 +1,3 @@ +# Global Styles + +(Experimental) Global Styles Library diff --git a/packages/global-styles/package.json b/packages/global-styles/package.json new file mode 100644 index 00000000000000..fbfe8bb34a2bf2 --- /dev/null +++ b/packages/global-styles/package.json @@ -0,0 +1,33 @@ +{ + "name": "@wordpress/global-styles", + "version": "0.0.1", + "private": true, + "description": "Global Styles module for WordPress.", + "author": "The WordPress Contributors", + "license": "GPL-2.0-or-later", + "keywords": [ + "wordpress" + ], + "homepage": "https://github.com/WordPress/gutenberg/tree/master/packages/global-styles/README.md", + "repository": { + "type": "git", + "url": "https://github.com/WordPress/gutenberg.git", + "directory": "packages/global-styles" + }, + "bugs": { + "url": "https://github.com/WordPress/gutenberg/issues" + }, + "main": "build/index.js", + "module": "build-module/index.js", + "react-native": "src/index", + "dependencies": { + "@babel/runtime": "^7.8.3", + "@wordpress/block-editor": "../block-editor", + "@wordpress/components": "../components", + "@wordpress/element": "../element", + "@wordpress/i18n": "../i18n" + }, + "publishConfig": { + "access": "public" + } +} diff --git a/packages/global-styles/src/controls/color-controls.js b/packages/global-styles/src/controls/color-controls.js new file mode 100644 index 00000000000000..9b23a423737e98 --- /dev/null +++ b/packages/global-styles/src/controls/color-controls.js @@ -0,0 +1,42 @@ +/** + * 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 new file mode 100644 index 00000000000000..b09df4b6b98427 --- /dev/null +++ b/packages/global-styles/src/controls/index.js @@ -0,0 +1,2 @@ +export { default as ColorControls } from './color-controls'; +export { default as TypographyControls } from './typography-controls'; diff --git a/packages/global-styles/src/controls/typography-controls.js b/packages/global-styles/src/controls/typography-controls.js new file mode 100644 index 00000000000000..25ee5ad2033c6b --- /dev/null +++ b/packages/global-styles/src/controls/typography-controls.js @@ -0,0 +1,61 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { RangeControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { GlobalStylesPanelBody } from '../global-styles-panel-body'; +import { useGlobalStylesState } from '../store'; + +export default function TypographyControls() { + const { + fontSize, + fontScale, + lineHeight, + fontWeight, + setStyles, + } = useGlobalStylesState(); + + return ( + + setStyles( { fontSize: value } ) } + /> + setStyles( { fontScale: value } ) } + /> + setStyles( { lineHeight: value } ) } + /> + setStyles( { fontWeight: value } ) } + /> + + ); +} diff --git a/packages/global-styles/src/global-styles-controls.js b/packages/global-styles/src/global-styles-controls.js new file mode 100644 index 00000000000000..3d6c36b5eb44c8 --- /dev/null +++ b/packages/global-styles/src/global-styles-controls.js @@ -0,0 +1,11 @@ +/** + * 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 new file mode 100644 index 00000000000000..78963132a45368 --- /dev/null +++ b/packages/global-styles/src/global-styles-panel-body.js @@ -0,0 +1,14 @@ +/** + * 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 new file mode 100644 index 00000000000000..d5d8c19ccf39f9 --- /dev/null +++ b/packages/global-styles/src/global-styles-panel.js @@ -0,0 +1,17 @@ +/** + * 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 new file mode 100644 index 00000000000000..2db07eb4412bd9 --- /dev/null +++ b/packages/global-styles/src/index.js @@ -0,0 +1,5 @@ +export * from './store'; +export * from './global-styles-controls'; +export * from './global-styles-panel'; +export * from './global-styles-panel-body'; +export * from './utils'; diff --git a/packages/global-styles/src/renderer.js b/packages/global-styles/src/renderer.js new file mode 100644 index 00000000000000..d9135b98abc6fa --- /dev/null +++ b/packages/global-styles/src/renderer.js @@ -0,0 +1,87 @@ +/** + * WordPress dependencies + */ +import { useEffect, useLayoutEffect } from '@wordpress/element'; + +/** + * TODO: Replace everything below with client-side style rendering mechanism + */ + +export function useRenderedGlobalStyles( styles = {} ) { + useGlobalStylesEnvironment(); + const generatedStyles = compileStyles( styles ); + + useEffect( () => { + const styleNodeId = 'wp-global-styles-tag'; + let styleNode = document.getElementById( styleNodeId ); + + if ( ! styleNode ) { + styleNode = document.createElement( 'style' ); + styleNode.id = styleNodeId; + document + .getElementsByTagName( 'head' )[ 0 ] + .appendChild( styleNode ); + } + + styleNode.innerText = generatedStyles; + }, [ 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 ) { + const toReturn = {}; + + for ( const i in ob ) { + if ( ! ob.hasOwnProperty( i ) ) continue; + + if ( typeof ob[ i ] === 'object' ) { + const flatObject = flattenObject( ob[ i ] ); + for ( const x in flatObject ) { + if ( ! flatObject.hasOwnProperty( x ) ) continue; + + toReturn[ i + '.' + x ] = flatObject[ x ]; + } + } else { + toReturn[ i ] = ob[ i ]; + } + } + return toReturn; +} + +function compileStyles( styles = {} ) { + const flattenedStyles = { ...flattenObject( styles ) }; + const html = []; + html.push( ':root {' ); + + for ( const key in flattenedStyles ) { + const value = flattenedStyles[ key ]; + if ( value ) { + const style = `--wp-${ key.replace( /\./g, '--' ) }: ${ value };`; + html.push( style ); + } + } + html.push( '}' ); + + html.push( + '.editor-styles-wrapper { background-color: var(--wp-color--background); }' + ); + + return html.join( '\n' ); +} diff --git a/packages/global-styles/src/slot.js b/packages/global-styles/src/slot.js new file mode 100644 index 00000000000000..83d2bd48b44db7 --- /dev/null +++ b/packages/global-styles/src/slot.js @@ -0,0 +1,10 @@ +/** + * 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 new file mode 100644 index 00000000000000..764ef9ec4e7b75 --- /dev/null +++ b/packages/global-styles/src/store.js @@ -0,0 +1,132 @@ +/** + * 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 new file mode 100644 index 00000000000000..b7edfd6161deed --- /dev/null +++ b/packages/global-styles/src/utils.js @@ -0,0 +1,3 @@ +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 29079fd8792325..6a8da90df767d3 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -1972,6 +1972,98 @@ 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`] = ` Date: Fri, 21 Feb 2020 13:54:56 +0100 Subject: [PATCH 02/21] Iterate on Global Styles for site-edit --- experimental-default-global-styles.json | 7 - lib/demo-block-templates/front-page.html | 35 +- lib/global-styles.php | 65 +--- .../experimental-default-global-styles.json | 14 + package-lock.json | 5 +- package.json | 2 +- packages/block-editor/README.md | 4 - .../src/components/block-edit/index.js | 8 +- packages/block-editor/src/components/index.js | 6 +- packages/block-library/package.json | 1 - packages/block-library/src/button/style.scss | 4 - packages/block-library/src/heading/edit.js | 59 +--- packages/block-library/src/heading/style.scss | 44 ++- packages/block-library/src/paragraph/edit.js | 42 +-- .../block-library/src/paragraph/style.scss | 12 +- packages/block-library/src/quote/edit.js | 24 +- packages/block-library/src/quote/style.scss | 6 - packages/block-library/src/style.scss | 1 - .../components/src/color-control/index.js | 106 ------ .../src/color-control/stories/index.js | 25 -- .../styles/color-control-styles.js | 57 ---- packages/components/src/index.js | 1 - .../edit-site/src/components/editor/index.js | 9 +- .../edit-site/src/components/sidebar/index.js | 12 +- .../src/components/sidebar/style.scss | 16 + packages/edit-site/src/style.scss | 4 + packages/global-styles/package-lock.json | 319 ++++++++++++++++++ packages/global-styles/package.json | 5 +- .../src/controls/color-controls.js | 42 --- packages/global-styles/src/controls/index.js | 22 +- .../src/controls/typography-controls.js | 75 ++-- .../src/global-styles-controls.js | 11 - .../src/global-styles-panel-body.js | 14 - .../global-styles/src/global-styles-panel.js | 17 - packages/global-styles/src/index.js | 7 +- packages/global-styles/src/provider.js | 142 ++++++++ packages/global-styles/src/renderer.js | 46 +-- packages/global-styles/src/slot.js | 10 - packages/global-styles/src/store.js | 132 -------- packages/global-styles/src/utils.js | 3 - storybook/test/__snapshots__/index.js.snap | 92 ----- 41 files changed, 670 insertions(+), 836 deletions(-) delete mode 100644 experimental-default-global-styles.json create mode 100644 lib/global-styles/experimental-default-global-styles.json delete mode 100644 packages/components/src/color-control/index.js delete mode 100644 packages/components/src/color-control/stories/index.js delete mode 100644 packages/components/src/color-control/styles/color-control-styles.js create mode 100644 packages/global-styles/package-lock.json delete mode 100644 packages/global-styles/src/controls/color-controls.js delete mode 100644 packages/global-styles/src/global-styles-controls.js delete mode 100644 packages/global-styles/src/global-styles-panel-body.js delete mode 100644 packages/global-styles/src/global-styles-panel.js create mode 100644 packages/global-styles/src/provider.js delete mode 100644 packages/global-styles/src/slot.js delete mode 100644 packages/global-styles/src/store.js delete mode 100644 packages/global-styles/src/utils.js 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 6932c8033fe3e1..1ccbad327dbec9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10578,7 +10578,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", @@ -11393,10 +11392,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 2da7e38584ece9..bfe5aaa33223a5 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 748ef786acad4c..de5e6ff693d7fe 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 734c2b2f7d0e79..86fa98f1f9857f 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,15 +22,10 @@ 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, style } = attributes; + const { align, content, level, placeholder } = attributes; const tagName = 'h' + level; const isAndroid = Platform.select( { android: true, @@ -67,38 +58,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 a2a4c6023f3403..2d5ae8a2763c46 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -24,6 +24,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 6a8da90df767d3..29079fd8792325 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`] = ` Date: Tue, 31 Mar 2020 12:21:52 +0200 Subject: [PATCH 03/21] Make the typography panel open by default --- packages/global-styles/src/controls/typography-controls.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/global-styles/src/controls/typography-controls.js b/packages/global-styles/src/controls/typography-controls.js index 36f7786c1b4a3f..ef9ef1e7a96d34 100644 --- a/packages/global-styles/src/controls/typography-controls.js +++ b/packages/global-styles/src/controls/typography-controls.js @@ -16,7 +16,7 @@ export default function TypographyControls( { setTypography, } ) { return ( - + Date: Tue, 31 Mar 2020 12:56:56 +0200 Subject: [PATCH 04/21] Load assets for wp-admin including the edit-post --- lib/global-styles.php | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 8a2b76c1b86b6d..11114d6181f2ad 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -195,16 +195,6 @@ function gutenberg_experimental_global_styles_resolver() { return $css_rule; } -/** - * Fetches the Global Styles for each level (core, theme, user) - * and enqueues the resulting CSS custom properties for the editor. - */ -function gutenberg_experimental_global_styles_enqueue_assets_editor() { - if ( gutenberg_experimental_global_styles_is_site_editor() ) { - gutenberg_experimental_global_styles_enqueue_assets(); - } -} - /** * Fetches the Global Styles for each level (core, theme, user) * and enqueues the resulting CSS custom properties. @@ -304,5 +294,5 @@ function gutenberg_experimental_global_styles_register_cpt() { 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' ); - add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets_editor' ); + add_action( 'admin_enqueue_scripts', 'gutenberg_experimental_global_styles_enqueue_assets' ); } From 6c92579a66487d227dfeacc2a00fcb1f76ea54bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 13:33:43 +0200 Subject: [PATCH 05/21] Fix rebase odditiy --- packages/block-library/src/paragraph/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 2b1a86ae6fd44f..e09aecea77c810 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -80,7 +80,7 @@ function ParagraphBlock( { setAttributes, setFontSize, } ) { - const { align, content, dropCap, placeholder, direction } = attributes; + const { align, content, direction, dropCap, placeholder } = attributes; const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ From c30ce34f7c396bf60d20f43adcf1f917c8ab772f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 13:53:00 +0200 Subject: [PATCH 06/21] Render the InspectorControl after GlobalStyles --- .../edit-site/src/components/sidebar/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index b51adbc9f04267..2c291518e94a33 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -14,14 +14,6 @@ function Sidebar() { return (
- - - + + +
); } From 88dcd4ebfe3f29aed36a26030842d7257764f231 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 13:58:42 +0200 Subject: [PATCH 07/21] Make strings translatable --- packages/global-styles/src/controls/typography-controls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/global-styles/src/controls/typography-controls.js b/packages/global-styles/src/controls/typography-controls.js index ef9ef1e7a96d34..387647730de0d4 100644 --- a/packages/global-styles/src/controls/typography-controls.js +++ b/packages/global-styles/src/controls/typography-controls.js @@ -33,7 +33,7 @@ export default function TypographyControls( { step={ 0.025 } onChange={ ( value ) => setTypography( { fontScale: value } ) } /> -

Heading

+

{ __( 'Heading' ) }

-

Base

+

{ __( 'Base' ) }

Date: Tue, 31 Mar 2020 14:02:37 +0200 Subject: [PATCH 08/21] Add comments --- packages/edit-site/src/components/sidebar/style.scss | 2 ++ packages/edit-site/src/style.scss | 2 ++ 2 files changed, 4 insertions(+) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 3f49bc831a6f71..29310036820970 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -16,6 +16,8 @@ margin: 0; } + // There are to prevent the blocks styles + // from leaking into the sidebars (block inspector, global styles). p { background-color: inherit; color: $dark-gray-500; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 2d5ae8a2763c46..94d2885e6e14b3 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -24,6 +24,8 @@ body.toplevel_page_gutenberg-edit-site { @include reset; } +// This is to prevent the blocks styles +// from leaking into the saving modal. .components-modal__frame h1 { background-color: inherit; } From b317ba8d40680889cdb57cb9cf471c22b8ccf67b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 17:39:13 +0200 Subject: [PATCH 09/21] Pass class to complementaryareas --- packages/edit-site/src/components/sidebar/index.js | 11 ++++++++--- packages/edit-site/src/components/sidebar/style.scss | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 2c291518e94a33..9901d5ea9f0b28 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -12,13 +12,17 @@ const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( ); function Sidebar() { return ( -
- + <> + @@ -27,10 +31,11 @@ function Sidebar() { complementaryAreaIdentifier="edit-site/block-inspector" title={ __( 'Block Inspector' ) } icon={ cog } + className="edit-site-complementary-area" > -
+ ); } diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 29310036820970..52c3490ed568b4 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -1,4 +1,4 @@ -.edit-site-sidebar { +.edit-site-complementary-area { width: $sidebar-width; > .components-panel { From 650947ec97b7d071109e2efec199b6976e5688a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 17:44:28 +0200 Subject: [PATCH 10/21] Remove check about edit-site --- lib/global-styles.php | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/lib/global-styles.php b/lib/global-styles.php index 11114d6181f2ad..4cbbc197b2ddc1 100644 --- a/lib/global-styles.php +++ b/lib/global-styles.php @@ -214,20 +214,6 @@ function gutenberg_experimental_global_styles_enqueue_assets() { wp_enqueue_style( 'global-styles' ); } -/** - * Whether the loaded page is the site editor. - * - * @return boolean Whether the loaded page is the site editor. - */ -function gutenberg_experimental_global_styles_is_site_editor() { - if ( ! function_exists( 'get_current_screen' ) ) { - return false; - } - - $screen = get_current_screen(); - return ! empty( $screen ) && gutenberg_is_edit_site_page( $screen->id ); -} - /** * Makes the base Global Styles (core, theme) * and the ID of the CPT that stores the user's Global Styles @@ -238,8 +224,7 @@ function gutenberg_experimental_global_styles_is_site_editor() { */ function gutenberg_experimental_global_styles_settings( $settings ) { if ( - ! gutenberg_experimental_global_styles_has_theme_support() || - ! gutenberg_experimental_global_styles_is_site_editor() + ! gutenberg_experimental_global_styles_has_theme_support() ) { return $settings; } From 1a3f50b14b75c55e0938e7c328a8682a56dafe80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 19:10:37 +0200 Subject: [PATCH 11/21] Do not render GlobalStyles if theme has no support --- .../edit-site/src/components/sidebar/index.js | 56 +++++++++++++------ 1 file changed, 38 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 9901d5ea9f0b28..e5486dc4cba724 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -6,35 +6,55 @@ import { ComplementaryArea } from '@wordpress/interface'; import { __ } from '@wordpress/i18n'; import { cog, typography } from '@wordpress/icons'; import { GlobalStylesControls } from '@wordpress/global-styles'; +import { useSelect } from '@wordpress/data'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' ); function Sidebar() { + const hasGlobalStylesSupport = useSelect( ( select ) => { + return Object.keys( select( 'core/block-editor' ).getSettings() ).some( + ( key ) => key === '__experimentalGlobalStylesUserEntityId' + ); + } ); return ( <> - - - - - - + { hasGlobalStylesSupport ? ( + <> + + + + + + + + ) : ( + + + + ) } ); } From a2dfea963f2abf0afa15666809792c6d61da1a1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 19:25:05 +0200 Subject: [PATCH 12/21] Fix rebase oddity --- packages/block-library/src/heading/edit.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 86fa98f1f9857f..28f9a6da5be576 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -24,8 +24,7 @@ import { import { Platform } from '@wordpress/element'; function HeadingEdit( { attributes, setAttributes, mergeBlocks, onReplace } ) { - const { headingFontWeight, setStyles } = useGlobalStylesState(); - const { align, content, level, placeholder } = attributes; + const { align, content, level, placeholder, style } = attributes; const tagName = 'h' + level; const isAndroid = Platform.select( { android: true, From b49cd0dd5d95b2a89fd8ec33028a5b2b6f6b547e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 19:29:40 +0200 Subject: [PATCH 13/21] Remove unnecesary code The block's CSS is already setting line-height and takes precedence from wp-admin styles, so we no longer need this override. --- packages/editor/src/editor-styles.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index a7608813a5fcc2..c93b193b8741b2 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -42,17 +42,6 @@ h6 { font-size: 0.8em; } -// Adjust line spacing for larger headings. -h1, -h2, -h3 { - line-height: 1.4; -} - -h4 { - line-height: 1.5; -} - // Default margins. h1 { margin-top: 0.67em; From 9888d9234417e315a6390f3382b90b784d0424fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Tue, 31 Mar 2020 19:32:26 +0200 Subject: [PATCH 14/21] Remove unnecesary color override The block's CSS is already taken precedence from wp-admin styles, so we no longer need this. --- packages/editor/src/editor-styles.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index c93b193b8741b2..688f4ddb97fae9 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -73,15 +73,6 @@ h6 { margin-bottom: 2.33em; } -h1, -h2, -h3, -h4, -h5, -h6 { - color: inherit; -} - p { font-size: inherit; margin-top: $default-block-margin; From 1b97ad730c3581f090f441c0490cfc5a8dccc9ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 13:35:15 +0200 Subject: [PATCH 15/21] Move font-weight resets to interface package --- packages/edit-site/src/components/sidebar/style.scss | 2 -- .../src/components/complementary-area/style.scss | 9 +++++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index 52c3490ed568b4..f67aaaf566da86 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -23,14 +23,12 @@ 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/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index 51284edf5769cf..dec5eca8585384 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -52,6 +52,15 @@ margin-top: 0; } + h2 { + font-weight: 500; + } + + p, + h3 { + font-weight: normal; + } + h2, h3 { font-size: $default-font-size; From 96d9e9f368209784c140a886125b90d8fbaa68a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 14:20:11 +0200 Subject: [PATCH 16/21] Move font-size to interface package --- packages/edit-site/src/components/sidebar/style.scss | 2 -- .../interface/src/components/complementary-area/style.scss | 3 ++- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index f67aaaf566da86..c4519660491c99 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -21,13 +21,11 @@ p { background-color: inherit; color: $dark-gray-500; - font-size: $default-font-size; line-height: $default-line-height; } h2 { background-color: inherit; - font-size: $default-font-size; line-height: $default-line-height; } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index dec5eca8585384..e2a386af67f74b 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -50,13 +50,14 @@ p { margin-top: 0; + font-size: $default-font-size; + font-weight: normal; } h2 { font-weight: 500; } - p, h3 { font-weight: normal; } From f1d75bb37330f04b66789fb0ebca74146b188139 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 14:46:58 +0200 Subject: [PATCH 17/21] line-height reset: adject and move to interface package --- packages/edit-site/src/components/sidebar/style.scss | 2 -- packages/interface/src/components/complementary-area/style.scss | 2 ++ 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index c4519660491c99..a28707a76dd866 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -21,12 +21,10 @@ p { background-color: inherit; color: $dark-gray-500; - line-height: $default-line-height; } h2 { background-color: inherit; - line-height: $default-line-height; } } diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index e2a386af67f74b..d4c9c2d31f2073 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -52,6 +52,7 @@ margin-top: 0; font-size: $default-font-size; font-weight: normal; + line-height: 1.5; } h2 { @@ -60,6 +61,7 @@ h3 { font-weight: normal; + line-height: 1.5; } h2, From 76b6e043c7d0b750414525f66e9236f7fd6e4f89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 18:57:31 +0200 Subject: [PATCH 18/21] Fix h2 line-height --- packages/interface/src/components/complementary-area/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index d4c9c2d31f2073..bf71159d86e0db 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -57,6 +57,7 @@ h2 { font-weight: 500; + line-height: $default-line-height; } h3 { From e1413a8f75375834feb8b8aa42778790f8a6636b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 19:09:48 +0200 Subject: [PATCH 19/21] Fix color for paragraphs --- packages/interface/src/components/complementary-area/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index bf71159d86e0db..b60f76ee8a2273 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -53,6 +53,7 @@ font-size: $default-font-size; font-weight: normal; line-height: 1.5; + color: $dark-gray-500; } h2 { From 8eb2bd9895182585d27135128b88b7fb894bcedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 19:16:16 +0200 Subject: [PATCH 20/21] Add fix for background-color --- packages/interface/src/components/complementary-area/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/interface/src/components/complementary-area/style.scss b/packages/interface/src/components/complementary-area/style.scss index b60f76ee8a2273..9c442c3d4f3963 100644 --- a/packages/interface/src/components/complementary-area/style.scss +++ b/packages/interface/src/components/complementary-area/style.scss @@ -54,6 +54,7 @@ font-weight: normal; line-height: 1.5; color: $dark-gray-500; + background-color: inherit; } h2 { @@ -71,6 +72,7 @@ font-size: $default-font-size; color: $dark-gray-500; margin-bottom: 1.5em; + background-color: inherit; } hr { From 413eadcef8bf7b8b71140bf5632093472240aa1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 1 Apr 2020 19:17:33 +0200 Subject: [PATCH 21/21] Moved to complementary area --- packages/edit-site/src/components/sidebar/style.scss | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/style.scss b/packages/edit-site/src/components/sidebar/style.scss index a28707a76dd866..77d5b922a1517d 100644 --- a/packages/edit-site/src/components/sidebar/style.scss +++ b/packages/edit-site/src/components/sidebar/style.scss @@ -16,15 +16,4 @@ margin: 0; } - // There are to prevent the blocks styles - // from leaking into the sidebars (block inspector, global styles). - p { - background-color: inherit; - color: $dark-gray-500; - } - - h2 { - background-color: inherit; - } - }