UNPKG

@wordpress/block-library

Version:
185 lines (172 loc) 4.33 kB
/** * External dependencies */ import { map, filter } from 'lodash'; /** * WordPress dependencies */ import { Flex, FlexItem, PanelBody, ToggleControl, SelectControl, RangeControl, __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, } from '@wordpress/components'; import { withSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; import { InspectorControls, useBlockProps, useSetting, } from '@wordpress/block-editor'; import ServerSideRender from '@wordpress/server-side-render'; import { store as coreStore } from '@wordpress/core-data'; /** * Minimum number of tags a user can show using this block. * * @type {number} */ const MIN_TAGS = 1; /** * Maximum number of tags a user can show using this block. * * @type {number} */ const MAX_TAGS = 100; const MIN_FONT_SIZE = 0.1; const MAX_FONT_SIZE = 100; function TagCloudEdit( { attributes, setAttributes, taxonomies } ) { const { taxonomy, showTagCounts, numberOfTags, smallestFontSize, largestFontSize, } = attributes; const units = useCustomUnits( { availableUnits: useSetting( 'spacing.units' ) || [ '%', 'px', 'em', 'rem', ], } ); const getTaxonomyOptions = () => { const selectOption = { label: __( '- Select -' ), value: '', disabled: true, }; const taxonomyOptions = map( filter( taxonomies, 'show_cloud' ), ( item ) => { return { value: item.slug, label: item.name, }; } ); return [ selectOption, ...taxonomyOptions ]; }; const onFontSizeChange = ( fontSizeLabel, newValue ) => { // eslint-disable-next-line @wordpress/no-unused-vars-before-return const [ quantity, newUnit ] = parseQuantityAndUnitFromRawValue( newValue ); if ( ! Number.isFinite( quantity ) ) { return; } const updateObj = { [ fontSizeLabel ]: newValue }; // We need to keep in sync the `unit` changes to both `smallestFontSize` // and `largestFontSize` attributes. Object.entries( { smallestFontSize, largestFontSize, } ).forEach( ( [ attribute, currentValue ] ) => { const [ currentQuantity, currentUnit ] = parseQuantityAndUnitFromRawValue( currentValue ); // Only add an update if the other font size attribute has a different unit. if ( attribute !== fontSizeLabel && currentUnit !== newUnit ) { updateObj[ attribute ] = `${ currentQuantity }${ newUnit }`; } } ); setAttributes( updateObj ); }; const inspectorControls = ( <InspectorControls> <PanelBody title={ __( 'Settings' ) }> <SelectControl label={ __( 'Taxonomy' ) } options={ getTaxonomyOptions() } value={ taxonomy } onChange={ ( selectedTaxonomy ) => setAttributes( { taxonomy: selectedTaxonomy } ) } /> <ToggleControl label={ __( 'Show post counts' ) } checked={ showTagCounts } onChange={ () => setAttributes( { showTagCounts: ! showTagCounts } ) } /> <RangeControl label={ __( 'Number of tags' ) } value={ numberOfTags } onChange={ ( value ) => setAttributes( { numberOfTags: value } ) } min={ MIN_TAGS } max={ MAX_TAGS } required /> <Flex> <FlexItem isBlock> <UnitControl label={ __( 'Smallest size' ) } value={ smallestFontSize } onChange={ ( value ) => { onFontSizeChange( 'smallestFontSize', value ); } } units={ units } min={ MIN_FONT_SIZE } max={ MAX_FONT_SIZE } /> </FlexItem> <FlexItem isBlock> <UnitControl label={ __( 'Largest size' ) } value={ largestFontSize } onChange={ ( value ) => { onFontSizeChange( 'largestFontSize', value ); } } units={ units } min={ MIN_FONT_SIZE } max={ MAX_FONT_SIZE } /> </FlexItem> </Flex> </PanelBody> </InspectorControls> ); return ( <> { inspectorControls } <div { ...useBlockProps() }> <ServerSideRender key="tag-cloud" block="core/tag-cloud" attributes={ attributes } /> </div> </> ); } export default withSelect( ( select ) => { return { taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ), }; } )( TagCloudEdit );