Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove ifBlockEditSelected internal higher-order component #22905

Merged
merged 2 commits into from
Jun 5, 2020
Merged

Remove ifBlockEditSelected internal higher-order component #22905

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1d6deae
Block Editor: Remove ifBlockEditSelected internal higher-order component
aduth Jun 4, 2020
e6e03c9
Block Editor: Pass children to inspector fills
aduth Jun 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions packages/block-editor/src/components/block-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import {
/**
* Internal dependencies
*/
import { ifBlockEditSelected } from '../block-edit/context';
import { useBlockEditContext } from '../block-edit/context';

const { Fill, Slot } = createSlotFill( 'BlockControls' );

Expand All @@ -26,6 +26,11 @@ function BlockControlsSlot( props ) {
}

function BlockControlsFill( { controls, children } ) {
const { isSelected } = useBlockEditContext();
if ( ! isSelected ) {
return null;
}

return (
<Fill>
{ ( fillProps ) => {
Expand All @@ -44,7 +49,7 @@ function BlockControlsFill( { controls, children } ) {
);
}

const BlockControls = ifBlockEditSelected( BlockControlsFill );
const BlockControls = BlockControlsFill;

BlockControls.Slot = BlockControlsSlot;

Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-controls/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
<WithFilters(Edit)
isSelected={true}
>
<IfBlockEditSelected(BlockControlsFill)
<BlockControlsFill
controls={
Array [
Object {
Expand Down Expand Up @@ -60,7 +60,7 @@ exports[`BlockControls should render a dynamic toolbar of controls 1`] = `
<p>
Child
</p>
</IfBlockEditSelected(BlockControlsFill)>
</BlockControlsFill>
</WithFilters(Edit)>
</ContextProvider>
`;
21 changes: 0 additions & 21 deletions packages/block-editor/src/components/block-edit/context.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,3 @@ export const withBlockEditContext = ( mapContextToProps ) =>
</Consumer>
);
}, 'withBlockEditContext' );

/**
* A Higher Order Component used to render conditionally the wrapped
* component only when the BlockEdit has selected state set.
*
* @param {WPComponent} OriginalComponent Component to wrap.
*
* @return {WPComponent} Component which renders only when the BlockEdit is selected.
*/
export const ifBlockEditSelected = createHigherOrderComponent(
( OriginalComponent ) => {
return ( props ) => (
<Consumer>
{ ( { isSelected } ) =>
isSelected && <OriginalComponent { ...props } />
}
</Consumer>
);
},
'ifBlockEditSelected'
);
9 changes: 7 additions & 2 deletions packages/block-editor/src/components/block-format-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
/**
* Internal dependencies
*/
import { ifBlockEditSelected } from '../block-edit/context';
import { useBlockEditContext } from '../block-edit/context';

const { Fill, Slot } = createSlotFill( 'BlockFormatControls' );

Expand All @@ -25,6 +25,11 @@ function BlockFormatControlsSlot( props ) {
}

function BlockFormatControlsFill( props ) {
const { isSelected } = useBlockEditContext();
if ( ! isSelected ) {
return null;
}

return (
<Fill>
{ ( fillProps ) => {
Expand All @@ -39,7 +44,7 @@ function BlockFormatControlsFill( props ) {
);
}

const BlockFormatControls = ifBlockEditSelected( BlockFormatControlsFill );
const BlockFormatControls = BlockFormatControlsFill;

BlockFormatControls.Slot = BlockFormatControlsSlot;

Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/inspector-advanced-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,15 @@ import { createSlotFill } from '@wordpress/components';
/**
* Internal dependencies
*/
import { ifBlockEditSelected } from '../block-edit/context';
import { useBlockEditContext } from '../block-edit/context';

const name = 'InspectorAdvancedControls';
const { Fill, Slot } = createSlotFill( name );

const InspectorAdvancedControls = ifBlockEditSelected( Fill );
function InspectorAdvancedControls() {
const { isSelected } = useBlockEditContext();
return isSelected ? <Fill /> : null;
}

InspectorAdvancedControls.slotName = name;
InspectorAdvancedControls.Slot = Slot;
Expand Down
7 changes: 5 additions & 2 deletions packages/block-editor/src/components/inspector-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import { createSlotFill } from '@wordpress/components';
/**
* Internal dependencies
*/
import { ifBlockEditSelected } from '../block-edit/context';
import { useBlockEditContext } from '../block-edit/context';

const { Fill, Slot } = createSlotFill( 'InspectorControls' );

const InspectorControls = ifBlockEditSelected( Fill );
function InspectorControls() {
const { isSelected } = useBlockEditContext();
return isSelected ? <Fill /> : null;
}

InspectorControls.Slot = Slot;

Expand Down
9 changes: 7 additions & 2 deletions packages/block-editor/src/components/inspector-controls/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,17 @@ import { createSlotFill, BottomSheetConsumer } from '@wordpress/components';
/**
* Internal dependencies
*/
import { ifBlockEditSelected } from '../block-edit/context';
import { useBlockEditContext } from '../block-edit/context';
import { BlockSettingsButton } from '../block-settings';

const { Fill, Slot } = createSlotFill( 'InspectorControls' );

const FillWithSettingsButton = ( { children, ...props } ) => {
const { isSelected } = useBlockEditContext();
if ( ! isSelected ) {
return null;
}

return (
<>
<Fill { ...props }>
Expand All @@ -30,7 +35,7 @@ const FillWithSettingsButton = ( { children, ...props } ) => {
);
};

const InspectorControls = ifBlockEditSelected( FillWithSettingsButton );
const InspectorControls = FillWithSettingsButton;

InspectorControls.Slot = Slot;

Expand Down
8 changes: 4 additions & 4 deletions packages/block-library/src/more/test/__snapshots__/edit.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
<React.Fragment>
<IfBlockEditSelected(InspectorControlsFill)>
<InspectorControls>
<ForwardRef(PanelBody)>
<WithInstanceId(ToggleControl)
checked={false}
Expand All @@ -11,7 +11,7 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `
onChange={[Function]}
/>
</ForwardRef(PanelBody)>
</IfBlockEditSelected(InspectorControlsFill)>
</InspectorControls>
<div
className="wp-block-more"
>
Expand All @@ -32,7 +32,7 @@ exports[`core/more/edit should match snapshot when noTeaser is false 1`] = `

exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
<React.Fragment>
<IfBlockEditSelected(InspectorControlsFill)>
<InspectorControls>
<ForwardRef(PanelBody)>
<WithInstanceId(ToggleControl)
checked={true}
Expand All @@ -41,7 +41,7 @@ exports[`core/more/edit should match snapshot when noTeaser is true 1`] = `
onChange={[Function]}
/>
</ForwardRef(PanelBody)>
</IfBlockEditSelected(InspectorControlsFill)>
</InspectorControls>
<div
className="wp-block-more"
>
Expand Down