@wordpress/format-library 3.0.15 → 3.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/text-color/index.js +6 -4
- package/build/text-color/index.js.map +1 -1
- package/build/text-color/inline.js +5 -6
- package/build/text-color/inline.js.map +1 -1
- package/build-module/text-color/index.js +4 -3
- package/build-module/text-color/index.js.map +1 -1
- package/build-module/text-color/inline.js +6 -7
- package/build-module/text-color/inline.js.map +1 -1
- package/package.json +7 -7
- package/src/text-color/index.js +5 -3
- package/src/text-color/inline.js +8 -6
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.textColor = void 0;
|
|
6
|
+
exports.transparentValue = exports.textColor = void 0;
|
|
7
7
|
|
|
8
8
|
var _element = require("@wordpress/element");
|
|
9
9
|
|
|
@@ -34,6 +34,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
34
34
|
/**
|
|
35
35
|
* Internal dependencies
|
|
36
36
|
*/
|
|
37
|
+
const transparentValue = 'rgba(0, 0, 0, 0)';
|
|
38
|
+
exports.transparentValue = transparentValue;
|
|
37
39
|
const name = 'core/text-color';
|
|
38
40
|
const title = (0, _i18n.__)('Highlight');
|
|
39
41
|
const EMPTY_ARRAY = [];
|
|
@@ -48,7 +50,7 @@ function getComputedStyleProperty(element, property) {
|
|
|
48
50
|
const style = defaultView.getComputedStyle(element);
|
|
49
51
|
const value = style.getPropertyValue(property);
|
|
50
52
|
|
|
51
|
-
if (property === 'background-color' && value ===
|
|
53
|
+
if (property === 'background-color' && value === transparentValue && element.parentElement) {
|
|
52
54
|
return getComputedStyleProperty(element.parentElement, property);
|
|
53
55
|
}
|
|
54
56
|
|
|
@@ -67,7 +69,7 @@ function fillComputedColors(element, _ref) {
|
|
|
67
69
|
|
|
68
70
|
return {
|
|
69
71
|
color: color || getComputedStyleProperty(element, 'color'),
|
|
70
|
-
backgroundColor: backgroundColor ===
|
|
72
|
+
backgroundColor: backgroundColor === transparentValue ? getComputedStyleProperty(element, 'background-color') : backgroundColor
|
|
71
73
|
};
|
|
72
74
|
}
|
|
73
75
|
|
|
@@ -135,7 +137,7 @@ const textColor = {
|
|
|
135
137
|
if (key !== 'style') return value; // We should not add a background-color if it's already set
|
|
136
138
|
|
|
137
139
|
if (value && value.includes('background-color')) return value;
|
|
138
|
-
const addedCSS = ['background-color',
|
|
140
|
+
const addedCSS = ['background-color', transparentValue].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
|
|
139
141
|
// rules will already include a `;`.
|
|
140
142
|
|
|
141
143
|
return value ? [addedCSS, value].join(';') : addedCSS;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["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","textColorIcon","textColor","tagName","className","attributes","class","__unstableFilterAttributeValue","key","includes","addedCSS","join","edit"],"mappings":";;;;;;;AASA;;AANA;;AAKA;;AAEA;;AACA;;AACA;;AAKA;;;;;;AAjBA;AACA;AACA;;AAGA;AACA;AACA;;AAOA;AACA;AACA;
|
|
1
|
+
{"version":3,"sources":["@wordpress/format-library/src/text-color/index.js"],"names":["transparentValue","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","textColorIcon","textColor","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\nexport const transparentValue = 'rgba(0, 0, 0, 0)';\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 === transparentValue &&\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 === transparentValue\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', transparentValue ].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"]}
|
|
@@ -39,7 +39,7 @@ function parseCSS() {
|
|
|
39
39
|
if (rule) {
|
|
40
40
|
const [property, value] = rule.split(':');
|
|
41
41
|
if (property === 'color') accumulator.color = value;
|
|
42
|
-
if (property === 'background-color') accumulator.backgroundColor = value;
|
|
42
|
+
if (property === 'background-color' && value !== _index.transparentValue) accumulator.backgroundColor = value;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
return accumulator;
|
|
@@ -50,10 +50,9 @@ function parseClassName() {
|
|
|
50
50
|
let className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
51
51
|
let colorSettings = arguments.length > 1 ? arguments[1] : undefined;
|
|
52
52
|
return className.split(' ').reduce((accumulator, name) => {
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
const [, colorSlug] = name.match(/^has-([^-]+)-color$/);
|
|
53
|
+
// `colorSlug` could contain dashes, so simply match the start and end.
|
|
54
|
+
if (name.startsWith('has-') && name.endsWith('-color')) {
|
|
55
|
+
const colorSlug = name.replace(/^has-/, '').replace(/-color$/, '');
|
|
57
56
|
const colorObject = (0, _blockEditor.getColorObjectByAttributeValues)(colorSettings, colorSlug);
|
|
58
57
|
accumulator.color = colorObject.color;
|
|
59
58
|
}
|
|
@@ -94,7 +93,7 @@ function setColors(value, name, colorSettings, colors) {
|
|
|
94
93
|
styles.push(['background-color', backgroundColor].join(':'));
|
|
95
94
|
} else {
|
|
96
95
|
// Override default browser color for mark element.
|
|
97
|
-
styles.push(['background-color',
|
|
96
|
+
styles.push(['background-color', _index.transparentValue].join(':'));
|
|
98
97
|
}
|
|
99
98
|
|
|
100
99
|
if (color) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","
|
|
1
|
+
{"version":3,"sources":["@wordpress/format-library/src/text-color/inline.js"],"names":["parseCSS","css","split","reduce","accumulator","rule","property","value","color","transparentValue","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","colorObject","getActiveColors","activeColorFormat","attributes","style","class","setColors","colors","styles","classNames","push","join","slug","length","type","ColorPicker","onChange","select","getSettings","blockEditorStore","onColorChange","activeColors","InlineColorUI","onClose","contentRef","anchorRef","ref","settings","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, transparentValue } 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' && value !== transparentValue )\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\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 ) 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"]}
|
|
@@ -18,6 +18,7 @@ import { removeFormat } from '@wordpress/rich-text';
|
|
|
18
18
|
*/
|
|
19
19
|
|
|
20
20
|
import { default as InlineColorUI, getActiveColors } from './inline';
|
|
21
|
+
export const transparentValue = 'rgba(0, 0, 0, 0)';
|
|
21
22
|
const name = 'core/text-color';
|
|
22
23
|
|
|
23
24
|
const title = __('Highlight');
|
|
@@ -34,7 +35,7 @@ function getComputedStyleProperty(element, property) {
|
|
|
34
35
|
const style = defaultView.getComputedStyle(element);
|
|
35
36
|
const value = style.getPropertyValue(property);
|
|
36
37
|
|
|
37
|
-
if (property === 'background-color' && value ===
|
|
38
|
+
if (property === 'background-color' && value === transparentValue && element.parentElement) {
|
|
38
39
|
return getComputedStyleProperty(element.parentElement, property);
|
|
39
40
|
}
|
|
40
41
|
|
|
@@ -53,7 +54,7 @@ function fillComputedColors(element, _ref) {
|
|
|
53
54
|
|
|
54
55
|
return {
|
|
55
56
|
color: color || getComputedStyleProperty(element, 'color'),
|
|
56
|
-
backgroundColor: backgroundColor ===
|
|
57
|
+
backgroundColor: backgroundColor === transparentValue ? getComputedStyleProperty(element, 'background-color') : backgroundColor
|
|
57
58
|
};
|
|
58
59
|
}
|
|
59
60
|
|
|
@@ -121,7 +122,7 @@ export const textColor = {
|
|
|
121
122
|
if (key !== 'style') return value; // We should not add a background-color if it's already set
|
|
122
123
|
|
|
123
124
|
if (value && value.includes('background-color')) return value;
|
|
124
|
-
const addedCSS = ['background-color',
|
|
125
|
+
const addedCSS = ['background-color', transparentValue].join(':'); // Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
|
|
125
126
|
// rules will already include a `;`.
|
|
126
127
|
|
|
127
128
|
return value ? [addedCSS, value].join(';') : addedCSS;
|
|
@@ -1 +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","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":";;AAAA;AACA;AACA;AACA,SAASA,OAAT,QAAwB,QAAxB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAT,EAAsBC,OAAtB,EAA+BC,QAA/B,QAA+C,oBAA/C;AACA,SAASC,qBAAT,EAAgCC,UAAhC,QAAkD,yBAAlD;AACA,SAASC,IAAT,EAAeC,SAAS,IAAIC,aAA5B,QAAiD,kBAAjD;AACA,SAASC,YAAT,QAA6B,sBAA7B;AAEA;AACA;AACA;;AACA,SAASC,OAAO,IAAIC,aAApB,EAAmCC,eAAnC,QAA0D,UAA1D;AAEA,MAAMC,IAAI,GAAG,iBAAb;;AACA,MAAMC,KAAK,
|
|
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","getActiveColors","transparentValue","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\nexport const transparentValue = 'rgba(0, 0, 0, 0)';\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 === transparentValue &&\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 === transparentValue\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', transparentValue ].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"]}
|
|
@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
|
|
|
18
18
|
* Internal dependencies
|
|
19
19
|
*/
|
|
20
20
|
|
|
21
|
-
import { textColor as settings } from './index';
|
|
21
|
+
import { textColor as settings, transparentValue } from './index';
|
|
22
22
|
|
|
23
23
|
function parseCSS() {
|
|
24
24
|
let css = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
@@ -26,7 +26,7 @@ function parseCSS() {
|
|
|
26
26
|
if (rule) {
|
|
27
27
|
const [property, value] = rule.split(':');
|
|
28
28
|
if (property === 'color') accumulator.color = value;
|
|
29
|
-
if (property === 'background-color') accumulator.backgroundColor = value;
|
|
29
|
+
if (property === 'background-color' && value !== transparentValue) accumulator.backgroundColor = value;
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
return accumulator;
|
|
@@ -37,10 +37,9 @@ function parseClassName() {
|
|
|
37
37
|
let className = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
38
38
|
let colorSettings = arguments.length > 1 ? arguments[1] : undefined;
|
|
39
39
|
return className.split(' ').reduce((accumulator, name) => {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
const [, colorSlug] = name.match(/^has-([^-]+)-color$/);
|
|
40
|
+
// `colorSlug` could contain dashes, so simply match the start and end.
|
|
41
|
+
if (name.startsWith('has-') && name.endsWith('-color')) {
|
|
42
|
+
const colorSlug = name.replace(/^has-/, '').replace(/-color$/, '');
|
|
44
43
|
const colorObject = getColorObjectByAttributeValues(colorSettings, colorSlug);
|
|
45
44
|
accumulator.color = colorObject.color;
|
|
46
45
|
}
|
|
@@ -81,7 +80,7 @@ function setColors(value, name, colorSettings, colors) {
|
|
|
81
80
|
styles.push(['background-color', backgroundColor].join(':'));
|
|
82
81
|
} else {
|
|
83
82
|
// Override default browser color for mark element.
|
|
84
|
-
styles.push(['background-color',
|
|
83
|
+
styles.push(['background-color', transparentValue].join(':'));
|
|
85
84
|
}
|
|
86
85
|
|
|
87
86
|
if (color) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
1
|
+
{"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","transparentValue","parseCSS","css","split","reduce","accumulator","rule","property","value","color","backgroundColor","parseClassName","className","colorSettings","name","startsWith","endsWith","colorSlug","replace","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, transparentValue } 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' && value !== transparentValue )\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\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 ) 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.18",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@babel/runtime": "^7.16.0",
|
|
29
29
|
"@wordpress/a11y": "^3.2.4",
|
|
30
|
-
"@wordpress/block-editor": "^8.0.
|
|
31
|
-
"@wordpress/components": "^19.1.
|
|
32
|
-
"@wordpress/compose": "^5.0.
|
|
33
|
-
"@wordpress/data": "^6.1.
|
|
30
|
+
"@wordpress/block-editor": "^8.0.12",
|
|
31
|
+
"@wordpress/components": "^19.1.6",
|
|
32
|
+
"@wordpress/compose": "^5.0.7",
|
|
33
|
+
"@wordpress/data": "^6.1.5",
|
|
34
34
|
"@wordpress/dom": "^3.2.7",
|
|
35
35
|
"@wordpress/element": "^4.0.4",
|
|
36
36
|
"@wordpress/html-entities": "^3.2.3",
|
|
37
37
|
"@wordpress/i18n": "^4.2.4",
|
|
38
38
|
"@wordpress/icons": "^6.1.1",
|
|
39
39
|
"@wordpress/keycodes": "^3.2.4",
|
|
40
|
-
"@wordpress/rich-text": "^5.0.
|
|
40
|
+
"@wordpress/rich-text": "^5.0.7",
|
|
41
41
|
"@wordpress/url": "^3.3.1",
|
|
42
42
|
"lodash": "^4.17.21"
|
|
43
43
|
},
|
|
44
44
|
"publishConfig": {
|
|
45
45
|
"access": "public"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "1081a28b2368fcebd9a14554fbd0e25eb33fbcb6"
|
|
48
48
|
}
|
package/src/text-color/index.js
CHANGED
|
@@ -17,6 +17,8 @@ import { removeFormat } from '@wordpress/rich-text';
|
|
|
17
17
|
*/
|
|
18
18
|
import { default as InlineColorUI, getActiveColors } from './inline';
|
|
19
19
|
|
|
20
|
+
export const transparentValue = 'rgba(0, 0, 0, 0)';
|
|
21
|
+
|
|
20
22
|
const name = 'core/text-color';
|
|
21
23
|
const title = __( 'Highlight' );
|
|
22
24
|
|
|
@@ -30,7 +32,7 @@ function getComputedStyleProperty( element, property ) {
|
|
|
30
32
|
|
|
31
33
|
if (
|
|
32
34
|
property === 'background-color' &&
|
|
33
|
-
value ===
|
|
35
|
+
value === transparentValue &&
|
|
34
36
|
element.parentElement
|
|
35
37
|
) {
|
|
36
38
|
return getComputedStyleProperty( element.parentElement, property );
|
|
@@ -47,7 +49,7 @@ function fillComputedColors( element, { color, backgroundColor } ) {
|
|
|
47
49
|
return {
|
|
48
50
|
color: color || getComputedStyleProperty( element, 'color' ),
|
|
49
51
|
backgroundColor:
|
|
50
|
-
backgroundColor ===
|
|
52
|
+
backgroundColor === transparentValue
|
|
51
53
|
? getComputedStyleProperty( element, 'background-color' )
|
|
52
54
|
: backgroundColor,
|
|
53
55
|
};
|
|
@@ -139,7 +141,7 @@ export const textColor = {
|
|
|
139
141
|
if ( key !== 'style' ) return value;
|
|
140
142
|
// We should not add a background-color if it's already set
|
|
141
143
|
if ( value && value.includes( 'background-color' ) ) return value;
|
|
142
|
-
const addedCSS = [ 'background-color',
|
|
144
|
+
const addedCSS = [ 'background-color', transparentValue ].join( ':' );
|
|
143
145
|
// Prepend `addedCSS` to avoid a double `;;` as any the existing CSS
|
|
144
146
|
// rules will already include a `;`.
|
|
145
147
|
return value ? [ addedCSS, value ].join( ';' ) : addedCSS;
|
package/src/text-color/inline.js
CHANGED
|
@@ -28,14 +28,14 @@ import { __ } from '@wordpress/i18n';
|
|
|
28
28
|
/**
|
|
29
29
|
* Internal dependencies
|
|
30
30
|
*/
|
|
31
|
-
import { textColor as settings } from './index';
|
|
31
|
+
import { textColor as settings, transparentValue } from './index';
|
|
32
32
|
|
|
33
33
|
function parseCSS( css = '' ) {
|
|
34
34
|
return css.split( ';' ).reduce( ( accumulator, rule ) => {
|
|
35
35
|
if ( rule ) {
|
|
36
36
|
const [ property, value ] = rule.split( ':' );
|
|
37
37
|
if ( property === 'color' ) accumulator.color = value;
|
|
38
|
-
if ( property === 'background-color' )
|
|
38
|
+
if ( property === 'background-color' && value !== transparentValue )
|
|
39
39
|
accumulator.backgroundColor = value;
|
|
40
40
|
}
|
|
41
41
|
return accumulator;
|
|
@@ -44,9 +44,11 @@ function parseCSS( css = '' ) {
|
|
|
44
44
|
|
|
45
45
|
function parseClassName( className = '', colorSettings ) {
|
|
46
46
|
return className.split( ' ' ).reduce( ( accumulator, name ) => {
|
|
47
|
-
|
|
48
|
-
if (
|
|
49
|
-
const
|
|
47
|
+
// `colorSlug` could contain dashes, so simply match the start and end.
|
|
48
|
+
if ( name.startsWith( 'has-' ) && name.endsWith( '-color' ) ) {
|
|
49
|
+
const colorSlug = name
|
|
50
|
+
.replace( /^has-/, '' )
|
|
51
|
+
.replace( /-color$/, '' );
|
|
50
52
|
const colorObject = getColorObjectByAttributeValues(
|
|
51
53
|
colorSettings,
|
|
52
54
|
colorSlug
|
|
@@ -88,7 +90,7 @@ function setColors( value, name, colorSettings, colors ) {
|
|
|
88
90
|
styles.push( [ 'background-color', backgroundColor ].join( ':' ) );
|
|
89
91
|
} else {
|
|
90
92
|
// Override default browser color for mark element.
|
|
91
|
-
styles.push( [ 'background-color',
|
|
93
|
+
styles.push( [ 'background-color', transparentValue ].join( ':' ) );
|
|
92
94
|
}
|
|
93
95
|
|
|
94
96
|
if ( color ) {
|