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

Sidebar: Split block tools into menu, settings, and appearance tabs #45005

Merged
merged 2 commits into from
Nov 17, 2022
Merged

Sidebar: Split block tools into menu, settings, and appearance tabs #45005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2990b61
Add drawer icons to icons package
aaronrobertshaw Oct 17, 2022
84bf480
Fix changelog
talldan Nov 17, 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
3 changes: 3 additions & 0 deletions lib/experimental/editor-settings.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,9 @@ function gutenberg_enable_experiments() {
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-inspector-tabs', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableBlockInspectorTabs = true', 'before' );
}
}

add_action( 'admin_init', 'gutenberg_enable_experiments' );
14 changes: 14 additions & 0 deletions lib/experiments-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ function gutenberg_initialize_experiments_settings() {
'id' => 'gutenberg-zoomed-out-view',
)
);

add_settings_field(
'gutenberg-off-canvas-navigation-editor',
__( 'Off canvas navigation editor ', 'gutenberg' ),
Expand All @@ -63,6 +64,7 @@ function gutenberg_initialize_experiments_settings() {
'id' => 'gutenberg-off-canvas-navigation-editor',
)
);

add_settings_field(
'gutenberg-color-randomizer',
__( 'Color randomizer ', 'gutenberg' ),
Expand All @@ -75,6 +77,18 @@ function gutenberg_initialize_experiments_settings() {
)
);

add_settings_field(
'gutenberg-block-inspector-tabs',
__( 'Block inspector tabs ', 'gutenberg' ),
'gutenberg_display_experiment_field',
'gutenberg-experiments',
'gutenberg_experiments_section',
array(
'label' => __( 'Test a new block inspector view splitting settings and appearance controls into tabs', 'gutenberg' ),
'id' => 'gutenberg-block-inspector-tabs',
)
);

register_setting(
'gutenberg-experiments',
'gutenberg-experiments'
Expand Down
163 changes: 84 additions & 79 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 @@ -9,9 +9,8 @@ import {
store as blocksStore,
} from '@wordpress/blocks';
import {
PanelBody,
__experimentalUseSlotFills as useSlotFills,
FlexItem,
PanelBody,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
Button,
Expand All @@ -24,20 +23,19 @@ import { useMemo, useCallback } from '@wordpress/element';
*/
import SkipToSelectedBlock from '../skip-to-selected-block';
import BlockCard from '../block-card';
import {
default as InspectorControls,
InspectorAdvancedControls,
} from '../inspector-controls';
import BlockStyles from '../block-styles';
import MultiSelectionInspector from '../multi-selection-inspector';
import DefaultStylePicker from '../default-style-picker';
import BlockVariationTransforms from '../block-variation-transforms';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';
import BlockIcon from '../block-icon';
import BlockStyles from '../block-styles';
import DefaultStylePicker from '../default-style-picker';
import { default as InspectorControls } from '../inspector-controls';
import { default as InspectorControlsTabs } from '../inspector-controls-tabs';
import AdvancedControls from '../inspector-controls-tabs/advanced-controls-panel';

function useContentBlocks( blockTypes, block ) {
const contenBlocksObjectAux = useMemo( () => {
const contentBlocksObjectAux = useMemo( () => {
return blockTypes.reduce( ( result, blockType ) => {
if (
blockType.name !== 'core/list-item' &&
Expand All @@ -53,7 +51,7 @@ function useContentBlocks( blockTypes, block ) {
}, [ blockTypes ] );
const isContentBlock = useCallback(
( blockName ) => {
return !! contenBlocksObjectAux[ blockName ];
return !! contentBlocksObjectAux[ blockName ];
},
[ blockTypes ]
);
Expand Down Expand Up @@ -166,28 +164,36 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
};
}, [] );

const showTabs = window?.__experimentalEnableBlockInspectorTabs;

if ( count > 1 ) {
return (
<div className="block-editor-block-inspector">
<MultiSelectionInspector />
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
{ showTabs ? (
<InspectorControlsTabs />
) : (
<>
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
</>
) }
</div>
);
}
Expand Down Expand Up @@ -229,6 +235,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
};

const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
const showTabs = window?.__experimentalEnableBlockInspectorTabs;

const hasBlockStyles = useSelect(
( select ) => {
const { getBlockStyles } = select( blocksStore );
Expand All @@ -238,67 +246,64 @@ const BlockInspectorSingleBlock = ( { clientId, blockName } ) => {
[ blockName ]
);
const blockInformation = useBlockDisplayInformation( clientId );

return (
<div className="block-editor-block-inspector">
<BlockCard { ...blockInformation } />
<BlockVariationTransforms blockClientId={ clientId } />
{ hasBlockStyles && (
<div>
<PanelBody title={ __( 'Styles' ) }>
<BlockStyles clientId={ clientId } />
{ hasBlockSupport(
blockName,
'defaultStylePicker',
true
) && <DefaultStylePicker blockName={ blockName } /> }
</PanelBody>
</div>
{ showTabs && (
<InspectorControlsTabs
hasBlockStyles={ hasBlockStyles }
clientId={ clientId }
blockName={ blockName }
/>
) }
{ ! showTabs && (
<>
{ hasBlockStyles && (
<div>
<PanelBody title={ __( 'Styles' ) }>
<BlockStyles clientId={ clientId } />
{ hasBlockSupport(
blockName,
'defaultStylePicker',
true
) && (
<DefaultStylePicker
blockName={ blockName }
/>
) }
</PanelBody>
</div>
) }
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
<div>
<AdvancedControls />
</div>
</>
) }
<InspectorControls.Slot />
<InspectorControls.Slot
__experimentalGroup="color"
label={ __( 'Color' ) }
className="color-block-support-panel__inner-wrapper"
/>
<InspectorControls.Slot
__experimentalGroup="typography"
label={ __( 'Typography' ) }
/>
<InspectorControls.Slot
__experimentalGroup="dimensions"
label={ __( 'Dimensions' ) }
/>
<InspectorControls.Slot
__experimentalGroup="border"
label={ __( 'Border' ) }
/>
<div>
<AdvancedControls />
</div>
<SkipToSelectedBlock key="back" />
</div>
);
};

const AdvancedControls = () => {
const fills = useSlotFills( InspectorAdvancedControls.slotName );
const hasFills = Boolean( fills && fills.length );

if ( ! hasFills ) {
return null;
}

return (
<PanelBody
className="block-editor-block-inspector__advanced"
title={ __( 'Advanced' ) }
initialOpen={ false }
>
<InspectorControls.Slot __experimentalGroup="advanced" />
</PanelBody>
);
};

/**
* @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-inspector/README.md
*/
Expand Down
10 changes: 9 additions & 1 deletion packages/block-editor/src/components/block-inspector/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,22 @@
}
}

.block-editor-block-inspector__no-blocks {
.block-editor-block-inspector__no-blocks,
.block-editor-block-inspector__no-block-tools {
display: block;
font-size: $default-font-size;
background: $white;
padding: ($grid-unit-20 * 2) $grid-unit-20;
text-align: center;
}

.block-editor-block-inspector__no-block-tools {
border-top: $border-width solid $gray-300;
}

.block-editor-block-inspector__tab-item {
flex: 1 1 0px;
}

.block-editor-block-inspector__block-buttons-container {
border-top: $border-width solid $gray-200;
Expand Down
37 changes: 37 additions & 0 deletions packages/block-editor/src/components/inspector-controls-tabs/advanced-controls-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* WordPress dependencies
*/
import {
PanelBody,
__experimentalUseSlotFills as useSlotFills,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import {
default as InspectorControls,
InspectorAdvancedControls,
} from '../inspector-controls';

const AdvancedControls = () => {
const fills = useSlotFills( InspectorAdvancedControls.slotName );
const hasFills = Boolean( fills && fills.length );

if ( ! hasFills ) {
return null;
}

return (
<PanelBody
className="block-editor-block-inspector__advanced"
title={ __( 'Advanced' ) }
initialOpen={ false }
>
<InspectorControls.Slot __experimentalGroup="advanced" />
</PanelBody>
);
};

export default AdvancedControls;
Loading