@wordpress/format-library 4.35.0 → 5.0.1

package/build-module/text-color/inline.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -14,6 +13,8 @@ import { __ } from '@wordpress/i18n';
  */
 import { textColor as settings, transparentValue } from './index';
 import { unlock } from '../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Tabs
 } = unlock(componentsPrivateApis);
@@ -117,7 +118,7 @@ function ColorPicker({
     }));
   }, [colors, onChange, property]);
   const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
-  return createElement(ColorPalette, {
+  return /*#__PURE__*/_jsx(ColorPalette, {
     value: activeColors[property],
     onChange: onColorChange
   });
@@ -137,22 +138,27 @@ export default function InlineColorUI({
       isActive
     }
   });
-  return createElement(Popover, {
+  return /*#__PURE__*/_jsx(Popover, {
     onClose: onClose,
     className: "format-library__inline-color-popover",
-    anchor: popoverAnchor
-  }, createElement(Tabs, null, createElement(Tabs.TabList, null, TABS.map(tab => createElement(Tabs.Tab, {
-    tabId: tab.name,
-    key: tab.name
-  }, tab.title))), TABS.map(tab => createElement(Tabs.TabPanel, {
-    tabId: tab.name,
-    focusable: false,
-    key: tab.name
-  }, createElement(ColorPicker, {
-    name: name,
-    property: tab.name,
-    value: value,
-    onChange: onChange
-  })))));
+    anchor: popoverAnchor,
+    children: /*#__PURE__*/_jsxs(Tabs, {
+      children: [/*#__PURE__*/_jsx(Tabs.TabList, {
+        children: TABS.map(tab => /*#__PURE__*/_jsx(Tabs.Tab, {
+          tabId: tab.name,
+          children: tab.title
+        }, tab.name))
+      }), TABS.map(tab => /*#__PURE__*/_jsx(Tabs.TabPanel, {
+        tabId: tab.name,
+        focusable: false,
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          name: name,
+          property: tab.name,
+          value: value,
+          onChange: onChange
+        })
+      }, tab.name))]
+    })
+  });
 }
 //# sourceMappingURL=inline.js.map

package/build-module/text-color/inline.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchor","ColorPalette","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","Popover","privateApis","componentsPrivateApis","__","textColor","settings","transparentValue","unlock","Tabs","TABS","name","title","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","startsWith","endsWith","colorSlug","replace","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","_getSettings$colors","getSettings","onColorChange","activeColors","createElement","InlineColorUI","onClose","contentRef","isActive","popoverAnchor","editableContentElement","current","anchor","TabList","map","tab","Tab","tabId","key","TabPanel","focusable"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tPopover,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings, transparentValue } from './index';\nimport { unlock } from '../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst TABS = [\n\t{ name: 'color', title: __( 'Text' ) },\n\t{ name: 'backgroundColor', title: __( 'Background' ) },\n];\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) {\n\t\t\t\taccumulator.color = value;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tproperty === 'background-color' &&\n\t\t\t\tvalue !== transparentValue\n\t\t\t) {\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t\t}\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\t// `colorSlug` could contain dashes, so simply match the start and end.\n\t\tif ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {\n\t\t\tconst colorSlug = name\n\t\t\t\t.replace( /^has-/, '' )\n\t\t\t\t.replace( /-color$/, '' );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) {\n\t\tattributes.style = styles.join( ';' );\n\t}\n\tif ( classNames.length ) {\n\t\tattributes.class = classNames.join( ' ' );\n\t}\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().colors ?? [];\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n\tisActive,\n} ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: { ...settings, isActive },\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"format-library__inline-color-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t>\n\t\t\t<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.Tab tabId={ tab.name } key={ tab.name }>\n\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t) ) }\n\t\t\t</Tabs>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchor","ColorPalette","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","Popover","privateApis","componentsPrivateApis","__","textColor","settings","transparentValue","unlock","jsx","_jsx","jsxs","_jsxs","Tabs","TABS","name","title","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","startsWith","endsWith","colorSlug","replace","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","_getSettings$colors","getSettings","onColorChange","activeColors","InlineColorUI","onClose","contentRef","isActive","popoverAnchor","editableContentElement","current","anchor","children","TabList","map","tab","Tab","tabId","TabPanel","focusable"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchor,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\tPopover,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings, transparentValue } from './index';\nimport { unlock } from '../lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nconst TABS = [\n\t{ name: 'color', title: __( 'Text' ) },\n\t{ name: 'backgroundColor', title: __( 'Background' ) },\n];\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.split( ':' );\n\t\t\tif ( property === 'color' ) {\n\t\t\t\taccumulator.color = value;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tproperty === 'background-color' &&\n\t\t\t\tvalue !== transparentValue\n\t\t\t) {\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t\t}\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\t// `colorSlug` could contain dashes, so simply match the start and end.\n\t\tif ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {\n\t\t\tconst colorSlug = name\n\t\t\t\t.replace( /^has-/, '' )\n\t\t\t\t.replace( /-color$/, '' );\n\t\t\tconst colorObject = getColorObjectByAttributeValues(\n\t\t\t\tcolorSettings,\n\t\t\t\tcolorSlug\n\t\t\t);\n\t\t\taccumulator.color = colorObject.color;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) {\n\t\tattributes.style = styles.join( ';' );\n\t}\n\tif ( classNames.length ) {\n\t\tattributes.class = classNames.join( ' ' );\n\t}\n\n\treturn applyFormat( value, { type: name, attributes } );\n}\n\nfunction ColorPicker( { name, property, value, onChange } ) {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn getSettings().colors ?? [];\n\t}, [] );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t);\n\t\t},\n\t\t[ colors, onChange, property ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorPalette\n\t\t\tvalue={ activeColors[ property ] }\n\t\t\tonChange={ onColorChange }\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n\tisActive,\n} ) {\n\tconst popoverAnchor = useAnchor( {\n\t\teditableContentElement: contentRef.current,\n\t\tsettings: { ...settings, isActive },\n\t} );\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"format-library__inline-color-popover\"\n\t\t\tanchor={ popoverAnchor }\n\t\t>\n\t\t\t<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t\t<Tabs.Tab tabId={ tab.name } key={ tab.name }>\n\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t</Tabs.Tab>\n\t\t\t\t\t) ) }\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t{ TABS.map( ( tab ) => (\n\t\t\t\t\t<Tabs.TabPanel\n\t\t\t\t\t\ttabId={ tab.name }\n\t\t\t\t\t\tfocusable={ false }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t>\n\t\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t) ) }\n\t\t\t</Tabs>\n\t\t</Popover>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/text-color/inline.native.js

