Add block inspector to the widget screen #16203
Conversation
jorgefilipecosta
requested review from
ellatrix,
gziolo,
talldan and
youknowriad
as code owners
jorgefilipecosta
force-pushed
the
add/block-inspector-to-the-widget-screen
branch
from
328bd21 to
dfa77b2
Compare
| } | ||
|
|
||
| export default compose( [ | ||
| withSelect( ( select ) => { |
There was a problem hiding this comment.
useSelect, useDispatch? ;)
There was a problem hiding this comment.
I tried to use hooks for this component but hooks did not work as expected, I always got unexpected results.
I tried to use a simple version where I relied on effects that execute when prop changes, and I also tried a usePrevious hook https://usehooks.com/usePrevious/ that allowed an implementation almost equal to this class component version, and both versions did not work properly. It is a very strange case I may be missing something.
| @@ -10,8 +11,18 @@ import { withSelect } from '@wordpress/data'; | |||
| import WidgetArea from '../widget-area'; | |||
|
|
|||
| function WidgetAreas( { areas, blockEditorSettings } ) { | |||
| const [ selectedArea, setSelectedArea ] = useState( 0 ); | |||
There was a problem hiding this comment.
do we really need this here? It feels like this could be local state for WidgetArea
There was a problem hiding this comment.
The widget area controls which of the areas contains a selected block, when a new area is selected other becomes unselected, each WidgetArea is a sibling of each other and siblings can not "communicate" between each other. This local state in WidgetAreas that is the parent of each WidgetArea allows the WidgetArea components to communicate with each other, when one becomes selected the others become unselected and the corresponding effects get executed, I don't think is possible to make this state part of the WidgetArea component.
gziolo
added
[Package] Block editor
jorgefilipecosta
force-pushed
the
add/block-inspector-to-the-widget-screen
branch
from
dfa77b2 to
1363fc8
Compare
jorgefilipecosta
force-pushed
the
add/block-inspector-to-the-widget-screen
branch
from
1363fc8 to
3dc985e
Compare
Description
This PR adds block inspector support to the widget screen.
This PR uses a SelectionObserver component extracted from #14715 by @aduth that ensures that if a block is selected in a given block area, blocks from other areas become unselected.
I tried to implement that SelectionObserver as a hook, in fact, I spent a considerable amount of time with that, and all the possible hook implementations I tried (including one that is equal to this one but uses a usePrevious hook) failed. I'm not sure why but it seems, in this case, useEffect does behave the same way as a componentDidUpdate cc: @aduth as you may have some insights.
How has this been tested?
I selected a theme with multiple block areas (Twenty Fourteen).
I added blocks in the widget screen and verified the block inspector appeared correctly. I verified that if I switch between block areas the inspector behavior is still correct (shows the last selected block independently of the area).