How are edit methods dissected when displaying the editor?

[mrmadhat]

When constructing a block the edit method might include components such as InspectorControls and BlockControls to add settings in the sidebar/block toolbar. I would like to know how these components make it into the sidebar and block settings when the editor loads.

I imagine when a block is selected the sidebar will somehow look at the construction of the component and if it finds an InspectorControls component it loads it. Potentially something to do with the active component being passed into the sidebar as a prop then mapping through the children of the prop?

Could someone explain what's happening or link me to a doc/article that explains it?

Thanks

[aduth]

A high-level overview can be found here:

https://wordpress.org/gutenberg/handbook/designers-developers/developers/tutorials/block-tutorial/block-controls-toolbars-and-inspector/#inspector

A more low-level / technical explanation is that it uses a combination of:

• Slot and Fill components to render elsewhere in the page (i.e. rather than in the blocks listing, show something in the sidebar).
• React's Context feature to transmit block selection information directly from the block renderer to the inspector controls element, to avoid a block developer needing to manage whether the component be rendered only when a block is selected.
  • See Blocks: Try new context API to simplify display of block controls #5029

  • gutenberg/packages/editor/src/components/inspector-controls/index.js

    Line 13 in 62f6163

    const InspectorControls = ifBlockEditSelected( Fill );

  • gutenberg/packages/editor/src/components/block-edit/context.js

    Lines 45 to 61 in 62f6163

    	/**
    	* A Higher Order Component used to render conditionally the wrapped
    	* component only when the BlockEdit has selected state set.
    	*
    	* @param {Component} OriginalComponent Component to wrap.
    	*
    	* @return {Component} Component which renders only when the BlockEdit is selected.
    	*/
    	export const ifBlockEditSelected = createHigherOrderComponent( ( OriginalComponent ) => {
    	return ( props ) => (
    	<Consumer>
    	{ ( { isSelected } ) => isSelected && (
    	<OriginalComponent { ...props } />
    	) }
    	</Consumer>
    	);
    	}, 'ifBlockEditSelected' );

[mrmadhat]

That's exactly what I was look for, thanks @aduth