@@ -1,17 +1,17 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
 import { useCallback, useMemo } from '@wordpress/element';
 import { applyFormat, removeFormat, getActiveFormat } from '@wordpress/rich-text';
-import { getColorClassName, getColorObjectByColorValue, useMultipleOriginColorsAndGradients } from '@wordpress/block-editor';
-import { BottomSheet, ColorSettings, useMobileGlobalStylesColors } from '@wordpress/components';
+import { getColorClassName, getColorObjectByColorValue, useMultipleOriginColorsAndGradients, useMobileGlobalStylesColors } from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { transparentValue } from './index.js';
 import { parseClassName } from './inline.js';
+import { jsx as _jsx } from "react/jsx-runtime";
 function parseCSS(css = '') {
   return css.split(';').reduce((accumulator, rule) => {
     if (rule) {
@@ -91,13 +91,14 @@ function ColorPicker({
   const property = 'color';
   const colors = useMobileGlobalStylesColors();
   const colorSettings = useMultipleOriginColorsAndGradients();
+  colorSettings.allAvailableColors = colors;
   const onColorChange = useCallback(color => {
     onChange(setColors(value, name, colors, {
       [property]: color
     }, contentRef));
   }, [colors, contentRef, name, onChange, value]);
   const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
-  return createElement(ColorSettings, {
+  return /*#__PURE__*/_jsx(ColorSettings, {
     colorValue: activeColors[property],
     onColorChange: onColorChange,
     onColorCleared: onColorChange,
@@ -112,7 +113,7 @@ export default function InlineColorUI({
   onClose,
   contentRef
 }) {
-  return createElement(BottomSheet, {
+  return /*#__PURE__*/_jsx(BottomSheet, {
     isVisible: true,
     onClose: onClose,
     hideHeader: true,
@@ -122,17 +123,20 @@ export default function InlineColorUI({
     },
     hasNavigation: true,
     leftButton: null,
-    testID: "inline-text-color-modal"
-  }, createElement(BottomSheet.NavigationContainer, {
-    animate: true,
-    main: true
-  }, createElement(BottomSheet.NavigationScreen, {
-    name: "text-color"
-  }, createElement(ColorPicker, {
-    name: name,
-    value: value,
-    onChange: onChange,
-    contentRef: contentRef
-  }))));
+    testID: "inline-text-color-modal",
+    children: /*#__PURE__*/_jsx(BottomSheet.NavigationContainer, {
+      animate: true,
+      main: true,
+      children: /*#__PURE__*/_jsx(BottomSheet.NavigationScreen, {
+        name: "text-color",
+        children: /*#__PURE__*/_jsx(ColorPicker, {
+          name: name,
+          value: value,
+          onChange: onChange,
+          contentRef: contentRef
+        })
+      })
+    })
+  });
 }
 //# sourceMappingURL=inline.native.js.map

package/build-module/text-color/inline.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useMemo","applyFormat","removeFormat","getActiveFormat","getColorClassName","getColorObjectByColorValue","useMultipleOriginColorsAndGradients","BottomSheet","ColorSettings","useMobileGlobalStylesColors","transparentValue","parseClassName","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","attributes","style","class","setColors","colors","contentRef","onRemoveMarkFormatting","styles","classNames","push","join","colorObject","slug","length","format","type","hasNoSelection","start","end","onMarkFormatting","ColorPicker","onChange","onColorChange","activeColors","createElement","colorValue","onColorCleared","defaultSettings","hideNavigation","InlineColorUI","onClose","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n} from '@wordpress/block-editor';\nimport {\n\tBottomSheet,\n\tColorSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { transparentValue } from './index.js';\nimport { parseClassName } from './inline.js';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.replace( / /g, '' ).split( ':' );\n\t\t\tif ( property === 'color' ) {\n\t\t\t\taccumulator.color = value;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tproperty === 'background-color' &&\n\t\t\t\tvalue !== transparentValue\n\t\t\t) {\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t\t}\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors, contentRef ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color ) {\n\t\tcontentRef?.onRemoveMarkFormatting();\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t\tstyles.push( [ 'color', colorObject.color ].join( ':' ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) {\n\t\tattributes.style = styles.join( ';' );\n\t}\n\tif ( classNames.length ) {\n\t\tattributes.class = classNames.join( ' ' );\n\t}\n\n\tconst format = { type: name, attributes };\n\tconst hasNoSelection = value.start === value.end;\n\n\tif ( hasNoSelection ) {\n\t\tcontentRef?.onMarkFormatting( color );\n\t}\n\treturn applyFormat( value, format );\n}\n\nfunction ColorPicker( { name, value, onChange, contentRef } ) {\n\tconst property = 'color';\n\tconst colors = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors(\n\t\t\t\t\tvalue,\n\t\t\t\t\tname,\n\t\t\t\t\tcolors,\n\t\t\t\t\t{ [ property ]: color },\n\t\t\t\t\tcontentRef\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ colors, contentRef, name, onChange, value ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorSettings\n\t\t\tcolorValue={ activeColors[ property ] }\n\t\t\tonColorChange={ onColorChange }\n\t\t\tonColorCleared={ onColorChange }\n\t\t\tdefaultSettings={ colorSettings }\n\t\t\thideNavigation\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible\n\t\t\tonClose={ onClose }\n\t\t\thideHeader\n\t\t\tcontentStyle={ { paddingLeft: 0, paddingRight: 0 } }\n\t\t\thasNavigation\n\t\t\tleftButton={ null }\n\t\t\ttestID=\"inline-text-color-modal\"\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen name=\"text-color\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t/>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","applyFormat","removeFormat","getActiveFormat","getColorClassName","getColorObjectByColorValue","useMultipleOriginColorsAndGradients","useMobileGlobalStylesColors","BottomSheet","ColorSettings","transparentValue","parseClassName","jsx","_jsx","parseCSS","css","split","reduce","accumulator","rule","property","value","replace","color","backgroundColor","getActiveColors","name","colorSettings","activeColorFormat","attributes","style","class","setColors","colors","contentRef","onRemoveMarkFormatting","styles","classNames","push","join","colorObject","slug","length","format","type","hasNoSelection","start","end","onMarkFormatting","ColorPicker","onChange","allAvailableColors","onColorChange","activeColors","colorValue","onColorCleared","defaultSettings","hideNavigation","InlineColorUI","onClose","isVisible","hideHeader","contentStyle","paddingLeft","paddingRight","hasNavigation","leftButton","testID","children","NavigationContainer","animate","main","NavigationScreen"],"sources":["@wordpress/format-library/src/text-color/inline.native.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n} from '@wordpress/rich-text';\nimport {\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tuseMultipleOriginColorsAndGradients,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/block-editor';\nimport { BottomSheet, ColorSettings } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { transparentValue } from './index.js';\nimport { parseClassName } from './inline.js';\n\nfunction parseCSS( css = '' ) {\n\treturn css.split( ';' ).reduce( ( accumulator, rule ) => {\n\t\tif ( rule ) {\n\t\t\tconst [ property, value ] = rule.replace( / /g, '' ).split( ':' );\n\t\t\tif ( property === 'color' ) {\n\t\t\t\taccumulator.color = value;\n\t\t\t}\n\t\t\tif (\n\t\t\t\tproperty === 'background-color' &&\n\t\t\t\tvalue !== transparentValue\n\t\t\t) {\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t\t}\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nexport function getActiveColors( value, name, colorSettings ) {\n\tconst activeColorFormat = getActiveFormat( value, name );\n\n\tif ( ! activeColorFormat ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t...parseCSS( activeColorFormat.attributes.style ),\n\t\t...parseClassName( activeColorFormat.attributes.class, colorSettings ),\n\t};\n}\n\nfunction setColors( value, name, colorSettings, colors, contentRef ) {\n\tconst { color, backgroundColor } = {\n\t\t...getActiveColors( value, name, colorSettings ),\n\t\t...colors,\n\t};\n\n\tif ( ! color ) {\n\t\tcontentRef?.onRemoveMarkFormatting();\n\t\treturn removeFormat( value, name );\n\t}\n\n\tconst styles = [];\n\tconst classNames = [];\n\tconst attributes = {};\n\n\tif ( backgroundColor ) {\n\t\tstyles.push( [ 'background-color', backgroundColor ].join( ':' ) );\n\t} else {\n\t\t// Override default browser color for mark element.\n\t\tstyles.push( [ 'background-color', transparentValue ].join( ':' ) );\n\t}\n\n\tif ( color ) {\n\t\tconst colorObject = getColorObjectByColorValue( colorSettings, color );\n\n\t\tif ( colorObject ) {\n\t\t\tclassNames.push( getColorClassName( 'color', colorObject.slug ) );\n\t\t\tstyles.push( [ 'color', colorObject.color ].join( ':' ) );\n\t\t} else {\n\t\t\tstyles.push( [ 'color', color ].join( ':' ) );\n\t\t}\n\t}\n\n\tif ( styles.length ) {\n\t\tattributes.style = styles.join( ';' );\n\t}\n\tif ( classNames.length ) {\n\t\tattributes.class = classNames.join( ' ' );\n\t}\n\n\tconst format = { type: name, attributes };\n\tconst hasNoSelection = value.start === value.end;\n\n\tif ( hasNoSelection ) {\n\t\tcontentRef?.onMarkFormatting( color );\n\t}\n\treturn applyFormat( value, format );\n}\n\nfunction ColorPicker( { name, value, onChange, contentRef } ) {\n\tconst property = 'color';\n\tconst colors = useMobileGlobalStylesColors();\n\tconst colorSettings = useMultipleOriginColorsAndGradients();\n\tcolorSettings.allAvailableColors = colors;\n\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tonChange(\n\t\t\t\tsetColors(\n\t\t\t\t\tvalue,\n\t\t\t\t\tname,\n\t\t\t\t\tcolors,\n\t\t\t\t\t{ [ property ]: color },\n\t\t\t\t\tcontentRef\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ colors, contentRef, name, onChange, value ]\n\t);\n\tconst activeColors = useMemo(\n\t\t() => getActiveColors( value, name, colors ),\n\t\t[ name, value, colors ]\n\t);\n\n\treturn (\n\t\t<ColorSettings\n\t\t\tcolorValue={ activeColors[ property ] }\n\t\t\tonColorChange={ onColorChange }\n\t\t\tonColorCleared={ onColorChange }\n\t\t\tdefaultSettings={ colorSettings }\n\t\t\thideNavigation\n\t\t/>\n\t);\n}\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\treturn (\n\t\t<BottomSheet\n\t\t\tisVisible\n\t\t\tonClose={ onClose }\n\t\t\thideHeader\n\t\t\tcontentStyle={ { paddingLeft: 0, paddingRight: 0 } }\n\t\t\thasNavigation\n\t\t\tleftButton={ null }\n\t\t\ttestID=\"inline-text-color-modal\"\n\t\t>\n\t\t\t<BottomSheet.NavigationContainer animate main>\n\t\t\t\t<BottomSheet.NavigationScreen name=\"text-color\">\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t\t/>\n\t\t\t\t</BottomSheet.NavigationScreen>\n\t\t\t</BottomSheet.NavigationContainer>\n\t\t</BottomSheet>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build-module/underline/index.js

@@ -1,10 +1,12 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { toggleFormat } from '@wordpress/rich-text';
 import { RichTextShortcut, __unstableRichTextInputEvent } from '@wordpress/block-editor';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const name = 'core/underline';
 const title = __('Underline');
 export const underline = {
@@ -28,14 +30,16 @@ export const underline = {
         title
       }));
     };
-    return createElement(Fragment, null, createElement(RichTextShortcut, {
-      type: "primary",
-      character: "u",
-      onUse: onToggle
-    }), createElement(__unstableRichTextInputEvent, {
-      inputType: "formatUnderline",
-      onInput: onToggle
-    }));
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(RichTextShortcut, {
+        type: "primary",
+        character: "u",
+        onUse: onToggle
+      }), /*#__PURE__*/_jsx(__unstableRichTextInputEvent, {
+        inputType: "formatUnderline",
+        onInput: onToggle
+      })]
+    });
   }
 };
 //# sourceMappingURL=index.js.map

package/build-module/underline/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type","createElement","Fragment","character","onUse","inputType","onInput"],"sources":["@wordpress/format-library/src/underline/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\nconst title = __( 'Underline' );\n\nexport const underline = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t\ttitle,\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,sBAAsB;AACnD,SACCC,gBAAgB,EAChBC,4BAA4B,QACtB,yBAAyB;AAEhC,MAAMC,IAAI,GAAG,gBAAgB;AAC7B,MAAMC,KAAK,GAAGL,EAAE,CAAE,WAAY,CAAC;AAE/B,OAAO,MAAMM,SAAS,GAAG;EACxBF,IAAI;EACJC,KAAK;EACLE,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXC,KAAK,EAAE;EACR,CAAC;EACDC,IAAIA,CAAE;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAG;IAC3B,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACtBD,QAAQ,CACPZ,YAAY,CAAEW,KAAK,EAAE;QACpBG,IAAI,EAAEX,IAAI;QACVK,UAAU,EAAE;UACXC,KAAK,EAAE;QACR,CAAC;QACDL;MACD,CAAE,CACH,CAAC;IACF,CAAC;IAED,OACCW,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACd,gBAAgB;MAChBa,IAAI,EAAC,SAAS;MACdG,SAAS,EAAC,GAAG;MACbC,KAAK,EAAGL;IAAU,CAClB,CAAC,EACFE,aAAA,CAACb,4BAA4B;MAC5BiB,SAAS,EAAC,iBAAiB;MAC3BC,OAAO,EAAGP;IAAU,CACpB,CACA,CAAC;EAEL;AACD,CAAC","ignoreList":[]}
+{"version":3,"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type","children","character","onUse","inputType","onInput"],"sources":["@wordpress/format-library/src/underline/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { toggleFormat } from '@wordpress/rich-text';\nimport {\n\tRichTextShortcut,\n\t__unstableRichTextInputEvent,\n} from '@wordpress/block-editor';\n\nconst name = 'core/underline';\nconst title = __( 'Underline' );\n\nexport const underline = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: null,\n\tattributes: {\n\t\tstyle: 'style',\n\t},\n\tedit( { value, onChange } ) {\n\t\tconst onToggle = () => {\n\t\t\tonChange(\n\t\t\t\ttoggleFormat( value, {\n\t\t\t\t\ttype: name,\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tstyle: 'text-decoration: underline;',\n\t\t\t\t\t},\n\t\t\t\t\ttitle,\n\t\t\t\t} )\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<RichTextShortcut\n\t\t\t\t\ttype=\"primary\"\n\t\t\t\t\tcharacter=\"u\"\n\t\t\t\t\tonUse={ onToggle }\n\t\t\t\t/>\n\t\t\t\t<__unstableRichTextInputEvent\n\t\t\t\t\tinputType=\"formatUnderline\"\n\t\t\t\t\tonInput={ onToggle }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,QAAQ,sBAAsB;AACnD,SACCC,gBAAgB,EAChBC,4BAA4B,QACtB,yBAAyB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAEjC,MAAMC,IAAI,GAAG,gBAAgB;AAC7B,MAAMC,KAAK,GAAGX,EAAE,CAAE,WAAY,CAAC;AAE/B,OAAO,MAAMY,SAAS,GAAG;EACxBF,IAAI;EACJC,KAAK;EACLE,OAAO,EAAE,MAAM;EACfC,SAAS,EAAE,IAAI;EACfC,UAAU,EAAE;IACXC,KAAK,EAAE;EACR,CAAC;EACDC,IAAIA,CAAE;IAAEC,KAAK;IAAEC;EAAS,CAAC,EAAG;IAC3B,MAAMC,QAAQ,GAAGA,CAAA,KAAM;MACtBD,QAAQ,CACPlB,YAAY,CAAEiB,KAAK,EAAE;QACpBG,IAAI,EAAEX,IAAI;QACVK,UAAU,EAAE;UACXC,KAAK,EAAE;QACR,CAAC;QACDL;MACD,CAAE,CACH,CAAC;IACF,CAAC;IAED,oBACCF,KAAA,CAAAF,SAAA;MAAAe,QAAA,gBACCjB,IAAA,CAACH,gBAAgB;QAChBmB,IAAI,EAAC,SAAS;QACdE,SAAS,EAAC,GAAG;QACbC,KAAK,EAAGJ;MAAU,CAClB,CAAC,eACFf,IAAA,CAACF,4BAA4B;QAC5BsB,SAAS,EAAC,iBAAiB;QAC3BC,OAAO,EAAGN;MAAU,CACpB,CAAC;IAAA,CACD,CAAC;EAEL;AACD,CAAC","ignoreList":[]}

package/build-module/unknown/index.js

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -6,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';
 import { RichTextToolbarButton } from '@wordpress/block-editor';
 import { help } from '@wordpress/icons';
+import { jsx as _jsx } from "react/jsx-runtime";
 const name = 'core/unknown';
 const title = __('Clear Unknown Formatting');
 function selectionContainsUnknownFormats(value) {
@@ -35,7 +35,7 @@ export const unknown = {
       onChange(removeFormat(value, name));
       onFocus();
     }
-    return createElement(RichTextToolbarButton, {
+    return /*#__PURE__*/_jsx(RichTextToolbarButton, {
       name: "unknown",
       icon: help,
       title: title,

package/build-module/unknown/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["__","removeFormat","slice","isCollapsed","RichTextToolbarButton","help","name","title","selectionContainsUnknownFormats","value","selectedValue","formats","some","format","type","unknown","tagName","className","edit","isActive","onChange","onFocus","onClick","createElement","icon"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nfunction selectionContainsUnknownFormats( value ) {\n\tif ( isCollapsed( value ) ) {\n\t\treturn false;\n\t}\n\n\tconst selectedValue = slice( value );\n\treturn selectedValue.formats.some( ( formats ) => {\n\t\treturn formats.some( ( format ) => format.type === name );\n\t} );\n}\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tif ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,EAAEC,KAAK,EAAEC,WAAW,QAAQ,sBAAsB;AACvE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,IAAI,QAAQ,kBAAkB;AAEvC,MAAMC,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAGP,EAAE,CAAE,0BAA2B,CAAC;AAE9C,SAASQ,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,IAAKN,WAAW,CAAEM,KAAM,CAAC,EAAG;IAC3B,OAAO,KAAK;EACb;EAEA,MAAMC,aAAa,GAAGR,KAAK,CAAEO,KAAM,CAAC;EACpC,OAAOC,aAAa,CAACC,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;IACjD,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKR,IAAK,CAAC;EAC1D,CAAE,CAAC;AACJ;AAEA,OAAO,MAAMS,OAAO,GAAG;EACtBT,IAAI;EACJC,KAAK;EACLS,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEV,KAAK;IAAEW,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,IAAK,CAAEF,QAAQ,IAAI,CAAEX,+BAA+B,CAAEC,KAAM,CAAC,EAAG;MAC/D,OAAO,IAAI;IACZ;IAEA,SAASa,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAEnB,YAAY,CAAEQ,KAAK,EAAEH,IAAK,CAAE,CAAC;MACvCe,OAAO,CAAC,CAAC;IACV;IAEA,OACCE,aAAA,CAACnB,qBAAqB;MACrBE,IAAI,EAAC,SAAS;MACdkB,IAAI,EAAGnB,IAAM;MACbE,KAAK,EAAGA,KAAO;MACfe,OAAO,EAAGA,OAAS;MACnBH,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC","ignoreList":[]}
+{"version":3,"names":["__","removeFormat","slice","isCollapsed","RichTextToolbarButton","help","jsx","_jsx","name","title","selectionContainsUnknownFormats","value","selectedValue","formats","some","format","type","unknown","tagName","className","edit","isActive","onChange","onFocus","onClick","icon"],"sources":["@wordpress/format-library/src/unknown/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { removeFormat, slice, isCollapsed } from '@wordpress/rich-text';\nimport { RichTextToolbarButton } from '@wordpress/block-editor';\nimport { help } from '@wordpress/icons';\n\nconst name = 'core/unknown';\nconst title = __( 'Clear Unknown Formatting' );\n\nfunction selectionContainsUnknownFormats( value ) {\n\tif ( isCollapsed( value ) ) {\n\t\treturn false;\n\t}\n\n\tconst selectedValue = slice( value );\n\treturn selectedValue.formats.some( ( formats ) => {\n\t\treturn formats.some( ( format ) => format.type === name );\n\t} );\n}\n\nexport const unknown = {\n\tname,\n\ttitle,\n\ttagName: '*',\n\tclassName: null,\n\tedit( { isActive, value, onChange, onFocus } ) {\n\t\tif ( ! isActive && ! selectionContainsUnknownFormats( value ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tfunction onClick() {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t\tonFocus();\n\t\t}\n\n\t\treturn (\n\t\t\t<RichTextToolbarButton\n\t\t\t\tname=\"unknown\"\n\t\t\t\ticon={ help }\n\t\t\t\ttitle={ title }\n\t\t\t\tonClick={ onClick }\n\t\t\t\tisActive\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAE,QAAQ,iBAAiB;AACpC,SAASC,YAAY,EAAEC,KAAK,EAAEC,WAAW,QAAQ,sBAAsB;AACvE,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,IAAI,QAAQ,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExC,MAAMC,IAAI,GAAG,cAAc;AAC3B,MAAMC,KAAK,GAAGT,EAAE,CAAE,0BAA2B,CAAC;AAE9C,SAASU,+BAA+BA,CAAEC,KAAK,EAAG;EACjD,IAAKR,WAAW,CAAEQ,KAAM,CAAC,EAAG;IAC3B,OAAO,KAAK;EACb;EAEA,MAAMC,aAAa,GAAGV,KAAK,CAAES,KAAM,CAAC;EACpC,OAAOC,aAAa,CAACC,OAAO,CAACC,IAAI,CAAID,OAAO,IAAM;IACjD,OAAOA,OAAO,CAACC,IAAI,CAAIC,MAAM,IAAMA,MAAM,CAACC,IAAI,KAAKR,IAAK,CAAC;EAC1D,CAAE,CAAC;AACJ;AAEA,OAAO,MAAMS,OAAO,GAAG;EACtBT,IAAI;EACJC,KAAK;EACLS,OAAO,EAAE,GAAG;EACZC,SAAS,EAAE,IAAI;EACfC,IAAIA,CAAE;IAAEC,QAAQ;IAAEV,KAAK;IAAEW,QAAQ;IAAEC;EAAQ,CAAC,EAAG;IAC9C,IAAK,CAAEF,QAAQ,IAAI,CAAEX,+BAA+B,CAAEC,KAAM,CAAC,EAAG;MAC/D,OAAO,IAAI;IACZ;IAEA,SAASa,OAAOA,CAAA,EAAG;MAClBF,QAAQ,CAAErB,YAAY,CAAEU,KAAK,EAAEH,IAAK,CAAE,CAAC;MACvCe,OAAO,CAAC,CAAC;IACV;IAEA,oBACChB,IAAA,CAACH,qBAAqB;MACrBI,IAAI,EAAC,SAAS;MACdiB,IAAI,EAAGpB,IAAM;MACbI,KAAK,EAAGA,KAAO;MACfe,OAAO,EAAGA,OAAS;MACnBH,QAAQ;IAAA,CACR,CAAC;EAEJ;AACD,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "4.35.0",
+	"version": "5.0.1",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,25 +19,26 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/block-editor": "^12.26.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/data": "^9.28.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/html-entities": "^3.58.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/private-apis": "^0.40.0",
-		"@wordpress/rich-text": "^6.35.0",
-		"@wordpress/url": "^3.59.0"
+		"@wordpress/a11y": "^4.0.1",
+		"@wordpress/block-editor": "^13.0.1",
+		"@wordpress/components": "^28.0.1",
+		"@wordpress/compose": "^7.0.1",
+		"@wordpress/data": "^10.0.1",
+		"@wordpress/element": "^6.0.1",
+		"@wordpress/html-entities": "^4.0.1",
+		"@wordpress/i18n": "^5.0.1",
+		"@wordpress/icons": "^10.0.1",
+		"@wordpress/private-apis": "^1.0.1",
+		"@wordpress/rich-text": "^7.0.1",
+		"@wordpress/url": "^4.0.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -46,5 +47,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "0e973525f7787401b5a544e0727774d52a78639f"
 }

package/src/image/index.js

@@ -104,56 +104,43 @@ function Edit( {
 	activeObjectAttributes,
 	contentRef,
 } ) {
-	const [ isModalOpen, setIsModalOpen ] = useState( false );
-
-	function openModal() {
-		setIsModalOpen( true );
-	}
-
-	function closeModal() {
-		setIsModalOpen( false );
-	}
-
 	return (
 		<MediaUploadCheck>
-			<RichTextToolbarButton
-				icon={
-					<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-						<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
-					</SVG>
-				}
-				title={ title }
-				onClick={ openModal }
-				isActive={ isObjectActive }
+			<MediaUpload
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				onSelect={ ( { id, url, alt, width: imgWidth } ) => {
+					onChange(
+						insertObject( value, {
+							type: name,
+							attributes: {
+								className: `wp-image-${ id }`,
+								style: `width: ${ Math.min(
+									imgWidth,
+									150
+								) }px;`,
+								url,
+								alt,
+							},
+						} )
+					);
+					onFocus();
+				} }
+				render={ ( { open } ) => (
+					<RichTextToolbarButton
+						icon={
+							<SVG
+								xmlns="http://www.w3.org/2000/svg"
+								viewBox="0 0 24 24"
+							>
+								<Path d="M4 18.5h16V17H4v1.5zM16 13v1.5h4V13h-4zM5.1 15h7.8c.6 0 1.1-.5 1.1-1.1V6.1c0-.6-.5-1.1-1.1-1.1H5.1C4.5 5 4 5.5 4 6.1v7.8c0 .6.5 1.1 1.1 1.1zm.4-8.5h7V10l-1-1c-.3-.3-.8-.3-1 0l-1.6 1.5-1.2-.7c-.3-.2-.6-.2-.9 0l-1.3 1V6.5zm0 6.1l1.8-1.3 1.3.8c.3.2.7.2.9-.1l1.5-1.4 1.5 1.4v1.5h-7v-.9z" />
+							</SVG>
+						}
+						title={ title }
+						onClick={ open }
+						isActive={ isObjectActive }
+					/>
+				) }
 			/>
-			{ isModalOpen && (
-				<MediaUpload
-					allowedTypes={ ALLOWED_MEDIA_TYPES }
-					onSelect={ ( { id, url, alt, width: imgWidth } ) => {
-						closeModal();
-						onChange(
-							insertObject( value, {
-								type: name,
-								attributes: {
-									className: `wp-image-${ id }`,
-									style: `width: ${ Math.min(
-										imgWidth,
-										150
-									) }px;`,
-									url,
-									alt,
-								},
-							} )
-						);
-						onFocus();
-					} }
-					onClose={ closeModal }
-					render={ ( { open } ) => {
-						open();
-						return null;
-					} }
-				/>
-			) }
 			{ isObjectActive && (
 				<InlineUI
 					value={ value }

package/src/link/modal-screens/link-settings-screen.native.js

@@ -211,12 +211,12 @@ const LinkSettingsScreen = ( {
 							label={ __( 'Open in new tab' ) }
 							value={ opensInNewWindow }
 							onValueChange={ setOpensInNewWindows }
-							separatorType={ 'fullWidth' }
+							separatorType="fullWidth"
 						/>
 						<BottomSheet.Cell
 							label={ __( 'Remove link' ) }
 							labelStyle={ styles.clearLinkButton }
-							separatorType={ 'none' }
+							separatorType="none"
 							onPress={ removeLink }
 						/>
 					</>

package/src/text-color/index.native.js

@@ -8,12 +8,12 @@ import { StyleSheet, View } from 'react-native';
  */
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useState } from '@wordpress/element';
-import { BlockControls, useSettings } from '@wordpress/block-editor';
 import {
-	ToolbarGroup,
-	ToolbarButton,
+	BlockControls,
+	useSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
+} from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import {
 	Icon,
 	color as colorIcon,

package/src/text-color/inline.native.js

@@ -11,12 +11,9 @@ import {
 	getColorClassName,
 	getColorObjectByColorValue,
 	useMultipleOriginColorsAndGradients,
-} from '@wordpress/block-editor';
-import {
-	BottomSheet,
-	ColorSettings,
 	useMobileGlobalStylesColors,
-} from '@wordpress/components';
+} from '@wordpress/block-editor';
+import { BottomSheet, ColorSettings } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -108,6 +105,7 @@ function ColorPicker( { name, value, onChange, contentRef } ) {
 	const property = 'color';
 	const colors = useMobileGlobalStylesColors();
 	const colorSettings = useMultipleOriginColorsAndGradients();
+	colorSettings.allAvailableColors = colors;
 
 	const onColorChange = useCallback(
 		( color ) => {