From 92b0a5bd5f013e9b5cc64aa97ccdae51cc568f6d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 5 Feb 2020 19:02:38 -0500 Subject: [PATCH 01/10] Create initial GlobalStyle component within SiteEdit --- .../src/components/sidebar/global-styles.js | 46 +++++++++++++++++++ .../edit-site/src/components/sidebar/index.js | 6 +++ 2 files changed, 52 insertions(+) create mode 100644 packages/edit-site/src/components/sidebar/global-styles.js diff --git a/packages/edit-site/src/components/sidebar/global-styles.js b/packages/edit-site/src/components/sidebar/global-styles.js new file mode 100644 index 0000000000000..48f096e6d0fb1 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +import { Panel, PanelBody, RangeControl } from '@wordpress/components'; + +export default function GlobalStyles() { + // Default values + const fontSize = 16; + const fontScale = 1.2; + const lineHeight = 1.5; + + // const textColor = '#000000'; + // const backgroundColor = '#ffffff'; + // const primaryColor = '#0000ff'; + + return ( + + + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 8b310e80d0231..79a1db58a354b 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -4,6 +4,11 @@ import { createSlotFill, Panel } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ +import GlobalStyles from './global-styles'; + const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' ); @@ -16,6 +21,7 @@ function Sidebar() { aria-label={ __( 'Site editor advanced settings.' ) } tabIndex="-1" > + From 13d85550dc39d37af577bc37575e7432bd1b835d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 5 Feb 2020 19:26:32 -0500 Subject: [PATCH 02/10] Add ColorControl. Create initial UI with mock state --- .../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 + .../components/sidebar/global-styles-panel.js | 71 ++++++++++++ .../src/components/sidebar/global-styles.js | 46 -------- .../edit-site/src/components/sidebar/index.js | 4 +- 7 files changed, 262 insertions(+), 48 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/edit-site/src/components/sidebar/global-styles-panel.js delete mode 100644 packages/edit-site/src/components/sidebar/global-styles.js diff --git a/packages/components/src/color-control/index.js b/packages/components/src/color-control/index.js new file mode 100644 index 0000000000000..a9c62562d3a87 --- /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 0000000000000..0e93187751fc9 --- /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 0000000000000..ddbae7db2cee9 --- /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 5a78b26d4733e..216bc7edbee28 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/src/components/sidebar/global-styles-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel.js new file mode 100644 index 0000000000000..7f44be16e2a12 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel.js @@ -0,0 +1,71 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useState } from '@wordpress/element'; + +import { + ColorControl, + Panel, + PanelBody, + RangeControl, +} from '@wordpress/components'; + +export default function GlobalStylesPanel() { + // TODO: Replace with data/actions from wp.data + const [ fontSize, setFontSize ] = useState( 16 ); + const [ fontScale, setFontScale ] = useState( 1.2 ); + const [ lineHeight, setLineHeight ] = useState( 1.5 ); + + const [ textColor, setTextColor ] = useState( '#000000' ); + const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); + const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); + + return ( + + + + + + + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles.js b/packages/edit-site/src/components/sidebar/global-styles.js deleted file mode 100644 index 48f096e6d0fb1..0000000000000 --- a/packages/edit-site/src/components/sidebar/global-styles.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -import { Panel, PanelBody, RangeControl } from '@wordpress/components'; - -export default function GlobalStyles() { - // Default values - const fontSize = 16; - const fontScale = 1.2; - const lineHeight = 1.5; - - // const textColor = '#000000'; - // const backgroundColor = '#ffffff'; - // const primaryColor = '#0000ff'; - - return ( - - - - - - - - - ); -} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 79a1db58a354b..211e2e76623aa 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import GlobalStyles from './global-styles'; +import GlobalStylesPanel from './global-styles-panel'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' @@ -21,7 +21,7 @@ function Sidebar() { aria-label={ __( 'Site editor advanced settings.' ) } tabIndex="-1" > - + From 91373d97f11f10e1c11248731e371031bfd27576 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 6 Feb 2020 17:36:50 -0500 Subject: [PATCH 03/10] Added temporary content and mock gutenberg style rendering experience --- lib/demo-block-templates/front-page.html | 65 +++++-- packages/block-library/src/heading/style.scss | 30 +++ .../block-library/src/paragraph/style.scss | 6 + packages/block-library/src/style.scss | 1 + .../components/sidebar/global-styles-panel.js | 171 +++++++++++++++++- 5 files changed, 247 insertions(+), 26 deletions(-) create mode 100644 packages/block-library/src/heading/style.scss diff --git a/lib/demo-block-templates/front-page.html b/lib/demo-block-templates/front-page.html index 627b7ad76aecf..e3826dbcdb234 100644 --- a/lib/demo-block-templates/front-page.html +++ b/lib/demo-block-templates/front-page.html @@ -1,3 +1,33 @@ + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ + + +
Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ + + +
Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ + + +

Mauris consequat augue quis risus sollicitudin commodo. In hac habitasse platea dictumst. Pellentesque massa sem, + ultrices non tempus ac, aliquet ac nunc. Sed porttitor ac mi a malesuada. Donec blandit vel arcu blandit + scelerisque. Etiam euismod blandit leo a maximus.

+ +
@@ -9,12 +39,12 @@
- - - - - - + + + + + +
@@ -22,7 +52,7 @@ -
+
@@ -34,7 +64,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.

@@ -47,19 +78,19 @@
-
- - -
+
+ + +
-
- -

Footer

- -
+
+ +

Footer

+ +
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss new file mode 100644 index 0000000000000..285c07ba83bf2 --- /dev/null +++ b/packages/block-library/src/heading/style.scss @@ -0,0 +1,30 @@ +.wp-gs { + h1, + h2, + h3, + h4, + h5, + h6 { + color: var(--wp-color-text); + line-height: var(--wp-typography-titleLineHeight); + } +} + +.wp-gs h1 { + font-size: var(--wp-typography-fontSizeH1); +} +.wp-gs h2 { + font-size: var(--wp-typography-fontSizeH2); +} +.wp-gs h3 { + font-size: var(--wp-typography-fontSizeH3); +} +.wp-gs h4 { + font-size: var(--wp-typography-fontSizeH4); +} +.wp-gs h5 { + font-size: var(--wp-typography-fontSizeH5); +} +.wp-gs h6 { + font-size: var(--wp-typography-fontSizeH6); +} diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index ddea388de29ba..10bf493f73e13 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -35,3 +35,9 @@ p.has-background { p.has-text-color a { color: inherit; } + +.wp-gs p { + color: var(--wp-color-text); + font-size: var(--wp-typography-fontSize); + line-height: var(--wp-typography-lineHeight); +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 6a0547c9e2de9..c07e68f1745f6 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -6,6 +6,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 "./image/style.scss"; diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel.js index 7f44be16e2a12..cf25f5d1552f2 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-panel.js +++ b/packages/edit-site/src/components/sidebar/global-styles-panel.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useState, useEffect, useLayoutEffect } from '@wordpress/element'; import { ColorControl, @@ -12,14 +12,20 @@ import { } from '@wordpress/components'; export default function GlobalStylesPanel() { - // TODO: Replace with data/actions from wp.data - const [ fontSize, setFontSize ] = useState( 16 ); - const [ fontScale, setFontScale ] = useState( 1.2 ); - const [ lineHeight, setLineHeight ] = useState( 1.5 ); - - const [ textColor, setTextColor ] = useState( '#000000' ); - const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); - const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); + const { + fontSize, + setFontSize, + fontScale, + setFontScale, + lineHeight, + setLineHeight, + textColor, + setTextColor, + backgroundColor, + setBackgroundColor, + primaryColor, + setPrimaryColor, + } = useGlobalStylesState(); return ( @@ -69,3 +75,150 @@ export default function GlobalStylesPanel() { ); } + +function useGlobalStylesState() { + // TODO: Replace with data/actions from wp.data + const [ fontSize, setFontSize ] = useState( 16 ); + const [ fontScale, setFontScale ] = useState( 1.2 ); + const [ lineHeight, setLineHeight ] = useState( 1.5 ); + + const [ textColor, setTextColor ] = useState( '#000000' ); + const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); + const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); + + const styles = { + color: { + text: textColor, + background: backgroundColor, + primary: primaryColor, + }, + typography: { + ...generateFontSizes( { fontSize, fontScale } ), + ...generateLineHeight( { lineHeight } ), + fontScale, + }, + }; + + useRenderedGlobalStyles( styles ); + + return { + fontSize, + setFontSize, + fontScale, + setFontScale, + lineHeight, + setLineHeight, + textColor, + setTextColor, + backgroundColor, + setBackgroundColor, + primaryColor, + setPrimaryColor, + }; +} + +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' ); + } + } ); + }, [] ); +} + +/** + * TODO: Replace everything below with client-side style rendering mechanism + */ +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 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 ]; + 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' ); +} + +/** + * NOTE: Generators for extra computed values. + */ + +function generateLineHeight( { lineHeight = 1.5 } ) { + return { + lineHeight, + titleLineHeight: lineHeight * 0.8, + }; +} + +function generateFontSizes( { fontSize = 16, fontScale = 1.2 } ) { + const toPx = ( size ) => + `${ ( Math.pow( fontScale, size ) * fontSize ).toFixed( 2 ) }px`; + + return { + fontSize: `${ fontSize }px`, + fontSizeH1: toPx( 5 ), + fontSizeH2: toPx( 4 ), + fontSizeH3: toPx( 3 ), + fontSizeH4: toPx( 2 ), + fontSizeH5: toPx( 1 ), + fontSizeH6: toPx( 0.5 ), + }; +} From 1509491a344d7b2e665c58aa157e41420db9ba48 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 6 Feb 2020 17:47:21 -0500 Subject: [PATCH 04/10] Update snapshots --- storybook/test/__snapshots__/index.js.snap | 92 ++++++++++++++++++++++ 1 file changed, 92 insertions(+) diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 9f9f93f7355eb..51a5a834bc277 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -1933,6 +1933,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, 7 Feb 2020 08:56:28 -0500 Subject: [PATCH 05/10] Refactor. Add global styles for heading and quote --- lib/demo-block-templates/front-page.html | 10 + packages/block-library/src/heading/style.scss | 17 +- .../block-library/src/paragraph/style.scss | 7 +- packages/block-library/src/quote/style.scss | 6 + .../components/sidebar/global-styles-panel.js | 224 ------------------ .../sidebar/global-styles-panel/index.js | 31 +++ .../global-styles-panel/panels/color-panel.js | 41 ++++ .../panels/heading-panel.js | 27 +++ .../global-styles-panel/panels/index.js | 4 + .../global-styles-panel/panels/quote-panel.js | 27 +++ .../panels/typography-panel.js | 60 +++++ .../sidebar/global-styles-panel/renderer.js | 87 +++++++ .../sidebar/global-styles-panel/store.js | 115 +++++++++ 13 files changed, 421 insertions(+), 235 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/index.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/renderer.js create mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/store.js diff --git a/lib/demo-block-templates/front-page.html b/lib/demo-block-templates/front-page.html index e3826dbcdb234..dc47f8b3a1ab8 100644 --- a/lib/demo-block-templates/front-page.html +++ b/lib/demo-block-templates/front-page.html @@ -28,6 +28,16 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit
scelerisque. Etiam euismod blandit leo a maximus.

+ +
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit

+
+ + + +
Hello
+ +
diff --git a/packages/block-library/src/heading/style.scss b/packages/block-library/src/heading/style.scss index 285c07ba83bf2..ef5b9012edc78 100644 --- a/packages/block-library/src/heading/style.scss +++ b/packages/block-library/src/heading/style.scss @@ -5,26 +5,27 @@ h4, h5, h6 { - color: var(--wp-color-text); - line-height: var(--wp-typography-titleLineHeight); + color: var(--wp-color--text); + font-weight: var(--wp-heading--fontWeight); + line-height: var(--wp-typography--titleLineHeight); } } .wp-gs h1 { - font-size: var(--wp-typography-fontSizeH1); + font-size: var(--wp-typography--fontSizeH1); } .wp-gs h2 { - font-size: var(--wp-typography-fontSizeH2); + font-size: var(--wp-typography--fontSizeH2); } .wp-gs h3 { - font-size: var(--wp-typography-fontSizeH3); + font-size: var(--wp-typography--fontSizeH3); } .wp-gs h4 { - font-size: var(--wp-typography-fontSizeH4); + font-size: var(--wp-typography--fontSizeH4); } .wp-gs h5 { - font-size: var(--wp-typography-fontSizeH5); + font-size: var(--wp-typography--fontSizeH5); } .wp-gs h6 { - font-size: var(--wp-typography-fontSizeH6); + font-size: var(--wp-typography--fontSizeH6); } diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss index 10bf493f73e13..cd93627946822 100644 --- a/packages/block-library/src/paragraph/style.scss +++ b/packages/block-library/src/paragraph/style.scss @@ -37,7 +37,8 @@ p.has-text-color a { } .wp-gs p { - color: var(--wp-color-text); - font-size: var(--wp-typography-fontSize); - line-height: var(--wp-typography-lineHeight); + color: var(--wp-color--text); + font-size: var(--wp-typography--fontSize); + font-weight: var(--wp-typography--fontWeight); + line-height: var(--wp-typography--lineHeight); } diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss index c1206d68958f7..9ff7209112f78 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/edit-site/src/components/sidebar/global-styles-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel.js deleted file mode 100644 index cf25f5d1552f2..0000000000000 --- a/packages/edit-site/src/components/sidebar/global-styles-panel.js +++ /dev/null @@ -1,224 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { useState, useEffect, useLayoutEffect } from '@wordpress/element'; - -import { - ColorControl, - Panel, - PanelBody, - RangeControl, -} from '@wordpress/components'; - -export default function GlobalStylesPanel() { - const { - fontSize, - setFontSize, - fontScale, - setFontScale, - lineHeight, - setLineHeight, - textColor, - setTextColor, - backgroundColor, - setBackgroundColor, - primaryColor, - setPrimaryColor, - } = useGlobalStylesState(); - - return ( - - - - - - - - - - - - - ); -} - -function useGlobalStylesState() { - // TODO: Replace with data/actions from wp.data - const [ fontSize, setFontSize ] = useState( 16 ); - const [ fontScale, setFontScale ] = useState( 1.2 ); - const [ lineHeight, setLineHeight ] = useState( 1.5 ); - - const [ textColor, setTextColor ] = useState( '#000000' ); - const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); - const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); - - const styles = { - color: { - text: textColor, - background: backgroundColor, - primary: primaryColor, - }, - typography: { - ...generateFontSizes( { fontSize, fontScale } ), - ...generateLineHeight( { lineHeight } ), - fontScale, - }, - }; - - useRenderedGlobalStyles( styles ); - - return { - fontSize, - setFontSize, - fontScale, - setFontScale, - lineHeight, - setLineHeight, - textColor, - setTextColor, - backgroundColor, - setBackgroundColor, - primaryColor, - setPrimaryColor, - }; -} - -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' ); - } - } ); - }, [] ); -} - -/** - * TODO: Replace everything below with client-side style rendering mechanism - */ -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 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 ]; - 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' ); -} - -/** - * NOTE: Generators for extra computed values. - */ - -function generateLineHeight( { lineHeight = 1.5 } ) { - return { - lineHeight, - titleLineHeight: lineHeight * 0.8, - }; -} - -function generateFontSizes( { fontSize = 16, fontScale = 1.2 } ) { - const toPx = ( size ) => - `${ ( Math.pow( fontScale, size ) * fontSize ).toFixed( 2 ) }px`; - - return { - fontSize: `${ fontSize }px`, - fontSizeH1: toPx( 5 ), - fontSizeH2: toPx( 4 ), - fontSizeH3: toPx( 3 ), - fontSizeH4: toPx( 2 ), - fontSizeH5: toPx( 1 ), - fontSizeH6: toPx( 0.5 ), - }; -} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/index.js b/packages/edit-site/src/components/sidebar/global-styles-panel/index.js new file mode 100644 index 0000000000000..a2290f95920a9 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/index.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { GlobalStylesStateProvider } from './store'; + +import { Panel } from '@wordpress/components'; + +import { + ColorPanel, + HeadingPanel, + QuotePanel, + TypographyPanel, +} from './panels'; + +export default function GlobalStylesPanel() { + return ( + + + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js new file mode 100644 index 0000000000000..5ae3177c9b58f --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js @@ -0,0 +1,41 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, ColorControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useGlobalStylesState } from '../store'; + +export default function ColorsPanel() { + const { + textColor, + setTextColor, + backgroundColor, + setBackgroundColor, + primaryColor, + setPrimaryColor, + } = useGlobalStylesState(); + + return ( + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js new file mode 100644 index 0000000000000..eb40b2540aaeb --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, RangeControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useGlobalStylesState } from '../store'; + +export default function HeadingPanel() { + const { headingFontWeight, setHeadingFontWeight } = useGlobalStylesState(); + + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js new file mode 100644 index 0000000000000..967609f37f36e --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js @@ -0,0 +1,4 @@ +export { default as ColorPanel } from './color-panel'; +export { default as HeadingPanel } from './heading-panel'; +export { default as TypographyPanel } from './typography-panel'; +export { default as QuotePanel } from './quote-panel'; diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js new file mode 100644 index 0000000000000..9553c9535c5d5 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, RangeControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useGlobalStylesState } from '../store'; + +export default function QuotePanel() { + const { quoteFontSize, setQuoteFontSize } = useGlobalStylesState(); + + return ( + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js new file mode 100644 index 0000000000000..3f4d2003127a6 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js @@ -0,0 +1,60 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { PanelBody, RangeControl } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { useGlobalStylesState } from '../store'; + +export default function TypographyPanel() { + const { + fontSize, + setFontSize, + fontScale, + setFontScale, + lineHeight, + setLineHeight, + fontWeight, + setFontWeight, + } = useGlobalStylesState(); + + return ( + + + + + + + ); +} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/renderer.js b/packages/edit-site/src/components/sidebar/global-styles-panel/renderer.js new file mode 100644 index 0000000000000..d9135b98abc6f --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/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/edit-site/src/components/sidebar/global-styles-panel/store.js b/packages/edit-site/src/components/sidebar/global-styles-panel/store.js new file mode 100644 index 0000000000000..633c6019881b4 --- /dev/null +++ b/packages/edit-site/src/components/sidebar/global-styles-panel/store.js @@ -0,0 +1,115 @@ +/** + * 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 useGlobalStylesStore() { + // TODO: Replace with data/actions from wp.data + const [ fontSize, setFontSize ] = useState( 16 ); + const [ fontWeight, setFontWeight ] = useState( 400 ); + const [ headingFontWeight, setHeadingFontWeight ] = useState( 600 ); + const [ fontScale, setFontScale ] = useState( 1.2 ); + const [ lineHeight, setLineHeight ] = useState( 1.5 ); + const [ quoteFontSize, setQuoteFontSize ] = useState( 24 ); + + const [ textColor, setTextColor ] = useState( '#000000' ); + const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); + const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); + + const styles = { + color: { + text: textColor, + background: backgroundColor, + primary: primaryColor, + }, + typography: { + ...generateFontSizes( { fontSize, fontScale } ), + ...generateLineHeight( { lineHeight } ), + fontScale, + fontWeight, + }, + heading: { + fontWeight: headingFontWeight, + }, + quote: { + fontSize: toPx( quoteFontSize ), + }, + }; + + useRenderedGlobalStyles( styles ); + + return { + fontSize, + setFontSize, + fontScale, + setFontScale, + lineHeight, + setLineHeight, + fontWeight, + setFontWeight, + textColor, + setTextColor, + backgroundColor, + setBackgroundColor, + primaryColor, + setPrimaryColor, + headingFontWeight, + setHeadingFontWeight, + quoteFontSize, + setQuoteFontSize, + }; +} + +/** + * NOTE: Generators for extra computed values. + */ + +function generateLineHeight( { lineHeight = 1.5 } ) { + return { + lineHeight, + titleLineHeight: lineHeight * 0.8, + }; +} + +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`; +} From 71ceca7d5fdb0d790915696bdedba77376309abf Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 12 Feb 2020 12:33:46 -0500 Subject: [PATCH 06/10] Created Global Styles package. Abstract + refactor controls and styled block panels --- package-lock.json | 14 ++++++-- package.json | 1 + packages/block-library/package.json | 1 + packages/block-library/src/heading/edit.js | 15 ++++++++- packages/block-library/src/quote/edit.js | 19 ++++++++++- packages/edit-site/package.json | 1 + .../edit-site/src/components/editor/index.js | 33 ++++++++++--------- .../sidebar/global-styles-panel/index.js | 31 ----------------- .../panels/heading-panel.js | 27 --------------- .../global-styles-panel/panels/quote-panel.js | 27 --------------- .../edit-site/src/components/sidebar/index.js | 4 +-- packages/global-styles/package.json | 32 ++++++++++++++++++ .../global-styles/src/global-styles-panel.js | 21 ++++++++++++ packages/global-styles/src/index.js | 4 +++ .../src}/panels/color-panel.js | 0 .../src}/panels/index.js | 2 -- .../src}/panels/typography-panel.js | 0 .../src}/renderer.js | 0 .../src}/store.js | 0 packages/global-styles/src/styles-panel.js | 15 +++++++++ packages/global-styles/src/utils.js | 3 ++ 21 files changed, 142 insertions(+), 108 deletions(-) delete mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/index.js delete mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js delete mode 100644 packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js create mode 100644 packages/global-styles/package.json create mode 100644 packages/global-styles/src/global-styles-panel.js create mode 100644 packages/global-styles/src/index.js rename packages/{edit-site/src/components/sidebar/global-styles-panel => global-styles/src}/panels/color-panel.js (100%) rename packages/{edit-site/src/components/sidebar/global-styles-panel => global-styles/src}/panels/index.js (51%) rename packages/{edit-site/src/components/sidebar/global-styles-panel => global-styles/src}/panels/typography-panel.js (100%) rename packages/{edit-site/src/components/sidebar/global-styles-panel => global-styles/src}/renderer.js (100%) rename packages/{edit-site/src/components/sidebar/global-styles-panel => global-styles/src}/store.js (100%) create mode 100644 packages/global-styles/src/styles-panel.js create mode 100644 packages/global-styles/src/utils.js diff --git a/package-lock.json b/package-lock.json index 80a696cf742f8..2e8ec5b52591f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10412,6 +10412,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/media-utils": "file:packages/media-utils", @@ -10545,6 +10546,15 @@ "lodash": "^4.17.15" } }, + "@wordpress/global-styles": { + "version": "file:packages/global-styles", + "requires": { + "@babel/runtime": "^7.8.3", + "@wordpress/components": "file:packages/components", + "@wordpress/element": "file:packages/element", + "@wordpress/i18n": "file:packages/i18n" + } + }, "@wordpress/hooks": { "version": "file:packages/hooks", "requires": { @@ -19511,7 +19521,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": false, + "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -19530,7 +19540,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": false, + "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, diff --git a/package.json b/package.json index 0b205f025a83c..26c890ec8e9c5 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,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/is-shallow-equal": "file:packages/is-shallow-equal", diff --git a/packages/block-library/package.json b/packages/block-library/package.json index 23613d3fb6202..c0d56a7dd8d16 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 c1811738ea2e7..e79cf5a3396f4 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -12,7 +12,7 @@ import HeadingToolbar from './heading-toolbar'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody } from '@wordpress/components'; +import { PanelBody, RangeControl } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; import { AlignmentToolbar, @@ -23,6 +23,8 @@ import { } from '@wordpress/block-editor'; import { useRef } from '@wordpress/element'; +import { StylesPanel, useGlobalStylesState } from '@wordpress/global-styles'; + function HeadingEdit( { attributes, setAttributes, @@ -31,6 +33,7 @@ function HeadingEdit( { className, } ) { const ref = useRef(); + const { headingFontWeight, setHeadingFontWeight } = useGlobalStylesState(); const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors( [ { name: 'textColor', property: 'color' } ], { @@ -62,6 +65,16 @@ function HeadingEdit( { /> + + +

{ __( 'Level' ) }

@@ -90,6 +95,18 @@ export default function QuoteEdit( { /> ) } + + + + + ); } diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index b6b1a33544ff8..c6c0a6f9332cd 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/media-utils": "file:../media-utils", diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 83a0f498a35fc..1b3e92e51339c 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -9,6 +9,7 @@ import { navigateRegions, } from '@wordpress/components'; import { EntityProvider } from '@wordpress/core-data'; +import { GlobalStylesStateProvider } from '@wordpress/global-styles'; /** * Internal dependencies @@ -29,21 +30,23 @@ function Editor( { settings } ) { [] ); return template ? ( - - - - -
- - - - - - + + + + + +
+ + + + + + + ) : null; } diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/index.js b/packages/edit-site/src/components/sidebar/global-styles-panel/index.js deleted file mode 100644 index a2290f95920a9..0000000000000 --- a/packages/edit-site/src/components/sidebar/global-styles-panel/index.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { GlobalStylesStateProvider } from './store'; - -import { Panel } from '@wordpress/components'; - -import { - ColorPanel, - HeadingPanel, - QuotePanel, - TypographyPanel, -} from './panels'; - -export default function GlobalStylesPanel() { - return ( - - - - - - - - - ); -} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js deleted file mode 100644 index eb40b2540aaeb..0000000000000 --- a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/heading-panel.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { useGlobalStylesState } from '../store'; - -export default function HeadingPanel() { - const { headingFontWeight, setHeadingFontWeight } = useGlobalStylesState(); - - return ( - - - - ); -} diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js b/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js deleted file mode 100644 index 9553c9535c5d5..0000000000000 --- a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/quote-panel.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl } from '@wordpress/components'; - -/** - * Internal dependencies - */ -import { useGlobalStylesState } from '../store'; - -export default function QuotePanel() { - const { quoteFontSize, setQuoteFontSize } = useGlobalStylesState(); - - return ( - - - - ); -} diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 211e2e76623aa..9b92f7bafdb10 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -3,11 +3,11 @@ */ import { createSlotFill, Panel } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { GlobalStylesPanel } from '@wordpress/global-styles'; /** * Internal dependencies */ -import GlobalStylesPanel from './global-styles-panel'; const { Slot: InspectorSlot, Fill: InspectorFill } = createSlotFill( 'EditSiteSidebarInspector' @@ -21,8 +21,8 @@ function Sidebar() { aria-label={ __( 'Site editor advanced settings.' ) } tabIndex="-1" > - +
diff --git a/packages/global-styles/package.json b/packages/global-styles/package.json new file mode 100644 index 0000000000000..975ed752d2ca9 --- /dev/null +++ b/packages/global-styles/package.json @@ -0,0 +1,32 @@ +{ + "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/components": "../components", + "@wordpress/element": "../element", + "@wordpress/i18n": "../i18n" + }, + "publishConfig": { + "access": "public" + } +} 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 0000000000000..363aabb1671ad --- /dev/null +++ b/packages/global-styles/src/global-styles-panel.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ + +import { Panel } from '@wordpress/components'; + +import { ColorPanel, TypographyPanel } from './panels'; + +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 0000000000000..c907221b0d4f3 --- /dev/null +++ b/packages/global-styles/src/index.js @@ -0,0 +1,4 @@ +export * from './store'; +export * from './global-styles-panel'; +export * from './styles-panel'; +export * from './utils'; diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js b/packages/global-styles/src/panels/color-panel.js similarity index 100% rename from packages/edit-site/src/components/sidebar/global-styles-panel/panels/color-panel.js rename to packages/global-styles/src/panels/color-panel.js diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js b/packages/global-styles/src/panels/index.js similarity index 51% rename from packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js rename to packages/global-styles/src/panels/index.js index 967609f37f36e..4edb2eb4dfadc 100644 --- a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/index.js +++ b/packages/global-styles/src/panels/index.js @@ -1,4 +1,2 @@ export { default as ColorPanel } from './color-panel'; -export { default as HeadingPanel } from './heading-panel'; export { default as TypographyPanel } from './typography-panel'; -export { default as QuotePanel } from './quote-panel'; diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js b/packages/global-styles/src/panels/typography-panel.js similarity index 100% rename from packages/edit-site/src/components/sidebar/global-styles-panel/panels/typography-panel.js rename to packages/global-styles/src/panels/typography-panel.js diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/renderer.js b/packages/global-styles/src/renderer.js similarity index 100% rename from packages/edit-site/src/components/sidebar/global-styles-panel/renderer.js rename to packages/global-styles/src/renderer.js diff --git a/packages/edit-site/src/components/sidebar/global-styles-panel/store.js b/packages/global-styles/src/store.js similarity index 100% rename from packages/edit-site/src/components/sidebar/global-styles-panel/store.js rename to packages/global-styles/src/store.js diff --git a/packages/global-styles/src/styles-panel.js b/packages/global-styles/src/styles-panel.js new file mode 100644 index 0000000000000..47e508939890d --- /dev/null +++ b/packages/global-styles/src/styles-panel.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import { isEditSite } from './utils'; + +export function StylesPanel( props ) { + if ( ! isEditSite() ) return null; + + return ; +} diff --git a/packages/global-styles/src/utils.js b/packages/global-styles/src/utils.js new file mode 100644 index 0000000000000..b7edfd6161dee --- /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; +} From 66ec6b568f2dab96cc26151c2ad853d1275abf59 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 12 Feb 2020 15:56:33 -0500 Subject: [PATCH 07/10] Improve GlobalStylesControls slot --- package-lock.json | 2 ++ .../block-editor/src/components/block-edit/index.js | 8 ++++++-- packages/block-editor/src/components/index.js | 6 +++++- packages/block-library/src/heading/edit.js | 13 +++++++++---- packages/global-styles/package.json | 1 + .../global-styles/src/global-styles-controls.js | 11 +++++++++++ packages/global-styles/src/global-styles-panel.js | 2 ++ packages/global-styles/src/index.js | 1 + packages/global-styles/src/slot.js | 10 ++++++++++ packages/global-styles/src/styles-panel.js | 7 ++++++- 10 files changed, 53 insertions(+), 8 deletions(-) create mode 100644 packages/global-styles/src/global-styles-controls.js create mode 100644 packages/global-styles/src/slot.js diff --git a/package-lock.json b/package-lock.json index 2e8ec5b52591f..c3cba1386cc1c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10120,6 +10120,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", @@ -10550,6 +10551,7 @@ "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" diff --git a/packages/block-editor/src/components/block-edit/index.js b/packages/block-editor/src/components/block-edit/index.js index 3057ff3b4cf72..e1552e2c8ad7b 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 42c357545cbbd..69ba7fcb45312 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/src/heading/edit.js b/packages/block-library/src/heading/edit.js index e79cf5a3396f4..7dd57fbd92528 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -23,7 +23,10 @@ import { } from '@wordpress/block-editor'; import { useRef } from '@wordpress/element'; -import { StylesPanel, useGlobalStylesState } from '@wordpress/global-styles'; +import { + GlobalStylesControls, + useGlobalStylesState, +} from '@wordpress/global-styles'; function HeadingEdit( { attributes, @@ -64,8 +67,8 @@ function HeadingEdit( { } } /> - - + + - + + +

{ __( 'Level' ) }

{ children }; +} diff --git a/packages/global-styles/src/global-styles-panel.js b/packages/global-styles/src/global-styles-panel.js index 363aabb1671ad..e10ec6a67964d 100644 --- a/packages/global-styles/src/global-styles-panel.js +++ b/packages/global-styles/src/global-styles-panel.js @@ -8,6 +8,7 @@ import { __ } from '@wordpress/i18n'; */ import { Panel } from '@wordpress/components'; +import { Slot } from './slot'; import { ColorPanel, TypographyPanel } from './panels'; @@ -16,6 +17,7 @@ export function GlobalStylesPanel() { + ); } diff --git a/packages/global-styles/src/index.js b/packages/global-styles/src/index.js index c907221b0d4f3..6d7cdd0affbcc 100644 --- a/packages/global-styles/src/index.js +++ b/packages/global-styles/src/index.js @@ -1,4 +1,5 @@ export * from './store'; +export * from './global-styles-controls'; export * from './global-styles-panel'; export * from './styles-panel'; export * from './utils'; diff --git a/packages/global-styles/src/slot.js b/packages/global-styles/src/slot.js new file mode 100644 index 0000000000000..83d2bd48b44db --- /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/styles-panel.js b/packages/global-styles/src/styles-panel.js index 47e508939890d..40ae0b888109d 100644 --- a/packages/global-styles/src/styles-panel.js +++ b/packages/global-styles/src/styles-panel.js @@ -6,10 +6,15 @@ import { PanelBody } from '@wordpress/components'; /** * Internal dependencies */ +import { Fill } from './slot'; import { isEditSite } from './utils'; export function StylesPanel( props ) { if ( ! isEditSite() ) return null; - return ; + return ( + + + + ); } From 0e917ebd0f625d38cb521fd5dfc82359839e8b41 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 12 Feb 2020 16:27:13 -0500 Subject: [PATCH 08/10] Improve Global Styles panel --- packages/block-editor/README.md | 4 ++++ packages/block-library/src/heading/edit.js | 5 +++-- packages/block-library/src/quote/edit.js | 15 +++++++++------ .../edit-site/src/components/sidebar/index.js | 4 +++- .../color-controls.js} | 9 +++++---- packages/global-styles/src/controls/index.js | 2 ++ .../typography-controls.js} | 12 ++++++++---- ...yles-panel.js => global-styles-panel-body.js} | 10 ++-------- .../global-styles/src/global-styles-panel.js | 16 +++++----------- packages/global-styles/src/index.js | 2 +- packages/global-styles/src/panels/index.js | 2 -- 11 files changed, 42 insertions(+), 39 deletions(-) rename packages/global-styles/src/{panels/color-panel.js => controls/color-controls.js} (71%) create mode 100644 packages/global-styles/src/controls/index.js rename packages/global-styles/src/{panels/typography-panel.js => controls/typography-controls.js} (77%) rename packages/global-styles/src/{styles-panel.js => global-styles-panel-body.js} (59%) delete mode 100644 packages/global-styles/src/panels/index.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 19d48b0b76869..fc75789b27b96 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -297,6 +297,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-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 7dd57fbd92528..4ebcff0827abd 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -25,6 +25,7 @@ import { useRef } from '@wordpress/element'; import { GlobalStylesControls, + GlobalStylesPanelBody, useGlobalStylesState, } from '@wordpress/global-styles'; @@ -68,7 +69,7 @@ function HeadingEdit( { /> - + - + diff --git a/packages/block-library/src/quote/edit.js b/packages/block-library/src/quote/edit.js index 0b5fa642b1d63..1a81b7ebf52fd 100644 --- a/packages/block-library/src/quote/edit.js +++ b/packages/block-library/src/quote/edit.js @@ -11,13 +11,16 @@ import { AlignmentToolbar, BlockControls, RichText, - InspectorControls, } from '@wordpress/block-editor'; import { BlockQuotation, RangeControl } from '@wordpress/components'; import { createBlock } from '@wordpress/blocks'; -import { StylesPanel, useGlobalStylesState } from '@wordpress/global-styles'; +import { + GlobalStylesControls, + GlobalStylesPanelBody, + useGlobalStylesState, +} from '@wordpress/global-styles'; export default function QuoteEdit( { attributes, @@ -95,8 +98,8 @@ export default function QuoteEdit( { /> ) } - - + + - - + + ); } diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js index 9b92f7bafdb10..dcf54be757faa 100644 --- a/packages/edit-site/src/components/sidebar/index.js +++ b/packages/edit-site/src/components/sidebar/index.js @@ -21,8 +21,10 @@ function Sidebar() { aria-label={ __( 'Site editor advanced settings.' ) } tabIndex="-1" > + + + -
diff --git a/packages/global-styles/src/panels/color-panel.js b/packages/global-styles/src/controls/color-controls.js similarity index 71% rename from packages/global-styles/src/panels/color-panel.js rename to packages/global-styles/src/controls/color-controls.js index 5ae3177c9b58f..73b9b90f9b894 100644 --- a/packages/global-styles/src/panels/color-panel.js +++ b/packages/global-styles/src/controls/color-controls.js @@ -2,14 +2,15 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, ColorControl } from '@wordpress/components'; +import { ColorControl } from '@wordpress/components'; /** * Internal dependencies */ +import { GlobalStylesPanelBody } from '../global-styles-panel-body'; import { useGlobalStylesState } from '../store'; -export default function ColorsPanel() { +export default function ColorControls() { const { textColor, setTextColor, @@ -20,7 +21,7 @@ export default function ColorsPanel() { } = useGlobalStylesState(); return ( - + - + ); } diff --git a/packages/global-styles/src/controls/index.js b/packages/global-styles/src/controls/index.js new file mode 100644 index 0000000000000..b09df4b6b9842 --- /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/panels/typography-panel.js b/packages/global-styles/src/controls/typography-controls.js similarity index 77% rename from packages/global-styles/src/panels/typography-panel.js rename to packages/global-styles/src/controls/typography-controls.js index 3f4d2003127a6..03b8704ea6460 100644 --- a/packages/global-styles/src/panels/typography-panel.js +++ b/packages/global-styles/src/controls/typography-controls.js @@ -2,14 +2,15 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl } from '@wordpress/components'; +import { RangeControl } from '@wordpress/components'; /** * Internal dependencies */ +import { GlobalStylesPanelBody } from '../global-styles-panel-body'; import { useGlobalStylesState } from '../store'; -export default function TypographyPanel() { +export default function TypographyControls() { const { fontSize, setFontSize, @@ -22,7 +23,10 @@ export default function TypographyPanel() { } = useGlobalStylesState(); return ( - + - + ); } diff --git a/packages/global-styles/src/styles-panel.js b/packages/global-styles/src/global-styles-panel-body.js similarity index 59% rename from packages/global-styles/src/styles-panel.js rename to packages/global-styles/src/global-styles-panel-body.js index 40ae0b888109d..78963132a4536 100644 --- a/packages/global-styles/src/styles-panel.js +++ b/packages/global-styles/src/global-styles-panel-body.js @@ -2,19 +2,13 @@ * WordPress dependencies */ import { PanelBody } from '@wordpress/components'; - /** * Internal dependencies */ -import { Fill } from './slot'; import { isEditSite } from './utils'; -export function StylesPanel( props ) { +export function GlobalStylesPanelBody( props ) { if ( ! isEditSite() ) return null; - return ( - - - - ); + return ; } diff --git a/packages/global-styles/src/global-styles-panel.js b/packages/global-styles/src/global-styles-panel.js index e10ec6a67964d..d5d8c19ccf39f 100644 --- a/packages/global-styles/src/global-styles-panel.js +++ b/packages/global-styles/src/global-styles-panel.js @@ -1,23 +1,17 @@ -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n'; - /** * Internal dependencies */ -import { Panel } from '@wordpress/components'; import { Slot } from './slot'; -import { ColorPanel, TypographyPanel } from './panels'; +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 6d7cdd0affbcc..2db07eb4412bd 100644 --- a/packages/global-styles/src/index.js +++ b/packages/global-styles/src/index.js @@ -1,5 +1,5 @@ export * from './store'; export * from './global-styles-controls'; export * from './global-styles-panel'; -export * from './styles-panel'; +export * from './global-styles-panel-body'; export * from './utils'; diff --git a/packages/global-styles/src/panels/index.js b/packages/global-styles/src/panels/index.js deleted file mode 100644 index 4edb2eb4dfadc..0000000000000 --- a/packages/global-styles/src/panels/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as ColorPanel } from './color-panel'; -export { default as TypographyPanel } from './typography-panel'; From c4198bcb583b56b60cfc7d73e59c204e51ca6eac Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 12 Feb 2020 16:28:34 -0500 Subject: [PATCH 09/10] Add basic Global Styles readme --- docs/manifest.json | 6 ++++++ packages/global-styles/README.md | 3 +++ 2 files changed, 9 insertions(+) create mode 100644 packages/global-styles/README.md diff --git a/docs/manifest.json b/docs/manifest.json index a44e36d2ee77a..f9cadda442375 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -1319,6 +1319,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/packages/global-styles/README.md b/packages/global-styles/README.md new file mode 100644 index 0000000000000..5d765ae85542e --- /dev/null +++ b/packages/global-styles/README.md @@ -0,0 +1,3 @@ +# Global Styles + +(Experimental) Global Styles Library From 1ea95e327860504028d3f81cdf0fe2601c63991d Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 13 Feb 2020 12:32:09 -0500 Subject: [PATCH 10/10] Refactor global styles data store. Add additional values for Paragraph block --- packages/block-library/src/heading/edit.js | 6 +- packages/block-library/src/paragraph/edit.js | 40 +++++++++- .../block-library/src/paragraph/style.scss | 5 +- packages/block-library/src/quote/edit.js | 6 +- .../src/controls/color-controls.js | 12 +-- .../src/controls/typography-controls.js | 13 ++-- packages/global-styles/src/store.js | 75 ++++++++++++------- 7 files changed, 107 insertions(+), 50 deletions(-) diff --git a/packages/block-library/src/heading/edit.js b/packages/block-library/src/heading/edit.js index 4ebcff0827abd..0de30e361c7b9 100644 --- a/packages/block-library/src/heading/edit.js +++ b/packages/block-library/src/heading/edit.js @@ -37,7 +37,7 @@ function HeadingEdit( { className, } ) { const ref = useRef(); - const { headingFontWeight, setHeadingFontWeight } = useGlobalStylesState(); + const { headingFontWeight, setStyles } = useGlobalStylesState(); const { TextColor, InspectorControlsColorPanel } = __experimentalUseColors( [ { name: 'textColor', property: 'color' } ], { @@ -73,7 +73,9 @@ function HeadingEdit( { + setStyles( { headingFontWeight: nextValue } ) + } min={ 100 } max={ 900 } step={ 100 } diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js index 944a3952dd616..400b65dc290f2 100644 --- a/packages/block-library/src/paragraph/edit.js +++ b/packages/block-library/src/paragraph/edit.js @@ -7,7 +7,13 @@ import classnames from 'classnames'; * WordPress dependencies */ import { __, _x } from '@wordpress/i18n'; -import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components'; +import { + ColorControl, + PanelBody, + RangeControl, + ToggleControl, + ToolbarGroup, +} from '@wordpress/components'; import { AlignmentToolbar, BlockControls, @@ -22,6 +28,12 @@ import { compose } from '@wordpress/compose'; import { useSelect } from '@wordpress/data'; import { useEffect, useState, useRef } from '@wordpress/element'; +import { + GlobalStylesControls, + GlobalStylesPanelBody, + useGlobalStylesState, +} from '@wordpress/global-styles'; + /** * Browser dependencies */ @@ -81,6 +93,11 @@ function ParagraphBlock( { setFontSize, } ) { const { align, content, dropCap, placeholder, direction } = attributes; + const { + paragraphColor, + paragraphLineHeight, + setStyles, + } = useGlobalStylesState(); const ref = useRef(); const dropCapMinimumHeight = useDropCapMinimumHeight( dropCap, [ @@ -124,6 +141,27 @@ function ParagraphBlock( { } /> + + + + setStyles( { paragraphColor: nextValue } ) + } + /> + + setStyles( { paragraphLineHeight: value } ) + } + /> + + @@ -103,7 +103,9 @@ export default function QuoteEdit( { + setStyles( { quoteFontSize: nextValue } ) + } min={ 10 } max={ 50 } step={ 1 } diff --git a/packages/global-styles/src/controls/color-controls.js b/packages/global-styles/src/controls/color-controls.js index 73b9b90f9b894..9b23a423737e9 100644 --- a/packages/global-styles/src/controls/color-controls.js +++ b/packages/global-styles/src/controls/color-controls.js @@ -13,11 +13,9 @@ import { useGlobalStylesState } from '../store'; export default function ColorControls() { const { textColor, - setTextColor, backgroundColor, - setBackgroundColor, primaryColor, - setPrimaryColor, + setStyles, } = useGlobalStylesState(); return ( @@ -25,17 +23,19 @@ export default function ColorControls() { setStyles( { textColor: value } ) } /> + setStyles( { backgroundColor: value } ) + } /> setStyles( { primaryColor: value } ) } /> ); diff --git a/packages/global-styles/src/controls/typography-controls.js b/packages/global-styles/src/controls/typography-controls.js index 03b8704ea6460..25ee5ad2033c6 100644 --- a/packages/global-styles/src/controls/typography-controls.js +++ b/packages/global-styles/src/controls/typography-controls.js @@ -13,13 +13,10 @@ import { useGlobalStylesState } from '../store'; export default function TypographyControls() { const { fontSize, - setFontSize, fontScale, - setFontScale, lineHeight, - setLineHeight, fontWeight, - setFontWeight, + setStyles, } = useGlobalStylesState(); return ( @@ -33,7 +30,7 @@ export default function TypographyControls() { min={ 10 } max={ 30 } step={ 1 } - onChange={ setFontSize } + onChange={ ( value ) => setStyles( { fontSize: value } ) } /> setStyles( { fontScale: value } ) } /> setStyles( { lineHeight: value } ) } /> setStyles( { fontWeight: value } ) } /> ); diff --git a/packages/global-styles/src/store.js b/packages/global-styles/src/store.js index 633c6019881b4..764ef9ec4e7b7 100644 --- a/packages/global-styles/src/store.js +++ b/packages/global-styles/src/store.js @@ -25,18 +25,47 @@ export function GlobalStylesStateProvider( { 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 [ fontSize, setFontSize ] = useState( 16 ); - const [ fontWeight, setFontWeight ] = useState( 400 ); - const [ headingFontWeight, setHeadingFontWeight ] = useState( 600 ); - const [ fontScale, setFontScale ] = useState( 1.2 ); - const [ lineHeight, setLineHeight ] = useState( 1.5 ); - const [ quoteFontSize, setQuoteFontSize ] = useState( 24 ); - - const [ textColor, setTextColor ] = useState( '#000000' ); - const [ backgroundColor, setBackgroundColor ] = useState( '#ffffff' ); - const [ primaryColor, setPrimaryColor ] = useState( '#0000ff' ); + const [ styleState, setStyles ] = useGlobalStylesDataState(); + const { + fontSize, + fontScale, + lineHeight, + fontWeight, + headingFontWeight, + paragraphColor, + paragraphLineHeight, + quoteFontSize, + textColor, + backgroundColor, + primaryColor, + } = styleState; const styles = { color: { @@ -56,29 +85,17 @@ export function useGlobalStylesStore() { quote: { fontSize: toPx( quoteFontSize ), }, + paragraph: { + color: paragraphColor, + lineHeight: paragraphLineHeight, + }, }; useRenderedGlobalStyles( styles ); return { - fontSize, - setFontSize, - fontScale, - setFontScale, - lineHeight, - setLineHeight, - fontWeight, - setFontWeight, - textColor, - setTextColor, - backgroundColor, - setBackgroundColor, - primaryColor, - setPrimaryColor, - headingFontWeight, - setHeadingFontWeight, - quoteFontSize, - setQuoteFontSize, + ...styleState, + setStyles, }; } @@ -89,7 +106,7 @@ export function useGlobalStylesStore() { function generateLineHeight( { lineHeight = 1.5 } ) { return { lineHeight, - titleLineHeight: lineHeight * 0.8, + titleLineHeight: ( lineHeight * 0.8 ).toFixed( 2 ), }; }