Skip to content

Commit

Permalink
LayoutPanel: Update to use ToolsPanel and ToolsPanelItems
Browse files Browse the repository at this point in the history
  • Loading branch information
andrewserong committed Nov 17, 2022
1 parent 4f25464 commit 475324a
Show file tree
Hide file tree
Showing 7 changed files with 356 additions and 146 deletions.
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/block-inspector/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="layout"
label={ __( 'Layout' ) }
/>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
Expand Down Expand Up @@ -255,6 +259,10 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
</div>
) }
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="layout"
label={ __( 'Layout' ) }
/>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ const InspectorControlsColor = createSlotFill( 'InspectorControlsColor' );
const InspectorControlsDimensions = createSlotFill(
'InspectorControlsDimensions'
);
const InspectorControlsLayout = createSlotFill( 'InspectorControlsLayout' );
const InspectorControlsTypography = createSlotFill(
'InspectorControlsTypography'
);
Expand All @@ -20,6 +21,7 @@ const groups = {
border: InspectorControlsBorder,
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
layout: InspectorControlsLayout,
typography: InspectorControlsTypography,
};

Expand Down
70 changes: 70 additions & 0 deletions packages/block-editor/src/hooks/content-layout.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
/**
* WordPress dependencies
*/
import { getBlockSupport } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import useSetting from '../components/use-setting';
import { LAYOUT_SUPPORT_KEY } from './layout';
import { cleanEmptyObject } from './utils';

/**
* Determines if there is content layout support.
*
* @param {string|Object} blockType Block name or Block Type object.
* @return {boolean} Whether there is support.
*/
export function hasContentLayoutSupport( blockType ) {
const support = getBlockSupport( blockType, LAYOUT_SUPPORT_KEY );
return !! (
true === support ||
! support?.default?.type ||
support?.default?.type === 'default' ||
support?.default?.type === 'constrained'
);
}

/**
* Checks if there is a current value set for content layout.
*
* @param {Object} props Block props.
* @return {boolean} Whether or not the block has a minHeight value set.
*/
export function hasContentLayoutValue( props ) {
return (
props.attributes.layout?.type === 'default' ||
props.attributes.layout?.type === 'constrained'
);
}

/**
* Resets the content layout block support attributes.
*
* @param {Object} props Block props.
* @param {Object} props.attributes Block's attributes.
* @param {Object} props.setAttributes Function to set block's attributes.
*/
export function resetContentLayout( { attributes = {}, setAttributes } ) {
const { layout } = attributes;

setAttributes( {
layout: cleanEmptyObject( {
...layout,
type: undefined,
} ),
} );
}

/**
* Custom hook that checks if content layout controls have been disabled.
*
* @param {string} name The name of the block.
* @return {boolean} Whether content layout control is disabled.
*/
export function useIsContentLayoutDisabled( { name: blockName } = {} ) {
// TODO: Is this check valid? The following assumes on by default unless explicitly opted out.
const isDisabled = useSetting( 'layout.contentLayout' ) === false;
return ! hasContentLayoutSupport( blockName ) || isDisabled;
}
160 changes: 90 additions & 70 deletions packages/block-editor/src/hooks/layout.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
Button,
ButtonGroup,
ToggleControl,
PanelBody,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useContext, createPortal } from '@wordpress/element';
Expand All @@ -29,8 +29,9 @@ import useSetting from '../components/use-setting';
import { LayoutStyle } from '../components/block-list/layout';
import BlockList from '../components/block-list';
import { getLayoutType, getLayoutTypes } from '../layouts';
import { hasContentLayoutValue, resetContentLayout } from './content-layout';

const layoutBlockSupportKey = '__experimentalLayout';
export const LAYOUT_SUPPORT_KEY = '__experimentalLayout';

