@wordpress/format-library 5.2.0 → 5.3.0
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/CHANGELOG.md +2 -0
- package/build/text-color/index.js +3 -5
- package/build/text-color/index.js.map +1 -1
- package/build/text-color/index.native.js +3 -12
- package/build/text-color/index.native.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 -6
- package/build-module/text-color/index.js.map +1 -1
- package/build-module/text-color/index.native.js +4 -13
- package/build-module/text-color/index.native.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 +14 -14
- package/src/text-color/index.js +4 -12
- package/src/text-color/index.native.js +8 -20
- package/src/text-color/inline.js +6 -10
package/CHANGELOG.md
CHANGED
|
@@ -60,9 +60,7 @@ function TextColorEdit({
|
|
|
60
60
|
}) {
|
|
61
61
|
const [allowCustomControl, colors = EMPTY_ARRAY] = (0, _blockEditor.useSettings)('color.custom', 'color.palette');
|
|
62
62
|
const [isAddingColor, setIsAddingColor] = (0, _element.useState)(false);
|
|
63
|
-
const
|
|
64
|
-
const disableIsAddingColor = (0, _element.useCallback)(() => setIsAddingColor(false), [setIsAddingColor]);
|
|
65
|
-
const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef.current, (0, _inline.getActiveColors)(value, name, colors)), [value, colors]);
|
|
63
|
+
const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef.current, (0, _inline.getActiveColors)(value, name, colors)), [contentRef, value, colors]);
|
|
66
64
|
const hasColorsToChoose = colors.length || !allowCustomControl;
|
|
67
65
|
if (!hasColorsToChoose && !isActive) {
|
|
68
66
|
return null;
|
|
@@ -78,11 +76,11 @@ function TextColorEdit({
|
|
|
78
76
|
title: title
|
|
79
77
|
// If has no colors to choose but a color is active remove the color onClick.
|
|
80
78
|
,
|
|
81
|
-
onClick: hasColorsToChoose ?
|
|
79
|
+
onClick: hasColorsToChoose ? () => setIsAddingColor(true) : () => onChange((0, _richText.removeFormat)(value, name)),
|
|
82
80
|
role: "menuitemcheckbox"
|
|
83
81
|
}), isAddingColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inline.default, {
|
|
84
82
|
name: name,
|
|
85
|
-
onClose:
|
|
83
|
+
onClose: () => setIsAddingColor(false),
|
|
86
84
|
activeAttributes: activeAttributes,
|
|
87
85
|
value: value,
|
|
88
86
|
onChange: onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_i18n","require","_element","_blockEditor","_icons","_richText","_inline","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","transparentValue","exports","name","title","__","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","useSettings","isAddingColor","setIsAddingColor","useState","
|
|
1
|
+
{"version":3,"names":["_i18n","require","_element","_blockEditor","_icons","_richText","_inline","_interopRequireWildcard","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","transparentValue","exports","name","title","__","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","color","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","useSettings","isAddingColor","setIsAddingColor","useState","colorIndicatorStyle","useMemo","current","getActiveColors","hasColorsToChoose","length","jsxs","Fragment","children","jsx","RichTextToolbarButton","className","icon","Icon","keys","textColorIcon","colorIcon","onClick","removeFormat","role","onClose","textColor","tagName","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} 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, colors = EMPTY_ARRAY ] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette'\n\t);\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\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[ contentRef, value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! 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={\n\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t}\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? () => setIsAddingColor( true )\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={ () => setIsAddingColor( false ) }\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\tisActive={ isActive }\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\tedit: TextColorEdit,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -69,17 +69,8 @@ function TextColorEdit({
|
|
|
69
69
|
const [allowCustomControl] = (0, _blockEditor.useSettings)('color.custom');
|
|
70
70
|
const colors = (0, _blockEditor.useMobileGlobalStylesColors)();
|
|
71
71
|
const [isAddingColor, setIsAddingColor] = (0, _element.useState)(false);
|
|
72
|
-
const
|
|
73
|
-
const disableIsAddingColor = (0, _element.useCallback)(() => setIsAddingColor(false), [setIsAddingColor]);
|
|
74
|
-
const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef, (0, _inlineNative.getActiveColors)(value, name, colors)), [value, colors]);
|
|
72
|
+
const colorIndicatorStyle = (0, _element.useMemo)(() => fillComputedColors(contentRef, (0, _inlineNative.getActiveColors)(value, name, colors)), [contentRef, value, colors]);
|
|
75
73
|
const hasColorsToChoose = colors.length || !allowCustomControl;
|
|
76
|
-
const onPressButton = (0, _element.useCallback)(() => {
|
|
77
|
-
if (hasColorsToChoose) {
|
|
78
|
-
enableIsAddingColor();
|
|
79
|
-
} else {
|
|
80
|
-
onChange((0, _richText.removeFormat)(value, name));
|
|
81
|
-
}
|
|
82
|
-
}, [hasColorsToChoose, value]);
|
|
83
74
|
const outlineStyle = [(0, _compose.usePreferredColorSchemeStyle)(_style.default['components-inline-color__outline'], _style.default['components-inline-color__outline--dark']), {
|
|
84
75
|
borderWidth: _reactNative.StyleSheet.hairlineWidth
|
|
85
76
|
}];
|
|
@@ -116,12 +107,12 @@ function TextColorEdit({
|
|
|
116
107
|
}
|
|
117
108
|
// If has no colors to choose but a color is active remove the color onClick
|
|
118
109
|
,
|
|
119
|
-
onClick:
|
|
110
|
+
onClick: hasColorsToChoose ? () => setIsAddingColor(true) : () => onChange((0, _richText.removeFormat)(value, name))
|
|
120
111
|
})]
|
|
121
112
|
})
|
|
122
113
|
}), isAddingColor && /*#__PURE__*/(0, _jsxRuntime.jsx)(_inline.default, {
|
|
123
114
|
name: name,
|
|
124
|
-
onClose:
|
|
115
|
+
onClose: () => setIsAddingColor(false),
|
|
125
116
|
activeAttributes: activeAttributes,
|
|
126
117
|
value: value,
|
|
127
118
|
onChange: onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inlineNative","_inline","_interopRequireDefault","_style","_jsxRuntime","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inlineNative","_inline","_interopRequireDefault","_style","_jsxRuntime","name","title","__","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","jsxs","Fragment","children","jsx","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","removeFormat","default","onClose","textColor","exports","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tuseSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.native.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\n\n\tif ( property === 'background-color' ) {\n\t\tconst { backgroundColor, baseColors } = style;\n\n\t\tif ( backgroundColor !== 'transparent' ) {\n\t\t\treturn backgroundColor;\n\t\t} else if ( baseColors && baseColors?.color?.background ) {\n\t\t\treturn baseColors?.color?.background;\n\t\t}\n\n\t\treturn 'transparent';\n\t}\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: getComputedStyleProperty(\n\t\t\telement,\n\t\t\t'background-color'\n\t\t),\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst [ allowCustomControl ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ contentRef, value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! allowCustomControl;\n\n\tconst outlineStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\n\t];\n\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\tconst isActiveStyle = {\n\t\t...colorIndicatorStyle,\n\t\t...( ! colorIndicatorStyle?.backgroundColor\n\t\t\t? { backgroundColor: 'transparent' }\n\t\t\t: {} ),\n\t\t...styles[ 'components-inline-color--is-active' ],\n\t};\n\n\tconst customContainerStyles =\n\t\tstyles[ 'components-inline-color__button-container' ];\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t{ isActive && (\n\t\t\t\t\t\t<View style={ outlineStyle } pointerEvents=\"none\" />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tname=\"text-color\"\n\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tcolorIndicatorStyle?.color && {\n\t\t\t\t\t\t\t\t\t\tcolor: colorIndicatorStyle.color,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\textraProps={ {\n\t\t\t\t\t\t\tisActiveStyle,\n\t\t\t\t\t\t\tcustomContainerStyles,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t\t\t? () => setIsAddingColor( true )\n\t\t\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ () => setIsAddingColor( false ) }\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\tedit: TextColorEdit,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -120,15 +120,14 @@ function ColorPicker({
|
|
|
120
120
|
} = select(_blockEditor.store);
|
|
121
121
|
return (_getSettings$colors = getSettings().colors) !== null && _getSettings$colors !== void 0 ? _getSettings$colors : [];
|
|
122
122
|
}, []);
|
|
123
|
-
const onColorChange = (0, _element.useCallback)(color => {
|
|
124
|
-
onChange(setColors(value, name, colors, {
|
|
125
|
-
[property]: color
|
|
126
|
-
}));
|
|
127
|
-
}, [colors, onChange, property]);
|
|
128
123
|
const activeColors = (0, _element.useMemo)(() => getActiveColors(value, name, colors), [name, value, colors]);
|
|
129
124
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ColorPalette, {
|
|
130
125
|
value: activeColors[property],
|
|
131
|
-
onChange:
|
|
126
|
+
onChange: color => {
|
|
127
|
+
onChange(setColors(value, name, colors, {
|
|
128
|
+
[property]: color
|
|
129
|
+
}));
|
|
130
|
+
}
|
|
132
131
|
});
|
|
133
132
|
}
|
|
134
133
|
function InlineColorUI({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_element","require","_data","_richText","_blockEditor","_components","_i18n","_index","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","TABS","name","title","__","parseCSS","css","split","reduce","accumulator","rule","property","value","color","transparentValue","backgroundColor","parseClassName","className","colorSettings","startsWith","endsWith","colorSlug","replace","colorObject","getColorObjectByAttributeValues","getActiveColors","activeColorFormat","getActiveFormat","attributes","style","class","setColors","colors","removeFormat","styles","classNames","push","join","getColorObjectByColorValue","getColorClassName","slug","length","applyFormat","type","ColorPicker","onChange","useSelect","select","_getSettings$colors","getSettings","blockEditorStore","onColorChange","useCallback","activeColors","useMemo","jsx","ColorPalette","InlineColorUI","onClose","contentRef","isActive","popoverAnchor","useAnchor","editableContentElement","current","settings","Popover","anchor","children","jsxs","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":[]}
|
|
1
|
+
{"version":3,"names":["_element","require","_data","_richText","_blockEditor","_components","_i18n","_index","_lockUnlock","_jsxRuntime","Tabs","unlock","componentsPrivateApis","TABS","name","title","__","parseCSS","css","split","reduce","accumulator","rule","property","value","color","transparentValue","backgroundColor","parseClassName","className","colorSettings","startsWith","endsWith","colorSlug","replace","colorObject","getColorObjectByAttributeValues","getActiveColors","activeColorFormat","getActiveFormat","attributes","style","class","setColors","colors","removeFormat","styles","classNames","push","join","getColorObjectByColorValue","getColorClassName","slug","length","applyFormat","type","ColorPicker","onChange","useSelect","select","_getSettings$colors","getSettings","blockEditorStore","activeColors","useMemo","jsx","ColorPalette","InlineColorUI","onClose","contentRef","isActive","popoverAnchor","useAnchor","editableContentElement","current","settings","Popover","anchor","children","jsxs","TabList","map","tab","Tab","tabId","TabPanel","focusable"],"sources":["@wordpress/format-library/src/text-color/inline.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { 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 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={ ( color ) => {\n\t\t\t\tonChange(\n\t\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t\t);\n\t\t\t} }\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":[]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import {
|
|
5
|
+
import { useMemo, useState } from '@wordpress/element';
|
|
6
6
|
import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
|
|
7
7
|
import { Icon, color as colorIcon, textColor as textColorIcon } from '@wordpress/icons';
|
|
8
8
|
import { removeFormat } from '@wordpress/rich-text';
|
|
@@ -53,9 +53,7 @@ function TextColorEdit({
|
|
|
53
53
|
}) {
|
|
54
54
|
const [allowCustomControl, colors = EMPTY_ARRAY] = useSettings('color.custom', 'color.palette');
|
|
55
55
|
const [isAddingColor, setIsAddingColor] = useState(false);
|
|
56
|
-
const
|
|
57
|
-
const disableIsAddingColor = useCallback(() => setIsAddingColor(false), [setIsAddingColor]);
|
|
58
|
-
const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef.current, getActiveColors(value, name, colors)), [value, colors]);
|
|
56
|
+
const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef.current, getActiveColors(value, name, colors)), [contentRef, value, colors]);
|
|
59
57
|
const hasColorsToChoose = colors.length || !allowCustomControl;
|
|
60
58
|
if (!hasColorsToChoose && !isActive) {
|
|
61
59
|
return null;
|
|
@@ -71,11 +69,11 @@ function TextColorEdit({
|
|
|
71
69
|
title: title
|
|
72
70
|
// If has no colors to choose but a color is active remove the color onClick.
|
|
73
71
|
,
|
|
74
|
-
onClick: hasColorsToChoose ?
|
|
72
|
+
onClick: hasColorsToChoose ? () => setIsAddingColor(true) : () => onChange(removeFormat(value, name)),
|
|
75
73
|
role: "menuitemcheckbox"
|
|
76
74
|
}), isAddingColor && /*#__PURE__*/_jsx(InlineColorUI, {
|
|
77
75
|
name: name,
|
|
78
|
-
onClose:
|
|
76
|
+
onClose: () => setIsAddingColor(false),
|
|
79
77
|
activeAttributes: activeAttributes,
|
|
80
78
|
value: value,
|
|
81
79
|
onChange: onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__","
|
|
1
|
+
{"version":3,"names":["__","useMemo","useState","RichTextToolbarButton","useSettings","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","default","InlineColorUI","getActiveColors","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","transparentValue","name","title","EMPTY_ARRAY","getComputedStyleProperty","element","property","ownerDocument","defaultView","style","getComputedStyle","value","getPropertyValue","parentElement","fillComputedColors","backgroundColor","TextColorEdit","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","colorIndicatorStyle","current","hasColorsToChoose","length","children","className","icon","Object","keys","onClick","role","onClose","tagName","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} 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, colors = EMPTY_ARRAY ] = useSettings(\n\t\t'color.custom',\n\t\t'color.palette'\n\t);\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\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[ contentRef, value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! 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={\n\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t}\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? () => setIsAddingColor( true )\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={ () => setIsAddingColor( false ) }\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\tisActive={ isActive }\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\tedit: TextColorEdit,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -7,7 +7,7 @@ import { StyleSheet, View } from 'react-native';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { __ } from '@wordpress/i18n';
|
|
10
|
-
import {
|
|
10
|
+
import { useMemo, useState } from '@wordpress/element';
|
|
11
11
|
import { BlockControls, useSettings, useMobileGlobalStylesColors } from '@wordpress/block-editor';
|
|
12
12
|
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
|
|
13
13
|
import { Icon, color as colorIcon, textColor as textColorIcon } from '@wordpress/icons';
|
|
@@ -63,17 +63,8 @@ function TextColorEdit({
|
|
|
63
63
|
const [allowCustomControl] = useSettings('color.custom');
|
|
64
64
|
const colors = useMobileGlobalStylesColors();
|
|
65
65
|
const [isAddingColor, setIsAddingColor] = useState(false);
|
|
66
|
-
const
|
|
67
|
-
const disableIsAddingColor = useCallback(() => setIsAddingColor(false), [setIsAddingColor]);
|
|
68
|
-
const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef, getActiveColors(value, name, colors)), [value, colors]);
|
|
66
|
+
const colorIndicatorStyle = useMemo(() => fillComputedColors(contentRef, getActiveColors(value, name, colors)), [contentRef, value, colors]);
|
|
69
67
|
const hasColorsToChoose = colors.length || !allowCustomControl;
|
|
70
|
-
const onPressButton = useCallback(() => {
|
|
71
|
-
if (hasColorsToChoose) {
|
|
72
|
-
enableIsAddingColor();
|
|
73
|
-
} else {
|
|
74
|
-
onChange(removeFormat(value, name));
|
|
75
|
-
}
|
|
76
|
-
}, [hasColorsToChoose, value]);
|
|
77
68
|
const outlineStyle = [usePreferredColorSchemeStyle(styles['components-inline-color__outline'], styles['components-inline-color__outline--dark']), {
|
|
78
69
|
borderWidth: StyleSheet.hairlineWidth
|
|
79
70
|
}];
|
|
@@ -110,12 +101,12 @@ function TextColorEdit({
|
|
|
110
101
|
}
|
|
111
102
|
// If has no colors to choose but a color is active remove the color onClick
|
|
112
103
|
,
|
|
113
|
-
onClick:
|
|
104
|
+
onClick: hasColorsToChoose ? () => setIsAddingColor(true) : () => onChange(removeFormat(value, name))
|
|
114
105
|
})]
|
|
115
106
|
})
|
|
116
107
|
}), isAddingColor && /*#__PURE__*/_jsx(InlineColorUI, {
|
|
117
108
|
name: name,
|
|
118
|
-
onClose:
|
|
109
|
+
onClose: () => setIsAddingColor(false),
|
|
119
110
|
activeAttributes: activeAttributes,
|
|
120
111
|
value: value,
|
|
121
112
|
onChange: onChange,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","View","__","
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","__","useMemo","useState","BlockControls","useSettings","useMobileGlobalStylesColors","ToolbarGroup","ToolbarButton","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","default","InlineColorUI","styles","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","name","title","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","colorIndicatorStyle","hasColorsToChoose","length","outlineStyle","borderWidth","hairlineWidth","isActiveStyle","customContainerStyles","children","pointerEvents","icon","Object","keys","extraProps","onClick","onClose","tagName","className","attributes","class","edit"],"sources":["@wordpress/format-library/src/text-color/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { StyleSheet, View } from 'react-native';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useMemo, useState } from '@wordpress/element';\nimport {\n\tBlockControls,\n\tuseSettings,\n\tuseMobileGlobalStylesColors,\n} from '@wordpress/block-editor';\nimport { ToolbarGroup, ToolbarButton } from '@wordpress/components';\nimport {\n\tIcon,\n\tcolor as colorIcon,\n\ttextColor as textColorIcon,\n} from '@wordpress/icons';\nimport { removeFormat } from '@wordpress/rich-text';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { getActiveColors } from './inline.native.js';\nimport { default as InlineColorUI } from './inline';\nimport styles from './style.scss';\n\nconst name = 'core/text-color';\nconst title = __( 'Text color' );\n\nfunction getComputedStyleProperty( element, property ) {\n\tconst style = element?.props?.style ?? {};\n\n\tif ( property === 'background-color' ) {\n\t\tconst { backgroundColor, baseColors } = style;\n\n\t\tif ( backgroundColor !== 'transparent' ) {\n\t\t\treturn backgroundColor;\n\t\t} else if ( baseColors && baseColors?.color?.background ) {\n\t\t\treturn baseColors?.color?.background;\n\t\t}\n\n\t\treturn 'transparent';\n\t}\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: getComputedStyleProperty(\n\t\t\telement,\n\t\t\t'background-color'\n\t\t),\n\t};\n}\n\nfunction TextColorEdit( {\n\tvalue,\n\tonChange,\n\tisActive,\n\tactiveAttributes,\n\tcontentRef,\n} ) {\n\tconst [ allowCustomControl ] = useSettings( 'color.custom' );\n\tconst colors = useMobileGlobalStylesColors();\n\tconst [ isAddingColor, setIsAddingColor ] = useState( false );\n\tconst colorIndicatorStyle = useMemo(\n\t\t() =>\n\t\t\tfillComputedColors(\n\t\t\t\tcontentRef,\n\t\t\t\tgetActiveColors( value, name, colors )\n\t\t\t),\n\t\t[ contentRef, value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! allowCustomControl;\n\n\tconst outlineStyle = [\n\t\tusePreferredColorSchemeStyle(\n\t\t\tstyles[ 'components-inline-color__outline' ],\n\t\t\tstyles[ 'components-inline-color__outline--dark' ]\n\t\t),\n\t\t{ borderWidth: StyleSheet.hairlineWidth },\n\t];\n\n\tif ( ! hasColorsToChoose && ! isActive ) {\n\t\treturn null;\n\t}\n\n\tconst isActiveStyle = {\n\t\t...colorIndicatorStyle,\n\t\t...( ! colorIndicatorStyle?.backgroundColor\n\t\t\t? { backgroundColor: 'transparent' }\n\t\t\t: {} ),\n\t\t...styles[ 'components-inline-color--is-active' ],\n\t};\n\n\tconst customContainerStyles =\n\t\tstyles[ 'components-inline-color__button-container' ];\n\n\treturn (\n\t\t<>\n\t\t\t<BlockControls>\n\t\t\t\t<ToolbarGroup>\n\t\t\t\t\t{ isActive && (\n\t\t\t\t\t\t<View style={ outlineStyle } pointerEvents=\"none\" />\n\t\t\t\t\t) }\n\n\t\t\t\t\t<ToolbarButton\n\t\t\t\t\t\tname=\"text-color\"\n\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\tObject.keys( activeAttributes ).length\n\t\t\t\t\t\t\t\t\t\t? textColorIcon\n\t\t\t\t\t\t\t\t\t\t: colorIcon\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\tcolorIndicatorStyle?.color && {\n\t\t\t\t\t\t\t\t\t\tcolor: colorIndicatorStyle.color,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\textraProps={ {\n\t\t\t\t\t\t\tisActiveStyle,\n\t\t\t\t\t\t\tcustomContainerStyles,\n\t\t\t\t\t\t} }\n\t\t\t\t\t\t// If has no colors to choose but a color is active remove the color onClick\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\thasColorsToChoose\n\t\t\t\t\t\t\t\t? () => setIsAddingColor( true )\n\t\t\t\t\t\t\t\t: () => onChange( removeFormat( value, name ) )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</ToolbarGroup>\n\t\t\t</BlockControls>\n\t\t\t{ isAddingColor && (\n\t\t\t\t<InlineColorUI\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonClose={ () => setIsAddingColor( false ) }\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\tedit: TextColorEdit,\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { useMemo } from '@wordpress/element';
|
|
5
5
|
import { useSelect } from '@wordpress/data';
|
|
6
6
|
import { applyFormat, removeFormat, getActiveFormat, useAnchor } from '@wordpress/rich-text';
|
|
7
7
|
import { ColorPalette, getColorClassName, getColorObjectByColorValue, getColorObjectByAttributeValues, store as blockEditorStore } from '@wordpress/block-editor';
|
|
@@ -112,15 +112,14 @@ function ColorPicker({
|
|
|
112
112
|
} = select(blockEditorStore);
|
|
113
113
|
return (_getSettings$colors = getSettings().colors) !== null && _getSettings$colors !== void 0 ? _getSettings$colors : [];
|
|
114
114
|
}, []);
|
|
115
|
-
const onColorChange = useCallback(color => {
|
|
116
|
-
onChange(setColors(value, name, colors, {
|
|
117
|
-
[property]: color
|
|
118
|
-
}));
|
|
119
|
-
}, [colors, onChange, property]);
|
|
120
115
|
const activeColors = useMemo(() => getActiveColors(value, name, colors), [name, value, colors]);
|
|
121
116
|
return /*#__PURE__*/_jsx(ColorPalette, {
|
|
122
117
|
value: activeColors[property],
|
|
123
|
-
onChange:
|
|
118
|
+
onChange: color => {
|
|
119
|
+
onChange(setColors(value, name, colors, {
|
|
120
|
+
[property]: color
|
|
121
|
+
}));
|
|
122
|
+
}
|
|
124
123
|
});
|
|
125
124
|
}
|
|
126
125
|
export default function InlineColorUI({
|
|
@@ -1 +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","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":[]}
|
|
1
|
+
{"version":3,"names":["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","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 { 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 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={ ( color ) => {\n\t\t\t\tonChange(\n\t\t\t\t\tsetColors( value, name, colors, { [ property ]: color } )\n\t\t\t\t);\n\t\t\t} }\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.3.0",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -27,18 +27,18 @@
|
|
|
27
27
|
"react-native": "src/index",
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@babel/runtime": "^7.16.0",
|
|
30
|
-
"@wordpress/a11y": "^4.
|
|
31
|
-
"@wordpress/block-editor": "^13.
|
|
32
|
-
"@wordpress/components": "^28.
|
|
33
|
-
"@wordpress/compose": "^7.
|
|
34
|
-
"@wordpress/data": "^10.
|
|
35
|
-
"@wordpress/element": "^6.
|
|
36
|
-
"@wordpress/html-entities": "^4.
|
|
37
|
-
"@wordpress/i18n": "^5.
|
|
38
|
-
"@wordpress/icons": "^10.
|
|
39
|
-
"@wordpress/private-apis": "^1.
|
|
40
|
-
"@wordpress/rich-text": "^7.
|
|
41
|
-
"@wordpress/url": "^4.
|
|
30
|
+
"@wordpress/a11y": "^4.3.0",
|
|
31
|
+
"@wordpress/block-editor": "^13.3.0",
|
|
32
|
+
"@wordpress/components": "^28.3.0",
|
|
33
|
+
"@wordpress/compose": "^7.3.0",
|
|
34
|
+
"@wordpress/data": "^10.3.0",
|
|
35
|
+
"@wordpress/element": "^6.3.0",
|
|
36
|
+
"@wordpress/html-entities": "^4.3.0",
|
|
37
|
+
"@wordpress/i18n": "^5.3.0",
|
|
38
|
+
"@wordpress/icons": "^10.3.0",
|
|
39
|
+
"@wordpress/private-apis": "^1.3.0",
|
|
40
|
+
"@wordpress/rich-text": "^7.3.0",
|
|
41
|
+
"@wordpress/url": "^4.3.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^18.0.0",
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "122867d355ca4edc63d3a3bbd9411d3a2e1458df"
|
|
51
51
|
}
|
package/src/text-color/index.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
|
-
import {
|
|
5
|
+
import { useMemo, useState } from '@wordpress/element';
|
|
6
6
|
import { RichTextToolbarButton, useSettings } from '@wordpress/block-editor';
|
|
7
7
|
import {
|
|
8
8
|
Icon,
|
|
@@ -66,21 +66,13 @@ function TextColorEdit( {
|
|
|
66
66
|
'color.palette'
|
|
67
67
|
);
|
|
68
68
|
const [ isAddingColor, setIsAddingColor ] = useState( false );
|
|
69
|
-
const enableIsAddingColor = useCallback(
|
|
70
|
-
() => setIsAddingColor( true ),
|
|
71
|
-
[ setIsAddingColor ]
|
|
72
|
-
);
|
|
73
|
-
const disableIsAddingColor = useCallback(
|
|
74
|
-
() => setIsAddingColor( false ),
|
|
75
|
-
[ setIsAddingColor ]
|
|
76
|
-
);
|
|
77
69
|
const colorIndicatorStyle = useMemo(
|
|
78
70
|
() =>
|
|
79
71
|
fillComputedColors(
|
|
80
72
|
contentRef.current,
|
|
81
73
|
getActiveColors( value, name, colors )
|
|
82
74
|
),
|
|
83
|
-
[ value, colors ]
|
|
75
|
+
[ contentRef, value, colors ]
|
|
84
76
|
);
|
|
85
77
|
|
|
86
78
|
const hasColorsToChoose = colors.length || ! allowCustomControl;
|
|
@@ -107,7 +99,7 @@ function TextColorEdit( {
|
|
|
107
99
|
// If has no colors to choose but a color is active remove the color onClick.
|
|
108
100
|
onClick={
|
|
109
101
|
hasColorsToChoose
|
|
110
|
-
?
|
|
102
|
+
? () => setIsAddingColor( true )
|
|
111
103
|
: () => onChange( removeFormat( value, name ) )
|
|
112
104
|
}
|
|
113
105
|
role="menuitemcheckbox"
|
|
@@ -115,7 +107,7 @@ function TextColorEdit( {
|
|
|
115
107
|
{ isAddingColor && (
|
|
116
108
|
<InlineColorUI
|
|
117
109
|
name={ name }
|
|
118
|
-
onClose={
|
|
110
|
+
onClose={ () => setIsAddingColor( false ) }
|
|
119
111
|
activeAttributes={ activeAttributes }
|
|
120
112
|
value={ value }
|
|
121
113
|
onChange={ onChange }
|
|
@@ -7,7 +7,7 @@ import { StyleSheet, View } from 'react-native';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { __ } from '@wordpress/i18n';
|
|
10
|
-
import {
|
|
10
|
+
import { useMemo, useState } from '@wordpress/element';
|
|
11
11
|
import {
|
|
12
12
|
BlockControls,
|
|
13
13
|
useSettings,
|
|
@@ -72,33 +72,17 @@ function TextColorEdit( {
|
|
|
72
72
|
const [ allowCustomControl ] = useSettings( 'color.custom' );
|
|
73
73
|
const colors = useMobileGlobalStylesColors();
|
|
74
74
|
const [ isAddingColor, setIsAddingColor ] = useState( false );
|
|
75
|
-
const enableIsAddingColor = useCallback(
|
|
76
|
-
() => setIsAddingColor( true ),
|
|
77
|
-
[ setIsAddingColor ]
|
|
78
|
-
);
|
|
79
|
-
const disableIsAddingColor = useCallback(
|
|
80
|
-
() => setIsAddingColor( false ),
|
|
81
|
-
[ setIsAddingColor ]
|
|
82
|
-
);
|
|
83
75
|
const colorIndicatorStyle = useMemo(
|
|
84
76
|
() =>
|
|
85
77
|
fillComputedColors(
|
|
86
78
|
contentRef,
|
|
87
79
|
getActiveColors( value, name, colors )
|
|
88
80
|
),
|
|
89
|
-
[ value, colors ]
|
|
81
|
+
[ contentRef, value, colors ]
|
|
90
82
|
);
|
|
91
83
|
|
|
92
84
|
const hasColorsToChoose = colors.length || ! allowCustomControl;
|
|
93
85
|
|
|
94
|
-
const onPressButton = useCallback( () => {
|
|
95
|
-
if ( hasColorsToChoose ) {
|
|
96
|
-
enableIsAddingColor();
|
|
97
|
-
} else {
|
|
98
|
-
onChange( removeFormat( value, name ) );
|
|
99
|
-
}
|
|
100
|
-
}, [ hasColorsToChoose, value ] );
|
|
101
|
-
|
|
102
86
|
const outlineStyle = [
|
|
103
87
|
usePreferredColorSchemeStyle(
|
|
104
88
|
styles[ 'components-inline-color__outline' ],
|
|
@@ -153,14 +137,18 @@ function TextColorEdit( {
|
|
|
153
137
|
customContainerStyles,
|
|
154
138
|
} }
|
|
155
139
|
// If has no colors to choose but a color is active remove the color onClick
|
|
156
|
-
onClick={
|
|
140
|
+
onClick={
|
|
141
|
+
hasColorsToChoose
|
|
142
|
+
? () => setIsAddingColor( true )
|
|
143
|
+
: () => onChange( removeFormat( value, name ) )
|
|
144
|
+
}
|
|
157
145
|
/>
|
|
158
146
|
</ToolbarGroup>
|
|
159
147
|
</BlockControls>
|
|
160
148
|
{ isAddingColor && (
|
|
161
149
|
<InlineColorUI
|
|
162
150
|
name={ name }
|
|
163
|
-
onClose={
|
|
151
|
+
onClose={ () => setIsAddingColor( false ) }
|
|
164
152
|
activeAttributes={ activeAttributes }
|
|
165
153
|
value={ value }
|
|
166
154
|
onChange={ onChange }
|
package/src/text-color/inline.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* WordPress dependencies
|
|
3
3
|
*/
|
|
4
|
-
import {
|
|
4
|
+
import { useMemo } from '@wordpress/element';
|
|
5
5
|
import { useSelect } from '@wordpress/data';
|
|
6
6
|
import {
|
|
7
7
|
applyFormat,
|
|
@@ -129,14 +129,6 @@ function ColorPicker( { name, property, value, onChange } ) {
|
|
|
129
129
|
const { getSettings } = select( blockEditorStore );
|
|
130
130
|
return getSettings().colors ?? [];
|
|
131
131
|
}, [] );
|
|
132
|
-
const onColorChange = useCallback(
|
|
133
|
-
( color ) => {
|
|
134
|
-
onChange(
|
|
135
|
-
setColors( value, name, colors, { [ property ]: color } )
|
|
136
|
-
);
|
|
137
|
-
},
|
|
138
|
-
[ colors, onChange, property ]
|
|
139
|
-
);
|
|
140
132
|
const activeColors = useMemo(
|
|
141
133
|
() => getActiveColors( value, name, colors ),
|
|
142
134
|
[ name, value, colors ]
|
|
@@ -145,7 +137,11 @@ function ColorPicker( { name, property, value, onChange } ) {
|
|
|
145
137
|
return (
|
|
146
138
|
<ColorPalette
|
|
147
139
|
value={ activeColors[ property ] }
|
|
148
|
-
onChange={
|
|
140
|
+
onChange={ ( color ) => {
|
|
141
|
+
onChange(
|
|
142
|
+
setColors( value, name, colors, { [ property ]: color } )
|
|
143
|
+
);
|
|
144
|
+
} }
|
|
149
145
|
/>
|
|
150
146
|
);
|
|
151
147
|
}
|