From 79676d7f05dde4b0f71eb2072fedfe5b5baded48 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 29 Jul 2022 17:35:25 +0100 Subject: [PATCH 1/3] Global Styles: Expose the provider and the reset hook --- packages/edit-site/src/components/global-styles/index.js | 1 + packages/edit-site/src/index.js | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/index.js b/packages/edit-site/src/components/global-styles/index.js index 026a4fd759f32..258de8b619aa9 100644 --- a/packages/edit-site/src/components/global-styles/index.js +++ b/packages/edit-site/src/components/global-styles/index.js @@ -1,3 +1,4 @@ export { default as GlobalStylesUI } from './ui'; export { useGlobalStylesReset, useStyle, useSetting } from './hooks'; export { useGlobalStylesOutput } from './use-global-styles-output'; +export { GlobalStylesProvider } from './global-styles-provider'; diff --git a/packages/edit-site/src/index.js b/packages/edit-site/src/index.js index 3dce71929c38e..5c645d66fca57 100644 --- a/packages/edit-site/src/index.js +++ b/packages/edit-site/src/index.js @@ -139,3 +139,7 @@ export { default as __experimentalNavigationToggle } from './components/navigati export { default as PluginSidebar } from './components/sidebar/plugin-sidebar'; export { default as PluginSidebarMoreMenuItem } from './components/header/plugin-sidebar-more-menu-item'; export { default as PluginMoreMenuItem } from './components/header/plugin-more-menu-item'; +export { + useGlobalStylesReset, + GlobalStylesProvider, +} from './components/global-styles'; From ec27be9e9cd329c6511582839928d6755575c748 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 12 Aug 2022 13:53:26 +0100 Subject: [PATCH 2/3] Add docs for these new external APIs --- .../src/components/global-styles/README.md | 43 ++++++++++++++++--- 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/README.md b/packages/edit-site/src/components/global-styles/README.md index ac728f3eb8bf5..3d38254723c69 100644 --- a/packages/edit-site/src/components/global-styles/README.md +++ b/packages/edit-site/src/components/global-styles/README.md @@ -26,8 +26,8 @@ import { useGlobalStylesReset } from './global-styles'; function MyComponent() { const [ canReset, reset ] = useGlobalStylesReset(); - return canReset - ? + return canReset + ? : null; } ``` @@ -61,10 +61,10 @@ import { useStyle } from './global-styles'; function MyComponent() { // Text color for the site root. - const [ color, setColor ] = useStyle( 'color.text' ); + const [ color, setColor ] = useStyle( 'color.text' ); // The user modified color for the core paragraph block. - const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); + const [ pColor, setPColor ] = useStyle( 'color.text', 'core/paragraph', 'user' ); return "Something"; } @@ -79,13 +79,44 @@ import { useSetting } from './global-styles'; function MyComponent() { // The default color palette. - const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); + const [ colorPalette, setColorPalette ] = useSetting( 'color.palette' ); // The base (theme + core) color palette for the paragraph block, // ignoring user provided palette. // If the palette is not defined for the paragraph block, the root one is returned. - const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); + const [ pColor, setPColor ] = useSetting( 'color.palette', 'core/paragraph', 'base' ); return "Something"; } ``` + +## GlobalStylesProvider + +Provides access to the Global Styles store. If you want to interact with Global Styles data in a UI then you can wrap your controls in this component to give you access to the store: + +```js + import { GlobalStylesProvider } from './global-styles'; + + function MyComponent() { + return ( + + + + ); + } +``` + +The `MyUIControls` component will now have access to the Global Styles store. + +## useGlobalStylesReset + +A react hook used to reset the Global Styles settings in the client: + +```js + import { useGlobalStylesReset } from './global-styles'; + + const [ canReset, onReset ] = useGlobalStylesReset(); + + // From inside your component call: + onReset(); +``` From 7a2cd10c30e327dd356e7392571d1b7a7450d086 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 12 Aug 2022 16:08:00 +0100 Subject: [PATCH 3/3] remove double docs --- .../src/components/global-styles/README.md | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/README.md b/packages/edit-site/src/components/global-styles/README.md index 3d38254723c69..e946e7f786c5d 100644 --- a/packages/edit-site/src/components/global-styles/README.md +++ b/packages/edit-site/src/components/global-styles/README.md @@ -107,16 +107,3 @@ Provides access to the Global Styles store. If you want to interact with Global ``` The `MyUIControls` component will now have access to the Global Styles store. - -## useGlobalStylesReset - -A react hook used to reset the Global Styles settings in the client: - -```js - import { useGlobalStylesReset } from './global-styles'; - - const [ canReset, onReset ] = useGlobalStylesReset(); - - // From inside your component call: - onReset(); -```