@wordpress/style-engine 2.41.1-next.v.202603161435.0 → 2.43.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 +4 -0
- package/build/styles/background/index.cjs +14 -17
- package/build/styles/background/index.cjs.map +2 -2
- package/build/types.cjs.map +1 -1
- package/build-module/styles/background/index.mjs +15 -18
- package/build-module/styles/background/index.mjs.map +2 -2
- package/build-types/styles/background/index.d.ts.map +1 -1
- package/build-types/types.d.ts +1 -0
- package/build-types/types.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/class-wp-style-engine.php +19 -0
- package/src/styles/background/index.ts +24 -23
- package/src/test/index.js +68 -0
- package/src/types.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -28,24 +28,21 @@ var backgroundImage = {
|
|
|
28
28
|
name: "backgroundImage",
|
|
29
29
|
generate: (style, options) => {
|
|
30
30
|
const _backgroundImage = style?.background?.backgroundImage;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
selector: options.selector,
|
|
35
|
-
key: "backgroundImage",
|
|
36
|
-
// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
|
|
37
|
-
value: `url( '${encodeURI(
|
|
38
|
-
(0, import_utils.safeDecodeURI)(_backgroundImage.url)
|
|
39
|
-
)}' )`
|
|
40
|
-
}
|
|
41
|
-
];
|
|
31
|
+
const gradient = (0, import_utils.getCSSValueFromRawStyle)(style?.background?.gradient) || "";
|
|
32
|
+
if (!_backgroundImage && !gradient) {
|
|
33
|
+
return [];
|
|
42
34
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
35
|
+
const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '${encodeURI(
|
|
36
|
+
(0, import_utils.safeDecodeURI)(_backgroundImage.url)
|
|
37
|
+
)}' )` : (0, import_utils.getCSSValueFromRawStyle)(_backgroundImage);
|
|
38
|
+
const cssValue = [gradient, backgroundImageValue].filter(Boolean).join(", ");
|
|
39
|
+
return !!cssValue ? [
|
|
40
|
+
{
|
|
41
|
+
selector: options.selector,
|
|
42
|
+
key: "backgroundImage",
|
|
43
|
+
value: cssValue
|
|
44
|
+
}
|
|
45
|
+
] : [];
|
|
49
46
|
}
|
|
50
47
|
};
|
|
51
48
|
var backgroundPosition = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/background/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\t\tconst gradient =\n\t\t\tgetCSSValueFromRawStyle( style?.background?.gradient ) || '';\n\n\t\tif ( ! _backgroundImage && ! gradient ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst backgroundImageValue =\n\t\t\ttypeof _backgroundImage === 'object' && _backgroundImage?.url\n\t\t\t\t? `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t ) }' )`\n\t\t\t\t: getCSSValueFromRawStyle( _backgroundImage );\n\t\tconst cssValue = [ gradient, backgroundImageValue ]\n\t\t\t.filter( Boolean )\n\t\t\t.join( ', ' );\n\n\t\treturn !! cssValue\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tselector: options.selector,\n\t\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t\tvalue: cssValue,\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: [];\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,mBAAqE;AAErE,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAC5C,UAAM,eACL,sCAAyB,OAAO,YAAY,QAAS,KAAK;AAE3D,QAAK,CAAE,oBAAoB,CAAE,UAAW;AACvC,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,uBACL,OAAO,qBAAqB,YAAY,kBAAkB,MACvD,SAAU;AAAA,UACV,4BAAe,iBAAiB,GAAI;AAAA,IACpC,CAAE,YACF,sCAAyB,gBAAiB;AAC9C,UAAM,WAAW,CAAE,UAAU,oBAAqB,EAChD,OAAQ,OAAQ,EAChB,KAAM,IAAK;AAEb,WAAO,CAAC,CAAE,WACP;AAAA,MACA;AAAA,QACC,UAAU,QAAQ;AAAA,QAClB,KAAK;AAAA,QACL,OAAO;AAAA,MACR;AAAA,IACA,IACA,CAAC;AAAA,EACL;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,eAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/build/types.cjs.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../src/types.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { CSSProperties } from 'react';\n\ntype BoxVariant = 'margin' | 'padding';\nexport interface Box< T extends BoxVariant | undefined = undefined > {\n\ttop?: CSSProperties[ T extends undefined ? 'top' : `${ T }Top` ];\n\tright?: CSSProperties[ T extends undefined ? 'right' : `${ T }Right` ];\n\tbottom?: CSSProperties[ T extends undefined ? 'bottom' : `${ T }Bottom` ];\n\tleft?: CSSProperties[ T extends undefined ? 'left' : `${ T }Left` ];\n}\n\nexport type BoxEdge = 'top' | 'right' | 'bottom' | 'left';\n\n// `T` is one of the values in `BorderIndividualProperty`. The expected CSSProperties key is something like `borderTopColor`.\nexport interface BorderIndividualStyles< T extends BoxEdge > {\n\tcolor?: CSSProperties[ `border${ Capitalize< T > }Color` ];\n\tstyle?: CSSProperties[ `border${ Capitalize< T > }Style` ];\n\twidth?: CSSProperties[ `border${ Capitalize< T > }Width` ];\n}\n\nexport interface Style {\n\tbackground?: {\n\t\tbackgroundImage?:\n\t\t\t| { url?: CSSProperties[ 'backgroundImage' ]; source?: string }\n\t\t\t| CSSProperties[ 'backgroundImage' ];\n\t\tbackgroundPosition?: CSSProperties[ 'backgroundPosition' ];\n\t\tbackgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];\n\t\tbackgroundSize?: CSSProperties[ 'backgroundSize' ];\n\t\tgradient?: CSSProperties[ 'backgroundImage' ];\n\t};\n\tborder?: {\n\t\tcolor?: CSSProperties[ 'borderColor' ];\n\t\tradius?:\n\t\t\t| CSSProperties[ 'borderRadius' ]\n\t\t\t| {\n\t\t\t\t\ttopLeft?: CSSProperties[ 'borderTopLeftRadius' ];\n\t\t\t\t\ttopRight?: CSSProperties[ 'borderTopRightRadius' ];\n\t\t\t\t\tbottomLeft?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t\t\tbottomRight?: CSSProperties[ 'borderBottomLeftRadius' ];\n\t\t\t };\n\t\tstyle?: CSSProperties[ 'borderStyle' ];\n\t\twidth?: CSSProperties[ 'borderWidth' ];\n\t\ttop?: BorderIndividualStyles< 'top' >;\n\t\tright?: BorderIndividualStyles< 'right' >;\n\t\tbottom?: BorderIndividualStyles< 'bottom' >;\n\t\tleft?: BorderIndividualStyles< 'left' >;\n\t};\n\tdimensions?: {\n\t\taspectRatio?: CSSProperties[ 'aspectRatio' ];\n\t\theight?: CSSProperties[ 'height' ];\n\t\tminHeight?: CSSProperties[ 'minHeight' ];\n\t\twidth?: CSSProperties[ 'width' ];\n\t};\n\tspacing?: {\n\t\tmargin?: CSSProperties[ 'margin' ] | Box< 'margin' >;\n\t\tpadding?: CSSProperties[ 'padding' ] | Box< 'padding' >;\n\t};\n\ttypography?: {\n\t\tfontSize?: CSSProperties[ 'fontSize' ];\n\t\tfontFamily?: CSSProperties[ 'fontFamily' ];\n\t\tfontWeight?: CSSProperties[ 'fontWeight' ];\n\t\tfontStyle?: CSSProperties[ 'fontStyle' ];\n\t\tletterSpacing?: CSSProperties[ 'letterSpacing' ];\n\t\tlineHeight?: CSSProperties[ 'lineHeight' ];\n\t\ttextColumns?: CSSProperties[ 'columnCount' ];\n\t\ttextDecoration?: CSSProperties[ 'textDecoration' ];\n\t\ttextTransform?: CSSProperties[ 'textTransform' ];\n\t\twritingMode?: CSSProperties[ 'writingMode' ];\n\t};\n\tcolor?: {\n\t\ttext?: CSSProperties[ 'color' ];\n\t\tbackground?: CSSProperties[ 'backgroundColor' ];\n\t\tgradient?: CSSProperties[ 'background' ];\n\t};\n\telements?: {\n\t\tlink?: {\n\t\t\tcolor?: {\n\t\t\t\ttext?: CSSProperties[ 'color' ];\n\t\t\t};\n\t\t};\n\t};\n}\n\nexport interface CssRulesKeys {\n\tdefault: string;\n\tindividual: string;\n}\n\nexport interface StyleOptions {\n\t/**\n\t * CSS selector for the generated style.\n\t */\n\tselector?: string;\n}\n\nexport interface GeneratedCSSRule {\n\tselector?: string;\n\tvalue: string | unknown;\n\t/**\n\t * The CSS key in JS style attribute format, compatible with React.\n\t * E.g. `paddingTop` instead of `padding-top`.\n\t */\n\tkey: string;\n}\n\nexport interface GenerateFunction {\n\t( style: Style, options: StyleOptions ): GeneratedCSSRule[];\n}\n\nexport interface StyleDefinition {\n\tname: string;\n\tgenerate?: GenerateFunction;\n}\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,27 +1,24 @@
|
|
|
1
1
|
// packages/style-engine/src/styles/background/index.ts
|
|
2
|
-
import { generateRule, safeDecodeURI } from "../utils.mjs";
|
|
2
|
+
import { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from "../utils.mjs";
|
|
3
3
|
var backgroundImage = {
|
|
4
4
|
name: "backgroundImage",
|
|
5
5
|
generate: (style, options) => {
|
|
6
6
|
const _backgroundImage = style?.background?.backgroundImage;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
selector: options.selector,
|
|
11
|
-
key: "backgroundImage",
|
|
12
|
-
// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
|
|
13
|
-
value: `url( '${encodeURI(
|
|
14
|
-
safeDecodeURI(_backgroundImage.url)
|
|
15
|
-
)}' )`
|
|
16
|
-
}
|
|
17
|
-
];
|
|
7
|
+
const gradient = getCSSValueFromRawStyle(style?.background?.gradient) || "";
|
|
8
|
+
if (!_backgroundImage && !gradient) {
|
|
9
|
+
return [];
|
|
18
10
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
11
|
+
const backgroundImageValue = typeof _backgroundImage === "object" && _backgroundImage?.url ? `url( '${encodeURI(
|
|
12
|
+
safeDecodeURI(_backgroundImage.url)
|
|
13
|
+
)}' )` : getCSSValueFromRawStyle(_backgroundImage);
|
|
14
|
+
const cssValue = [gradient, backgroundImageValue].filter(Boolean).join(", ");
|
|
15
|
+
return !!cssValue ? [
|
|
16
|
+
{
|
|
17
|
+
selector: options.selector,
|
|
18
|
+
key: "backgroundImage",
|
|
19
|
+
value: cssValue
|
|
20
|
+
}
|
|
21
|
+
] : [];
|
|
25
22
|
}
|
|
26
23
|
};
|
|
27
24
|
var backgroundPosition = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/styles/background/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\
|
|
5
|
-
"mappings": ";AAIA,SAAS,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport type { Style, StyleOptions } from '../../types';\nimport { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';\n\nconst backgroundImage = {\n\tname: 'backgroundImage',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\tconst _backgroundImage = style?.background?.backgroundImage;\n\t\tconst gradient =\n\t\t\tgetCSSValueFromRawStyle( style?.background?.gradient ) || '';\n\n\t\tif ( ! _backgroundImage && ! gradient ) {\n\t\t\treturn [];\n\t\t}\n\n\t\tconst backgroundImageValue =\n\t\t\ttypeof _backgroundImage === 'object' && _backgroundImage?.url\n\t\t\t\t? `url( '${ encodeURI(\n\t\t\t\t\t\tsafeDecodeURI( _backgroundImage.url )\n\t\t\t\t ) }' )`\n\t\t\t\t: getCSSValueFromRawStyle( _backgroundImage );\n\t\tconst cssValue = [ gradient, backgroundImageValue ]\n\t\t\t.filter( Boolean )\n\t\t\t.join( ', ' );\n\n\t\treturn !! cssValue\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tselector: options.selector,\n\t\t\t\t\t\tkey: 'backgroundImage',\n\t\t\t\t\t\tvalue: cssValue,\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: [];\n\t},\n};\n\nconst backgroundPosition = {\n\tname: 'backgroundPosition',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundPosition' ],\n\t\t\t'backgroundPosition'\n\t\t);\n\t},\n};\n\nconst backgroundRepeat = {\n\tname: 'backgroundRepeat',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundRepeat' ],\n\t\t\t'backgroundRepeat'\n\t\t);\n\t},\n};\n\nconst backgroundSize = {\n\tname: 'backgroundSize',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundSize' ],\n\t\t\t'backgroundSize'\n\t\t);\n\t},\n};\n\nconst backgroundAttachment = {\n\tname: 'backgroundAttachment',\n\tgenerate: ( style: Style, options: StyleOptions ) => {\n\t\treturn generateRule(\n\t\t\tstyle,\n\t\t\toptions,\n\t\t\t[ 'background', 'backgroundAttachment' ],\n\t\t\t'backgroundAttachment'\n\t\t);\n\t},\n};\n\nexport default [\n\tbackgroundImage,\n\tbackgroundPosition,\n\tbackgroundRepeat,\n\tbackgroundSize,\n\tbackgroundAttachment,\n];\n"],
|
|
5
|
+
"mappings": ";AAIA,SAAS,cAAc,yBAAyB,qBAAqB;AAErE,IAAM,kBAAkB;AAAA,EACvB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,UAAM,mBAAmB,OAAO,YAAY;AAC5C,UAAM,WACL,wBAAyB,OAAO,YAAY,QAAS,KAAK;AAE3D,QAAK,CAAE,oBAAoB,CAAE,UAAW;AACvC,aAAO,CAAC;AAAA,IACT;AAEA,UAAM,uBACL,OAAO,qBAAqB,YAAY,kBAAkB,MACvD,SAAU;AAAA,MACV,cAAe,iBAAiB,GAAI;AAAA,IACpC,CAAE,QACF,wBAAyB,gBAAiB;AAC9C,UAAM,WAAW,CAAE,UAAU,oBAAqB,EAChD,OAAQ,OAAQ,EAChB,KAAM,IAAK;AAEb,WAAO,CAAC,CAAE,WACP;AAAA,MACA;AAAA,QACC,UAAU,QAAQ;AAAA,QAClB,KAAK;AAAA,QACL,OAAO;AAAA,MACR;AAAA,IACA,IACA,CAAC;AAAA,EACL;AACD;AAEA,IAAM,qBAAqB;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,oBAAqB;AAAA,MACrC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,kBAAmB;AAAA,MACnC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,iBAAiB;AAAA,EACtB,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,gBAAiB;AAAA,MACjC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAM,uBAAuB;AAAA,EAC5B,MAAM;AAAA,EACN,UAAU,CAAE,OAAc,YAA2B;AACpD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,CAAE,cAAc,sBAAuB;AAAA,MACvC;AAAA,IACD;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/background/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/background/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;;;sBAsCnC,KAAK,WAAW,YAAY;;AA8ChD,wBAME"}
|
package/build-types/types.d.ts
CHANGED
|
@@ -24,6 +24,7 @@ export interface Style {
|
|
|
24
24
|
backgroundPosition?: CSSProperties['backgroundPosition'];
|
|
25
25
|
backgroundRepeat?: CSSProperties['backgroundRepeat'];
|
|
26
26
|
backgroundSize?: CSSProperties['backgroundSize'];
|
|
27
|
+
gradient?: CSSProperties['backgroundImage'];
|
|
27
28
|
};
|
|
28
29
|
border?: {
|
|
29
30
|
color?: CSSProperties['borderColor'];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AACvC,MAAM,WAAW,GAAG,CAAE,CAAC,SAAS,UAAU,GAAG,SAAS,GAAG,SAAS;IACjE,GAAG,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,GAAI,CAAE,KAAK,CAAE,CAAC;IACjE,KAAK,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,OAAO,GAAG,GAAI,CAAE,OAAO,CAAE,CAAC;IACvE,MAAM,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,QAAQ,GAAG,GAAI,CAAE,QAAQ,CAAE,CAAC;IAC1E,IAAI,CAAC,EAAE,aAAa,CAAE,CAAC,SAAS,SAAS,GAAG,MAAM,GAAG,GAAI,CAAE,MAAM,CAAE,CAAC;CACpE;AAED,MAAM,MAAM,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAG1D,MAAM,WAAW,sBAAsB,CAAE,CAAC,SAAS,OAAO;IACzD,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;IAC3D,KAAK,CAAC,EAAE,aAAa,CAAE,SAAU,UAAU,CAAE,CAAC,CAAG,OAAO,CAAE,CAAC;CAC3D;AAED,MAAM,WAAW,KAAK;IACrB,UAAU,CAAC,EAAE;QACZ,eAAe,CAAC,EACb;YAAE,GAAG,CAAC,EAAE,aAAa,CAAE,iBAAiB,CAAE,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,GAC7D,aAAa,CAAE,iBAAiB,CAAE,CAAC;QACtC,kBAAkB,CAAC,EAAE,aAAa,CAAE,oBAAoB,CAAE,CAAC;QAC3D,gBAAgB,CAAC,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;QACvD,cAAc,CAAC,EAAE,aAAa,CAAE,gBAAgB,CAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/style-engine",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.43.0",
|
|
4
4
|
"description": "A suite of parsers and compilers for WordPress styles.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
|
|
74
74
|
}
|
|
@@ -73,6 +73,18 @@ if ( ! class_exists( 'WP_Style_Engine' ) ) {
|
|
|
73
73
|
),
|
|
74
74
|
'path' => array( 'background', 'backgroundAttachment' ),
|
|
75
75
|
),
|
|
76
|
+
'gradient' => array(
|
|
77
|
+
'property_keys' => array(
|
|
78
|
+
'default' => 'background-image',
|
|
79
|
+
),
|
|
80
|
+
'css_vars' => array(
|
|
81
|
+
'gradient' => '--wp--preset--gradient--$slug',
|
|
82
|
+
),
|
|
83
|
+
'path' => array( 'background', 'gradient' ),
|
|
84
|
+
'classnames' => array(
|
|
85
|
+
'has-background' => true,
|
|
86
|
+
),
|
|
87
|
+
),
|
|
76
88
|
),
|
|
77
89
|
'color' => array(
|
|
78
90
|
'text' => array(
|
|
@@ -455,6 +467,13 @@ if ( ! class_exists( 'WP_Style_Engine' ) ) {
|
|
|
455
467
|
|
|
456
468
|
$css_declarations = static::get_css_declarations( $style_value, $style_definition, $options );
|
|
457
469
|
if ( ! empty( $css_declarations ) ) {
|
|
470
|
+
/*
|
|
471
|
+
* Combine background gradient and background image into a single
|
|
472
|
+
* comma-separated background-image value, matching the JS style engine.
|
|
473
|
+
*/
|
|
474
|
+
if ( isset( $css_declarations['background-image'] ) && isset( $parsed_styles['declarations']['background-image'] ) ) {
|
|
475
|
+
$css_declarations['background-image'] = $css_declarations['background-image'] . ', ' . $parsed_styles['declarations']['background-image'];
|
|
476
|
+
}
|
|
458
477
|
$parsed_styles['declarations'] = array_merge( $parsed_styles['declarations'], $css_declarations );
|
|
459
478
|
}
|
|
460
479
|
}
|
|
@@ -2,37 +2,38 @@
|
|
|
2
2
|
* Internal dependencies
|
|
3
3
|
*/
|
|
4
4
|
import type { Style, StyleOptions } from '../../types';
|
|
5
|
-
import { generateRule, safeDecodeURI } from '../utils';
|
|
5
|
+
import { generateRule, getCSSValueFromRawStyle, safeDecodeURI } from '../utils';
|
|
6
6
|
|
|
7
7
|
const backgroundImage = {
|
|
8
8
|
name: 'backgroundImage',
|
|
9
9
|
generate: ( style: Style, options: StyleOptions ) => {
|
|
10
10
|
const _backgroundImage = style?.background?.backgroundImage;
|
|
11
|
+
const gradient =
|
|
12
|
+
getCSSValueFromRawStyle( style?.background?.gradient ) || '';
|
|
11
13
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
* If the background image is a string, it could already contain a url() function,
|
|
15
|
-
* or have a linear-gradient value.
|
|
16
|
-
*/
|
|
17
|
-
if ( typeof _backgroundImage === 'object' && _backgroundImage?.url ) {
|
|
18
|
-
return [
|
|
19
|
-
{
|
|
20
|
-
selector: options.selector,
|
|
21
|
-
key: 'backgroundImage',
|
|
22
|
-
// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
|
|
23
|
-
value: `url( '${ encodeURI(
|
|
24
|
-
safeDecodeURI( _backgroundImage.url )
|
|
25
|
-
) }' )`,
|
|
26
|
-
},
|
|
27
|
-
];
|
|
14
|
+
if ( ! _backgroundImage && ! gradient ) {
|
|
15
|
+
return [];
|
|
28
16
|
}
|
|
29
17
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
18
|
+
const backgroundImageValue =
|
|
19
|
+
typeof _backgroundImage === 'object' && _backgroundImage?.url
|
|
20
|
+
? `url( '${ encodeURI(
|
|
21
|
+
safeDecodeURI( _backgroundImage.url )
|
|
22
|
+
) }' )`
|
|
23
|
+
: getCSSValueFromRawStyle( _backgroundImage );
|
|
24
|
+
const cssValue = [ gradient, backgroundImageValue ]
|
|
25
|
+
.filter( Boolean )
|
|
26
|
+
.join( ', ' );
|
|
27
|
+
|
|
28
|
+
return !! cssValue
|
|
29
|
+
? [
|
|
30
|
+
{
|
|
31
|
+
selector: options.selector,
|
|
32
|
+
key: 'backgroundImage',
|
|
33
|
+
value: cssValue,
|
|
34
|
+
},
|
|
35
|
+
]
|
|
36
|
+
: [];
|
|
36
37
|
},
|
|
37
38
|
};
|
|
38
39
|
|
package/src/test/index.js
CHANGED
|
@@ -456,4 +456,72 @@ describe( 'getCSSRules', () => {
|
|
|
456
456
|
},
|
|
457
457
|
] );
|
|
458
458
|
} );
|
|
459
|
+
|
|
460
|
+
it( 'should comma-separate background gradient and background image into a single background-image value', () => {
|
|
461
|
+
expect(
|
|
462
|
+
getCSSRules(
|
|
463
|
+
{
|
|
464
|
+
background: {
|
|
465
|
+
backgroundImage: {
|
|
466
|
+
url: 'https://example.com/image.jpg',
|
|
467
|
+
},
|
|
468
|
+
gradient:
|
|
469
|
+
'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
|
|
470
|
+
},
|
|
471
|
+
},
|
|
472
|
+
{
|
|
473
|
+
selector: '.some-selector',
|
|
474
|
+
}
|
|
475
|
+
)
|
|
476
|
+
).toEqual( [
|
|
477
|
+
{
|
|
478
|
+
selector: '.some-selector',
|
|
479
|
+
key: 'backgroundImage',
|
|
480
|
+
value: "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%), url( 'https://example.com/image.jpg' )",
|
|
481
|
+
},
|
|
482
|
+
] );
|
|
483
|
+
} );
|
|
484
|
+
|
|
485
|
+
it( 'should output only gradient as background-image when no background image is set', () => {
|
|
486
|
+
expect(
|
|
487
|
+
getCSSRules(
|
|
488
|
+
{
|
|
489
|
+
background: {
|
|
490
|
+
gradient:
|
|
491
|
+
'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
|
|
492
|
+
},
|
|
493
|
+
},
|
|
494
|
+
{
|
|
495
|
+
selector: '.some-selector',
|
|
496
|
+
}
|
|
497
|
+
)
|
|
498
|
+
).toEqual( [
|
|
499
|
+
{
|
|
500
|
+
selector: '.some-selector',
|
|
501
|
+
key: 'backgroundImage',
|
|
502
|
+
value: 'linear-gradient(135deg,rgb(255,203,112) 0%,rgb(33,32,33) 42%,rgb(65,88,208) 100%)',
|
|
503
|
+
},
|
|
504
|
+
] );
|
|
505
|
+
} );
|
|
506
|
+
|
|
507
|
+
it( 'should resolve background gradient preset slug to CSS custom property', () => {
|
|
508
|
+
expect(
|
|
509
|
+
getCSSRules(
|
|
510
|
+
{
|
|
511
|
+
background: {
|
|
512
|
+
gradient: 'var:preset|gradient|vivid-cyan-blue',
|
|
513
|
+
},
|
|
514
|
+
},
|
|
515
|
+
{
|
|
516
|
+
selector: '.some-selector',
|
|
517
|
+
}
|
|
518
|
+
)
|
|
519
|
+
).toEqual( [
|
|
520
|
+
{
|
|
521
|
+
selector: '.some-selector',
|
|
522
|
+
key: 'backgroundImage',
|
|
523
|
+
value: 'var(--wp--preset--gradient--vivid-cyan-blue)',
|
|
524
|
+
},
|
|
525
|
+
] );
|
|
526
|
+
} );
|
|
459
527
|
} );
|
package/src/types.ts
CHANGED
|
@@ -28,6 +28,7 @@ export interface Style {
|
|
|
28
28
|
backgroundPosition?: CSSProperties[ 'backgroundPosition' ];
|
|
29
29
|
backgroundRepeat?: CSSProperties[ 'backgroundRepeat' ];
|
|
30
30
|
backgroundSize?: CSSProperties[ 'backgroundSize' ];
|
|
31
|
+
gradient?: CSSProperties[ 'backgroundImage' ];
|
|
31
32
|
};
|
|
32
33
|
border?: {
|
|
33
34
|
color?: CSSProperties[ 'borderColor' ];
|