@wordpress/format-library 3.0.2 → 3.0.6

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

@@ -17,13 +17,44 @@ import { removeFormat } from '@wordpress/rich-text';
  * Internal dependencies
  */
 
-import { default as InlineColorUI, getActiveColor } from './inline';
+import { default as InlineColorUI, getActiveColors } from './inline';
 const name = 'core/text-color';
 
-const title = __('Text color');
+const title = __('Highlight');
 
 const EMPTY_ARRAY = [];
 
+function getComputedStyleProperty(element, property) {
+  const {
+    ownerDocument
+  } = element;
+  const {
+    defaultView
+  } = ownerDocument;
+  const style = defaultView.getComputedStyle(element);
+  const value = style.getPropertyValue(property);
+
+  if (property === 'background-color' && value === 'rgba(0, 0, 0, 0)' && element.parentElement) {
+    return getComputedStyleProperty(element.parentElement, property);
+  }
+
+  return value;
+}
+
+function fillComputedColors(element, {
+  color,
+  backgroundColor
+}) {
+  if (!color && !backgroundColor) {
+    return;
+  }
+
+  return {
+    color: color || getComputedStyleProperty(element, 'color'),
+    backgroundColor: backgroundColor === 'rgba(0, 0, 0, 0)' ? getComputedStyleProperty(element, 'background-color') : backgroundColor
+  };
+}
+
 function TextColorEdit({
   value,
   onChange,
@@ -36,17 +67,7 @@ function TextColorEdit({
   const [isAddingColor, setIsAddingColor] = useState(false);
   const enableIsAddingColor = useCallback(() => setIsAddingColor(true), [setIsAddingColor]);
   const disableIsAddingColor = useCallback(() => setIsAddingColor(false), [setIsAddingColor]);
-  const colorIndicatorStyle = useMemo(() => {
-    const activeColor = getActiveColor(name, value, colors);
-
-    if (!activeColor) {
-      return undefined;
-    }
-
-    return {
-      backgroundColor: activeColor
-    };
-  }, [value, colors]);
+  const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef.current, getActiveColors(value, name, colors)), [value, colors]);
   const hasColorsToChoose = !isEmpty(colors) || !allowCustomControl;
 
   if (!hasColorsToChoose && !isActive) {
@@ -54,18 +75,16 @@ function TextColorEdit({
   }
 
   return createElement(Fragment, null, createElement(RichTextToolbarButton, {
-    key: isActive ? 'text-color' : 'text-color-not-active',
     className: "format-library-text-color-button",
-    name: isActive ? 'text-color' : undefined,
-    icon: createElement(Fragment, null, createElement(Icon, {
-      icon: textColorIcon
-    }), isActive && createElement("span", {
-      className: "format-library-text-color-button__indicator",
+    isActive: isActive,
+    icon: createElement(Icon, {
+      icon: textColorIcon,
       style: colorIndicatorStyle
-    })),
+    }),
     title: title // If has no colors to choose but a color is active remove the color onClick
     ,
-    onClick: hasColorsToChoose ? enableIsAddingColor : () => onChange(removeFormat(value, name))
+    onClick: hasColorsToChoose ? enableIsAddingColor : () => onChange(removeFormat(value, name)),
+    role: "menuitemcheckbox"
   }), isAddingColor && createElement(InlineColorUI, {
     name: name,
     onClose: disableIsAddingColor,
@@ -79,12 +98,32 @@ function TextColorEdit({
 export const textColor = {
   name,
   title,
-  tagName: 'span',
+  tagName: 'mark',
   className: 'has-inline-color',
   attributes: {
     style: 'style',
     class: 'class'
   },
+
+  /*
+   * Since this format relies on the <mark> tag, it's important to
+   * prevent the default yellow background color applied by most
+   * browsers. The solution is to detect when this format is used with a
+   * text color but no background color, and in such cases to override
+   * the default styling with a transparent background.
+   *
+   * @see https://github.com/WordPress/gutenberg/pull/35516
+   */
+  __unstableFilterAttributeValue(key, value) {
+    if (key !== 'style') return value; // We should not add a background-color if it's already set
+
+    if (value && value.includes('background-color')) return value;
+    const addedCSS = ['background-color', 'rgba(0, 0, 0, 0)'].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
+    // rules will already include a `;`.
+
+    return value ? [addedCSS, value].join(';') : addedCSS;
+  },
+
   edit: TextColorEdit
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["isEmpty","__","useCallback","useMemo","useState","RichTextToolbarButton","useSetting","Icon","textColor","textColorIcon","removeFormat","default","InlineColorUI","getActiveColor","name","title","EMPTY_ARRAY","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","activeColor","undefined","backgroundColor","hasColorsToChoose","tagName","className","attributes","style","class","edit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport { Icon, textColor as textColorIcon } from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColor } from './inline';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nconst EMPTY_ARRAY = [];\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst colorIndicatorStyle = useMemo( () => {\n\t\tconst activeColor = getActiveColor( name, value, colors );\n\t\tif ( ! activeColor ) {\n\t\t\treturn undefined;\n\t\t}\n\t\treturn {\n\t\t\tbackgroundColor: activeColor,\n\t\t};\n\t}, [ value, colors ] );\n\n\tconst hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tkey={ isActive ? 'text-color' : 'text-color-not-active' }\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tname={ isActive ? 'text-color' : undefined }\n\t\t\t\ticon={\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Icon icon={ textColorIcon } />\n\t\t\t\t\t\t{ isActive && (\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tclassName=\"format-library-text-color-button__indicator\"\n\t\t\t\t\t\t\t\tstyle={ colorIndicatorStyle }\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}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'span',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\tedit: TextColorEdit,\n};\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["isEmpty","__","useCallback","useMemo","useState","RichTextToolbarButton","useSetting","Icon","textColor","textColorIcon","removeFormat","default","InlineColorUI","getActiveColors","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { isEmpty } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback, useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSetting } from '@wordpress/block-editor';\nimport { Icon, textColor as textColorIcon } from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\n\n/**\n * Internal dependencies\n */\nimport { default as InlineColorUI, getActiveColors } from './inline';\n\nconst name = 'core/text-color';\nconst title = __( 'Highlight' );\n\nconst EMPTY_ARRAY = [];\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst { ownerDocument } = element;\n\tconst { defaultView } = ownerDocument;\n\tconst style = defaultView.getComputedStyle( element );\n\tconst value = style.getPropertyValue( property );\n\n\tif (\n\t\tproperty === 'background-color' &&\n\t\tvalue === 'rgba(0, 0, 0, 0)' &&\n\t\telement.parentElement\n\t) {\n\t\treturn getComputedStyleProperty( element.parentElement, property );\n\t}\n\n\treturn value;\n}\n\nfunction fillComputedColors( element, { color, backgroundColor } ) {\n\tif ( ! color && ! backgroundColor ) {\n\t\treturn;\n\t}\n\n\treturn {\n\t\tcolor: color || getComputedStyleProperty( element, 'color' ),\n\t\tbackgroundColor:\n\t\t\tbackgroundColor === 'rgba(0, 0, 0, 0)'\n\t\t\t\t? getComputedStyleProperty( element, 'background-color' )\n\t\t\t\t: backgroundColor,\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst allowCustomControl = useSetting( 'color.custom' );\n\tconst colors = useSetting( 'color.palette' ) || EMPTY_ARRAY;\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst enableIsAddingColor = useCallback( () => setIsAddingColor( true ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst disableIsAddingColor = useCallback( () => setIsAddingColor( false ), [\n\t\tsetIsAddingColor,\n\t] );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef.current,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = ! isEmpty( colors ) || ! allowCustomControl;\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<RichTextToolbarButton\n\t\t\t\tclassName=\"format-library-text-color-button\"\n\t\t\t\tisActive={ isActive }\n\t\t\t\ticon={\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon={ textColorIcon }\n\t\t\t\t\t\tstyle={ colorIndicatorStyle }\n\t\t\t\t\t/>\n\t\t\t\t}\n\t\t\t\ttitle={ title }\n\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\tonClick={\n\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t? enableIsAddingColor\n\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t}\n\t\t\t\trole=\"menuitemcheckbox\"\n\t\t\t/>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ disableIsAddingColor }\n\t\t\t\t\tactiveAttributes={ activeAttributes }\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tcontentRef={ contentRef }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport const textColor = {\n\tname,\n\ttitle,\n\ttagName: 'mark',\n\tclassName: 'has-inline-color',\n\tattributes: {\n\t\tstyle: 'style',\n\t\tclass: 'class',\n\t},\n\t/*\n\t * Since this format relies on the <mark> tag, it's important to\n\t * prevent the default yellow background color applied by most\n\t * browsers. The solution is to detect when this format is used with a\n\t * text color but no background color, and in such cases to override\n\t * the default styling with a transparent background.\n\t *\n\t * @see https://github.com/WordPress/gutenberg/pull/35516\n\t */\n\t__unstableFilterAttributeValue( key, value ) {\n\t\tif ( key !== 'style' ) return value;\n\t\t// We should not add a background-color if it's already set\n\t\tif ( value && value.includes( 'background-color' ) ) return value;\n\t\tconst addedCSS = [ 'background-color', 'rgba(0, 0, 0, 0)' ].join( ':' );\n\t\t// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS\n\t\t// rules will already include a `;`.\n\t\treturn value ? [ addedCSS, value ].join( ';' ) : addedCSS;\n\t},\n\tedit: TextColorEdit,\n};\n"]}

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

@@ -11,65 +11,117 @@ import { get } from 'lodash';
 import { useCallback, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { applyFormat, removeFormat, getActiveFormat, useAnchorRef } from '@wordpress/rich-text';
-import { ColorPalette, URLPopover, getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, store as blockEditorStore } from '@wordpress/block-editor';
+import { ColorPalette, getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, store as blockEditorStore, useCachedTruthy } from '@wordpress/block-editor';
+import { Popover, TabPanel } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
 import { textColor as settings } from './index';
-export function getActiveColor(formatName, formatValue, colors) {
-  const activeColorFormat = getActiveFormat(formatValue, formatName);
+
+function parseCSS(css = '') {
+  return css.split(';').reduce((accumulator, rule) => {
+    if (rule) {
+      const [property, value] = rule.split(':');
+      if (property === 'color') accumulator.color = value;
+      if (property === 'background-color') accumulator.backgroundColor = value;
+    }
+
+    return accumulator;
+  }, {});
+}
+
+function parseClassName(className = '', colorSettings) {
+  return className.split(' ').reduce((accumulator, name) => {
+    const match = name.match(/^has-([^-]+)-color$/);
+
+    if (match) {
+      const [, colorSlug] = name.match(/^has-([^-]+)-color$/);
+      const colorObject = getColorObjectByAttributeValues(colorSettings, colorSlug);
+      accumulator.color = colorObject.color;
+    }
+
+    return accumulator;
+  }, {});
+}
+
+export function getActiveColors(value, name, colorSettings) {
+  const activeColorFormat = getActiveFormat(value, name);
 
   if (!activeColorFormat) {
-    return;
+    return {};
+  }
+
+  return { ...parseCSS(activeColorFormat.attributes.style),
+    ...parseClassName(activeColorFormat.attributes.class, colorSettings)
+  };
+}
+
+function setColors(value, name, colorSettings, colors) {
+  const {
+    color,
+    backgroundColor
+  } = { ...getActiveColors(value, name, colorSettings),
+    ...colors
+  };
+
+  if (!color && !backgroundColor) {
+    return removeFormat(value, name);
   }
 
-  const styleColor = activeColorFormat.attributes.style;
+  const styles = [];
+  const classNames = [];
+  const attributes = {};
 
-  if (styleColor) {
-    return styleColor.replace(new RegExp(`^color:\\s*`), '');
+  if (backgroundColor) {
+    styles.push(['background-color', backgroundColor].join(':'));
+  } else {
+    // Override default browser color for mark element.
+    styles.push(['background-color', 'rgba(0, 0, 0, 0)'].join(':'));
   }
 
-  const currentClass = activeColorFormat.attributes.class;
+  if (color) {
+    const colorObject = getColorObjectByColorValue(colorSettings, color);
 
-  if (currentClass) {
-    const colorSlug = currentClass.replace(/.*has-([^\s]*)-color.*/, '$1');
-    return getColorObjectByAttributeValues(colors, colorSlug).color;
+    if (colorObject) {
+      classNames.push(getColorClassName('color', colorObject.slug));
+    } else {
+      styles.push(['color', color].join(':'));
+    }
   }
+
+  if (styles.length) attributes.style = styles.join(';');
+  if (classNames.length) attributes.class = classNames.join(' ');
+  return applyFormat(value, {
+    type: name,
+    attributes
+  });
 }
 
-const ColorPicker = ({
+function ColorPicker({
   name,
+  property,
   value,
   onChange
-}) => {
+}) {
   const colors = useSelect(select => {
     const {
       getSettings
     } = select(blockEditorStore);
     return get(getSettings(), ['colors'], []);
-  });
+  }, []);
   const onColorChange = useCallback(color => {
-    if (color) {
-      const colorObject = getColorObjectByColorValue(colors, color);
-      onChange(applyFormat(value, {
-        type: name,
-        attributes: colorObject ? {
-          class: getColorClassName('color', colorObject.slug)
-        } : {
-          style: `color:${color}`
-        }
-      }));
-    } else {
-      onChange(removeFormat(value, name));
-    }
-  }, [colors, onChange]);
-  const activeColor = useMemo(() => getActiveColor(name, value, colors), [name, value, colors]);
+    onChange(setColors(value, name, colors, {
+      [property]: color
+    }));
+  }, [colors, onChange, property]);
+  const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
   return createElement(ColorPalette, {
-    value: activeColor,
+    value: activeColors[property],
     onChange: onColorChange
   });
-};
+}
 
 export default function InlineColorUI({
   name,
@@ -78,20 +130,35 @@ export default function InlineColorUI({
   onClose,
   contentRef
 }) {
-  const anchorRef = useAnchorRef({
+  /* 
+   As you change the text color by typing a HEX value into a field,
+   the return value of document.getSelection jumps to the field you're editing,
+   not the highlighted text. Given that useAnchorRef uses document.getSelection,
+   it will return null, since it can't find the <mark> element within the HEX input.
+   This caches the last truthy value of the selection anchor reference.
+   */
+  const anchorRef = useCachedTruthy(useAnchorRef({
     ref: contentRef,
     value,
     settings
-  });
-  return createElement(URLPopover, {
-    value: value,
+  }));
+  return createElement(Popover, {
     onClose: onClose,
     className: "components-inline-color-popover",
     anchorRef: anchorRef
-  }, createElement(ColorPicker, {
+  }, createElement(TabPanel, {
+    tabs: [{
+      name: 'color',
+      title: __('Text')
+    }, {
+      name: 'backgroundColor',
+      title: __('Background')
+    }]
+  }, tab => createElement(ColorPicker, {
     name: name,
+    property: tab.name,
     value: value,
     onChange: onChange
-  }));
+  })));
 }
 //# sourceMappingURL=inline.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["get","useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchorRef","ColorPalette","URLPopover","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","textColor","settings","getActiveColor","formatName","formatValue","colors","activeColorFormat","styleColor","attributes","style","replace","RegExp","currentClass","class","colorSlug","color","ColorPicker","name","value","onChange","select","getSettings","onColorChange","colorObject","type","slug","activeColor","InlineColorUI","onClose","contentRef","anchorRef","ref"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tURLPopover,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings } from './index';\n\nexport function getActiveColor( formatName, formatValue, colors ) {\n\tconst activeColorFormat = getActiveFormat( formatValue, formatName );\n\tif ( ! activeColorFormat ) {\n\t\treturn;\n\t}\n\tconst styleColor = activeColorFormat.attributes.style;\n\tif ( styleColor ) {\n\t\treturn styleColor.replace( new RegExp( `^color:\\\\s*` ), '' );\n\t}\n\tconst currentClass = activeColorFormat.attributes.class;\n\tif ( currentClass ) {\n\t\tconst colorSlug = currentClass.replace(\n\t\t\t/.*has-([^\\s]*)-color.*/,\n\t\t\t'$1'\n\t\t);\n\t\treturn getColorObjectByAttributeValues( colors, colorSlug ).color;\n\t}\n}\n\nconst ColorPicker = ( { name, value, onChange } ) => {\n\tconst colors = useSelect( ( select ) => {\n\t\tconst { getSettings } = select( blockEditorStore );\n\t\treturn get( getSettings(), [ 'colors' ], [] );\n\t} );\n\tconst onColorChange = useCallback(\n\t\t( color ) => {\n\t\t\tif ( color ) {\n\t\t\t\tconst colorObject = getColorObjectByColorValue( colors, color );\n\t\t\t\tonChange(\n\t\t\t\t\tapplyFormat( value, {\n\t\t\t\t\t\ttype: name,\n\t\t\t\t\t\tattributes: colorObject\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tclass: getColorClassName(\n\t\t\t\t\t\t\t\t\t\t'color',\n\t\t\t\t\t\t\t\t\t\tcolorObject.slug\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\t\tstyle: `color:${ color }`,\n\t\t\t\t\t\t\t  },\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tonChange( removeFormat( value, name ) );\n\t\t\t}\n\t\t},\n\t\t[ colors, onChange ]\n\t);\n\tconst activeColor = useMemo( () => getActiveColor( name, value, colors ), [\n\t\tname,\n\t\tvalue,\n\t\tcolors,\n\t] );\n\n\treturn <ColorPalette value={ activeColor } onChange={ onColorChange } />;\n};\n\nexport default function InlineColorUI( {\n\tname,\n\tvalue,\n\tonChange,\n\tonClose,\n\tcontentRef,\n} ) {\n\tconst anchorRef = useAnchorRef( { ref: contentRef, value, settings } );\n\treturn (\n\t\t<URLPopover\n\t\t\tvalue={ value }\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<ColorPicker name={ name } value={ value } onChange={ onChange } />\n\t\t</URLPopover>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["get","useCallback","useMemo","useSelect","applyFormat","removeFormat","getActiveFormat","useAnchorRef","ColorPalette","getColorClassName","getColorObjectByColorValue","getColorObjectByAttributeValues","store","blockEditorStore","useCachedTruthy","Popover","TabPanel","__","textColor","settings","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","match","colorSlug","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","title","tab"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { get } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tapplyFormat,\n\tremoveFormat,\n\tgetActiveFormat,\n\tuseAnchorRef,\n} from '@wordpress/rich-text';\nimport {\n\tColorPalette,\n\tgetColorClassName,\n\tgetColorObjectByColorValue,\n\tgetColorObjectByAttributeValues,\n\tstore as blockEditorStore,\n\tuseCachedTruthy,\n} from '@wordpress/block-editor';\nimport { Popover, TabPanel } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { textColor as settings } from './index';\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' ) accumulator.color = value;\n\t\t\tif ( property === 'background-color' )\n\t\t\t\taccumulator.backgroundColor = value;\n\t\t}\n\t\treturn accumulator;\n\t}, {} );\n}\n\nfunction parseClassName( className = '', colorSettings ) {\n\treturn className.split( ' ' ).reduce( ( accumulator, name ) => {\n\t\tconst match = name.match( /^has-([^-]+)-color$/ );\n\t\tif ( match ) {\n\t\t\tconst [ , colorSlug ] = name.match( /^has-([^-]+)-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', 'rgba(0, 0, 0, 0)' ].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 ) attributes.style = styles.join( ';' );\n\tif ( classNames.length ) attributes.class = classNames.join( ' ' );\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 get( 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} ) {\n\t/* \n\t As you change the text color by typing a HEX value into a field,\n\t the return value of document.getSelection jumps to the field you're editing,\n\t not the highlighted text. Given that useAnchorRef uses document.getSelection,\n\t it will return null, since it can't find the <mark> element within the HEX input.\n\t This caches the last truthy value of the selection anchor reference.\n\t */\n\tconst anchorRef = useCachedTruthy(\n\t\tuseAnchorRef( { ref: contentRef, value, settings } )\n\t);\n\n\treturn (\n\t\t<Popover\n\t\t\tonClose={ onClose }\n\t\t\tclassName=\"components-inline-color-popover\"\n\t\t\tanchorRef={ anchorRef }\n\t\t>\n\t\t\t<TabPanel\n\t\t\t\ttabs={ [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'color',\n\t\t\t\t\t\ttitle: __( 'Text' ),\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tname: 'backgroundColor',\n\t\t\t\t\t\ttitle: __( 'Background' ),\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t{ ( tab ) => (\n\t\t\t\t\t<ColorPicker\n\t\t\t\t\t\tname={ name }\n\t\t\t\t\t\tproperty={ tab.name }\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</TabPanel>\n\t\t</Popover>\n\t);\n}\n"]}

package/build-module/underline/index.js

@@ -7,9 +7,12 @@ import { __ } from '@wordpress/i18n';
 import { toggleFormat } from '@wordpress/rich-text';
 import { RichTextShortcut, __unstableRichTextInputEvent } from '@wordpress/block-editor';
 const name = 'core/underline';
+
+const title = __('Underline');
+
 export const underline = {
   name,
-  title: __('Underline'),
+  title,
   tagName: 'span',
   className: null,
   attributes: {
@@ -25,7 +28,8 @@ export const underline = {
         type: name,
         attributes: {
           style: 'text-decoration: underline;'
-        }
+        },
+        title
       }));
     };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/format-library/src/underline/index.js"],"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","name","underline","title","tagName","className","attributes","style","edit","value","onChange","onToggle","type"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SACCC,gBADD,EAECC,4BAFD,QAGO,yBAHP;AAKA,MAAMC,IAAI,GAAG,gBAAb;AAEA,OAAO,MAAMC,SAAS,GAAG;AACxBD,EAAAA,IADwB;AAExBE,EAAAA,KAAK,EAAEN,EAAE,CAAE,WAAF,CAFe;AAGxBO,EAAAA,OAAO,EAAE,MAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;AAKxBC,EAAAA,UAAU,EAAE;AACXC,IAAAA,KAAK,EAAE;AADI,GALY;;AAQxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF,EAAwB;AAC3B,UAAMC,QAAQ,GAAG,MAAM;AACtBD,MAAAA,QAAQ,CACPZ,YAAY,CAAEW,KAAF,EAAS;AACpBG,QAAAA,IAAI,EAAEX,IADc;AAEpBK,QAAAA,UAAU,EAAE;AACXC,UAAAA,KAAK,EAAE;AADI;AAFQ,OAAT,CADL,CAAR;AAQA,KATD;;AAWA,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGI;AAHT,MADD,EAMC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,iBADX;AAEC,MAAA,OAAO,EAAGA;AAFX,MAND,CADD;AAaA;;AAjCuB,CAAlB","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';\n\nexport const underline = {\n\tname,\n\ttitle: __( 'Underline' ),\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} )\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"]}
+{"version":3,"sources":["@wordpress/format-library/src/underline/index.js"],"names":["__","toggleFormat","RichTextShortcut","__unstableRichTextInputEvent","name","title","underline","tagName","className","attributes","style","edit","value","onChange","onToggle","type"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,sBAA7B;AACA,SACCC,gBADD,EAECC,4BAFD,QAGO,yBAHP;AAKA,MAAMC,IAAI,GAAG,gBAAb;;AACA,MAAMC,KAAK,GAAGL,EAAE,CAAE,WAAF,CAAhB;;AAEA,OAAO,MAAMM,SAAS,GAAG;AACxBF,EAAAA,IADwB;AAExBC,EAAAA,KAFwB;AAGxBE,EAAAA,OAAO,EAAE,MAHe;AAIxBC,EAAAA,SAAS,EAAE,IAJa;AAKxBC,EAAAA,UAAU,EAAE;AACXC,IAAAA,KAAK,EAAE;AADI,GALY;;AAQxBC,EAAAA,IAAI,CAAE;AAAEC,IAAAA,KAAF;AAASC,IAAAA;AAAT,GAAF,EAAwB;AAC3B,UAAMC,QAAQ,GAAG,MAAM;AACtBD,MAAAA,QAAQ,CACPZ,YAAY,CAAEW,KAAF,EAAS;AACpBG,QAAAA,IAAI,EAAEX,IADc;AAEpBK,QAAAA,UAAU,EAAE;AACXC,UAAAA,KAAK,EAAE;AADI,SAFQ;AAKpBL,QAAAA;AALoB,OAAT,CADL,CAAR;AASA,KAVD;;AAYA,WACC,8BACC,cAAC,gBAAD;AACC,MAAA,IAAI,EAAC,SADN;AAEC,MAAA,SAAS,EAAC,GAFX;AAGC,MAAA,KAAK,EAAGS;AAHT,MADD,EAMC,cAAC,4BAAD;AACC,MAAA,SAAS,EAAC,iBADX;AAEC,MAAA,OAAO,EAAGA;AAFX,MAND,CADD;AAaA;;AAlCuB,CAAlB","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"]}

package/build-style/style-rtl.css

@@ -137,19 +137,8 @@
   color: #cc1818;
 }
 
-.components-inline-color__indicator {
-  position: absolute;
-  background: #000;
-  height: 3px;
-  width: 20px;
-  bottom: 6px;
-  right: auto;
-  left: auto;
-  margin: 0 5px;
-}
-
-.components-inline-color-popover .components-popover__content > div {
-  padding: 20px 18px;
+.components-inline-color-popover .components-popover__content .components-tab-panel__tab-content {
+  padding: 16px;
 }
 .components-inline-color-popover .components-popover__content .components-color-palette {
   margin-top: 0.6rem;
@@ -162,16 +151,4 @@
 }
 .components-inline-color-popover .components-popover__content .component-color-indicator {
   vertical-align: text-bottom;
-}
-
-.format-library-text-color-button {
-  position: relative;
-}
-
-.format-library-text-color-button__indicator {
-  height: 4px;
-  width: 20px;
-  position: absolute;
-  bottom: 10px;
-  right: 8px;
 }

package/build-style/style.css

@@ -137,19 +137,8 @@
   color: #cc1818;
 }
 
-.components-inline-color__indicator {
-  position: absolute;
-  background: #000;
-  height: 3px;
-  width: 20px;
-  bottom: 6px;
-  left: auto;
-  right: auto;
-  margin: 0 5px;
-}
-
-.components-inline-color-popover .components-popover__content > div {
-  padding: 20px 18px;
+.components-inline-color-popover .components-popover__content .components-tab-panel__tab-content {
+  padding: 16px;
 }
 .components-inline-color-popover .components-popover__content .components-color-palette {
   margin-top: 0.6rem;
@@ -162,16 +151,4 @@
 }
 .components-inline-color-popover .components-popover__content .component-color-indicator {
   vertical-align: text-bottom;
-}
-
-.format-library-text-color-button {
-  position: relative;
-}
-
-.format-library-text-color-button__indicator {
-  height: 4px;
-  width: 20px;
-  position: absolute;
-  bottom: 10px;
-  left: 8px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/format-library",
-	"version": "3.0.2",
+	"version": "3.0.6",
 	"description": "Format library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -26,23 +26,23 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.13.10",
-		"@wordpress/a11y": "^3.2.2",
-		"@wordpress/block-editor": "^7.0.2",
-		"@wordpress/components": "^17.0.0",
-		"@wordpress/compose": "^5.0.2",
-		"@wordpress/data": "^6.1.0",
-		"@wordpress/dom": "^3.2.3",
-		"@wordpress/element": "^4.0.1",
-		"@wordpress/html-entities": "^3.2.1",
-		"@wordpress/i18n": "^4.2.2",
-		"@wordpress/icons": "^5.0.2",
-		"@wordpress/keycodes": "^3.2.2",
-		"@wordpress/rich-text": "^5.0.2",
-		"@wordpress/url": "^3.2.2",
+		"@wordpress/a11y": "^3.2.3",
+		"@wordpress/block-editor": "^8.0.1",
+		"@wordpress/components": "^19.0.1",
+		"@wordpress/compose": "^5.0.5",
+		"@wordpress/data": "^6.1.3",
+		"@wordpress/dom": "^3.2.6",
+		"@wordpress/element": "^4.0.3",
+		"@wordpress/html-entities": "^3.2.2",
+		"@wordpress/i18n": "^4.2.3",
+		"@wordpress/icons": "^6.1.0",
+		"@wordpress/keycodes": "^3.2.3",
+		"@wordpress/rich-text": "^5.0.5",
+		"@wordpress/url": "^3.3.0",
 		"lodash": "^4.17.21"
 	},
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "98c42a7187f788fe3e023f04df7f5dcbdae4e4e7"
+	"gitHead": "f89b63995376fe6efe920d858b48268b510920e1"
 }

package/src/bold/index.js

@@ -20,11 +20,11 @@ export const bold = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

package/src/code/index.js

@@ -46,7 +46,7 @@ export const code = {
 	},
 	edit( { value, onChange, onFocus, isActive } ) {
 		function onClick() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 			onFocus();
 		}
 
@@ -56,6 +56,7 @@ export const code = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},

package/src/italic/index.js

@@ -20,11 +20,11 @@ export const italic = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
-			onToggle();
+			onChange( toggleFormat( value, { type: name } ) );
 			onFocus();
 		}
 

package/src/keyboard/index.js

@@ -16,7 +16,7 @@ export const keyboard = {
 	className: null,
 	edit( { isActive, value, onChange, onFocus } ) {
 		function onToggle() {
-			onChange( toggleFormat( value, { type: name } ) );
+			onChange( toggleFormat( value, { type: name, title } ) );
 		}
 
 		function onClick() {
@@ -30,6 +30,7 @@ export const keyboard = {
 				title={ title }
 				onClick={ onClick }
 				isActive={ isActive }
+				role="menuitemcheckbox"
 			/>
 		);
 	},