Created
May 31, 2021 09:32
-
-
Save aaronrobertshaw/34c22ee6062b8737ec6e3a5da71f5035 to your computer and use it in GitHub Desktop.
Padding block support with disabled box control reset
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * WordPress dependencies | |
| */ | |
| import { __ } from '@wordpress/i18n'; | |
| import { Platform } from '@wordpress/element'; | |
| import { getBlockSupport } from '@wordpress/blocks'; | |
| import { | |
| __experimentalUseCustomUnits as useCustomUnits, | |
| __experimentalBoxControl as BoxControl, | |
| } from '@wordpress/components'; | |
| /** | |
| * Internal dependencies | |
| */ | |
| import useSetting from '../components/use-setting'; | |
| import { SPACING_SUPPORT_KEY, useCustomSides } from './spacing'; | |
| import { cleanEmptyObject } from './utils'; | |
| /** | |
| * Determines if there is padding support. | |
| * | |
| * @param {string|Object} blockType Block name or Block Type object. | |
| * @return {boolean} Whether there is support. | |
| */ | |
| export function hasPaddingSupport( blockType ) { | |
| const support = getBlockSupport( blockType, SPACING_SUPPORT_KEY ); | |
| return !! ( true === support || support?.padding ); | |
| } | |
| /** | |
| * Custom hook that checks if padding settings have been disabled. | |
| * | |
| * @param {string} name The name of the block. | |
| * @return {boolean} Whether padding setting is disabled. | |
| */ | |
| export function useIsPaddingDisabled( { name: blockName } = {} ) { | |
| const isDisabled = ! useSetting( 'spacing.customPadding' ); | |
| return ! hasPaddingSupport( blockName ) || isDisabled; | |
| } | |
| /** | |
| * Inspector control panel containing the padding related configuration | |
| * | |
| * @param {Object} props | |
| * | |
| * @return {WPElement} Padding edit element. | |
| */ | |
| export function PaddingEdit( props ) { | |
| const { | |
| name: blockName, | |
| attributes: { style }, | |
| setAttributes, | |
| } = props; | |
| const units = useCustomUnits( { | |
| availableUnits: useSetting( 'spacing.units' ) || [ | |
| '%', | |
| 'px', | |
| 'em', | |
| 'rem', | |
| 'vw', | |
| ], | |
| } ); | |
| const sides = useCustomSides( blockName, 'padding' ); | |
| if ( useIsPaddingDisabled( props ) ) { | |
| return null; | |
| } | |
| const onChange = ( next ) => { | |
| const newStyle = { | |
| ...style, | |
| spacing: { | |
| ...style?.spacing, | |
| padding: next, | |
| }, | |
| }; | |
| setAttributes( { | |
| style: cleanEmptyObject( newStyle ), | |
| } ); | |
| }; | |
| const onChangeShowVisualizer = ( next ) => { | |
| const newStyle = { | |
| ...style, | |
| visualizers: { | |
| padding: next, | |
| }, | |
| }; | |
| setAttributes( { | |
| style: cleanEmptyObject( newStyle ), | |
| } ); | |
| }; | |
| return Platform.select( { | |
| web: ( | |
| <> | |
| <BoxControl | |
| values={ style?.spacing?.padding } | |
| onChange={ onChange } | |
| onChangeShowVisualizer={ onChangeShowVisualizer } | |
| label={ __( 'Padding' ) } | |
| sides={ sides } | |
| units={ units } | |
| allowReset={ false } | |
| /> | |
| </> | |
| ), | |
| native: null, | |
| } ); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment