@wordpress/block-editor 12.5.0 → 12.7.0

package/build-module/components/block-tools/block-contextual-toolbar.js

@@ -37,7 +37,8 @@ function BlockContextualToolbar({
     blockType,
     hasParents,
     showParentSelector,
-    selectedBlockClientId
+    selectedBlockClientId,
+    isContentOnly
   } = useSelect(select => {
     const {
       getBlockName,
@@ -58,6 +59,7 @@ function BlockContextualToolbar({
       selectedBlockClientId: _selectedBlockClientId,
       blockType: _selectedBlockClientId && getBlockType(getBlockName(_selectedBlockClientId)),
       hasParents: parents.length,
+      isContentOnly: getBlockEditingMode(_selectedBlockClientId) === 'contentOnly',
       showParentSelector: parentBlockType && getBlockEditingMode(firstParentClientId) === 'default' && hasBlockSupport(parentBlockType, '__experimentalParentSelector', true) && selectedBlockClientIds.length <= 1 && getBlockEditingMode(_selectedBlockClientId) === 'default'
     };
   }, []);
@@ -65,7 +67,7 @@ function BlockContextualToolbar({
     setIsCollapsed(false);
   }, [selectedBlockClientId]);
 
-  if (blockType && !hasBlockSupport(blockType, '__experimentalToolbar', true)) {
+  if (isContentOnly || blockType && !hasBlockSupport(blockType, '__experimentalToolbar', true)) {
     return null;
   } // Shifts the toolbar to make room for the parent block selector.
 

package/build-module/components/block-tools/block-contextual-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-contextual-toolbar.js"],"names":["classnames","__","useEffect","useRef","useState","hasBlockSupport","store","blocksStore","useSelect","ToolbarItem","ToolbarButton","ToolbarGroup","next","previous","useViewportMatch","NavigableToolbar","BlockToolbar","blockEditorStore","unlock","BlockContextualToolbar","focusOnMount","isFixed","props","isCollapsed","setIsCollapsed","toolbarButtonRef","isLargeViewport","blockType","hasParents","showParentSelector","selectedBlockClientId","select","getBlockName","getBlockParents","getSelectedBlockClientIds","getBlockEditingMode","getBlockType","selectedBlockClientIds","_selectedBlockClientId","parents","firstParentClientId","length","parentBlockName","parentBlockType","classes","collapsed","current","focus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tToolbarItem,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { next, previous } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableToolbar from '../navigable-toolbar';\nimport BlockToolbar from '../block-toolbar';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {\n\t// When the toolbar is fixed it can be collapsed\n\tconst [ isCollapsed, setIsCollapsed ] = useState( false );\n\tconst toolbarButtonRef = useRef();\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst { blockType, hasParents, showParentSelector, selectedBlockClientId } =\n\t\tuseSelect( ( select ) => {\n\t\t\tconst {\n\t\t\t\tgetBlockName,\n\t\t\t\tgetBlockParents,\n\t\t\t\tgetSelectedBlockClientIds,\n\t\t\t\tgetBlockEditingMode,\n\t\t\t} = unlock( select( blockEditorStore ) );\n\t\t\tconst { getBlockType } = select( blocksStore );\n\t\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\t\tconst _selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\t\tconst parents = getBlockParents( _selectedBlockClientId );\n\t\t\tconst firstParentClientId = parents[ parents.length - 1 ];\n\t\t\tconst parentBlockName = getBlockName( firstParentClientId );\n\t\t\tconst parentBlockType = getBlockType( parentBlockName );\n\n\t\t\treturn {\n\t\t\t\tselectedBlockClientId: _selectedBlockClientId,\n\t\t\t\tblockType:\n\t\t\t\t\t_selectedBlockClientId &&\n\t\t\t\t\tgetBlockType( getBlockName( _selectedBlockClientId ) ),\n\t\t\t\thasParents: parents.length,\n\t\t\t\tshowParentSelector:\n\t\t\t\t\tparentBlockType &&\n\t\t\t\t\tgetBlockEditingMode( firstParentClientId ) === 'default' &&\n\t\t\t\t\thasBlockSupport(\n\t\t\t\t\t\tparentBlockType,\n\t\t\t\t\t\t'__experimentalParentSelector',\n\t\t\t\t\t\ttrue\n\t\t\t\t\t) &&\n\t\t\t\t\tselectedBlockClientIds.length <= 1 &&\n\t\t\t\t\tgetBlockEditingMode( _selectedBlockClientId ) === 'default',\n\t\t\t};\n\t\t}, [] );\n\n\tuseEffect( () => {\n\t\tsetIsCollapsed( false );\n\t}, [ selectedBlockClientId ] );\n\n\tif (\n\t\tblockType &&\n\t\t! hasBlockSupport( blockType, '__experimentalToolbar', true )\n\t) {\n\t\treturn null;\n\t}\n\n\t// Shifts the toolbar to make room for the parent block selector.\n\tconst classes = classnames( 'block-editor-block-contextual-toolbar', {\n\t\t'has-parent': hasParents && showParentSelector,\n\t\t'is-fixed': isFixed,\n\t\t'is-collapsed': isCollapsed,\n\t} );\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tfocusOnMount={ focusOnMount }\n\t\t\tclassName={ classes }\n\t\t\t/* translators: accessibility text for the block toolbar */\n\t\t\taria-label={ __( 'Block tools' ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }\n\t\t\t{ isFixed && isLargeViewport && blockType && (\n\t\t\t\t<ToolbarGroup\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t? 'block-editor-block-toolbar__group-expand-fixed-toolbar'\n\t\t\t\t\t\t\t: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ ToolbarButton }\n\t\t\t\t\t\tref={ toolbarButtonRef }\n\t\t\t\t\t\ticon={ isCollapsed ? next : previous }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsCollapsed( ( collapsed ) => ! collapsed );\n\t\t\t\t\t\t\ttoolbarButtonRef.current.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t\t? __( 'Show block tools' )\n\t\t\t\t\t\t\t\t: __( 'Hide block tools' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default BlockContextualToolbar;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-tools/block-contextual-toolbar.js"],"names":["classnames","__","useEffect","useRef","useState","hasBlockSupport","store","blocksStore","useSelect","ToolbarItem","ToolbarButton","ToolbarGroup","next","previous","useViewportMatch","NavigableToolbar","BlockToolbar","blockEditorStore","unlock","BlockContextualToolbar","focusOnMount","isFixed","props","isCollapsed","setIsCollapsed","toolbarButtonRef","isLargeViewport","blockType","hasParents","showParentSelector","selectedBlockClientId","isContentOnly","select","getBlockName","getBlockParents","getSelectedBlockClientIds","getBlockEditingMode","getBlockType","selectedBlockClientIds","_selectedBlockClientId","parents","firstParentClientId","length","parentBlockName","parentBlockType","classes","collapsed","current","focus"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { hasBlockSupport, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tToolbarItem,\n\tToolbarButton,\n\tToolbarGroup,\n} from '@wordpress/components';\nimport { next, previous } from '@wordpress/icons';\nimport { useViewportMatch } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableToolbar from '../navigable-toolbar';\nimport BlockToolbar from '../block-toolbar';\nimport { store as blockEditorStore } from '../../store';\nimport { unlock } from '../../lock-unlock';\n\nfunction BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {\n\t// When the toolbar is fixed it can be collapsed\n\tconst [ isCollapsed, setIsCollapsed ] = useState( false );\n\tconst toolbarButtonRef = useRef();\n\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\tconst {\n\t\tblockType,\n\t\thasParents,\n\t\tshowParentSelector,\n\t\tselectedBlockClientId,\n\t\tisContentOnly,\n\t} = useSelect( ( select ) => {\n\t\tconst {\n\t\t\tgetBlockName,\n\t\t\tgetBlockParents,\n\t\t\tgetSelectedBlockClientIds,\n\t\t\tgetBlockEditingMode,\n\t\t} = unlock( select( blockEditorStore ) );\n\t\tconst { getBlockType } = select( blocksStore );\n\t\tconst selectedBlockClientIds = getSelectedBlockClientIds();\n\t\tconst _selectedBlockClientId = selectedBlockClientIds[ 0 ];\n\t\tconst parents = getBlockParents( _selectedBlockClientId );\n\t\tconst firstParentClientId = parents[ parents.length - 1 ];\n\t\tconst parentBlockName = getBlockName( firstParentClientId );\n\t\tconst parentBlockType = getBlockType( parentBlockName );\n\n\t\treturn {\n\t\t\tselectedBlockClientId: _selectedBlockClientId,\n\t\t\tblockType:\n\t\t\t\t_selectedBlockClientId &&\n\t\t\t\tgetBlockType( getBlockName( _selectedBlockClientId ) ),\n\t\t\thasParents: parents.length,\n\t\t\tisContentOnly:\n\t\t\t\tgetBlockEditingMode( _selectedBlockClientId ) === 'contentOnly',\n\t\t\tshowParentSelector:\n\t\t\t\tparentBlockType &&\n\t\t\t\tgetBlockEditingMode( firstParentClientId ) === 'default' &&\n\t\t\t\thasBlockSupport(\n\t\t\t\t\tparentBlockType,\n\t\t\t\t\t'__experimentalParentSelector',\n\t\t\t\t\ttrue\n\t\t\t\t) &&\n\t\t\t\tselectedBlockClientIds.length <= 1 &&\n\t\t\t\tgetBlockEditingMode( _selectedBlockClientId ) === 'default',\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tsetIsCollapsed( false );\n\t}, [ selectedBlockClientId ] );\n\n\tif (\n\t\tisContentOnly ||\n\t\t( blockType &&\n\t\t\t! hasBlockSupport( blockType, '__experimentalToolbar', true ) )\n\t) {\n\t\treturn null;\n\t}\n\n\t// Shifts the toolbar to make room for the parent block selector.\n\tconst classes = classnames( 'block-editor-block-contextual-toolbar', {\n\t\t'has-parent': hasParents && showParentSelector,\n\t\t'is-fixed': isFixed,\n\t\t'is-collapsed': isCollapsed,\n\t} );\n\n\treturn (\n\t\t<NavigableToolbar\n\t\t\tfocusOnMount={ focusOnMount }\n\t\t\tclassName={ classes }\n\t\t\t/* translators: accessibility text for the block toolbar */\n\t\t\taria-label={ __( 'Block tools' ) }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }\n\t\t\t{ isFixed && isLargeViewport && blockType && (\n\t\t\t\t<ToolbarGroup\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t? 'block-editor-block-toolbar__group-expand-fixed-toolbar'\n\t\t\t\t\t\t\t: 'block-editor-block-toolbar__group-collapse-fixed-toolbar'\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<ToolbarItem\n\t\t\t\t\t\tas={ ToolbarButton }\n\t\t\t\t\t\tref={ toolbarButtonRef }\n\t\t\t\t\t\ticon={ isCollapsed ? next : previous }\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tsetIsCollapsed( ( collapsed ) => ! collapsed );\n\t\t\t\t\t\t\ttoolbarButtonRef.current.focus();\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\tisCollapsed\n\t\t\t\t\t\t\t\t? __( 'Show block tools' )\n\t\t\t\t\t\t\t\t: __( 'Hide block tools' )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t) }\n\t\t</NavigableToolbar>\n\t);\n}\n\nexport default BlockContextualToolbar;\n"]}

package/build-module/components/block-variation-picker/index.native.js

@@ -8,13 +8,12 @@ import { ScrollView, View, Text, TouchableWithoutFeedback, Platform } from 'reac
  * WordPress dependencies
  */
 
-import { withSelect, useDispatch } from '@wordpress/data';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { createBlocksFromInnerBlocksTemplate, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import { PanelBody, BottomSheet, FooterMessageControl, InserterButton } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
@@ -39,7 +38,7 @@ function BlockVariationPicker({
   } = useDispatch(blockEditorStore);
   const isIOS = Platform.OS === 'ios';
   const cancelButtonStyle = usePreferredColorSchemeStyle(styles.cancelButton, styles.cancelButtonDark);
-  const leftButton = useMemo(() => createElement(TouchableWithoutFeedback, {
+  const leftButton = createElement(TouchableWithoutFeedback, {
     onPress: onClose,
     hitSlop: hitSlop
   }, createElement(View, null, isIOS ? createElement(Text, {
@@ -49,14 +48,14 @@ function BlockVariationPicker({
     icon: close,
     size: 24,
     style: styles.closeIcon
-  }))), [onClose, cancelButtonStyle]);
+  })));
 
   const onVariationSelect = variation => {
     replaceInnerBlocks(clientId, createBlocksFromInnerBlocksTemplate(variation.innerBlocks));
     onClose();
   };
 
-  return useMemo(() => createElement(BottomSheet, {
+  return createElement(BottomSheet, {
     isVisible: isVisible,
     onClose: onClose,
     title: __('Select a layout'),
@@ -68,23 +67,14 @@ function BlockVariationPicker({
     showsHorizontalScrollIndicator: false,
     contentContainerStyle: styles.contentContainerStyle,
     style: styles.containerStyle
-  }, variations.map(v => {
-    return createElement(InserterButton, {
-      item: v,
-      key: v.name,
-      onSelect: () => onVariationSelect(v)
-    });
-  })), createElement(PanelBody, null, createElement(FooterMessageControl, {
+  }, variations.map(v => createElement(InserterButton, {
+    item: v,
+    key: v.name,
+    onSelect: () => onVariationSelect(v)
+  }))), createElement(PanelBody, null, createElement(FooterMessageControl, {
     label: __('Note: Column layout may vary between themes and screen sizes')
-  }))), [variations, isVisible, onClose]);
+  })));
 }
 
-export default compose(withSelect((select, {}) => {
-  const {
-    getBlockVariations
-  } = select(blocksStore);
-  return {
-    date: getBlockVariations('core/columns', 'block')
-  };
-}))(BlockVariationPicker);
+export default BlockVariationPicker;
 //# sourceMappingURL=index.native.js.map

package/build-module/components/block-variation-picker/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"names":["ScrollView","View","Text","TouchableWithoutFeedback","Platform","withSelect","useDispatch","compose","usePreferredColorSchemeStyle","createBlocksFromInnerBlocksTemplate","store","blocksStore","__","PanelBody","BottomSheet","FooterMessageControl","InserterButton","Icon","close","useMemo","styles","blockEditorStore","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","isIOS","OS","cancelButtonStyle","cancelButton","cancelButtonDark","leftButton","closeIcon","onVariationSelect","variation","innerBlocks","contentStyle","contentContainerStyle","containerStyle","map","v","name","select","getBlockVariations","date"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,UADD,EAECC,IAFD,EAGCC,IAHD,EAICC,wBAJD,EAKCC,QALD,QAMO,cANP;AAQA;AACA;AACA;;AACA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,iBAAxC;AACA,SAASC,OAAT,EAAkBC,4BAAlB,QAAsD,oBAAtD;AACA,SACCC,mCADD,EAECC,KAAK,IAAIC,WAFV,QAGO,mBAHP;AAIA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SACCC,SADD,EAECC,WAFD,EAGCC,oBAHD,EAICC,cAJD,QAKO,uBALP;AAMA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AACA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASV,KAAK,IAAIW,gBAAlB,QAA0C,aAA1C;AAEA,MAAMC,OAAO,GAAG;AAAEC,EAAAA,GAAG,EAAE,EAAP;AAAWC,EAAAA,MAAM,EAAE,EAAnB;AAAuBC,EAAAA,IAAI,EAAE,EAA7B;AAAiCC,EAAAA,KAAK,EAAE;AAAxC,CAAhB;;AAEA,SAASC,oBAAT,CAA+B;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,OAAb;AAAsBC,EAAAA,QAAtB;AAAgCC,EAAAA;AAAhC,CAA/B,EAA8E;AAC7E,QAAM;AAAEC,IAAAA;AAAF,MAAyB1B,WAAW,CAAEe,gBAAF,CAA1C;AACA,QAAMY,KAAK,GAAG7B,QAAQ,CAAC8B,EAAT,KAAgB,KAA9B;AAEA,QAAMC,iBAAiB,GAAG3B,4BAA4B,CACrDY,MAAM,CAACgB,YAD8C,EAErDhB,MAAM,CAACiB,gBAF8C,CAAtD;AAKA,QAAMC,UAAU,GAAGnB,OAAO,CACzB,MACC,cAAC,wBAAD;AAA0B,IAAA,OAAO,EAAGU,OAApC;AAA8C,IAAA,OAAO,EAAGP;AAAxD,KACC,cAAC,IAAD,QACGW,KAAK,GACN,cAAC,IAAD;AACC,IAAA,KAAK,EAAGE,iBADT;AAEC,IAAA,qBAAqB,EAAG;AAFzB,KAIGvB,EAAE,CAAE,QAAF,CAJL,CADM,GAQN,cAAC,IAAD;AACC,IAAA,IAAI,EAAGM,KADR;AAEC,IAAA,IAAI,EAAG,EAFR;AAGC,IAAA,KAAK,EAAGE,MAAM,CAACmB;AAHhB,IATF,CADD,CAFwB,EAqBzB,CAAEV,OAAF,EAAWM,iBAAX,CArByB,CAA1B;;AAwBA,QAAMK,iBAAiB,GAAKC,SAAF,IAAiB;AAC1CT,IAAAA,kBAAkB,CACjBF,QADiB,EAEjBrB,mCAAmC,CAAEgC,SAAS,CAACC,WAAZ,CAFlB,CAAlB;AAIAb,IAAAA,OAAO;AACP,GAND;;AAQA,SAAOV,OAAO,CACb,MACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGS,SADb;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGjB,EAAE,CAAE,iBAAF,CAHX;AAIC,IAAA,YAAY,EAAGQ,MAAM,CAACuB,YAJvB;AAKC,IAAA,UAAU,EAAGL,UALd;AAMC,IAAA,MAAM,EAAC;AANR,KAQC,cAAC,UAAD;AACC,IAAA,UAAU,MADX;AAEC,IAAA,8BAA8B,EAAG,KAFlC;AAGC,IAAA,qBAAqB,EAAGlB,MAAM,CAACwB,qBAHhC;AAIC,IAAA,KAAK,EAAGxB,MAAM,CAACyB;AAJhB,KAMGd,UAAU,CAACe,GAAX,CAAkBC,CAAF,IAAS;AAC1B,WACC,cAAC,cAAD;AACC,MAAA,IAAI,EAAGA,CADR;AAEC,MAAA,GAAG,EAAGA,CAAC,CAACC,IAFT;AAGC,MAAA,QAAQ,EAAG,MAAMR,iBAAiB,CAAEO,CAAF;AAHnC,MADD;AAOA,GARC,CANH,CARD,EAwBC,cAAC,SAAD,QACC,cAAC,oBAAD;AACC,IAAA,KAAK,EAAGnC,EAAE,CACT,8DADS;AADX,IADD,CAxBD,CAFY,EAmCb,CAAEmB,UAAF,EAAcH,SAAd,EAAyBC,OAAzB,CAnCa,CAAd;AAqCA;;AAED,eAAetB,OAAO,CACrBF,UAAU,CAAE,CAAE4C,MAAF,EAAU,EAAV,KAAkB;AAC7B,QAAM;AAAEC,IAAAA;AAAF,MAAyBD,MAAM,CAAEtC,WAAF,CAArC;AAEA,SAAO;AACNwC,IAAAA,IAAI,EAAED,kBAAkB,CAAE,cAAF,EAAkB,OAAlB;AADlB,GAAP;AAGA,CANS,CADW,CAAP,CAQZvB,oBARY,CAAf","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { withSelect, useDispatch } from '@wordpress/data';\nimport { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport {\n\tcreateBlocksFromInnerBlocksTemplate,\n\tstore as blocksStore,\n} from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n\tInserterButton,\n} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = useMemo(\n\t\t() => (\n\t\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t\t<View>\n\t\t\t\t\t{ isIOS ? (\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</View>\n\t\t\t</TouchableWithoutFeedback>\n\t\t),\n\t\t[ onClose, cancelButtonStyle ]\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn useMemo(\n\t\t() => (\n\t\t\t<BottomSheet\n\t\t\t\tisVisible={ isVisible }\n\t\t\t\tonClose={ onClose }\n\t\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\t\tleftButton={ leftButton }\n\t\t\t\ttestID=\"block-variation-modal\"\n\t\t\t>\n\t\t\t\t<ScrollView\n\t\t\t\t\thorizontal\n\t\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t\t>\n\t\t\t\t\t{ variations.map( ( v ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<InserterButton\n\t\t\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</ScrollView>\n\t\t\t\t<PanelBody>\n\t\t\t\t\t<FooterMessageControl\n\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t</BottomSheet>\n\t\t),\n\t\t[ variations, isVisible, onClose ]\n\t);\n}\n\nexport default compose(\n\twithSelect( ( select, {} ) => {\n\t\tconst { getBlockVariations } = select( blocksStore );\n\n\t\treturn {\n\t\t\tdate: getBlockVariations( 'core/columns', 'block' ),\n\t\t};\n\t} )\n)( BlockVariationPicker );\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/block-variation-picker/index.native.js"],"names":["ScrollView","View","Text","TouchableWithoutFeedback","Platform","useDispatch","usePreferredColorSchemeStyle","createBlocksFromInnerBlocksTemplate","__","PanelBody","BottomSheet","FooterMessageControl","InserterButton","Icon","close","styles","store","blockEditorStore","hitSlop","top","bottom","left","right","BlockVariationPicker","isVisible","onClose","clientId","variations","replaceInnerBlocks","isIOS","OS","cancelButtonStyle","cancelButton","cancelButtonDark","leftButton","closeIcon","onVariationSelect","variation","innerBlocks","contentStyle","contentContainerStyle","containerStyle","map","v","name"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,UADD,EAECC,IAFD,EAGCC,IAHD,EAICC,wBAJD,EAKCC,QALD,QAMO,cANP;AAQA;AACA;AACA;;AACA,SAASC,WAAT,QAA4B,iBAA5B;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AACA,SAASC,mCAAT,QAAoD,mBAApD;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SACCC,SADD,EAECC,WAFD,EAGCC,oBAHD,EAICC,cAJD,QAKO,uBALP;AAMA,SAASC,IAAT,EAAeC,KAAf,QAA4B,kBAA5B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;AACA,SAASC,KAAK,IAAIC,gBAAlB,QAA0C,aAA1C;AAEA,MAAMC,OAAO,GAAG;AAAEC,EAAAA,GAAG,EAAE,EAAP;AAAWC,EAAAA,MAAM,EAAE,EAAnB;AAAuBC,EAAAA,IAAI,EAAE,EAA7B;AAAiCC,EAAAA,KAAK,EAAE;AAAxC,CAAhB;;AAEA,SAASC,oBAAT,CAA+B;AAAEC,EAAAA,SAAF;AAAaC,EAAAA,OAAb;AAAsBC,EAAAA,QAAtB;AAAgCC,EAAAA;AAAhC,CAA/B,EAA8E;AAC7E,QAAM;AAAEC,IAAAA;AAAF,MAAyBvB,WAAW,CAAEY,gBAAF,CAA1C;AACA,QAAMY,KAAK,GAAGzB,QAAQ,CAAC0B,EAAT,KAAgB,KAA9B;AAEA,QAAMC,iBAAiB,GAAGzB,4BAA4B,CACrDS,MAAM,CAACiB,YAD8C,EAErDjB,MAAM,CAACkB,gBAF8C,CAAtD;AAKA,QAAMC,UAAU,GACf,cAAC,wBAAD;AAA0B,IAAA,OAAO,EAAGT,OAApC;AAA8C,IAAA,OAAO,EAAGP;AAAxD,KACC,cAAC,IAAD,QACGW,KAAK,GACN,cAAC,IAAD;AACC,IAAA,KAAK,EAAGE,iBADT;AAEC,IAAA,qBAAqB,EAAG;AAFzB,KAIGvB,EAAE,CAAE,QAAF,CAJL,CADM,GAQN,cAAC,IAAD;AACC,IAAA,IAAI,EAAGM,KADR;AAEC,IAAA,IAAI,EAAG,EAFR;AAGC,IAAA,KAAK,EAAGC,MAAM,CAACoB;AAHhB,IATF,CADD,CADD;;AAqBA,QAAMC,iBAAiB,GAAKC,SAAF,IAAiB;AAC1CT,IAAAA,kBAAkB,CACjBF,QADiB,EAEjBnB,mCAAmC,CAAE8B,SAAS,CAACC,WAAZ,CAFlB,CAAlB;AAIAb,IAAAA,OAAO;AACP,GAND;;AAQA,SACC,cAAC,WAAD;AACC,IAAA,SAAS,EAAGD,SADb;AAEC,IAAA,OAAO,EAAGC,OAFX;AAGC,IAAA,KAAK,EAAGjB,EAAE,CAAE,iBAAF,CAHX;AAIC,IAAA,YAAY,EAAGO,MAAM,CAACwB,YAJvB;AAKC,IAAA,UAAU,EAAGL,UALd;AAMC,IAAA,MAAM,EAAC;AANR,KAQC,cAAC,UAAD;AACC,IAAA,UAAU,MADX;AAEC,IAAA,8BAA8B,EAAG,KAFlC;AAGC,IAAA,qBAAqB,EAAGnB,MAAM,CAACyB,qBAHhC;AAIC,IAAA,KAAK,EAAGzB,MAAM,CAAC0B;AAJhB,KAMGd,UAAU,CAACe,GAAX,CAAkBC,CAAF,IACjB,cAAC,cAAD;AACC,IAAA,IAAI,EAAGA,CADR;AAEC,IAAA,GAAG,EAAGA,CAAC,CAACC,IAFT;AAGC,IAAA,QAAQ,EAAG,MAAMR,iBAAiB,CAAEO,CAAF;AAHnC,IADC,CANH,CARD,EAsBC,cAAC,SAAD,QACC,cAAC,oBAAD;AACC,IAAA,KAAK,EAAGnC,EAAE,CACT,8DADS;AADX,IADD,CAtBD,CADD;AAgCA;;AAED,eAAee,oBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tScrollView,\n\tView,\n\tText,\n\tTouchableWithoutFeedback,\n\tPlatform,\n} from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { useDispatch } from '@wordpress/data';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\nimport { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tPanelBody,\n\tBottomSheet,\n\tFooterMessageControl,\n\tInserterButton,\n} from '@wordpress/components';\nimport { Icon, close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\nimport { store as blockEditorStore } from '../../store';\n\nconst hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };\n\nfunction BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {\n\tconst { replaceInnerBlocks } = useDispatch( blockEditorStore );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst cancelButtonStyle = usePreferredColorSchemeStyle(\n\t\tstyles.cancelButton,\n\t\tstyles.cancelButtonDark\n\t);\n\n\tconst leftButton = (\n\t\t<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>\n\t\t\t<View>\n\t\t\t\t{ isIOS ? (\n\t\t\t\t\t<Text\n\t\t\t\t\t\tstyle={ cancelButtonStyle }\n\t\t\t\t\t\tmaxFontSizeMultiplier={ 2 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Text>\n\t\t\t\t) : (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\tsize={ 24 }\n\t\t\t\t\t\tstyle={ styles.closeIcon }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</View>\n\t\t</TouchableWithoutFeedback>\n\t);\n\n\tconst onVariationSelect = ( variation ) => {\n\t\treplaceInnerBlocks(\n\t\t\tclientId,\n\t\t\tcreateBlocksFromInnerBlocksTemplate( variation.innerBlocks )\n\t\t);\n\t\tonClose();\n\t};\n\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible={ isVisible }\n\t\t\tonClose={ onClose }\n\t\t\ttitle={ __( 'Select a layout' ) }\n\t\t\tcontentStyle={ styles.contentStyle }\n\t\t\tleftButton={ leftButton }\n\t\t\ttestID=\"block-variation-modal\"\n\t\t>\n\t\t\t<ScrollView\n\t\t\t\thorizontal\n\t\t\t\tshowsHorizontalScrollIndicator={ false }\n\t\t\t\tcontentContainerStyle={ styles.contentContainerStyle }\n\t\t\t\tstyle={ styles.containerStyle }\n\t\t\t>\n\t\t\t\t{ variations.map( ( v ) => (\n\t\t\t\t\t<InserterButton\n\t\t\t\t\t\titem={ v }\n\t\t\t\t\t\tkey={ v.name }\n\t\t\t\t\t\tonSelect={ () => onVariationSelect( v ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ScrollView>\n\t\t\t<PanelBody>\n\t\t\t\t<FooterMessageControl\n\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t'Note: Column layout may vary between themes and screen sizes'\n\t\t\t\t\t) }\n\t\t\t\t/>\n\t\t\t</PanelBody>\n\t\t</BottomSheet>\n\t);\n}\n\nexport default BlockVariationPicker;\n"]}

package/build-module/components/colors-gradients/control.js

@@ -8,6 +8,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
+import { __ } from '@wordpress/i18n';
 import { BaseControl, __experimentalVStack as VStack, TabPanel, ColorPalette, GradientPicker } from '@wordpress/components';
 /**
  * Internal dependencies
@@ -17,12 +18,12 @@ import useSetting from '../use-setting';
 const colorsAndGradientKeys = ['colors', 'disableCustomColors', 'gradients', 'disableCustomGradients'];
 const TAB_COLOR = {
   name: 'color',
-  title: 'Solid',
+  title: __('Solid'),
   value: 'color'
 };
 const TAB_GRADIENT = {
   name: 'gradient',
-  title: 'Gradient',
+  title: __('Gradient'),
   value: 'gradient'
 };
 const TABS_SETTINGS = [TAB_COLOR, TAB_GRADIENT];

package/build-module/components/colors-gradients/control.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","BaseControl","__experimentalVStack","VStack","TabPanel","ColorPalette","GradientPicker","useSetting","colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: 'Solid',\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: 'Gradient',\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/colors-gradients/control.js"],"names":["classnames","__","BaseControl","__experimentalVStack","VStack","TabPanel","ColorPalette","GradientPicker","useSetting","colorsAndGradientKeys","TAB_COLOR","name","title","value","TAB_GRADIENT","TABS_SETTINGS","ColorGradientControlInner","colors","gradients","disableCustomColors","disableCustomGradients","__experimentalIsRenderedInSidebar","className","label","onColorChange","onGradientChange","colorValue","gradientValue","clearable","showTitle","enableAlpha","headingLevel","canChooseAColor","length","canChooseAGradient","tabPanels","newColor","newGradient","renderPanelType","type","tab","ColorGradientControlSelect","props","colorGradientSettings","ColorGradientControl","every","key","hasOwnProperty"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\tBaseControl,\n\t__experimentalVStack as VStack,\n\tTabPanel,\n\tColorPalette,\n\tGradientPicker,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport useSetting from '../use-setting';\n\nconst colorsAndGradientKeys = [\n\t'colors',\n\t'disableCustomColors',\n\t'gradients',\n\t'disableCustomGradients',\n];\n\nconst TAB_COLOR = {\n\tname: 'color',\n\ttitle: __( 'Solid' ),\n\tvalue: 'color',\n};\nconst TAB_GRADIENT = {\n\tname: 'gradient',\n\ttitle: __( 'Gradient' ),\n\tvalue: 'gradient',\n};\n\nconst TABS_SETTINGS = [ TAB_COLOR, TAB_GRADIENT ];\n\nfunction ColorGradientControlInner( {\n\tcolors,\n\tgradients,\n\tdisableCustomColors,\n\tdisableCustomGradients,\n\t__experimentalIsRenderedInSidebar,\n\tclassName,\n\tlabel,\n\tonColorChange,\n\tonGradientChange,\n\tcolorValue,\n\tgradientValue,\n\tclearable,\n\tshowTitle = true,\n\tenableAlpha,\n\theadingLevel,\n} ) {\n\tconst canChooseAColor =\n\t\tonColorChange &&\n\t\t( ( colors && colors.length > 0 ) || ! disableCustomColors );\n\tconst canChooseAGradient =\n\t\tonGradientChange &&\n\t\t( ( gradients && gradients.length > 0 ) || ! disableCustomGradients );\n\n\tif ( ! canChooseAColor && ! canChooseAGradient ) {\n\t\treturn null;\n\t}\n\n\tconst tabPanels = {\n\t\t[ TAB_COLOR.value ]: (\n\t\t\t<ColorPalette\n\t\t\t\tvalue={ colorValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAGradient\n\t\t\t\t\t\t? ( newColor ) => {\n\t\t\t\t\t\t\t\tonColorChange( newColor );\n\t\t\t\t\t\t\t\tonGradientChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onColorChange\n\t\t\t\t}\n\t\t\t\t{ ...{ colors, disableCustomColors } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t\t[ TAB_GRADIENT.value ]: (\n\t\t\t<GradientPicker\n\t\t\t\t__nextHasNoMargin\n\t\t\t\tvalue={ gradientValue }\n\t\t\t\tonChange={\n\t\t\t\t\tcanChooseAColor\n\t\t\t\t\t\t? ( newGradient ) => {\n\t\t\t\t\t\t\t\tonGradientChange( newGradient );\n\t\t\t\t\t\t\t\tonColorChange();\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onGradientChange\n\t\t\t\t}\n\t\t\t\t{ ...{ gradients, disableCustomGradients } }\n\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t}\n\t\t\t\tclearable={ clearable }\n\t\t\t\theadingLevel={ headingLevel }\n\t\t\t/>\n\t\t),\n\t};\n\n\tconst renderPanelType = ( type ) => (\n\t\t<div className=\"block-editor-color-gradient-control__panel\">\n\t\t\t{ tabPanels[ type ] }\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<BaseControl\n\t\t\t__nextHasNoMarginBottom\n\t\t\tclassName={ classnames(\n\t\t\t\t'block-editor-color-gradient-control',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<fieldset className=\"block-editor-color-gradient-control__fieldset\">\n\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t{ showTitle && (\n\t\t\t\t\t\t<legend>\n\t\t\t\t\t\t\t<div className=\"block-editor-color-gradient-control__color-indicator\">\n\t\t\t\t\t\t\t\t<BaseControl.VisualLabel>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</BaseControl.VisualLabel>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</legend>\n\t\t\t\t\t) }\n\t\t\t\t\t{ canChooseAColor && canChooseAGradient && (\n\t\t\t\t\t\t<TabPanel\n\t\t\t\t\t\t\tclassName=\"block-editor-color-gradient-control__tabs\"\n\t\t\t\t\t\t\ttabs={ TABS_SETTINGS }\n\t\t\t\t\t\t\tinitialTabName={\n\t\t\t\t\t\t\t\tgradientValue\n\t\t\t\t\t\t\t\t\t? TAB_GRADIENT.value\n\t\t\t\t\t\t\t\t\t: !! canChooseAColor && TAB_COLOR.value\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( tab ) => renderPanelType( tab.value ) }\n\t\t\t\t\t\t</TabPanel>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ! canChooseAGradient &&\n\t\t\t\t\t\trenderPanelType( TAB_COLOR.value ) }\n\t\t\t\t\t{ ! canChooseAColor &&\n\t\t\t\t\t\trenderPanelType( TAB_GRADIENT.value ) }\n\t\t\t\t</VStack>\n\t\t\t</fieldset>\n\t\t</BaseControl>\n\t);\n}\n\nfunction ColorGradientControlSelect( props ) {\n\tconst colorGradientSettings = {};\n\tcolorGradientSettings.colors = useSetting( 'color.palette' );\n\tcolorGradientSettings.gradients = useSetting( 'color.gradients' );\n\tcolorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );\n\tcolorGradientSettings.disableCustomGradients = ! useSetting(\n\t\t'color.customGradient'\n\t);\n\n\treturn (\n\t\t<ColorGradientControlInner\n\t\t\t{ ...{ ...colorGradientSettings, ...props } }\n\t\t/>\n\t);\n}\n\nfunction ColorGradientControl( props ) {\n\tif (\n\t\tcolorsAndGradientKeys.every( ( key ) => props.hasOwnProperty( key ) )\n\t) {\n\t\treturn <ColorGradientControlInner { ...props } />;\n\t}\n\treturn <ColorGradientControlSelect { ...props } />;\n}\n\nexport default ColorGradientControl;\n"]}

package/build-module/components/editor-styles/index.js

@@ -43,10 +43,10 @@ function useDarkThemeBodyClassName(styles) {
       const tempCanvas = ownerDocument.createElement('div');
       tempCanvas.classList.add('editor-styles-wrapper');
       body.appendChild(tempCanvas);
-      backgroundColor = defaultView.getComputedStyle(tempCanvas, null).getPropertyValue('background-color');
+      backgroundColor = defaultView?.getComputedStyle(tempCanvas, null).getPropertyValue('background-color');
       body.removeChild(tempCanvas);
     } else {
-      backgroundColor = defaultView.getComputedStyle(canvas, null).getPropertyValue('background-color');
+      backgroundColor = defaultView?.getComputedStyle(canvas, null).getPropertyValue('background-color');
     }
 
     const colordBackgroundColor = colord(backgroundColor); // If background is transparent, it should be treated as light color.

package/build-module/components/editor-styles/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","SVG","useCallback","useMemo","transformStyles","EDITOR_STYLES_SELECTOR","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","stylesArray","Object","values","transformedStyles","filter","style","css","transformedSvgs","__unstableType","map","assets","join","index","visibility","position","left","overflow","__html"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { SVG } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst stylesArray = useMemo(\n\t\t() => Object.values( styles ?? [] ),\n\t\t[ styles ]\n\t);\n\tconst transformedStyles = useMemo(\n\t\t() =>\n\t\t\ttransformStyles(\n\t\t\t\tstylesArray.filter( ( style ) => style?.css ),\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t),\n\t\t[ stylesArray ]\n\t);\n\n\tconst transformedSvgs = useMemo(\n\t\t() =>\n\t\t\tstylesArray\n\t\t\t\t.filter( ( style ) => style.__unstableType === 'svgs' )\n\t\t\t\t.map( ( style ) => style.assets )\n\t\t\t\t.join( '' ),\n\t\t[ stylesArray ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( stylesArray ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t\tdangerouslySetInnerHTML={ { __html: transformedSvgs } }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/editor-styles/index.js"],"names":["colord","extend","namesPlugin","a11yPlugin","SVG","useCallback","useMemo","transformStyles","EDITOR_STYLES_SELECTOR","useDarkThemeBodyClassName","styles","node","ownerDocument","defaultView","body","canvas","querySelector","backgroundColor","tempCanvas","createElement","classList","add","appendChild","getComputedStyle","getPropertyValue","removeChild","colordBackgroundColor","luminance","alpha","remove","EditorStyles","stylesArray","Object","values","transformedStyles","filter","style","css","transformedSvgs","__unstableType","map","assets","join","index","visibility","position","left","overflow","__html"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport namesPlugin from 'colord/plugins/names';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { SVG } from '@wordpress/components';\nimport { useCallback, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport transformStyles from '../../utils/transform-styles';\n\nconst EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';\nextend( [ namesPlugin, a11yPlugin ] );\n\nfunction useDarkThemeBodyClassName( styles ) {\n\treturn useCallback(\n\t\t( node ) => {\n\t\t\tif ( ! node ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst { defaultView, body } = ownerDocument;\n\t\t\tconst canvas = ownerDocument.querySelector(\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t);\n\n\t\t\tlet backgroundColor;\n\n\t\t\tif ( ! canvas ) {\n\t\t\t\t// The real .editor-styles-wrapper element might not exist in the\n\t\t\t\t// DOM, so calculate the background color by creating a fake\n\t\t\t\t// wrapper.\n\t\t\t\tconst tempCanvas = ownerDocument.createElement( 'div' );\n\t\t\t\ttempCanvas.classList.add( 'editor-styles-wrapper' );\n\t\t\t\tbody.appendChild( tempCanvas );\n\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( tempCanvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\n\t\t\t\tbody.removeChild( tempCanvas );\n\t\t\t} else {\n\t\t\t\tbackgroundColor = defaultView\n\t\t\t\t\t?.getComputedStyle( canvas, null )\n\t\t\t\t\t.getPropertyValue( 'background-color' );\n\t\t\t}\n\t\t\tconst colordBackgroundColor = colord( backgroundColor );\n\t\t\t// If background is transparent, it should be treated as light color.\n\t\t\tif (\n\t\t\t\tcolordBackgroundColor.luminance() > 0.5 ||\n\t\t\t\tcolordBackgroundColor.alpha() === 0\n\t\t\t) {\n\t\t\t\tbody.classList.remove( 'is-dark-theme' );\n\t\t\t} else {\n\t\t\t\tbody.classList.add( 'is-dark-theme' );\n\t\t\t}\n\t\t},\n\t\t[ styles ]\n\t);\n}\n\nexport default function EditorStyles( { styles } ) {\n\tconst stylesArray = useMemo(\n\t\t() => Object.values( styles ?? [] ),\n\t\t[ styles ]\n\t);\n\tconst transformedStyles = useMemo(\n\t\t() =>\n\t\t\ttransformStyles(\n\t\t\t\tstylesArray.filter( ( style ) => style?.css ),\n\t\t\t\tEDITOR_STYLES_SELECTOR\n\t\t\t),\n\t\t[ stylesArray ]\n\t);\n\n\tconst transformedSvgs = useMemo(\n\t\t() =>\n\t\t\tstylesArray\n\t\t\t\t.filter( ( style ) => style.__unstableType === 'svgs' )\n\t\t\t\t.map( ( style ) => style.assets )\n\t\t\t\t.join( '' ),\n\t\t[ stylesArray ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t{ /* Use an empty style element to have a document reference,\n\t\t\t     but this could be any element. */ }\n\t\t\t<style ref={ useDarkThemeBodyClassName( stylesArray ) } />\n\t\t\t{ transformedStyles.map( ( css, index ) => (\n\t\t\t\t<style key={ index }>{ css }</style>\n\t\t\t) ) }\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\tviewBox=\"0 0 0 0\"\n\t\t\t\twidth=\"0\"\n\t\t\t\theight=\"0\"\n\t\t\t\trole=\"none\"\n\t\t\t\tstyle={ {\n\t\t\t\t\tvisibility: 'hidden',\n\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\tleft: '-9999px',\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t} }\n\t\t\t\tdangerouslySetInnerHTML={ { __html: transformedSvgs } }\n\t\t\t/>\n\t\t</>\n\t);\n}\n"]}

package/build-module/components/font-sizes/fluid-utils.js

@@ -30,8 +30,8 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
  * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
  * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
  * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
@@ -45,8 +45,8 @@ export function getComputedFluidTypographyValue({
   minimumFontSize,
   maximumFontSize,
   fontSize,
-  minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
-  maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+  minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+  maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
   scaleFactor = DEFAULT_SCALE_FACTOR,
   minimumFontSizeLimit
 }) {
@@ -131,24 +131,24 @@ export function getComputedFluidTypographyValue({
     coerceTo: 'rem'
   }); // Viewport widths defined for fluid typography. Normalize units
 
-  const maximumViewPortWidthParsed = getTypographyValueAndUnit(maximumViewPortWidth, {
+  const maximumViewportWidthParsed = getTypographyValueAndUnit(maximumViewportWidth, {
     coerceTo: fontSizeUnit
   });
-  const minumumViewPortWidthParsed = getTypographyValueAndUnit(minimumViewPortWidth, {
+  const minimumViewportWidthParsed = getTypographyValueAndUnit(minimumViewportWidth, {
     coerceTo: fontSizeUnit
   }); // Protect against unsupported units.
 
-  if (!maximumViewPortWidthParsed || !minumumViewPortWidthParsed || !minimumFontSizeRem) {
+  if (!maximumViewportWidthParsed || !minimumViewportWidthParsed || !minimumFontSizeRem) {
     return null;
   } // Build CSS rule.
   // Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
 
 
-  const minViewPortWidthOffsetValue = roundToPrecision(minumumViewPortWidthParsed.value / 100, 3);
-  const viewPortWidthOffset = roundToPrecision(minViewPortWidthOffsetValue, 3) + fontSizeUnit;
-  const linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / (maximumViewPortWidthParsed.value - minumumViewPortWidthParsed.value));
+  const minViewportWidthOffsetValue = roundToPrecision(minimumViewportWidthParsed.value / 100, 3);
+  const viewportWidthOffset = roundToPrecision(minViewportWidthOffsetValue, 3) + fontSizeUnit;
+  const linearFactor = 100 * ((maximumFontSizeParsed.value - minimumFontSizeParsed.value) / (maximumViewportWidthParsed.value - minimumViewportWidthParsed.value));
   const linearFactorScaled = roundToPrecision((linearFactor || 1) * scaleFactor, 3);
-  const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewPortWidthOffset}) * ${linearFactorScaled})`;
+  const fluidTargetFontSize = `${minimumFontSizeRem.value}${minimumFontSizeRem.unit} + ((1vw - ${viewportWidthOffset}) * ${linearFactorScaled})`;
   return `clamp(${minimumFontSize}, ${fluidTargetFontSize}, ${maximumFontSize})`;
 }
 /**

package/build-module/components/font-sizes/fluid-utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/fluid-utils.js"],"names":["DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_SCALE_FACTOR","DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN","DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX","DEFAULT_MINIMUM_FONT_SIZE_LIMIT","getComputedFluidTypographyValue","minimumFontSize","maximumFontSize","fontSize","minimumViewPortWidth","maximumViewPortWidth","scaleFactor","minimumFontSizeLimit","getTypographyValueAndUnit","fontSizeParsed","unit","minimumFontSizeLimitParsed","coerceTo","value","fontSizeValueInPx","minimumFontSizeFactor","Math","min","max","log2","calculatedMinimumFontSize","roundToPrecision","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","minimumFontSizeRem","maximumViewPortWidthParsed","minumumViewPortWidthParsed","minViewPortWidthOffsetValue","viewPortWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","isFinite","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","base","pow","Number","round","undefined"],"mappings":"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","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n// Defaults.\nconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\nconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';\nconst DEFAULT_SCALE_FACTOR = 1;\nconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;\nconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;\nconst DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';\n\n/**\n * Computes a fluid font-size value that uses clamp(). A minimum and maximum\n * font size OR a single font size can be specified.\n *\n * If a single font size is specified, it is scaled up and down using a logarithmic scale.\n *\n * @example\n * ```js\n * // Calculate fluid font-size value from a minimum and maximum value.\n * const fontSize = getComputedFluidTypographyValue( {\n *     minimumFontSize: '20px',\n *     maximumFontSize: '45px'\n * } );\n * // Calculate fluid font-size value from a single font size.\n * const fontSize = getComputedFluidTypographyValue( {\n *     fontSize: '30px',\n * } );\n * ```\n *\n * @param {Object}        args\n * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.\n * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.\n * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.\n * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.\n * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.\n * @param {?number}       args.scaleFactor          A scale factor to determine how fast a font scales within boundaries. Optional.\n * @param {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tminimumFontSize,\n\tmaximumFontSize,\n\tfontSize,\n\tminimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\tmaximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\tscaleFactor = DEFAULT_SCALE_FACTOR,\n\tminimumFontSizeLimit,\n} ) {\n\t// Validate incoming settings and set defaults.\n\tminimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit )\n\t\t? minimumFontSizeLimit\n\t\t: DEFAULT_MINIMUM_FONT_SIZE_LIMIT;\n\n\t/*\n\t * Calculates missing minimumFontSize and maximumFontSize from\n\t * defaultFontSize if provided.\n\t */\n\tif ( fontSize ) {\n\t\t// Parses default font size.\n\t\tconst fontSizeParsed = getTypographyValueAndUnit( fontSize );\n\n\t\t// Protect against invalid units.\n\t\tif ( ! fontSizeParsed?.unit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Parses the minimum font size limit, so we can perform checks using it.\n\t\tconst minimumFontSizeLimitParsed = getTypographyValueAndUnit(\n\t\t\tminimumFontSizeLimit,\n\t\t\t{\n\t\t\t\tcoerceTo: fontSizeParsed.unit,\n\t\t\t}\n\t\t);\n\n\t\t// Don't enforce minimum font size if a font size has explicitly set a min and max value.\n\t\tif (\n\t\t\t!! minimumFontSizeLimitParsed?.value &&\n\t\t\t! minimumFontSize &&\n\t\t\t! maximumFontSize\n\t\t) {\n\t\t\t/*\n\t\t\t * If a minimum size was not passed to this function\n\t\t\t * and the user-defined font size is lower than $minimum_font_size_limit,\n\t\t\t * do not calculate a fluid value.\n\t\t\t */\n\t\t\tif ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\n\t\t// If no fluid max font size is available use the incoming value.\n\t\tif ( ! maximumFontSize ) {\n\t\t\tmaximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;\n\t\t}\n\n\t\t/*\n\t\t * If no minimumFontSize is provided, create one using\n\t\t * the given font size multiplied by the min font size scale factor.\n\t\t */\n\t\tif ( ! minimumFontSize ) {\n\t\t\tconst fontSizeValueInPx =\n\t\t\t\tfontSizeParsed.unit === 'px'\n\t\t\t\t\t? fontSizeParsed.value\n\t\t\t\t\t: fontSizeParsed.value * 16;\n\n\t\t\t/*\n\t\t\t * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,\n\t\t\t * that is, how quickly the size factor reaches 0 given increasing font size values.\n\t\t\t * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.\n\t\t\t * The scale factor is constrained between min and max values.\n\t\t\t */\n\t\t\tconst minimumFontSizeFactor = Math.min(\n\t\t\t\tMath.max(\n\t\t\t\t\t1 - 0.075 * Math.log2( fontSizeValueInPx ),\n\t\t\t\t\tDEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN\n\t\t\t\t),\n\t\t\t\tDEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX\n\t\t\t);\n\n\t\t\t// Calculates the minimum font size.\n\t\t\tconst calculatedMinimumFontSize = roundToPrecision(\n\t\t\t\tfontSizeParsed.value * minimumFontSizeFactor,\n\t\t\t\t3\n\t\t\t);\n\n\t\t\t// Only use calculated min font size if it's > $minimum_font_size_limit value.\n\t\t\tif (\n\t\t\t\t!! minimumFontSizeLimitParsed?.value &&\n\t\t\t\tcalculatedMinimumFontSize < minimumFontSizeLimitParsed?.value\n\t\t\t) {\n\t\t\t\tminimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;\n\t\t\t} else {\n\t\t\t\tminimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Grab the minimum font size and normalize it in order to use the value for calculations.\n\tconst minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );\n\n\t// We get a 'preferred' unit to keep units consistent when calculating,\n\t// otherwise the result will not be accurate.\n\tconst fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';\n\n\t// Grabs the maximum font size and normalize it in order to use the value for calculations.\n\tconst maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {\n\t\tcoerceTo: fontSizeUnit,\n\t} );\n\n\t// Checks for mandatory min and max sizes, and protects against unsupported units.\n\tif ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {\n\t\treturn null;\n\t}\n\n\t// Uses rem for accessible fluid target font scaling.\n\tconst minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {\n\t\tcoerceTo: 'rem',\n\t} );\n\n\t// Viewport widths defined for fluid typography. Normalize units\n\tconst maximumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tmaximumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\tconst minumumViewPortWidthParsed = getTypographyValueAndUnit(\n\t\tminimumViewPortWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\n\t// Protect against unsupported units.\n\tif (\n\t\t! maximumViewPortWidthParsed ||\n\t\t! minumumViewPortWidthParsed ||\n\t\t! minimumFontSizeRem\n\t) {\n\t\treturn null;\n\t}\n\n\t// Build CSS rule.\n\t// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.\n\tconst minViewPortWidthOffsetValue = roundToPrecision(\n\t\tminumumViewPortWidthParsed.value / 100,\n\t\t3\n\t);\n\n\tconst viewPortWidthOffset =\n\t\troundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit;\n\tconst linearFactor =\n\t\t100 *\n\t\t( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /\n\t\t\t( maximumViewPortWidthParsed.value -\n\t\t\t\tminumumViewPortWidthParsed.value ) );\n\tconst linearFactorScaled = roundToPrecision(\n\t\t( linearFactor || 1 ) * scaleFactor,\n\t\t3\n\t);\n\tconst fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;\n\n\treturn `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;\n}\n\n/**\n * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].\n * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.\n *\n * @param {string|number}    rawValue Raw size value from theme.json.\n * @param {Object|undefined} options  Calculation options.\n *\n * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.\n */\nexport function getTypographyValueAndUnit( rawValue, options = {} ) {\n\tif ( typeof rawValue !== 'string' && typeof rawValue !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Converts numeric values to pixel values by default.\n\tif ( isFinite( rawValue ) ) {\n\t\trawValue = `${ rawValue }px`;\n\t}\n\n\tconst { coerceTo, rootSizeValue, acceptableUnits } = {\n\t\tcoerceTo: '',\n\t\t// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( \"html\" ) ).fontSize`.\n\t\trootSizeValue: 16,\n\t\tacceptableUnits: [ 'rem', 'px', 'em' ],\n\t\t...options,\n\t};\n\n\tconst acceptableUnitsGroup = acceptableUnits?.join( '|' );\n\tconst regexUnits = new RegExp(\n\t\t`^(\\\\d*\\\\.?\\\\d+)(${ acceptableUnitsGroup }){1,1}$`\n\t);\n\n\tconst matches = rawValue.match( regexUnits );\n\n\t// We need a number value and a unit.\n\tif ( ! matches || matches.length < 3 ) {\n\t\treturn null;\n\t}\n\n\tlet [ , value, unit ] = matches;\n\n\tlet returnValue = parseFloat( value );\n\n\tif ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {\n\t\treturnValue = returnValue * rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\tif ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {\n\t\treturnValue = returnValue / rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\t/*\n\t * No calculation is required if swapping between em and rem yet,\n\t * since we assume a root size value. Later we might like to differentiate between\n\t * :root font size (rem) and parent element font size (em) relativity.\n\t */\n\tif (\n\t\t( 'em' === coerceTo || 'rem' === coerceTo ) &&\n\t\t( 'em' === unit || 'rem' === unit )\n\t) {\n\t\tunit = coerceTo;\n\t}\n\n\treturn {\n\t\tvalue: roundToPrecision( returnValue, 3 ),\n\t\tunit,\n\t};\n}\n\n/**\n * Returns a value rounded to defined precision.\n * Returns `undefined` if the value is not a valid finite number.\n *\n * @param {number} value  Raw value.\n * @param {number} digits The number of digits to appear after the decimal point\n *\n * @return {number|undefined} Value rounded to standard precision.\n */\nexport function roundToPrecision( value, digits = 3 ) {\n\tconst base = Math.pow( 10, digits );\n\treturn Number.isFinite( value )\n\t\t? parseFloat( Math.round( value * base ) / base )\n\t\t: undefined;\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/components/font-sizes/fluid-utils.js"],"names":["DEFAULT_MAXIMUM_VIEWPORT_WIDTH","DEFAULT_MINIMUM_VIEWPORT_WIDTH","DEFAULT_SCALE_FACTOR","DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN","DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX","DEFAULT_MINIMUM_FONT_SIZE_LIMIT","getComputedFluidTypographyValue","minimumFontSize","maximumFontSize","fontSize","minimumViewportWidth","maximumViewportWidth","scaleFactor","minimumFontSizeLimit","getTypographyValueAndUnit","fontSizeParsed","unit","minimumFontSizeLimitParsed","coerceTo","value","fontSizeValueInPx","minimumFontSizeFactor","Math","min","max","log2","calculatedMinimumFontSize","roundToPrecision","minimumFontSizeParsed","fontSizeUnit","maximumFontSizeParsed","minimumFontSizeRem","maximumViewportWidthParsed","minimumViewportWidthParsed","minViewportWidthOffsetValue","viewportWidthOffset","linearFactor","linearFactorScaled","fluidTargetFontSize","rawValue","options","isFinite","rootSizeValue","acceptableUnits","acceptableUnitsGroup","join","regexUnits","RegExp","matches","match","length","returnValue","parseFloat","digits","base","pow","Number","round","undefined"],"mappings":"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","sourcesContent":["/**\n * The fluid utilities must match the backend equivalent.\n * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php\n * ---------------------------------------------------------------\n */\n\n// Defaults.\nconst DEFAULT_MAXIMUM_VIEWPORT_WIDTH = '1600px';\nconst DEFAULT_MINIMUM_VIEWPORT_WIDTH = '320px';\nconst DEFAULT_SCALE_FACTOR = 1;\nconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN = 0.25;\nconst DEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX = 0.75;\nconst DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';\n\n/**\n * Computes a fluid font-size value that uses clamp(). A minimum and maximum\n * font size OR a single font size can be specified.\n *\n * If a single font size is specified, it is scaled up and down using a logarithmic scale.\n *\n * @example\n * ```js\n * // Calculate fluid font-size value from a minimum and maximum value.\n * const fontSize = getComputedFluidTypographyValue( {\n *     minimumFontSize: '20px',\n *     maximumFontSize: '45px'\n * } );\n * // Calculate fluid font-size value from a single font size.\n * const fontSize = getComputedFluidTypographyValue( {\n *     fontSize: '30px',\n * } );\n * ```\n *\n * @param {Object}        args\n * @param {?string}       args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.\n * @param {?string}       args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.\n * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.\n * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.\n * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.\n * @param {?number}       args.scaleFactor          A scale factor to determine how fast a font scales within boundaries. Optional.\n * @param {?string}       args.minimumFontSizeLimit The smallest a calculated font size may be. Optional.\n *\n * @return {string|null} A font-size value using clamp().\n */\nexport function getComputedFluidTypographyValue( {\n\tminimumFontSize,\n\tmaximumFontSize,\n\tfontSize,\n\tminimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,\n\tmaximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,\n\tscaleFactor = DEFAULT_SCALE_FACTOR,\n\tminimumFontSizeLimit,\n} ) {\n\t// Validate incoming settings and set defaults.\n\tminimumFontSizeLimit = !! getTypographyValueAndUnit( minimumFontSizeLimit )\n\t\t? minimumFontSizeLimit\n\t\t: DEFAULT_MINIMUM_FONT_SIZE_LIMIT;\n\n\t/*\n\t * Calculates missing minimumFontSize and maximumFontSize from\n\t * defaultFontSize if provided.\n\t */\n\tif ( fontSize ) {\n\t\t// Parses default font size.\n\t\tconst fontSizeParsed = getTypographyValueAndUnit( fontSize );\n\n\t\t// Protect against invalid units.\n\t\tif ( ! fontSizeParsed?.unit ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Parses the minimum font size limit, so we can perform checks using it.\n\t\tconst minimumFontSizeLimitParsed = getTypographyValueAndUnit(\n\t\t\tminimumFontSizeLimit,\n\t\t\t{\n\t\t\t\tcoerceTo: fontSizeParsed.unit,\n\t\t\t}\n\t\t);\n\n\t\t// Don't enforce minimum font size if a font size has explicitly set a min and max value.\n\t\tif (\n\t\t\t!! minimumFontSizeLimitParsed?.value &&\n\t\t\t! minimumFontSize &&\n\t\t\t! maximumFontSize\n\t\t) {\n\t\t\t/*\n\t\t\t * If a minimum size was not passed to this function\n\t\t\t * and the user-defined font size is lower than $minimum_font_size_limit,\n\t\t\t * do not calculate a fluid value.\n\t\t\t */\n\t\t\tif ( fontSizeParsed?.value <= minimumFontSizeLimitParsed?.value ) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t}\n\n\t\t// If no fluid max font size is available use the incoming value.\n\t\tif ( ! maximumFontSize ) {\n\t\t\tmaximumFontSize = `${ fontSizeParsed.value }${ fontSizeParsed.unit }`;\n\t\t}\n\n\t\t/*\n\t\t * If no minimumFontSize is provided, create one using\n\t\t * the given font size multiplied by the min font size scale factor.\n\t\t */\n\t\tif ( ! minimumFontSize ) {\n\t\t\tconst fontSizeValueInPx =\n\t\t\t\tfontSizeParsed.unit === 'px'\n\t\t\t\t\t? fontSizeParsed.value\n\t\t\t\t\t: fontSizeParsed.value * 16;\n\n\t\t\t/*\n\t\t\t * The scale factor is a multiplier that affects how quickly the curve will move towards the minimum,\n\t\t\t * that is, how quickly the size factor reaches 0 given increasing font size values.\n\t\t\t * For a - b * log2(), lower values of b will make the curve move towards the minimum faster.\n\t\t\t * The scale factor is constrained between min and max values.\n\t\t\t */\n\t\t\tconst minimumFontSizeFactor = Math.min(\n\t\t\t\tMath.max(\n\t\t\t\t\t1 - 0.075 * Math.log2( fontSizeValueInPx ),\n\t\t\t\t\tDEFAULT_MINIMUM_FONT_SIZE_FACTOR_MIN\n\t\t\t\t),\n\t\t\t\tDEFAULT_MINIMUM_FONT_SIZE_FACTOR_MAX\n\t\t\t);\n\n\t\t\t// Calculates the minimum font size.\n\t\t\tconst calculatedMinimumFontSize = roundToPrecision(\n\t\t\t\tfontSizeParsed.value * minimumFontSizeFactor,\n\t\t\t\t3\n\t\t\t);\n\n\t\t\t// Only use calculated min font size if it's > $minimum_font_size_limit value.\n\t\t\tif (\n\t\t\t\t!! minimumFontSizeLimitParsed?.value &&\n\t\t\t\tcalculatedMinimumFontSize < minimumFontSizeLimitParsed?.value\n\t\t\t) {\n\t\t\t\tminimumFontSize = `${ minimumFontSizeLimitParsed.value }${ minimumFontSizeLimitParsed.unit }`;\n\t\t\t} else {\n\t\t\t\tminimumFontSize = `${ calculatedMinimumFontSize }${ fontSizeParsed.unit }`;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Grab the minimum font size and normalize it in order to use the value for calculations.\n\tconst minimumFontSizeParsed = getTypographyValueAndUnit( minimumFontSize );\n\n\t// We get a 'preferred' unit to keep units consistent when calculating,\n\t// otherwise the result will not be accurate.\n\tconst fontSizeUnit = minimumFontSizeParsed?.unit || 'rem';\n\n\t// Grabs the maximum font size and normalize it in order to use the value for calculations.\n\tconst maximumFontSizeParsed = getTypographyValueAndUnit( maximumFontSize, {\n\t\tcoerceTo: fontSizeUnit,\n\t} );\n\n\t// Checks for mandatory min and max sizes, and protects against unsupported units.\n\tif ( ! minimumFontSizeParsed || ! maximumFontSizeParsed ) {\n\t\treturn null;\n\t}\n\n\t// Uses rem for accessible fluid target font scaling.\n\tconst minimumFontSizeRem = getTypographyValueAndUnit( minimumFontSize, {\n\t\tcoerceTo: 'rem',\n\t} );\n\n\t// Viewport widths defined for fluid typography. Normalize units\n\tconst maximumViewportWidthParsed = getTypographyValueAndUnit(\n\t\tmaximumViewportWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\tconst minimumViewportWidthParsed = getTypographyValueAndUnit(\n\t\tminimumViewportWidth,\n\t\t{ coerceTo: fontSizeUnit }\n\t);\n\n\t// Protect against unsupported units.\n\tif (\n\t\t! maximumViewportWidthParsed ||\n\t\t! minimumViewportWidthParsed ||\n\t\t! minimumFontSizeRem\n\t) {\n\t\treturn null;\n\t}\n\n\t// Build CSS rule.\n\t// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.\n\tconst minViewportWidthOffsetValue = roundToPrecision(\n\t\tminimumViewportWidthParsed.value / 100,\n\t\t3\n\t);\n\n\tconst viewportWidthOffset =\n\t\troundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit;\n\tconst linearFactor =\n\t\t100 *\n\t\t( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /\n\t\t\t( maximumViewportWidthParsed.value -\n\t\t\t\tminimumViewportWidthParsed.value ) );\n\tconst linearFactorScaled = roundToPrecision(\n\t\t( linearFactor || 1 ) * scaleFactor,\n\t\t3\n\t);\n\tconst fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewportWidthOffset }) * ${ linearFactorScaled })`;\n\n\treturn `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;\n}\n\n/**\n * Internal method that checks a string for a unit and value and returns an array consisting of `'value'` and `'unit'`, e.g., [ '42', 'rem' ].\n * A raw font size of `value + unit` is expected. If the value is an integer, it will convert to `value + 'px'`.\n *\n * @param {string|number}    rawValue Raw size value from theme.json.\n * @param {Object|undefined} options  Calculation options.\n *\n * @return {{ unit: string, value: number }|null} An object consisting of `'value'` and `'unit'` properties.\n */\nexport function getTypographyValueAndUnit( rawValue, options = {} ) {\n\tif ( typeof rawValue !== 'string' && typeof rawValue !== 'number' ) {\n\t\treturn null;\n\t}\n\n\t// Converts numeric values to pixel values by default.\n\tif ( isFinite( rawValue ) ) {\n\t\trawValue = `${ rawValue }px`;\n\t}\n\n\tconst { coerceTo, rootSizeValue, acceptableUnits } = {\n\t\tcoerceTo: '',\n\t\t// Default browser font size. Later we could inject some JS to compute this `getComputedStyle( document.querySelector( \"html\" ) ).fontSize`.\n\t\trootSizeValue: 16,\n\t\tacceptableUnits: [ 'rem', 'px', 'em' ],\n\t\t...options,\n\t};\n\n\tconst acceptableUnitsGroup = acceptableUnits?.join( '|' );\n\tconst regexUnits = new RegExp(\n\t\t`^(\\\\d*\\\\.?\\\\d+)(${ acceptableUnitsGroup }){1,1}$`\n\t);\n\n\tconst matches = rawValue.match( regexUnits );\n\n\t// We need a number value and a unit.\n\tif ( ! matches || matches.length < 3 ) {\n\t\treturn null;\n\t}\n\n\tlet [ , value, unit ] = matches;\n\n\tlet returnValue = parseFloat( value );\n\n\tif ( 'px' === coerceTo && ( 'em' === unit || 'rem' === unit ) ) {\n\t\treturnValue = returnValue * rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\tif ( 'px' === unit && ( 'em' === coerceTo || 'rem' === coerceTo ) ) {\n\t\treturnValue = returnValue / rootSizeValue;\n\t\tunit = coerceTo;\n\t}\n\n\t/*\n\t * No calculation is required if swapping between em and rem yet,\n\t * since we assume a root size value. Later we might like to differentiate between\n\t * :root font size (rem) and parent element font size (em) relativity.\n\t */\n\tif (\n\t\t( 'em' === coerceTo || 'rem' === coerceTo ) &&\n\t\t( 'em' === unit || 'rem' === unit )\n\t) {\n\t\tunit = coerceTo;\n\t}\n\n\treturn {\n\t\tvalue: roundToPrecision( returnValue, 3 ),\n\t\tunit,\n\t};\n}\n\n/**\n * Returns a value rounded to defined precision.\n * Returns `undefined` if the value is not a valid finite number.\n *\n * @param {number} value  Raw value.\n * @param {number} digits The number of digits to appear after the decimal point\n *\n * @return {number|undefined} Value rounded to standard precision.\n */\nexport function roundToPrecision( value, digits = 3 ) {\n\tconst base = Math.pow( 10, digits );\n\treturn Number.isFinite( value )\n\t\t? parseFloat( Math.round( value * base ) / base )\n\t\t: undefined;\n}\n"]}

package/build-module/components/global-styles/behaviors-panel.js

@@ -0,0 +1,57 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+export default function ({
+  onChange,
+  value,
+  behaviors
+}) {
+  const defaultBehaviors = {
+    default: {
+      value: 'default',
+      label: __('Default')
+    },
+    noBehaviors: {
+      value: '',
+      label: __('No behaviors')
+    }
+  };
+  const behaviorsOptions = Object.entries(behaviors).map(([behaviorName]) => ({
+    value: behaviorName,
+    // Capitalize the first letter of the behavior name.
+    label: `${behaviorName.charAt(0).toUpperCase()}${behaviorName.slice(1).toLowerCase()}`
+  }));
+  const options = [...Object.values(defaultBehaviors), ...behaviorsOptions];
+  const animations = [{
+    value: 'zoom',
+    label: __('Zoom')
+  }, {
+    value: 'fade',
+    label: __('Fade')
+  }];
+  return createElement("div", {
+    style: {
+      marginTop: '2rem'
+    }
+  }, createElement(SelectControl, {
+    label: __('Behaviors') // At the moment we are only supporting one behavior (Lightbox)
+    ,
+    value: value,
+    options: options,
+    onChange: onChange,
+    hideCancelButton: true,
+    size: "__unstable-large"
+  }), value === 'lightbox' && createElement(SelectControl, {
+    label: __('Animation'),
+    value: behaviors?.lightbox.animation ? behaviors?.lightbox.animation : '',
+    options: animations,
+    onChange: onChange,
+    hideCancelButton: false,
+    size: "__unstable-large"
+  }));
+}
+//# sourceMappingURL=behaviors-panel.js.map

package/build-module/components/global-styles/behaviors-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-editor/src/components/global-styles/behaviors-panel.js"],"names":["SelectControl","__","onChange","value","behaviors","defaultBehaviors","default","label","noBehaviors","behaviorsOptions","Object","entries","map","behaviorName","charAt","toUpperCase","slice","toLowerCase","options","values","animations","marginTop","lightbox","animation"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,UAAW;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,KAAZ;AAAmBC,EAAAA;AAAnB,CAAX,EAA4C;AAC1D,QAAMC,gBAAgB,GAAG;AACxBC,IAAAA,OAAO,EAAE;AACRH,MAAAA,KAAK,EAAE,SADC;AAERI,MAAAA,KAAK,EAAEN,EAAE,CAAE,SAAF;AAFD,KADe;AAKxBO,IAAAA,WAAW,EAAE;AACZL,MAAAA,KAAK,EAAE,EADK;AAEZI,MAAAA,KAAK,EAAEN,EAAE,CAAE,cAAF;AAFG;AALW,GAAzB;AAWA,QAAMQ,gBAAgB,GAAGC,MAAM,CAACC,OAAP,CAAgBP,SAAhB,EAA4BQ,GAA5B,CACxB,CAAE,CAAEC,YAAF,CAAF,MAA0B;AACzBV,IAAAA,KAAK,EAAEU,YADkB;AAEzB;AACAN,IAAAA,KAAK,EAAG,GAAGM,YAAY,CAACC,MAAb,CAAqB,CAArB,EAAyBC,WAAzB,EAAwC,GAAGF,YAAY,CAChEG,KADoD,CAC7C,CAD6C,EAEpDC,WAFoD,EAErC;AALQ,GAA1B,CADwB,CAAzB;AAUA,QAAMC,OAAO,GAAG,CACf,GAAGR,MAAM,CAACS,MAAP,CAAed,gBAAf,CADY,EAEf,GAAGI,gBAFY,CAAhB;AAKA,QAAMW,UAAU,GAAG,CAClB;AACCjB,IAAAA,KAAK,EAAE,MADR;AAECI,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFV,GADkB,EAKlB;AACCE,IAAAA,KAAK,EAAE,MADR;AAECI,IAAAA,KAAK,EAAEN,EAAE,CAAE,MAAF;AAFV,GALkB,CAAnB;AAUA,SACC;AAAK,IAAA,KAAK,EAAG;AAAEoB,MAAAA,SAAS,EAAE;AAAb;AAAb,KACC,cAAC,aAAD;AACC,IAAA,KAAK,EAAGpB,EAAE,CAAE,WAAF,CADX,CAEC;AAFD;AAGC,IAAA,KAAK,EAAGE,KAHT;AAIC,IAAA,OAAO,EAAGe,OAJX;AAKC,IAAA,QAAQ,EAAGhB,QALZ;AAMC,IAAA,gBAAgB,EAAG,IANpB;AAOC,IAAA,IAAI,EAAC;AAPN,IADD,EAUGC,KAAK,KAAK,UAAV,IACD,cAAC,aAAD;AACC,IAAA,KAAK,EAAGF,EAAE,CAAE,WAAF,CADX;AAEC,IAAA,KAAK,EACJG,SAAS,EAAEkB,QAAX,CAAoBC,SAApB,GACGnB,SAAS,EAAEkB,QAAX,CAAoBC,SADvB,GAEG,EALL;AAOC,IAAA,OAAO,EAAGH,UAPX;AAQC,IAAA,QAAQ,EAAGlB,QARZ;AASC,IAAA,gBAAgB,EAAG,KATpB;AAUC,IAAA,IAAI,EAAC;AAVN,IAXF,CADD;AA2BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ( { onChange, value, behaviors } ) {\n\tconst defaultBehaviors = {\n\t\tdefault: {\n\t\t\tvalue: 'default',\n\t\t\tlabel: __( 'Default' ),\n\t\t},\n\t\tnoBehaviors: {\n\t\t\tvalue: '',\n\t\t\tlabel: __( 'No behaviors' ),\n\t\t},\n\t};\n\n\tconst behaviorsOptions = Object.entries( behaviors ).map(\n\t\t( [ behaviorName ] ) => ( {\n\t\t\tvalue: behaviorName,\n\t\t\t// Capitalize the first letter of the behavior name.\n\t\t\tlabel: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName\n\t\t\t\t.slice( 1 )\n\t\t\t\t.toLowerCase() }`,\n\t\t} )\n\t);\n\n\tconst options = [\n\t\t...Object.values( defaultBehaviors ),\n\t\t...behaviorsOptions,\n\t];\n\n\tconst animations = [\n\t\t{\n\t\t\tvalue: 'zoom',\n\t\t\tlabel: __( 'Zoom' ),\n\t\t},\n\t\t{\n\t\t\tvalue: 'fade',\n\t\t\tlabel: __( 'Fade' ),\n\t\t},\n\t];\n\treturn (\n\t\t<div style={ { marginTop: '2rem' } }>\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'Behaviors' ) }\n\t\t\t\t// At the moment we are only supporting one behavior (Lightbox)\n\t\t\t\tvalue={ value }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideCancelButton={ true }\n\t\t\t\tsize=\"__unstable-large\"\n\t\t\t/>\n\t\t\t{ value === 'lightbox' && (\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'Animation' ) }\n\t\t\t\t\tvalue={\n\t\t\t\t\t\tbehaviors?.lightbox.animation\n\t\t\t\t\t\t\t? behaviors?.lightbox.animation\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t\toptions={ animations }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\thideCancelButton={ false }\n\t\t\t\t\tsize=\"__unstable-large\"\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"]}

package/build-module/components/global-styles/color-panel.js

@@ -243,20 +243,7 @@ export default function ColorPanel({
       gradient
     }) => gradient === gradientValue);
     return gradientObject ? 'var:preset|gradient|' + gradientObject.slug : gradientValue;
-  }; // Text Color
-
-
-  const showTextPanel = useHasTextPanel(settings);
-  const textColor = decodeValue(inheritedValue?.color?.text);
-  const userTextColor = decodeValue(value?.color?.text);
-
-  const hasTextColor = () => !!userTextColor;
-
-  const setTextColor = newColor => {
-    onChange(setImmutably(value, ['color', 'text'], encodeColorValue(newColor)));
-  };
-
-  const resetTextColor = () => setTextColor(undefined); // BackgroundColor
+  }; // BackgroundColor
 
 
   const showBackgroundPanel = useHasBackgroundPanel(settings);
@@ -307,7 +294,26 @@ export default function ColorPanel({
     let newValue = setImmutably(value, ['elements', 'link', ':hover', 'color', 'text'], undefined);
     newValue = setImmutably(newValue, ['elements', 'link', 'color', 'text'], undefined);
     onChange(newValue);
-  }; // Elements
+  }; // Text Color
+
+
+  const showTextPanel = useHasTextPanel(settings);
+  const textColor = decodeValue(inheritedValue?.color?.text);
+  const userTextColor = decodeValue(value?.color?.text);
+
+  const hasTextColor = () => !!userTextColor;
+
+  const setTextColor = newColor => {
+    let changedObject = setImmutably(value, ['color', 'text'], encodeColorValue(newColor));
+
+    if (textColor === linkColor) {
+      changedObject = setImmutably(changedObject, ['elements', 'link', 'color', 'text'], encodeColorValue(newColor));
+    }
+
+    onChange(changedObject);
+  };
+
+  const resetTextColor = () => setTextColor(undefined); // Elements
 
 
   const elements = [{