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

Jump to bottom

Widgets: Refactor the inspector in Widgets Customizer to use core's controls #30431

Merged
merged 4 commits into from
Apr 8, 2021
Merged

Widgets: Refactor the inspector in Widgets Customizer to use core's controls #30431

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cf187c4
Refactor inspector to use core's controls
kevin940726 Mar 31, 2021
23a4ca3
Fix inserter id
kevin940726 Apr 1, 2021
c81cbab
Fix inserter style
kevin940726 Apr 7, 2021
68b2bdf
Delay rendering of the React tree until finished transitioning
kevin940726 Apr 7, 2021
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
38 changes: 38 additions & 0 deletions packages/customize-widgets/src/components/block-inspector-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
/**
* WordPress dependencies
*/
import { useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { MenuItem } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { store as blockEditorStore } from '@wordpress/block-editor';

function BlockInspectorButton( { inspector, closeMenu, ...props } ) {
const selectedBlockClientId = useSelect(
( select ) => select( blockEditorStore ).getSelectedBlockClientId(),
[]
);

const selectedBlock = useMemo(
() => document.getElementById( `block-${ selectedBlockClientId }` ),
[ selectedBlockClientId ]
);

return (
<MenuItem
onClick={ () => {
// Open the inspector.
inspector.open( {
returnFocusWhenClose: selectedBlock,
} );
// Then close the dropdown menu.
closeMenu();
} }
{ ...props }
>
{ __( 'Show more settings' ) }
</MenuItem>
);
}

export default BlockInspectorButton;
21 changes: 21 additions & 0 deletions packages/customize-widgets/src/components/block-inspector-button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
#customize-theme-controls .customize-pane-child.accordion-section-content.customize-widgets-layout__inspector {
background: $white;
box-sizing: border-box;

* {
box-sizing: inherit;
}

.block-editor-block-inspector {
margin: -$grid-unit-15;

// To override the style in block-editor/block-inspector.
h3 {
margin-bottom: 0;
}
}
}

#customize-theme-controls .customize-pane-child.control-section-sidebar.is-sub-section-open {
transform: translateX(-100%);
}
15 changes: 0 additions & 15 deletions packages/customize-widgets/src/components/inspector/block-inspector-button.js
View file
Open in desktop

This file was deleted.

122 changes: 0 additions & 122 deletions packages/customize-widgets/src/components/inspector/index.js
View file
Open in desktop

This file was deleted.

25 changes: 0 additions & 25 deletions packages/customize-widgets/src/components/inspector/style.scss
View file
Open in desktop

This file was deleted.

99 changes: 34 additions & 65 deletions packages/customize-widgets/src/components/sidebar-block-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
/**
* WordPress dependencies
*/
import { useReducer, createPortal, useMemo } from '@wordpress/element';
import { createPortal, useMemo } from '@wordpress/element';
import {
BlockEditorProvider,
BlockList,
BlockSelectionClearer,
BlockInspector,
ObserveTyping,
WritingFlow,
BlockEditorKeyboardShortcuts,
Expand All @@ -20,39 +21,13 @@ import {
/**
* Internal dependencies
*/
import Inspector, { BlockInspectorButton } from '../inspector';
import BlockInspectorButton from '../block-inspector-button';
import Header from '../header';
import useSidebarBlockEditor from './use-sidebar-block-editor';
import useInserter from '../inserter/use-inserter';

const inspectorOpenStateReducer = ( state, action ) => {
switch ( action ) {
case 'OPEN':
return {
open: true,
busy: true,
};
case 'TRANSITION_END':
return {
...state,
busy: false,
};
case 'CLOSE':
return {
open: false,
busy: true,
};
default:
throw new Error( 'Unexpected action' );
}
};

export default function SidebarBlockEditor( { sidebar, inserter } ) {
export default function SidebarBlockEditor( { sidebar, inserter, inspector } ) {
const [ blocks, onInput, onChange ] = useSidebarBlockEditor( sidebar );
const [
{ open: isInspectorOpened, busy: isInspectorAnimating },
setInspectorOpenState,
] = useReducer( inspectorOpenStateReducer, { open: false, busy: false } );
const parentContainer = document.getElementById(
'customize-theme-controls'
);
Expand All @@ -69,52 +44,46 @@ export default function SidebarBlockEditor( { sidebar, inserter } ) {
<BlockEditorKeyboardShortcuts.Register />
<SlotFillProvider>
<DropZoneProvider>
<div hidden={ isInspectorOpened && ! isInspectorAnimating }>
<BlockEditorProvider
value={ blocks }
onInput={ onInput }
onChange={ onChange }
settings={ settings }
useSubRegistry={ false }
>
<BlockEditorKeyboardShortcuts />
<BlockEditorProvider
value={ blocks }
onInput={ onInput }
onChange={ onChange }
settings={ settings }
useSubRegistry={ false }
>
<BlockEditorKeyboardShortcuts />

<Header
inserter={ inserter }
isInserterOpened={ isInserterOpened }
setIsInserterOpened={ setIsInserterOpened }
/>
<Header
inserter={ inserter }
isInserterOpened={ isInserterOpened }
setIsInserterOpened={ setIsInserterOpened }
/>

<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
</BlockEditorProvider>
<BlockSelectionClearer>
<WritingFlow>
<ObserveTyping>
<BlockList />
</ObserveTyping>
</WritingFlow>
</BlockSelectionClearer>
</BlockEditorProvider>

<Popover.Slot name="block-toolbar" />
</div>
<Popover.Slot name="block-toolbar" />

{ createPortal(
<Inspector
isOpened={ isInspectorOpened }
isAnimating={ isInspectorAnimating }
setInspectorOpenState={ setInspectorOpenState }
/>,
parentContainer
// This is a temporary hack to prevent button component inside <BlockInspector>
// from submitting form when type="button" is not specified.
<form onSubmit={ ( event ) => event.preventDefault() }>
Comment on lines +74 to +76
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opened ItsJonQ/g2#298 to track this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That PR is merged now. Can we remove the hack?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not yet being merged into trunk yet.

<BlockInspector />
</form>,
inspector.contentContainer[ 0 ]
) }

<__experimentalBlockSettingsMenuFirstItem>
{ ( { onClose } ) => (
<BlockInspectorButton
onClick={ () => {
// Open the inspector,
setInspectorOpenState( 'OPEN' );
// Then close the dropdown menu.
onClose();
} }
inspector={ inspector }
closeMenu={ onClose }
/>
) }
</__experimentalBlockSettingsMenuFirstItem>
Expand Down
Loading