Skip to content

Commit

Permalink
Add drawer icons to icons package
Browse files Browse the repository at this point in the history
Switch editor sidebar icons to new drawer icons

Icon should reflect RTL as well.

Update TabPanel to allow icons on TabButtons

Add menu group to InspectorControl slot fills

Move nav menu controls into InspectorControls menu group

Introduce menu, settings & appearance tabs to sidebar

Refactor InspectorControlTabs

Re-orders the appearance and settings tabs. Also now omits the TabPanel altogether if only a single tab has contents.

Make block inspector tabs a Gutenberg experiment

A little tidy up

Clean up conditional tabs display

Remove nav specific menu tab for now

Remove Menu inspector controls group

Refactor inspector controls tabs to components

Remove conditional display of tabs

Render no settings or tools messages when no fills

Reduce new styles for equal width tabs

Add general slot for items applying to block as a whole

Move query block new post link to new slot

Revert "Move query block new post link to new slot"

This reverts commit 1279985.

Revert "Add general slot for items applying to block as a whole"

This reverts commit 186276f.

Tweak no style options message

Add changelog for TabPanel updates

Remove empty readme until experiment settles

Fix copy and paste error
  • Loading branch information
aaronrobertshaw authored and talldan committed Nov 17, 2022
1 parent dbb9487 commit 2990b61
Show file tree
Hide file tree
Showing 18 changed files with 394 additions and 90 deletions.
3 changes: 3 additions & 0 deletions lib/experimental/editor-settings.php
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
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
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
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
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

0 comments on commit 2990b61

Please sign in to comment.