From 8f242318514a8e92951306dd190c21c9d483619a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 25 May 2020 12:47:10 -0400 Subject: [PATCH 1/5] Fix typography panel rendering in style hooks This update fixes the Typography sidebar panel rendering, specifically if line-height/font-size style properties are disabled. The Typography panel will no longer render if it does not contain any style controls. --- .../components/line-height-control/index.js | 9 ---- .../block-editor/src/hooks/line-height.js | 11 ++++- packages/block-editor/src/hooks/style.js | 32 ++----------- packages/block-editor/src/hooks/typography.js | 47 +++++++++++++++++++ 4 files changed, 60 insertions(+), 39 deletions(-) create mode 100644 packages/block-editor/src/hooks/typography.js diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js index 545b73e3e596b..f4b5261b40ace 100644 --- a/packages/block-editor/src/components/line-height-control/index.js +++ b/packages/block-editor/src/components/line-height-control/index.js @@ -8,7 +8,6 @@ import { ZERO } from '@wordpress/keycodes'; /** * Internal dependencies */ -import useEditorFeature from '../use-editor-feature'; import { BASE_DEFAULT_VALUE, RESET_VALUE, @@ -17,14 +16,6 @@ import { } from './utils'; export default function LineHeightControl( { value: lineHeight, onChange } ) { - // Don't render the controls if disabled by editor settings - const isDisabled = useEditorFeature( - '__experimentalDisableCustomLineHeight' - ); - if ( isDisabled ) { - return null; - } - const isDefined = isLineHeightDefined( lineHeight ); const handleOnKeyDown = ( event ) => { diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 3a146ea341234..8fe1cbf217b40 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -7,6 +7,8 @@ import { hasBlockSupport } from '@wordpress/blocks'; * Internal dependencies */ import LineHeightControl from '../components/line-height-control'; +import useEditorFeature from '../components/use-editor-feature'; + import { cleanEmptyObject } from './utils'; export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight'; @@ -23,8 +25,15 @@ export function LineHeightEdit( props ) { name: blockName, attributes: { style }, } = props; + // Don't render the controls if disabled by editor settings + const isDisabled = useEditorFeature( + '__experimentalDisableCustomLineHeight' + ); - if ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) ) { + if ( + ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || + isDisabled + ) { return null; } diff --git a/packages/block-editor/src/hooks/style.js b/packages/block-editor/src/hooks/style.js index f23a5c2612e2b..af4afe04b0d8f 100644 --- a/packages/block-editor/src/hooks/style.js +++ b/packages/block-editor/src/hooks/style.js @@ -9,28 +9,14 @@ import { has, get } from 'lodash'; import { addFilter } from '@wordpress/hooks'; import { hasBlockSupport } from '@wordpress/blocks'; import { createHigherOrderComponent } from '@wordpress/compose'; -import { PanelBody } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; -import { Platform } from '@wordpress/element'; /** * Internal dependencies */ -import InspectorControls from '../components/inspector-controls'; import { COLOR_SUPPORT_KEY, ColorEdit } from './color'; -import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height'; -import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size'; +import { TypographyPanel, TYPOGRAPHY_SUPPORT_KEYS } from './typography'; -const styleSupportKeys = [ - COLOR_SUPPORT_KEY, - LINE_HEIGHT_SUPPORT_KEY, - FONT_SIZE_SUPPORT_KEY, -]; - -const typographySupportKeys = [ - LINE_HEIGHT_SUPPORT_KEY, - FONT_SIZE_SUPPORT_KEY, -]; +const styleSupportKeys = [ ...TYPOGRAPHY_SUPPORT_KEYS, COLOR_SUPPORT_KEY ]; const hasStyleSupport = ( blockType ) => styleSupportKeys.some( ( key ) => hasBlockSupport( blockType, key ) ); @@ -139,20 +125,8 @@ export function addEditProps( settings ) { */ export const withBlockControls = createHigherOrderComponent( ( BlockEdit ) => ( props ) => { - const { name: blockName } = props; - const hasTypographySupport = typographySupportKeys.some( ( key ) => - hasBlockSupport( blockName, key ) - ); - return [ - Platform.OS === 'web' && hasTypographySupport && ( - - - - - - - ), + , , , ]; diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js new file mode 100644 index 0000000000000..943aa1e413e22 --- /dev/null +++ b/packages/block-editor/src/hooks/typography.js @@ -0,0 +1,47 @@ +/** + * WordPress dependencies + */ +import { hasBlockSupport } from '@wordpress/blocks'; +import { PanelBody } from '@wordpress/components'; +import { Platform } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import InspectorControls from '../components/inspector-controls'; + +import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height'; +import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size'; + +export const TYPOGRAPHY_SUPPORT_KEYS = [ + LINE_HEIGHT_SUPPORT_KEY, + FONT_SIZE_SUPPORT_KEY, +]; + +export function TypographyPanel( props ) { + const { name: blockName } = props; + const hasTypographySupport = TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) => + hasBlockSupport( blockName, key ) + ); + + const contentMarkup = ( + <> + + + + ); + const hasContent = !! contentMarkup; + const shouldRender = + Platform.OS === 'web' && hasTypographySupport && hasContent; + + if ( ! shouldRender ) return null; + + return ( + + + { contentMarkup } + + + ); +} From 254ad6b6972a5a90a3be51e4c141cfedd7dcefb7 Mon Sep 17 00:00:00 2001 From: Jon Q Date: Mon, 1 Jun 2020 10:59:28 -0400 Subject: [PATCH 2/5] Refactor Typography panel checking for disabled --- packages/block-editor/src/hooks/font-size.js | 21 +++++++++- .../block-editor/src/hooks/line-height.js | 27 ++++++++----- packages/block-editor/src/hooks/typography.js | 40 +++++++++++-------- 3 files changed, 60 insertions(+), 28 deletions(-) diff --git a/packages/block-editor/src/hooks/font-size.js b/packages/block-editor/src/hooks/font-size.js index 5f13821ad7514..95232e9836a33 100644 --- a/packages/block-editor/src/hooks/font-size.js +++ b/packages/block-editor/src/hooks/font-size.js @@ -98,16 +98,16 @@ function addEditProps( settings ) { */ export function FontSizeEdit( props ) { const { - name: blockName, attributes: { fontSize, style }, setAttributes, } = props; + const isDisabled = useIsFontSizeDisabled( props ); const { fontSizes } = useSelect( ( select ) => select( 'core/block-editor' ).getSettings() ); - if ( ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) ) { + if ( isDisabled ) { return null; } @@ -136,6 +136,23 @@ export function FontSizeEdit( props ) { ); } +/** + * Custom hook that checks if font-size settings have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether setting is disabled. + */ +export function useIsFontSizeDisabled( { name: blockName } = {} ) { + const { fontSizes } = useSelect( ( select ) => + select( 'core/block-editor' ).getSettings() + ); + const hasFontSizes = fontSizes.length; + + return ( + ! hasBlockSupport( blockName, FONT_SIZE_SUPPORT_KEY ) || ! hasFontSizes + ); +} + addFilter( 'blocks.registerBlockType', 'core/font/addAttribute', diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 8fe1cbf217b40..24b077c1d9737 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -22,18 +22,11 @@ export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight'; */ export function LineHeightEdit( props ) { const { - name: blockName, attributes: { style }, } = props; - // Don't render the controls if disabled by editor settings - const isDisabled = useEditorFeature( - '__experimentalDisableCustomLineHeight' - ); + const isDisabled = useIsLineHeightDisabled( props ); - if ( - ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || - isDisabled - ) { + if ( isDisabled ) { return null; } @@ -56,3 +49,19 @@ export function LineHeightEdit( props ) { /> ); } + +/** + * Custom hook that checks if line-height settings have been disabled. + * + * @param {string} name The name of the block. + * @return {boolean} Whether setting is disabled. + */ +export function useIsLineHeightDisabled( { name: blockName } = {} ) { + const isDisabled = useEditorFeature( + '__experimentalDisableCustomLineHeight' + ); + + return ( + ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled + ); +} diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 943aa1e413e22..ed915593bef7c 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { hasBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; import { Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -11,8 +10,16 @@ import { __ } from '@wordpress/i18n'; */ import InspectorControls from '../components/inspector-controls'; -import { LINE_HEIGHT_SUPPORT_KEY, LineHeightEdit } from './line-height'; -import { FONT_SIZE_SUPPORT_KEY, FontSizeEdit } from './font-size'; +import { + LINE_HEIGHT_SUPPORT_KEY, + LineHeightEdit, + useIsLineHeightDisabled, +} from './line-height'; +import { + FONT_SIZE_SUPPORT_KEY, + FontSizeEdit, + useIsFontSizeDisabled, +} from './font-size'; export const TYPOGRAPHY_SUPPORT_KEYS = [ LINE_HEIGHT_SUPPORT_KEY, @@ -20,28 +27,27 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ ]; export function TypographyPanel( props ) { - const { name: blockName } = props; - const hasTypographySupport = TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) => - hasBlockSupport( blockName, key ) - ); + const isDisabled = useIsTypographyDisabled( props ); - const contentMarkup = ( - <> - - - - ); - const hasContent = !! contentMarkup; - const shouldRender = - Platform.OS === 'web' && hasTypographySupport && hasContent; + const shouldRender = Platform.OS === 'web' && ! isDisabled; if ( ! shouldRender ) return null; return ( - { contentMarkup } + + ); } + +function useIsTypographyDisabled( props = {} ) { + const configs = [ + useIsFontSizeDisabled( props ), + useIsLineHeightDisabled( props ), + ]; + + return configs.filter( Boolean ) === configs.length; +} From 93b1438d8988bedda9d44f2c471360fbed07c9af Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 3 Jun 2020 13:16:36 -0400 Subject: [PATCH 3/5] Fix Typography Panel rendering for supported blocks only --- packages/block-editor/src/hooks/typography.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index ed915593bef7c..048b2ef1183cb 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { hasBlockSupport } from '@wordpress/blocks'; import { PanelBody } from '@wordpress/components'; import { Platform } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; @@ -28,8 +29,8 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ export function TypographyPanel( props ) { const isDisabled = useIsTypographyDisabled( props ); - - const shouldRender = Platform.OS === 'web' && ! isDisabled; + const isSupported = hasTypographySupport( props.name ); + const shouldRender = isSupported && ! isDisabled; if ( ! shouldRender ) return null; @@ -43,6 +44,15 @@ export function TypographyPanel( props ) { ); } +const hasTypographySupport = ( blockName ) => { + return ( + Platform.OS === 'web' && + TYPOGRAPHY_SUPPORT_KEYS.some( ( key ) => + hasBlockSupport( blockName, key ) + ) + ); +}; + function useIsTypographyDisabled( props = {} ) { const configs = [ useIsFontSizeDisabled( props ), From 53055d639d5b7e618ad793eb71c97261ea9ccf1b Mon Sep 17 00:00:00 2001 From: Jon Q Date: Wed, 10 Jun 2020 14:07:17 -0400 Subject: [PATCH 4/5] Fix line-height check editor settings --- packages/block-editor/src/hooks/line-height.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/hooks/line-height.js b/packages/block-editor/src/hooks/line-height.js index 24b077c1d9737..21698a886a8f4 100644 --- a/packages/block-editor/src/hooks/line-height.js +++ b/packages/block-editor/src/hooks/line-height.js @@ -2,13 +2,12 @@ * WordPress dependencies */ import { hasBlockSupport } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import LineHeightControl from '../components/line-height-control'; -import useEditorFeature from '../components/use-editor-feature'; - import { cleanEmptyObject } from './utils'; export const LINE_HEIGHT_SUPPORT_KEY = '__experimentalLineHeight'; @@ -57,9 +56,11 @@ export function LineHeightEdit( props ) { * @return {boolean} Whether setting is disabled. */ export function useIsLineHeightDisabled( { name: blockName } = {} ) { - const isDisabled = useEditorFeature( - '__experimentalDisableCustomLineHeight' - ); + const isDisabled = useSelect( ( select ) => { + const editorSettings = select( 'core/block-editor' ).getSettings(); + + return editorSettings.__experimentalDisableCustomLineHeight; + } ); return ( ! hasBlockSupport( blockName, LINE_HEIGHT_SUPPORT_KEY ) || isDisabled From 49e543fb7f7ed26949fd14713accc109c312439a Mon Sep 17 00:00:00 2001 From: Jon Q Date: Thu, 11 Jun 2020 11:44:52 -0400 Subject: [PATCH 5/5] Fix logic for hide Typography panel --- packages/block-editor/src/hooks/typography.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js index 048b2ef1183cb..49a281cb219ea 100644 --- a/packages/block-editor/src/hooks/typography.js +++ b/packages/block-editor/src/hooks/typography.js @@ -30,9 +30,8 @@ export const TYPOGRAPHY_SUPPORT_KEYS = [ export function TypographyPanel( props ) { const isDisabled = useIsTypographyDisabled( props ); const isSupported = hasTypographySupport( props.name ); - const shouldRender = isSupported && ! isDisabled; - if ( ! shouldRender ) return null; + if ( isDisabled || ! isSupported ) return null; return ( @@ -59,5 +58,5 @@ function useIsTypographyDisabled( props = {} ) { useIsLineHeightDisabled( props ), ]; - return configs.filter( Boolean ) === configs.length; + return configs.filter( Boolean ).length === configs.length; }