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

[WIP] LayoutPanel: Update to use ToolsPanel and ToolsPanelItems #45833

Closed
wants to merge 5 commits into from
Closed

[WIP] LayoutPanel: Update to use ToolsPanel and ToolsPanelItems #45833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c91060a
LayoutPanel: Update to use ToolsPanel and ToolsPanelItems
andrewserong Nov 17, 2022
f6a4e6e
Wrap layout type switcher in ToolsPanel, fix styling of content and w…
andrewserong Nov 21, 2022
d357a87
Prevent constrained justification from showing by default
andrewserong Nov 22, 2022
5d23bbe
Display justification and orientation on separate lines
andrewserong Nov 22, 2022
8abc84a
Try moving content layout down to the layout type, combine with conte…
andrewserong Nov 22, 2022
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
8 changes: 8 additions & 0 deletions packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,10 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
) : (
<>
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="layout"
label={ __( 'Layout' ) }
/>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
Expand Down Expand Up @@ -296,6 +300,10 @@ const BlockInspectorSingleBlock = ( {
</div>
) }
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="layout"
label={ __( 'Layout' ) }
/>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
Expand Down
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/appearance-tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,10 @@ const AppearanceTab = ( {
</PanelBody>
</div>
) }
<InspectorControls.Slot
__experimentalGroup="layout"
label={ __( 'Layout' ) }
/>
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
Expand Down
2 changes: 2 additions & 0 deletions packages/block-editor/src/components/inspector-controls/groups.js
View file
Open in desktop
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 @@ -22,6 +23,7 @@ const groups = {
color: InspectorControlsColor,
dimensions: InspectorControlsDimensions,
list: InspectorControlsListView,
layout: InspectorControlsLayout,
typography: InspectorControlsTypography,
};

Expand Down
137 changes: 51 additions & 86 deletions packages/block-editor/src/hooks/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ import { useSelect } from '@wordpress/data';
import {
Button,
ButtonGroup,
ToggleControl,
PanelBody,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useContext, createPortal } from '@wordpress/element';
Expand All @@ -30,7 +29,7 @@ import { LayoutStyle } from '../components/block-list/layout';
import BlockList from '../components/block-list';
import { getLayoutType, getLayoutTypes } from '../layouts';

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

/**
* Generates the utility classnames for the given block's layout attributes.
Expand All @@ -51,7 +50,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,42 +127,30 @@ 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 );
return getSettings().supportsLayout;
}, [] );

const layoutBlockSupport = getBlockSupport(
blockName,
layoutBlockSupportKey,
LAYOUT_SUPPORT_KEY,
{}
);
const {
allowSwitching,
allowEditing = true,
allowInheriting = true,
default: defaultBlockLayout,
} = layoutBlockSupport;

if ( ! allowEditing ) {
return null;
}

// Only show the inherit toggle if it's supported,
// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
const showInheritToggle = !! (
allowInheriting &&
!! defaultThemeLayout &&
( ! layout?.type ||
layout?.type === 'default' ||
layout?.type === 'constrained' ||
layout?.inherit )
);

const usedLayout = layout || defaultBlockLayout || {};
const {
inherit = false,
Expand All @@ -181,80 +168,61 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
) {
return null;
}
const layoutType = getLayoutType( type );
const constrainedType = getLayoutType( 'constrained' );

const displayControlsForLegacyLayouts =
! usedLayout.type && ( contentSize || inherit );
const hasContentSizeOrLegacySettings = !! inherit || !! contentSize;
const layoutType = getLayoutType(
displayControlsForLegacyLayouts ? 'constrained' : type
);

const onChangeType = ( newType ) =>
setAttributes( { layout: { type: newType } } );
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 && (
<InspectorControls __experimentalGroup="layout">
{ ! inherit && allowSwitching && (
<ToolsPanelItem
label={ __( 'Layout type' ) }
hasValue={ () => layout?.type !== undefined }
onDeselect={ () =>
onChangeLayout( { ...layout, type: undefined } )
}
isShownByDefault={ true }
resetAllFilter={ ( newAttributes ) => ( {
...newAttributes,
layout: {
...newAttributes.layout,
type: undefined,
},
} ) }
panelId={ clientId }
>
<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 }
/>
) }
</PanelBody>
</ToolsPanelItem>
) }

{ layoutType && (
<layoutType.inspectorControls
clientId={ clientId }
defaultControls={ defaultControls }
layout={ usedLayout }
onChange={ onChangeLayout }
layoutBlockSupport={ layoutBlockSupport }
/>
) }
</InspectorControls>
{ ! inherit && layoutType && (
{ layoutType && (
<layoutType.toolBarControls
layout={ usedLayout }
onChange={ onChangeLayout }
Expand Down Expand Up @@ -294,7 +262,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 +284,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 +306,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 +319,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
10 changes: 7 additions & 3 deletions packages/block-editor/src/hooks/layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
.layout-block-support-panel {
.single-column {
grid-column: span 1;
}
}

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

.block-editor-hooks__layout-controls-unit {
display: flex;
Expand All @@ -21,12 +26,11 @@
.block-editor-hooks__layout-controls-helptext {
color: $gray-700;
font-size: $helptext-font-size;
margin-bottom: $grid-unit-20;
margin-bottom: 0;
}

.block-editor-hooks__flex-layout-justification-controls,
.block-editor-hooks__flex-layout-orientation-controls {
margin-bottom: $grid-unit-15;
legend {
margin-bottom: $grid-unit-10;
}
Expand Down
Loading