From 83b7d5192f4cf8bec94be5211a88dc2e295a1648 Mon Sep 17 00:00:00 2001 From: mxkae Date: Wed, 10 Jan 2024 13:16:04 +0800 Subject: [PATCH] remove old icon list --- src/block/icon-list-old/block.json | 16 - src/block/icon-list-old/deprecated.js | 43 --- src/block/icon-list-old/edit.js | 418 -------------------------- src/block/icon-list-old/editor.scss | 29 -- src/block/icon-list-old/example.js | 15 - src/block/icon-list-old/index.js | 42 --- src/block/icon-list-old/save.js | 60 ---- src/block/icon-list-old/schema.js | 119 -------- src/block/icon-list-old/style.js | 261 ---------------- src/block/icon-list-old/style.scss | 47 --- src/block/icon-list-old/util.js | 136 --------- 11 files changed, 1186 deletions(-) delete mode 100644 src/block/icon-list-old/block.json delete mode 100644 src/block/icon-list-old/deprecated.js delete mode 100644 src/block/icon-list-old/edit.js delete mode 100644 src/block/icon-list-old/editor.scss delete mode 100644 src/block/icon-list-old/example.js delete mode 100644 src/block/icon-list-old/index.js delete mode 100644 src/block/icon-list-old/save.js delete mode 100644 src/block/icon-list-old/schema.js delete mode 100644 src/block/icon-list-old/style.js delete mode 100644 src/block/icon-list-old/style.scss delete mode 100644 src/block/icon-list-old/util.js diff --git a/src/block/icon-list-old/block.json b/src/block/icon-list-old/block.json deleted file mode 100644 index efc5a4ab2..000000000 --- a/src/block/icon-list-old/block.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "apiVersion": 3, - "name": "stackable/icon-list-old", - "title": "Icon List (Old)", - "description": "An unordered list with icons. You can use this as a list of features or benefits.", - "category": "stackable", - "usesContext": [ "postId", "postType", "queryId" , "stackable/innerBlockOrientation" ], - "keywords": [ - "Checklist", - "Bullets", - "Number list" - ], - "textdomain": "stackable-ultimate-gutenberg-blocks", - "stk-type": "essential", - "stk-demo": "https://wpstackable.com/icon-list-block/?utm_source=welcome&utm_medium=settings&utm_campaign=view_demo&utm_content=demolink" -} diff --git a/src/block/icon-list-old/deprecated.js b/src/block/icon-list-old/deprecated.js deleted file mode 100644 index 479284dae..000000000 --- a/src/block/icon-list-old/deprecated.js +++ /dev/null @@ -1,43 +0,0 @@ -import { Save } from './save' -import { attributes } from './schema' - -import { withVersion } from '~stackable/higher-order' -import { - deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecateTypographyGradientColor, -} from '~stackable/block-components' - -const deprecated = [ - // Support the new combined opacity and color. - { - attributes: attributes( '3.11.9' ), - save: withVersion( '3.11.9' )( Save ), - isEligible: attributes => { - const hasContainerOpacity = deprecateContainerBackgroundColorOpacity.isEligible( attributes ) - const hasBlockOpacity = deprecateBlockBackgroundColorOpacity.isEligible( attributes ) - const hasTextGradient = deprecateTypographyGradientColor.isEligible( '%s' )( attributes ) - - return hasContainerOpacity || hasBlockOpacity || hasTextGradient - }, - migrate: attributes => { - let newAttributes = { ...attributes } - - newAttributes = deprecateContainerBackgroundColorOpacity.migrate( newAttributes ) - newAttributes = deprecateBlockBackgroundColorOpacity.migrate( newAttributes ) - newAttributes = deprecateTypographyGradientColor.migrate( '%s' )( newAttributes ) - - return newAttributes - }, - }, - // Support new margin-top/bottom classes. - { - attributes: attributes( '3.7.9' ), - save: withVersion( '3.7.9' )( Save ), - migrate: attributes => { - let newAttributes = deprecateContainerBackgroundColorOpacity.migrate( attributes ) - newAttributes = deprecateTypographyGradientColor.migrate( '%s' )( newAttributes ) - - return deprecateBlockBackgroundColorOpacity.migrate( newAttributes ) - }, - }, -] -export default deprecated diff --git a/src/block/icon-list-old/edit.js b/src/block/icon-list-old/edit.js deleted file mode 100644 index 18c5bf3c9..000000000 --- a/src/block/icon-list-old/edit.js +++ /dev/null @@ -1,418 +0,0 @@ -/** - * Internal dependencies - */ -import { IconListStyles } from './style' - -/*** - * External dependencies - */ -import classnames from 'classnames' -import { i18n, version as VERSION } from 'stackable' -import { - InspectorTabs, - InspectorStyleControls, - PanelAdvancedSettings, - AdvancedRangeControl, - IconControl, - ColorPaletteControl, - IconSearchPopover, - AdvancedSelectControl, - AlignButtonsControl, -} from '~stackable/components' -import { - withBlockAttributeContext, withBlockWrapperIsHovered, withQueryLoopContext, -} from '~stackable/higher-order' -import { - Typography, - BlockDiv, - useGeneratedCss, - Advanced, - CustomCSS, - Responsive, - CustomAttributes, - EffectsAnimations, - getTypographyClasses, - ConditionalDisplay, - MarginBottom, - Alignment, - getAlignmentClasses, - Transform, -} from '~stackable/block-components' - -/** - * WordPress dependencies - */ -import { useSelect } from '@wordpress/data' -import { - useRef, useEffect, useState, -} from '@wordpress/element' -import { sprintf, __ } from '@wordpress/i18n' -import { createIconListControls, DEFAULT_SVG } from './util' -import { compose } from '@wordpress/compose' - -const listTypeOptions = [ - { - label: __( 'Unordered List', i18n ), - value: 'unordered', - }, - { - label: __( 'Ordered List', i18n ), - value: 'ordered', - }, -] - -const listStyleTypeOptions = [ - { - label: __( 'Number', i18n ), - value: 'decimal', - }, - { - label: __( 'Padded Number', i18n ), - value: 'decimal-leading-zero', - }, - { - label: __( 'Lowercase Roman', i18n ), - value: 'lower-roman', - }, - { - label: __( 'Uppercase Roman', i18n ), - value: 'upper-roman', - }, - { - label: __( 'Lowercase Letters', i18n ), - value: 'lower-alpha', - }, - { - label: __( 'Uppercase Letters', i18n ), - value: 'upper-alpha', - }, -] - -const Edit = props => { - const textRef = useRef() - const typographyWrapperRef = useRef() - const [ isOpenIconSearch, setIsOpenIconSearch ] = useState( false ) - const [ iconSearchAnchor, setIconSearchAnchor ] = useState( null ) - const [ selectedIconCSSSelector, setSelectedIconCSSSelector ] = useState( null ) - const [ selectedEvent, setSelectedEvent ] = useState( null ) - const { - isTyping, - } = useSelect( select => ( { - isTyping: select( 'core/block-editor' ).isTyping(), - } ) ) - - useEffect( () => { - // Click handler to detect whether an icon is clicked, and open the icon - // picker for that icon. - const iconClickHandler = event => { - // If li isn't clicked, close the icon search. - setSelectedEvent( event ) - if ( event.target.tagName !== 'LI' || event.target.parentElement.tagName !== 'UL' ) { - return setIsOpenIconSearch( false ) - } - - /** - * Check if the click is on the icon. - */ - - if ( event.offsetX <= 2 ) { - // Get the selected li and show the icon picker on it. - const index = Array.from( event.target.parentElement.children ).indexOf( event.target ) + 1 - const { currentlyOpenIndex } = event.target.parentElement - - if ( currentlyOpenIndex && currentlyOpenIndex === index ) { - event.target.parentElement.currentlyOpenIndex = undefined - return setIsOpenIconSearch( false ) - } - - event.target.parentElement.currentlyOpenIndex = index - - /** - * Get the CSS selector of the selected icon. - * - * @since 3.0.0 - */ - let traverseToRichText = event.target - let found = null - while ( traverseToRichText.tagName !== 'DIV' ) { - for ( let i = 0; i < Array.from( traverseToRichText.parentElement.childNodes ).length; i++ ) { - if ( traverseToRichText.parentElement.childNodes[ i ] === traverseToRichText && found === null ) { - found = i + 1 - break - } - } - traverseToRichText = traverseToRichText.parentElement - } - - setSelectedIconCSSSelector( `ul li:nth-child(${ found })` ) - setIconSearchAnchor( event.target ) - return setIsOpenIconSearch( true ) - } - - // Hide the icon picker. - event.target.parentElement.currentlyOpenIndex = undefined - setIconSearchAnchor( null ) - return setIsOpenIconSearch( false ) - } - - textRef.current.addEventListener( 'click', iconClickHandler ) - return () => textRef.current?.removeEventListener( 'click', iconClickHandler ) - }, [ setSelectedEvent, setSelectedIconCSSSelector, setIconSearchAnchor, setIsOpenIconSearch, textRef.current ] ) - - const { - clientId, - attributes, - setAttributes, - className, - isSelected, - onRemove, - mergeBlocks, - } = props - - useGeneratedCss( props.attributes ) - - const { ordered } = attributes - const tagName = ordered ? 'ol' : 'ul' - - const textClasses = getTypographyClasses( attributes ) - const blockAlignmentClass = getAlignmentClasses( attributes ) - - const blockClassNames = classnames( [ - className, - 'stk-block-icon-list', - blockAlignmentClass, - textClasses, - ] ) - - const controls = createIconListControls( { - isSelected, tagName, - } ) - - return ( - <> - { isSelected && ( - <> - - - - - setAttributes( { ordered: v === 'ordered' } ) } - default="unordered" - /> - - - - - - - - - - - - - - - - - { - // Reset custom individual icons. - setAttributes( { icon, icons: [] } ) - } } - defaultValue={ DEFAULT_SVG } - /> - - - - - - - - - - - - - - - - - - - - - - - - - - ) } - - - - - - { /* eslint-disable-next-line */ } -
{ - // When the div wrapper is clicked, pass the focus to the list. - if ( e.target === typographyWrapperRef.current ) { - textRef.current.focus() - const range = document.createRange() - range.selectNodeContents( textRef.current ) - range.collapse( false ) - - const selection = window.getSelection() // eslint-disable-line - selection.removeAllRanges() - selection.addRange( range ) - } - } } - > - - { controls } - - { ! isTyping && isSelected && isOpenIconSearch && ( - { - if ( selectedEvent ) { - selectedEvent.target.parentElement.currentlyOpenIndex = undefined - } - setIsOpenIconSearch( false ) - } } - onChange={ icon => { - const icons = { ...props.attributes.icons } - if ( ! icon ) { - // Remove the icon inside the icons. - delete icons[ selectedIconCSSSelector ] - } else { - icons[ selectedIconCSSSelector ] = icon - } - - setAttributes( { - icons: { ...icons }, - } ) - } } - /> - ) } -
- - { props.isHovered && } - - ) -} - -export default compose( - withBlockWrapperIsHovered, - withQueryLoopContext, - withBlockAttributeContext, -)( Edit ) diff --git a/src/block/icon-list-old/editor.scss b/src/block/icon-list-old/editor.scss deleted file mode 100644 index 353a3ed01..000000000 --- a/src/block/icon-list-old/editor.scss +++ /dev/null @@ -1,29 +0,0 @@ -// Lists in the editor can show a margin that's not visible in the frontend. -.stk-block-icon-list > div > .rich-text { - margin-top: 0; - margin-bottom: 0; -} - -// Show a cursor pointer when hovering over the bullet icons -.stk-block-icon-list { - li { - position: relative; - } - - li::before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 1em; - width: var(--stk-icon-height, 1em); - cursor: copy; - margin-left: calc(var(--stk-icon-height, 1em) * -1); - } -} - -// Alignments when the icon list is aligned. -[data-type="stackable/icon-list"] .stk-block-icon-list :is(ul, ol) { - margin-left: var(--stk-alignment-margin-left); - margin-right: var(--stk-alignment-margin-right); -} diff --git a/src/block/icon-list-old/example.js b/src/block/icon-list-old/example.js deleted file mode 100644 index 22d25b658..000000000 --- a/src/block/icon-list-old/example.js +++ /dev/null @@ -1,15 +0,0 @@ -/** - * External dependencies - */ -import { i18n } from 'stackable' - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n' - -export default { - attributes: { - uniqueId: '635c98b', hasBackground: false, hasBorders: false, customAttributes: [], effectAnimationOut: {}, effectAnimationIn: {}, hideDesktop: false, hideTablet: false, hideMobile: false, displayCondition: {}, hasP: false, show: true, showText: true, text: `
  • ${ __( 'Line 1', i18n ) }
  • ${ __( 'Line 2', i18n ) }
  • ${ __( 'Line 3', i18n ) }
  • ${ __( 'Line 4', i18n ) }
  • ${ __( 'Line 5', i18n ) }
  • ${ __( 'Line 6', i18n ) }
    • `, columns: 2, ordered: false, icon: '', icons: {}, blockBackgroundCustomSizeUnit: '%', blockBackgroundCustomSizeUnitTablet: '%', blockBackgroundCustomSizeUnitMobile: '%', lineHeightUnit: 'em', lineHeightUnitTablet: 'em', lineHeightUnitMobile: 'em', - }, innerBlocks: [], -} diff --git a/src/block/icon-list-old/index.js b/src/block/icon-list-old/index.js deleted file mode 100644 index 6f7014f2a..000000000 --- a/src/block/icon-list-old/index.js +++ /dev/null @@ -1,42 +0,0 @@ -/** - * External dependencies - */ -import { IconListIcon } from '~stackable/icons' - -/** - * Internal dependencies - */ -import edit from './edit' -import save from './save' -import metadata from './block.json' -import schema from './schema' -import example from './example' -import deprecated from './deprecated' - -/** - * WordPress dependencies - */ -import { __ } from '@wordpress/i18n' - -export const settings = { - ...metadata, - icon: IconListIcon, - attributes: schema, - supports: { - anchor: true, - spacing: true, - }, - example, - deprecated, - edit, - save, - merge( attributes, attributesToMerge ) { - // Make sure that the selection is always at the end of the text. - // @see https://github.com/WordPress/gutenberg/blob/3da717b8d0ac7d7821fc6d0475695ccf3ae2829f/packages/block-library/src/paragraph/index.js - return { - text: - ( attributes.text || '' ) + - ( attributesToMerge.text || '' ), - } - }, -} diff --git a/src/block/icon-list-old/save.js b/src/block/icon-list-old/save.js deleted file mode 100644 index 8ba91c52a..000000000 --- a/src/block/icon-list-old/save.js +++ /dev/null @@ -1,60 +0,0 @@ -/** - * Internal dependencies - */ -import { IconListStyles } from './style' - -/** - * External dependencies - */ -import classnames from 'classnames' -import { - getResponsiveClasses, BlockDiv, CustomCSS, Typography, getTypographyClasses, getAlignmentClasses, -} from '~stackable/block-components' -import { withVersion } from '~stackable/higher-order' -import { version as VERSION } from 'stackable' - -/** - * WordPress dependencies - */ -import { compose } from '@wordpress/compose' - -export const Save = props => { - const { - attributes, - className, - } = props - - const responsiveClass = getResponsiveClasses( attributes ) - const textClasses = getTypographyClasses( attributes ) - const blockAlignmentClass = getAlignmentClasses( attributes ) - - const tagName = attributes.ordered ? 'ol' : 'ul' - - const blockClassNames = classnames( [ - className, - 'stk-block-icon-list', - blockAlignmentClass, - responsiveClass, - textClasses, - ] ) - - return ( - - - - - - ) -} - -export default compose( - withVersion( VERSION ) -)( Save ) diff --git a/src/block/icon-list-old/schema.js b/src/block/icon-list-old/schema.js deleted file mode 100644 index 766e0fbdb..000000000 --- a/src/block/icon-list-old/schema.js +++ /dev/null @@ -1,119 +0,0 @@ -import { - Advanced, - BlockDiv, - Style, - CustomAttributes, - CustomCSS, - EffectsAnimations, - Responsive, - Typography, - MarginBottom, - Alignment, - Transform, - ConditionalDisplay, -} from '~stackable/block-components' -import { AttributeObject } from '~stackable/util' -import { version as VERSION } from 'stackable' -import { DEFAULT_SVG } from './util' - -export const iconListAttributes = { - // Columns. - columns: { - stkResponsive: true, - type: 'number', - default: '', - }, - columnGap: { - stkResponsive: true, - type: 'number', - default: '', - }, - ordered: { - type: 'boolean', - default: false, - }, - indentation: { - type: 'number', - default: '', - }, - listAlignment: { - stkResponsive: true, - type: 'string', - default: '', - }, - - // Icon. - icon: { - type: 'string', - default: DEFAULT_SVG, - }, - markerColor: { - type: 'string', - default: '', - stkHover: true, - }, - icons: { - type: 'object', - default: {}, - }, - iconSize: { - stkResponsive: true, - type: 'number', - default: '', - }, - iconOpacity: { - stkHover: true, - type: 'number', - default: '', - }, - iconRotation: { - type: 'number', - default: '', - }, - - // Numbers. - listType: { - type: 'string', - default: '', - }, - iconGap: { - stkResponsive: true, - type: 'number', - default: '', - }, - rowGap: { - stkResponsive: true, - type: 'number', - default: '', - }, -} - -export const attributes = ( version = VERSION ) => { - const attrObject = new AttributeObject() - - Alignment.addAttributes( attrObject ) - Advanced.addAttributes( attrObject ) - Transform.addAttributes( attrObject ) - BlockDiv.addAttributes( attrObject ) - Style.addAttributes( attrObject ) - CustomAttributes.addAttributes( attrObject ) - CustomCSS.addAttributes( attrObject ) - EffectsAnimations.addAttributes( attrObject ) - Responsive.addAttributes( attrObject ) - ConditionalDisplay.addAttributes( attrObject ) - Typography.addAttributes( attrObject, 'ul,ol', { - hasTextTag: false, - multiline: 'li', - multilineWrapperTags: [ 'ol', 'ul' ], - } ) - MarginBottom.addAttributes( attrObject ) - - attrObject.add( { - attributes: iconListAttributes, - versionAdded: '3.0.0', - versionDeprecated: '', - } ) - - return attrObject.getMerged( version ) -} -export default attributes( VERSION ) diff --git a/src/block/icon-list-old/style.js b/src/block/icon-list-old/style.js deleted file mode 100644 index da916b86a..000000000 --- a/src/block/icon-list-old/style.js +++ /dev/null @@ -1,261 +0,0 @@ -/** - * Internal dependencies - */ -import { convertSVGStringToBase64 } from './util' - -/** - * External dependencies - */ -import { - Typography, MarginBottom, BlockDiv, Advanced, EffectsAnimations, Alignment, Transform, -} from '~stackable/block-components' -import { useBlockAttributesContext } from '~stackable/hooks' -import { BlockCss, BlockCssCompiler } from '~stackable/components' - -/** - * WordPress dependencies - */ -import { memo } from '@wordpress/element' - -const typographyOptions = { - selector: [ - 'ul li', - 'ol li', - ], - hoverSelector: [ - '.%s:hover ul li', - '.%s:hover ol li', - ], -} - -const Styles = props => { - const propsToPass = { - ...props, - version: props.version, - versionAdded: '3.0.0', - versionDeprecated: '', - } - const { - icons, - } = props - - return ( - <> - { Object.keys( icons ).reduce( ( acc, key ) => { - acc.push( - { - const iconRotation = getAttribute( 'iconRotation' ) - const iconOpacity = getAttribute( 'iconOpacity', 'desktop', state ) - if ( state !== 'normal' && ! value && ! iconRotation && ! iconOpacity ) { - return undefined - } - - const transform = `rotate(${ iconRotation + 'deg' })` - const iconWithColor = convertSVGStringToBase64( getAttribute( 'icons' )?.[ key ], value || '#000', { transform, opacity: iconOpacity } ) - return `url('data:image/svg+xml;base64,${ iconWithColor }')` - } } - dependencies={ [ 'icons', 'iconRotation', 'iconOpacity' ] } - /> - ) - acc.push( - { - const iconRotation = getAttribute( 'iconRotation' ) - const iconOpacity = getAttribute( 'iconOpacity', 'desktop', state ) - if ( state !== 'normal' && ! value && ! iconRotation && ! iconOpacity ) { - return undefined - } - - const transform = `rotate(${ iconRotation + 'deg' })` - - const iconWithColor = convertSVGStringToBase64( getAttribute( 'icons' )?.[ key ], value || '#000', { transform, opacity: iconOpacity } ) - return `url('data:image/svg+xml;base64,${ iconWithColor }')` - } } - dependencies={ [ 'icons', 'iconRotation', 'iconOpacity' ] } - /> - ) - return acc - }, [] ) } - - - - - - - - { - const iconSVG = getAttribute( 'icon' ) - const iconRotation = getAttribute( 'iconRotation' ) - const iconOpacity = getAttribute( 'iconOpacity', 'desktop', state ) - if ( state !== 'normal' && ! value && ! iconRotation && ! iconOpacity ) { - return undefined - } - - if ( ! iconSVG ) { - return undefined - } - - const transform = `rotate(${ iconRotation + 'deg' })` - - const iconWithColor = convertSVGStringToBase64( iconSVG, value || '#000', { transform, opacity: iconOpacity } ) - return `url('data:image/svg+xml;base64,${ iconWithColor }')` - } } - dependencies={ [ 'icon', 'iconRotation', 'iconOpacity' ] } - /> - - - - value === 'center' ? 'auto' : value === 'right' ? 'auto 0' : value === 'left' ? '0 auto' : '' } - /> - - ) -} - -export const IconListStyles = memo( props => { - const icons = useBlockAttributesContext( attributes => attributes.icons ) - - return ( - <> - - - - - - - - - - ) -} ) - -IconListStyles.defaultProps = { - version: '', -} - -IconListStyles.Content = props => { - if ( props.attributes.generatedCss ) { - return - } - - return ( - - - - - - - - - - - ) -} - -IconListStyles.Content.defaultProps = { - version: '', - attributes: {}, -} diff --git a/src/block/icon-list-old/style.scss b/src/block/icon-list-old/style.scss deleted file mode 100644 index bafb5656c..000000000 --- a/src/block/icon-list-old/style.scss +++ /dev/null @@ -1,47 +0,0 @@ -// Important, we can't use flex since it causes issues with columns. -.stk-block-icon-list { - :is(ul, ol) { - width: fit-content; - text-align: start; - } - ol { - list-style-image: none; - } - - &.stk-block :is(ul, ol) { - padding-inline-start: 1em; - } - - // Line height creates unnecessary row gaps. - ::marker { - line-height: 0; - } - - // @from https://css-tricks.com/almanac/properties/b/break-inside/ - li { - page-break-inside: avoid; /* Firefox */ - break-inside: avoid; - } - - // Need to make this fit the content so that we can align left/center/right - // the list alignment. - li { - width: fit-content; - } -} - -// Alignments when the icon list is aligned. -.stk-block-icon-list :is(ul, ol) { - margin-left: var(--stk-alignment-margin-left); - margin-right: var(--stk-alignment-margin-right); -} - -// Prevents theme's css from affecting the icon list. -.stk-block-icon-list :is(ul, ol) { - margin-top: 0; - margin-bottom: 0; - - li:last-child { - margin-bottom: 0; - } -} diff --git a/src/block/icon-list-old/util.js b/src/block/icon-list-old/util.js deleted file mode 100644 index 64ba7bce7..000000000 --- a/src/block/icon-list-old/util.js +++ /dev/null @@ -1,136 +0,0 @@ -/** - * External dependencies - */ -import { faGetSVGIcon, createElementFromHTMLString } from '~stackable/util' -import { kebabCase } from 'lodash' - -/** - * WordPress dependencies - */ -import { RichTextShortcut } from '@wordpress/block-editor' -/* eslint-disable @wordpress/no-unsafe-wp-apis */ -import { - __unstableIndentListItems as indentListItems, - __unstableOutdentListItems as outdentListItems, -} from '@wordpress/rich-text' -/* eslint-enable @wordpress/no-unsafe-wp-apis */ -import { __, _x } from '@wordpress/i18n' - -// The default icon list SVG. -export const DEFAULT_SVG = '' - -/** - * Convert SVG tag to base64 string - * - * @param {string} svgTag - * @param {string} color - * @param {Object} styles additional styles - * - * @return {string} base64 string - */ -export const convertSVGStringToBase64 = ( svgTag = '', color = '', styles = {} ) => { - let svgTagString = svgTag - - // If no SVG given, use the default SVG. - if ( ! svgTag ) { - svgTagString = DEFAULT_SVG - } - - if ( typeof svgTag === 'string' && svgTag.split( '-' ).length === 2 ) { - const [ prefix, iconName ] = svgTag.split( '-' ) - svgTagString = faGetSVGIcon( prefix, iconName ) - } - - const svgEl = createElementFromHTMLString( svgTagString ) - if ( svgEl ) { - const svgChildElements = svgEl.querySelectorAll( '*' ) - - if ( color ) { - let _color = color - if ( color.match( /#([\d\w]{6})/g ) ) { - _color = color.match( /#([\d\w]{6})/g )[ 0 ] - } else if ( color.match( /var\((.*)?--[\w\d-_]+/g ) ) { - const colorVariable = color.match( /--[\w\d-_]+/g )[ 0 ] - try { - // Try and get the actual value, this can possibly get an error due to stylesheet access security. - _color = window.getComputedStyle( document.documentElement ).getPropertyValue( colorVariable ) || color - } catch ( err ) { - _color = color - } - } - - svgChildElements.forEach( child => { - if ( child && ! [ 'DEFS', 'TITLE', 'DESC' ].includes( child.tagName ) ) { - child.setAttribute( 'fill', _color ) - child.setAttribute( 'stroke', _color ) - child.style.fill = _color - child.style.stroke = _color - } - } ) - const willEnqueueStyles = Object.keys( styles ).map( key => typeof styles[ key ] !== 'undefined' && styles[ key ] !== '' ? `${ kebabCase( key ) }: ${ styles[ key ] } !important;` : '' ).join( '' ) - svgEl.setAttribute( 'style', `fill: ${ _color } !important; color: ${ _color } !important;` + willEnqueueStyles ) - } - - /** - * Use XMLSerializer to create XML string from DOM Element - * - * @see https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer - */ - const serializedString = new XMLSerializer().serializeToString( svgEl ) //eslint-disable-line no-undef - - return window.btoa( serializedString ) - } -} - -/** - * Create a toolbar control - * for the icon list block. - * - * @param {{ isSelected, tagName }} options - * @return {Function} function which will be used as render prop. - */ -export const createIconListControls = ( options = {} ) => { - const { - isSelected, - tagName, - } = options - - return ( { - value, onChange, - } ) => isSelected && ( - <> - { - onChange( outdentListItems( value ) ) - } } - /> - { - onChange( - indentListItems( value, { type: tagName } ) - ) - } } - /> - { - onChange( - indentListItems( value, { type: tagName } ) - ) - } } - /> - { - onChange( outdentListItems( value ) ) - } } - /> - - ) -}