From 976257ff4e2ce5cf9e3c0166931946160f1784ba Mon Sep 17 00:00:00 2001 From: ramonjd Date: Thu, 16 Sep 2021 22:22:49 +1000 Subject: [PATCH] Experimenting with removing the default style picker select dropdown with a button click, based on the active style Updating block supports readme to remove references to the select dropdown Refactoring DefaultStylePicker Replacing the transform menu style switcher with a menu --- .../block-api/block-supports.md | 2 +- .../src/components/block-inspector/index.js | 2 +- .../block-styles-preview-panel.js | 13 ++- .../src/components/block-styles/index.js | 45 +++++++--- .../src/components/block-styles/style.scss | 17 ++-- .../components/default-style-picker/index.js | 90 +++++++++++++------ .../default-style-picker/style.scss | 9 ++ packages/block-editor/src/style.scss | 1 + 8 files changed, 122 insertions(+), 57 deletions(-) create mode 100644 packages/block-editor/src/components/default-style-picker/style.scss diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 485b5b165e70b..cbad8789e464d 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -415,7 +415,7 @@ supports: { - Type: `boolean` - Default value: `true` -When the style picker is shown, a dropdown is displayed so the user can select a default style for this block type. If you prefer not to show the dropdown, set this property to `false`. +When the style picker is shown, the user can set a default style for a block type based on the block's currently active style. If you prefer not to make this option available, set this property to `false`. ```js supports: { diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js index 0b15ae17665ee..2d9f8370e9245 100644 --- a/packages/block-editor/src/components/block-inspector/index.js +++ b/packages/block-editor/src/components/block-inspector/index.js @@ -124,7 +124,7 @@ const BlockInspectorSingleBlock = ( { blockName, 'defaultStylePicker', true - ) && } + ) && } ) } diff --git a/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js b/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js index 280559c9b412b..02074a06359f3 100644 --- a/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js +++ b/packages/block-editor/src/components/block-styles/block-styles-preview-panel.js @@ -7,7 +7,7 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import BlockPreview from '../block-preview'; -import { getActiveStyle, replaceActiveStyle } from './utils'; +import { replaceActiveStyle } from './utils'; export default function BlockStylesPreviewPanel( { genericPreviewBlock, @@ -16,21 +16,20 @@ export default function BlockStylesPreviewPanel( { className, activeStyle, } ) { - const styleClassName = replaceActiveStyle( - className, - activeStyle, - style - ); + const styleClassName = replaceActiveStyle( className, activeStyle, style ); const previewBlocks = useMemo( () => { return { ...genericPreviewBlock, attributes: { ...genericPreviewBlock.attributes, - className: styleClassName + ' block-editor-block-styles__block-preview-container', + className: + styleClassName + + ' block-editor-block-styles__block-preview-container', }, }; }, [ genericPreviewBlock, styleClassName ] ); + // TODO: look at packages/block-editor/src/components/block-switcher/preview-block-popover.js return (
diff --git a/packages/block-editor/src/components/block-styles/index.js b/packages/block-editor/src/components/block-styles/index.js index d3170d3937171..5e359c7a074ae 100644 --- a/packages/block-editor/src/components/block-styles/index.js +++ b/packages/block-editor/src/components/block-styles/index.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useCallback, useMemo, useRef, useState } from '@wordpress/element'; +import { useCallback, useMemo, useState } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { ENTER, SPACE } from '@wordpress/keycodes'; import { _x } from '@wordpress/i18n'; @@ -17,7 +17,9 @@ import { getBlockFromExample, store as blocksStore, } from '@wordpress/blocks'; -import { Button, Popover } from '@wordpress/components'; +import { Button, MenuItem, Popover } from '@wordpress/components'; +import { check } from '@wordpress/icons'; + /** * Internal dependencies */ @@ -61,6 +63,7 @@ function BlockStyles( { const blockType = getBlockType( block.name ); const { getBlockStyles } = select( blocksStore ); + return { block, type: blockType, @@ -78,13 +81,14 @@ function BlockStyles( { const [ hoveredStyle, setHoveredStyle ] = useState( null ); const onStyleHover = useCallback( ( item ) => { + if ( hoveredStyle === item ) { + return; + } setHoveredStyle( item ); }, [ setHoveredStyle ] ); - const stylesContainerRef = useRef(); - if ( ! styles || styles.length === 0 ) { return null; } @@ -115,11 +119,29 @@ function BlockStyles( { onSwitch(); }; - // const getAnchorRect = () => - // stylesContainerRef?.current?.getBoundingClientRect(); + if ( itemRole === 'menuitem' ) { + return ( +
+ { renderedStyles.map( ( style ) => { + const menuItemText = style.label || style.name; + return ( + onSelectStyle( style ) } + > + { menuItemText } + + ); + } ) } +
+ ); + } return ( -
+
{ renderedStyles.map( ( style ) => { const buttonText = style.label || style.name; @@ -129,14 +151,17 @@ function BlockStyles( { className={ classnames( 'block-editor-block-styles__button', { - 'is-active': activeStyle === style, + 'is-active': + activeStyle.name === style.name, } ) } key={ style.name } variant="secondary" label={ buttonText } onMouseEnter={ () => onStyleHover( style ) } + onFocus={ () => onStyleHover( style ) } onMouseLeave={ () => setHoveredStyle( null ) } + onBlur={ () => setHoveredStyle( null ) } onKeyDown={ ( event ) => { if ( ENTER === event.keyCode || @@ -147,7 +172,7 @@ function BlockStyles( { } } } onClick={ () => onSelectStyle( style ) } - role={ itemRole || 'button' } + role="button" tabIndex="0" > { buttonText } @@ -160,8 +185,6 @@ function BlockStyles( { className="block-editor-block-styles__popover" position="middle left" focusOnMount={ false } - anchorRef={ stylesContainerRef?.current } - //getAnchorRect={ getAnchorRect } > { - const settings = select( blockEditorStore ).getSettings(); + const { getBlock, getSettings } = select( blockEditorStore ); + const block = getBlock( clientId ); + const settings = getSettings(); const preferredStyleVariations = settings.__experimentalPreferredStyleVariations; + const blockStyles = select( blocksStore ).getBlockStyles( + block.name + ); + const onUpdate = preferredStyleVariations?.onChange + ? ( blockStyle ) => + preferredStyleVariations?.onChange( + block.name, + blockStyle + ) + : null; + return { - preferredStyle: preferredStyleVariations?.value?.[ blockName ], - onUpdatePreferredStyleVariations: - preferredStyleVariations?.onChange ?? null, - styles: select( blocksStore ).getBlockStyles( blockName ), + preferredStyle: preferredStyleVariations?.value?.[ block.name ], + onUpdatePreferredStyleVariations: onUpdate, + styles: blockStyles, + blockName: block.name, + activeStyle: getActiveStyle( + blockStyles, + block.attributes.className || '' + ), }; }, - [ blockName ] - ); - const selectOptions = useMemo( - () => [ - { label: __( 'Not set' ), value: '' }, - ...styles.map( ( { label, name } ) => ( { label, value: name } ) ), - ], - [ styles ] - ); - const selectOnChange = useCallback( - ( blockStyle ) => { - onUpdatePreferredStyleVariations( blockName, blockStyle ); - }, - [ blockName, onUpdatePreferredStyleVariations ] + [ clientId ] ); + const selectOnChange = useCallback( () => { + onUpdatePreferredStyleVariations( activeStyle.name ); + }, [ activeStyle.name, onUpdatePreferredStyleVariations ] ); + + const preferredStyleLabel = useMemo( () => { + const preferredStyleObject = styles.find( + ( style ) => style.name === preferredStyle + ); + return preferredStyleObject?.label || preferredStyleObject?.name; + }, [ preferredStyle ] ); return ( onUpdatePreferredStyleVariations && ( - +
+
+ { __( 'Default style:' ) } + + { preferredStyleLabel } + +
+ { preferredStyle !== activeStyle.name && ( + + ) } +
) ); } diff --git a/packages/block-editor/src/components/default-style-picker/style.scss b/packages/block-editor/src/components/default-style-picker/style.scss new file mode 100644 index 0000000000000..1e1e7c41fa430 --- /dev/null +++ b/packages/block-editor/src/components/default-style-picker/style.scss @@ -0,0 +1,9 @@ +.default-style-picker__current-default { + margin-bottom: $grid-unit-05; +} + +.default-style-picker__style-label { + font-weight: 600; + display: inline-block; + margin-left: $grid-unit-05; +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index ebc5481a28116..ef83e2b0d8cc6 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -29,6 +29,7 @@ @import "./components/colors-gradients/style.scss"; @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/style.scss"; +@import "./components/default-style-picker/style.scss"; @import "./components/duotone-control/style.scss"; @import "./components/font-appearance-control/style.scss"; @import "./components/justify-content-control/style.scss";