/**
* Generates the utility classnames for the given block's layout attributes.
Expand All @@ -51,7 +52,7 @@ export function useLayoutClasses( block = {} ) {
const { layout } = attributes;

const { default: defaultBlockLayout } =
getBlockSupport( name, layoutBlockSupportKey ) || {};
getBlockSupport( name, LAYOUT_SUPPORT_KEY ) || {};
const usedLayout =
layout?.inherit || layout?.contentSize || layout?.wideSize
? { ...layout, type: 'constrained' }
Expand Down Expand Up @@ -128,8 +129,10 @@ export function useLayoutStyles( block = {}, selector ) {
return css;
}

function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
function LayoutPanel( props ) {
const { clientId, setAttributes, attributes, name: blockName } = props;
const { layout } = attributes;

const defaultThemeLayout = useSetting( 'layout' );
const themeSupportsLayout = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand All @@ -138,7 +141,7 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {

const layoutBlockSupport = getBlockSupport(
blockName,
layoutBlockSupportKey,
LAYOUT_SUPPORT_KEY,
{}
);
const {
Expand Down Expand Up @@ -192,67 +195,87 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
const onChangeLayout = ( newLayout ) =>
setAttributes( { layout: newLayout } );

const defaultControls = getBlockSupport( blockName, [
LAYOUT_SUPPORT_KEY,
'__experimentalDefaultControls',
] );

return (
<>
<InspectorControls>
<PanelBody title={ __( 'Layout' ) }>
{ showInheritToggle && (
<>
<ToggleControl
className="block-editor-hooks__toggle-control"
label={ __( 'Inner blocks use content width' ) }
checked={
layoutType?.name === 'constrained' ||
hasContentSizeOrLegacySettings
}
onChange={ () =>
setAttributes( {
layout: {
type:
layoutType?.name ===
'constrained' ||
hasContentSizeOrLegacySettings
? 'default'
: 'constrained',
},
} )
}
help={
layoutType?.name === 'constrained' ||
hasContentSizeOrLegacySettings
? __(
'Nested blocks use content width with options for full and wide widths.'
)
: __(
'Nested blocks will fill the width of this container. Toggle to constrain.'
)
}
/>
</>
) }

{ ! inherit && allowSwitching && (
<LayoutTypeSwitcher
type={ type }
onChange={ onChangeType }
/>
) }

{ layoutType && layoutType.name !== 'default' && (
<layoutType.inspectorControls
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
{ constrainedType && displayControlsForLegacyLayouts && (
<constrainedType.inspectorControls
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
<InspectorControls __experimentalGroup="layout">
{ showInheritToggle && (
<ToolsPanelItem
label={ __( 'Content layout' ) }
hasValue={ () => hasContentLayoutValue( props ) }
onDeselect={ () => resetContentLayout( props ) }
isShownByDefault={ true }
resetAllFilter={ ( newAttributes ) => ( {
...newAttributes,
layout: {
...newAttributes.layout,
type: undefined,
},
} ) }
panelId={ clientId }
>
<ToggleControl
className="block-editor-hooks__toggle-control"
label={ __( 'Inner blocks use content width' ) }
checked={
layoutType?.name === 'constrained' ||
hasContentSizeOrLegacySettings
}
onChange={ () =>
setAttributes( {
layout: {
type:
layoutType?.name ===
'constrained' ||
hasContentSizeOrLegacySettings
? 'default'
: 'constrained',
},
} )
}
help={
layoutType?.name === 'constrained' ||
hasContentSizeOrLegacySettings
? __(
'Nested blocks use content width with options for full and wide widths.'
)
: __(
'Nested blocks will fill the width of this container. Toggle to constrain.'
)
}
/>
) }
</PanelBody>
</ToolsPanelItem>
) }

{ ! inherit && allowSwitching && (
<LayoutTypeSwitcher
type={ type }
onChange={ onChangeType }
/>
) }

{ layoutType && layoutType.name !== 'default' && (
<layoutType.inspectorControls
clientId={ clientId }
defaultControls={ defaultControls }
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
{ constrainedType && displayControlsForLegacyLayouts && (
<constrainedType.inspectorControls
clientId={ clientId }
defaultControls={ defaultControls }
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
</InspectorControls>
{ ! inherit && layoutType && (
<layoutType.toolBarControls
Expand Down Expand Up @@ -294,7 +317,7 @@ export function addAttribute( settings ) {
if ( 'type' in ( settings.attributes?.layout ?? {} ) ) {
return settings;
}
if ( hasBlockSupport( settings, layoutBlockSupportKey ) ) {
if ( hasBlockSupport( settings, LAYOUT_SUPPORT_KEY ) ) {
settings.attributes = {
...settings.attributes,
layout: {
Expand All @@ -316,10 +339,7 @@ export function addAttribute( settings ) {
export const withInspectorControls = createHigherOrderComponent(
( BlockEdit ) => ( props ) => {
const { name: blockName } = props;
const supportLayout = hasBlockSupport(
blockName,
layoutBlockSupportKey
);
const supportLayout = hasBlockSupport( blockName, LAYOUT_SUPPORT_KEY );

return [
supportLayout && <LayoutPanel key="layout" { ...props } />,
Expand All @@ -341,7 +361,7 @@ export const withLayoutStyles = createHigherOrderComponent(
const { name, attributes, block } = props;
const hasLayoutBlockSupport = hasBlockSupport(
name,
layoutBlockSupportKey
LAYOUT_SUPPORT_KEY
);
const disableLayoutStyles = useSelect( ( select ) => {
const { getSettings } = select( blockEditorStore );
Expand All @@ -354,7 +374,7 @@ export const withLayoutStyles = createHigherOrderComponent(
const element = useContext( BlockList.__unstableElementContext );
const { layout } = attributes;
const { default: defaultBlockLayout } =
getBlockSupport( name, layoutBlockSupportKey ) || {};
getBlockSupport( name, LAYOUT_SUPPORT_KEY ) || {};
const usedLayout =
layout?.inherit || layout?.contentSize || layout?.wideSize
? { ...layout, type: 'constrained' }
Expand Down
6 changes: 6 additions & 0 deletions packages/block-editor/src/hooks/layout.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
.layout-block-support-panel {
.single-column {
grid-column: span 1;
}
}

.block-editor-hooks__layout-controls {
display: flex;
margin-bottom: $grid-unit-10;
Expand Down
Loading

0 comments on commit 475324a

Please sign in to comment.