From 00e1812ec1f243e5d4920da6ca18159556396462 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Apr 2021 09:19:55 +0100 Subject: [PATCH 1/3] Apply a StyleProvider around fills that can be used inside the iframe --- .../src/components/block-controls/fill.js | 35 ++++++++++--------- .../inspector-advanced-controls/index.js | 11 ++++-- .../components/inspector-controls/index.js | 11 ++++-- packages/components/src/index.native.js | 1 + .../src/style-provider/index.native.js | 3 ++ 5 files changed, 41 insertions(+), 20 deletions(-) create mode 100644 packages/components/src/style-provider/index.native.js diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js index f66636e2a6265..ce5e94b10be69 100644 --- a/packages/block-editor/src/components/block-controls/fill.js +++ b/packages/block-editor/src/components/block-controls/fill.js @@ -7,6 +7,7 @@ import { isEmpty } from 'lodash'; * WordPress dependencies */ import { + __experimentalStyleProvider as StyleProvider, __experimentalToolbarContext as ToolbarContext, ToolbarGroup, } from '@wordpress/components'; @@ -28,21 +29,23 @@ export default function BlockControlsFill( { const Fill = groups[ group ].Fill; return ( - - { ( fillProps ) => { - // Children passed to BlockControlsFill will not have access to any - // React Context whose Provider is part of the BlockControlsSlot tree. - // So we re-create the Provider in this subtree. - const value = ! isEmpty( fillProps ) ? fillProps : null; - return ( - - { group === 'default' && ( - - ) } - { children } - - ); - } } - + + + { ( fillProps ) => { + // Children passed to BlockControlsFill will not have access to any + // React Context whose Provider is part of the BlockControlsSlot tree. + // So we re-create the Provider in this subtree. + const value = ! isEmpty( fillProps ) ? fillProps : null; + return ( + + { group === 'default' && ( + + ) } + { children } + + ); + } } + + ); } diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js index 304a118315444..6a23a5e72b981 100644 --- a/packages/block-editor/src/components/inspector-advanced-controls/index.js +++ b/packages/block-editor/src/components/inspector-advanced-controls/index.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { + createSlotFill, + __experimentalStyleProvider as StyleProvider, +} from '@wordpress/components'; /** * Internal dependencies @@ -13,7 +16,11 @@ const { Fill, Slot } = createSlotFill( name ); function InspectorAdvancedControls( { children } ) { const { isSelected } = useBlockEditContext(); - return isSelected ? { children } : null; + return isSelected ? ( + + { children } + + ) : null; } InspectorAdvancedControls.slotName = name; diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 8db793f10ec39..6d985ad910e07 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -1,7 +1,10 @@ /** * WordPress dependencies */ -import { createSlotFill } from '@wordpress/components'; +import { + __experimentalStyleProvider as StyleProvider, + createSlotFill, +} from '@wordpress/components'; /** * Internal dependencies @@ -11,7 +14,11 @@ import useDisplayBlockControls from '../use-display-block-controls'; const { Fill, Slot } = createSlotFill( 'InspectorControls' ); function InspectorControls( { children } ) { - return useDisplayBlockControls() ? { children } : null; + return useDisplayBlockControls() ? ( + + { children } + + ) : null; } InspectorControls.Slot = Slot; diff --git a/packages/components/src/index.native.js b/packages/components/src/index.native.js index e910f3386c7e7..73d14e6a4aa43 100644 --- a/packages/components/src/index.native.js +++ b/packages/components/src/index.native.js @@ -28,6 +28,7 @@ export { Fill, Provider as SlotFillProvider, } from './slot-fill'; +export { default as __experimentalStyleProvider } from './style-provider'; export { default as BaseControl } from './base-control'; export { default as TextareaControl } from './textarea-control'; export { default as PanelBody } from './panel/body'; diff --git a/packages/components/src/style-provider/index.native.js b/packages/components/src/style-provider/index.native.js new file mode 100644 index 0000000000000..ca360e7bd0d03 --- /dev/null +++ b/packages/components/src/style-provider/index.native.js @@ -0,0 +1,3 @@ +export default function StyleProvider( { children } ) { + return children; +} From f6539b723a63774fd450e816a4f38e5155ee6306 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 22 Apr 2021 13:47:23 +0100 Subject: [PATCH 2/3] Add the style provider to the block settings fill --- packages/block-editor/README.md | 8 ++++++ .../block-settings-menu-controls/index.js | 25 ++++++++++++++----- 2 files changed, 27 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 814eb12c18b76..c452746230608 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -194,6 +194,14 @@ _Related_ - +_Parameters_ + +- _props_ `Object`: Fill props. + +_Returns_ + +- `WPElement`: Element. + # **BlockTitle** Renders the block's configured title as a string, or empty if the title diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 4242983c192d5..51cbe02477b24 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -6,7 +6,11 @@ import { compact, map } from 'lodash'; /** * WordPress dependencies */ -import { createSlotFill, MenuGroup } from '@wordpress/components'; +import { + createSlotFill, + MenuGroup, + __experimentalStyleProvider as StyleProvider, +} from '@wordpress/components'; import { useSelect } from '@wordpress/data'; /** @@ -18,9 +22,7 @@ import { } from '../convert-to-group-buttons'; import { store as blockEditorStore } from '../../store'; -const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill( - 'BlockSettingsMenuControls' -); +const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' ); const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { const selectedBlocks = useSelect( @@ -62,9 +64,20 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { ); }; -BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; - /** * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md + * + * @param {Object} props Fill props. + * @return {WPElement} Element. */ +function BlockSettingsMenuControls( { ...props } ) { + return ( + + + + ); +} + +BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot; + export default BlockSettingsMenuControls; From 06790fdd00e93043fc3bc918d1172c4b30e32bdc Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 23 Apr 2021 09:13:26 +0100 Subject: [PATCH 3/3] Rename the iframeDocument prop --- packages/block-editor/src/components/block-controls/fill.js | 2 +- .../src/components/block-settings-menu-controls/index.js | 2 +- packages/block-editor/src/components/iframe/index.js | 2 +- .../src/components/inspector-advanced-controls/index.js | 2 +- .../block-editor/src/components/inspector-controls/index.js | 2 +- packages/components/src/style-provider/index.js | 6 +++--- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js index ce5e94b10be69..2392c3d07ee3a 100644 --- a/packages/block-editor/src/components/block-controls/fill.js +++ b/packages/block-editor/src/components/block-controls/fill.js @@ -29,7 +29,7 @@ export default function BlockControlsFill( { const Fill = groups[ group ].Fill; return ( - + { ( fillProps ) => { // Children passed to BlockControlsFill will not have access to any diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js index 51cbe02477b24..4279b307f7e80 100644 --- a/packages/block-editor/src/components/block-settings-menu-controls/index.js +++ b/packages/block-editor/src/components/block-settings-menu-controls/index.js @@ -72,7 +72,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => { */ function BlockSettingsMenuControls( { ...props } ) { return ( - + ); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 40e677aedd228..2485c35347033 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -185,7 +185,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) { > { iframeDocument && createPortal( - + { children } , iframeDocument.body diff --git a/packages/block-editor/src/components/inspector-advanced-controls/index.js b/packages/block-editor/src/components/inspector-advanced-controls/index.js index 6a23a5e72b981..4ed9b6341142d 100644 --- a/packages/block-editor/src/components/inspector-advanced-controls/index.js +++ b/packages/block-editor/src/components/inspector-advanced-controls/index.js @@ -17,7 +17,7 @@ const { Fill, Slot } = createSlotFill( name ); function InspectorAdvancedControls( { children } ) { const { isSelected } = useBlockEditContext(); return isSelected ? ( - + { children } ) : null; diff --git a/packages/block-editor/src/components/inspector-controls/index.js b/packages/block-editor/src/components/inspector-controls/index.js index 6d985ad910e07..9a6cb7bab61a7 100644 --- a/packages/block-editor/src/components/inspector-controls/index.js +++ b/packages/block-editor/src/components/inspector-controls/index.js @@ -15,7 +15,7 @@ const { Fill, Slot } = createSlotFill( 'InspectorControls' ); function InspectorControls( { children } ) { return useDisplayBlockControls() ? ( - + { children } ) : null; diff --git a/packages/components/src/style-provider/index.js b/packages/components/src/style-provider/index.js index 0f57ce8945edb..9cf9929389712 100644 --- a/packages/components/src/style-provider/index.js +++ b/packages/components/src/style-provider/index.js @@ -9,12 +9,12 @@ const memoizedCreateCacheWithContainer = memoize( ( container ) => { return createCache( { container } ); } ); -export default function StyleProvider( { children, iframeDocument } ) { - if ( ! iframeDocument ) { +export default function StyleProvider( { children, document } ) { + if ( ! document ) { return null; } - const cache = memoizedCreateCacheWithContainer( iframeDocument.head ); + const cache = memoizedCreateCacheWithContainer( document.head ); return { children }; }