@wordpress/format-library 4.24.0 → 4.25.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.native.js +2 -5
- package/build/text-color/index.native.js.map +1 -1
- package/build-module/text-color/index.native.js +2 -5
- package/build-module/text-color/index.native.js.map +1 -1
- package/package.json +13 -13
- package/src/text-color/index.native.js +1 -3
- package/src/text-color/test/index.native.js +62 -2
package/CHANGELOG.md
CHANGED
|
@@ -32,11 +32,8 @@ var _style = _interopRequireDefault(require("./style.scss"));
|
|
|
32
32
|
const name = 'core/text-color';
|
|
33
33
|
const title = (0, _i18n.__)('Text color');
|
|
34
34
|
function getComputedStyleProperty(element, property) {
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
style = {}
|
|
38
|
-
}
|
|
39
|
-
} = element;
|
|
35
|
+
var _element$props$style;
|
|
36
|
+
const style = (_element$props$style = element?.props?.style) !== null && _element$props$style !== void 0 ? _element$props$style : {};
|
|
40
37
|
if (property === 'background-color') {
|
|
41
38
|
const {
|
|
42
39
|
backgroundColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inline","_inline2","_interopRequireDefault","_style","name","title","__","getComputedStyleProperty","element","property","props","style","backgroundColor","baseColors","color","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","useSettings","colors","useMobileGlobalStylesColors","isAddingColor","setIsAddingColor","useState","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","tagName","className","attributes","class","edit","exports"],"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 { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} 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.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
|
|
1
|
+
{"version":3,"names":["_reactNative","require","_i18n","_element","_blockEditor","_components","_icons","_richText","_compose","_inline","_inline2","_interopRequireDefault","_style","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","enableIsAddingColor","useCallback","disableIsAddingColor","colorIndicatorStyle","useMemo","getActiveColors","hasColorsToChoose","length","onPressButton","removeFormat","outlineStyle","usePreferredColorSchemeStyle","styles","borderWidth","StyleSheet","hairlineWidth","isActiveStyle","customContainerStyles","_react","createElement","Fragment","BlockControls","ToolbarGroup","View","pointerEvents","ToolbarButton","icon","Icon","Object","keys","textColorIcon","colorIcon","extraProps","onClick","default","onClose","textColor","tagName","className","attributes","class","edit","exports"],"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 { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} 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.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 enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\n\t);\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[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! allowCustomControl;\n\n\tconst onPressButton = useCallback( () => {\n\t\tif ( hasColorsToChoose ) {\n\t\t\tenableIsAddingColor();\n\t\t} else {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t}\n\t}, [ hasColorsToChoose, value ] );\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={ onPressButton }\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={ 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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
|
|
@@ -24,11 +24,8 @@ import styles from './style.scss';
|
|
|
24
24
|
const name = 'core/text-color';
|
|
25
25
|
const title = __('Text color');
|
|
26
26
|
function getComputedStyleProperty(element, property) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
style = {}
|
|
30
|
-
}
|
|
31
|
-
} = element;
|
|
27
|
+
var _element$props$style;
|
|
28
|
+
const style = (_element$props$style = element?.props?.style) !== null && _element$props$style !== void 0 ? _element$props$style : {};
|
|
32
29
|
if (property === 'background-color') {
|
|
33
30
|
const {
|
|
34
31
|
backgroundColor,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["StyleSheet","View","__","useCallback","useMemo","useState","BlockControls","useSettings","ToolbarGroup","ToolbarButton","useMobileGlobalStylesColors","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","default","InlineColorUI","styles","name","title","getComputedStyleProperty","element","property","props","style","backgroundColor","baseColors","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","hasColorsToChoose","length","onPressButton","outlineStyle","borderWidth","hairlineWidth","isActiveStyle","customContainerStyles","createElement","Fragment","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 { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} 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.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
|
|
1
|
+
{"version":3,"names":["StyleSheet","View","__","useCallback","useMemo","useState","BlockControls","useSettings","ToolbarGroup","ToolbarButton","useMobileGlobalStylesColors","Icon","color","colorIcon","textColor","textColorIcon","removeFormat","usePreferredColorSchemeStyle","getActiveColors","default","InlineColorUI","styles","name","title","getComputedStyleProperty","element","property","_element$props$style","style","props","backgroundColor","baseColors","background","fillComputedColors","TextColorEdit","value","onChange","isActive","activeAttributes","contentRef","allowCustomControl","colors","isAddingColor","setIsAddingColor","enableIsAddingColor","disableIsAddingColor","colorIndicatorStyle","hasColorsToChoose","length","onPressButton","outlineStyle","borderWidth","hairlineWidth","isActiveStyle","customContainerStyles","createElement","Fragment","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 { useCallback, useMemo, useState } from '@wordpress/element';\nimport { BlockControls, useSettings } from '@wordpress/block-editor';\nimport {\n\tToolbarGroup,\n\tToolbarButton,\n\tuseMobileGlobalStylesColors,\n} 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.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 enableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( true ),\n\t\t[ setIsAddingColor ]\n\t);\n\tconst disableIsAddingColor = useCallback(\n\t\t() => setIsAddingColor( false ),\n\t\t[ setIsAddingColor ]\n\t);\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[ value, colors ]\n\t);\n\n\tconst hasColorsToChoose = colors.length || ! allowCustomControl;\n\n\tconst onPressButton = useCallback( () => {\n\t\tif ( hasColorsToChoose ) {\n\t\t\tenableIsAddingColor();\n\t\t} else {\n\t\t\tonChange( removeFormat( value, name ) );\n\t\t}\n\t}, [ hasColorsToChoose, value ] );\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={ onPressButton }\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={ 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\tedit: TextColorEdit,\n};\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/format-library",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.25.0",
|
|
4
4
|
"description": "Format library for the WordPress editor.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -26,17 +26,17 @@
|
|
|
26
26
|
"react-native": "src/index",
|
|
27
27
|
"dependencies": {
|
|
28
28
|
"@babel/runtime": "^7.16.0",
|
|
29
|
-
"@wordpress/a11y": "^3.
|
|
30
|
-
"@wordpress/block-editor": "^12.
|
|
31
|
-
"@wordpress/components": "^25.
|
|
32
|
-
"@wordpress/compose": "^6.
|
|
33
|
-
"@wordpress/data": "^9.
|
|
34
|
-
"@wordpress/element": "^5.
|
|
35
|
-
"@wordpress/html-entities": "^3.
|
|
36
|
-
"@wordpress/i18n": "^4.
|
|
37
|
-
"@wordpress/icons": "^9.
|
|
38
|
-
"@wordpress/rich-text": "^6.
|
|
39
|
-
"@wordpress/url": "^3.
|
|
29
|
+
"@wordpress/a11y": "^3.48.0",
|
|
30
|
+
"@wordpress/block-editor": "^12.16.0",
|
|
31
|
+
"@wordpress/components": "^25.14.0",
|
|
32
|
+
"@wordpress/compose": "^6.25.0",
|
|
33
|
+
"@wordpress/data": "^9.18.0",
|
|
34
|
+
"@wordpress/element": "^5.25.0",
|
|
35
|
+
"@wordpress/html-entities": "^3.48.0",
|
|
36
|
+
"@wordpress/i18n": "^4.48.0",
|
|
37
|
+
"@wordpress/icons": "^9.39.0",
|
|
38
|
+
"@wordpress/rich-text": "^6.25.0",
|
|
39
|
+
"@wordpress/url": "^3.49.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"react": "^18.0.0",
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"publishConfig": {
|
|
46
46
|
"access": "public"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "fcf61b4beff747222c2c81d09d757ca1a0abd925"
|
|
49
49
|
}
|
|
@@ -33,9 +33,7 @@ const name = 'core/text-color';
|
|
|
33
33
|
const title = __( 'Text color' );
|
|
34
34
|
|
|
35
35
|
function getComputedStyleProperty( element, property ) {
|
|
36
|
-
const {
|
|
37
|
-
props: { style = {} },
|
|
38
|
-
} = element;
|
|
36
|
+
const style = element?.props?.style ?? {};
|
|
39
37
|
|
|
40
38
|
if ( property === 'background-color' ) {
|
|
41
39
|
const { backgroundColor, baseColors } = style;
|
|
@@ -2,17 +2,29 @@
|
|
|
2
2
|
* External dependencies
|
|
3
3
|
*/
|
|
4
4
|
import {
|
|
5
|
+
fireEvent,
|
|
5
6
|
getEditorHtml,
|
|
6
7
|
initializeEditor,
|
|
7
|
-
|
|
8
|
+
render,
|
|
8
9
|
waitFor,
|
|
9
10
|
} from 'test/helpers';
|
|
10
11
|
|
|
11
12
|
/**
|
|
12
13
|
* WordPress dependencies
|
|
13
14
|
*/
|
|
14
|
-
import {
|
|
15
|
+
import {
|
|
16
|
+
registerBlockType,
|
|
17
|
+
setDefaultBlockName,
|
|
18
|
+
unregisterBlockType,
|
|
19
|
+
} from '@wordpress/blocks';
|
|
15
20
|
import { coreBlocks } from '@wordpress/block-library';
|
|
21
|
+
import { BlockControls, BlockEdit } from '@wordpress/block-editor';
|
|
22
|
+
import { SlotFillProvider } from '@wordpress/components';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Internal dependencies
|
|
26
|
+
*/
|
|
27
|
+
import { textColor } from '..';
|
|
16
28
|
|
|
17
29
|
const COLOR_PINK = '#f78da7';
|
|
18
30
|
const paragraph = coreBlocks[ 'core/paragraph' ];
|
|
@@ -164,4 +176,52 @@ describe( 'Text color', () => {
|
|
|
164
176
|
|
|
165
177
|
expect( getEditorHtml() ).toMatchSnapshot();
|
|
166
178
|
} );
|
|
179
|
+
|
|
180
|
+
it( 'renders when "contentRef" is undefined', () => {
|
|
181
|
+
registerBlockType( 'core/test-block', {
|
|
182
|
+
save: () => {},
|
|
183
|
+
category: 'text',
|
|
184
|
+
title: 'block title',
|
|
185
|
+
edit: ( { children } ) => <>{ children }</>,
|
|
186
|
+
} );
|
|
187
|
+
const TextColorEdit = textColor.edit;
|
|
188
|
+
// Empty text with black color set as the text color
|
|
189
|
+
const textValue = {
|
|
190
|
+
formats: [],
|
|
191
|
+
replacements: [],
|
|
192
|
+
text: '',
|
|
193
|
+
start: 0,
|
|
194
|
+
end: 0,
|
|
195
|
+
activeFormats: [
|
|
196
|
+
{
|
|
197
|
+
type: 'core/text-color',
|
|
198
|
+
attributes: {
|
|
199
|
+
style: 'background-color:rgba(0, 0, 0, 0);color:#111111',
|
|
200
|
+
class: 'has-contrast-color',
|
|
201
|
+
},
|
|
202
|
+
},
|
|
203
|
+
],
|
|
204
|
+
};
|
|
205
|
+
|
|
206
|
+
const { getByLabelText } = render(
|
|
207
|
+
<SlotFillProvider>
|
|
208
|
+
<BlockEdit name="core/test-block" isSelected mayDisplayControls>
|
|
209
|
+
<TextColorEdit
|
|
210
|
+
isActive={ true }
|
|
211
|
+
activeAttributes={ {} }
|
|
212
|
+
value={ textValue }
|
|
213
|
+
onChange={ jest.fn() }
|
|
214
|
+
// This ref is usually defined by the `RichText` component.
|
|
215
|
+
// However, there are rare cases (probably related to slow performance
|
|
216
|
+
// in low-end devices) where it's undefined upon mounting.
|
|
217
|
+
contentRef={ undefined }
|
|
218
|
+
/>
|
|
219
|
+
</BlockEdit>
|
|
220
|
+
<BlockControls.Slot />
|
|
221
|
+
</SlotFillProvider>
|
|
222
|
+
);
|
|
223
|
+
|
|
224
|
+
const textColorButton = getByLabelText( 'Text color' );
|
|
225
|
+
expect( textColorButton ).toBeDefined();
|
|
226
|
+
} );
|
|
167
227
|
} );
|