Skip to content

Commit b362bc5

Browse files
ArukuenArukuen
committed
fix(posts): add a wrapper to have custom selectorCallback
1 parent ef45da5 commit b362bc5

File tree

2 files changed

+50
-8
lines changed

2 files changed

+50
-8
lines changed

‎src/block-components/image/style.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
2626

2727
const {
2828
selector = '.stk-img-wrapper',
29+
selectorCallbackWrapper = null,
2930
hoverSelector = '.stk-img-wrapper:hover',
3031
hoverSelectorCallback = null,
3132
enableWidth = true,
@@ -54,6 +55,10 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
5455
selector,
5556
`${ selector } .stk-img-resizer-wrapper`,
5657
],
58+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( [
59+
selector,
60+
`${ selector } .stk-img-resizer-wrapper`,
61+
], ) : undefined,
5762
renderIn: 'edit',
5863
styleRule: 'aspectRatio',
5964
attrName: 'imageAspectRatio',
@@ -63,6 +68,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
6368
}, {
6469
...propsToPass,
6570
selector,
71+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }` ) : undefined,
6672
renderIn: 'save',
6773
styleRule: 'aspectRatio',
6874
attrName: 'imageAspectRatio',
@@ -74,6 +80,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
7480
blockStyleGenerator.addBlockStyles( 'imageWidth', [ {
7581
...propsToPass,
7682
selector: `${ selector }:not(.stk--is-resizing)`,
83+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }:not(.stk--is-resizing)` ) : undefined,
7784
renderIn: 'edit',
7885
styleRule: 'width',
7986
attrName: 'imageWidth',
@@ -96,6 +103,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
96103
}, {
97104
...propsToPass,
98105
selector,
106+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }` ) : undefined,
99107
renderIn: 'save',
100108
styleRuleCallback: _widthStyleRuleCallback,
101109
attrName: 'imageWidth',
@@ -120,6 +128,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
120128
blockStyleGenerator.addBlockStyles( 'imageHeight', [ {
121129
...propsToPass,
122130
selector: `${ selector }:not(.stk--is-resizing)`,
131+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }:not(.stk--is-resizing)` ) : undefined,
123132
renderIn: 'edit',
124133
styleRule: 'height',
125134
attrName: 'imageHeight',
@@ -148,6 +157,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
148157
}, {
149158
...propsToPass,
150159
selector,
160+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }` ) : undefined,
151161
renderIn: 'save',
152162
styleRule: 'height',
153163
attrName: 'imageHeight',
@@ -185,6 +195,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
185195
* @see https://stackoverflow.com/questions/12492006/box-shadow-on-element-with-webkit-mask-image
186196
*/
187197
selector: `${ selector } .stk-img-resizer-wrapper`,
198+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } .stk-img-resizer-wrapper` ) : undefined,
188199
hoverSelector: hoverSelector ? `${ hoverSelector } .stk-img-resizer-wrapper` : undefined,
189200
hoverSelectorCallback,
190201
renderIn: 'edit',
@@ -196,6 +207,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
196207
}, {
197208
...propsToPass,
198209
selector,
210+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }` ) : undefined,
199211
hoverSelector,
200212
renderIn: 'save',
201213
styleRule: 'filter',
@@ -208,6 +220,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
208220
blockStyleGenerator.addBlockStyles( 'imageFilter', [ {
209221
...propsToPass,
210222
selector: `${ selector } img`,
223+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } img` ) : undefined,
211224
hoverSelector: `${ hoverSelector } img`,
212225
hoverSelectorCallback,
213226
styleRule: 'filter',
@@ -219,6 +232,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
219232
blockStyleGenerator.addBlockStyles( 'imageZoom', [ {
220233
...propsToPass,
221234
selector: `${ selector } img`,
235+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } img` ) : undefined,
222236
hoverSelector: `${ hoverSelector } img`,
223237
hoverSelectorCallback,
224238
styleRule: 'transform',
@@ -238,6 +252,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
238252
* @see https://github.com/gambitph/Stackable/issues/1833
239253
*/
240254
selector: `${ selector } .stk-img-resizer-wrapper img`,
255+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } .stk-img-resizer-wrapper img` ) : undefined,
241256
renderIn: 'edit',
242257
styleRule: 'borderRadius',
243258
attrName: 'imageBorderRadius',
@@ -246,6 +261,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
246261
}, {
247262
...propsToPass,
248263
selector: `${ selector } img`,
264+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } img` ) : undefined,
249265
renderIn: 'save',
250266
styleRule: 'borderRadius',
251267
attrName: 'imageBorderRadius',
@@ -256,6 +272,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
256272
blockStyleGenerator.addBlockStyles( 'imageFocalPoint', [ {
257273
...propsToPass,
258274
selector: `${ selector } img`,
275+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } img` ) : undefined,
259276
hoverSelector: `${ hoverSelector } img`,
260277
hoverSelectorCallback,
261278
styleRule: 'objectPosition',
@@ -269,6 +286,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
269286
blockStyleGenerator.addBlockStyles( 'imageFit', [ {
270287
...propsToPass,
271288
selector: `${ selector } img`,
289+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } img` ) : undefined,
272290
styleRule: 'objectFit',
273291
attrName: 'imageFit',
274292
key: 'imageFit',
@@ -286,6 +304,11 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
286304
`${ selector } .stk-img-resizer-wrapper::after`,
287305
`${ selector } .stk-img-resizer-wrapper::before`,
288306
],
307+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( [
308+
`${ selector } .stk-img-resizer-wrapper img`,
309+
`${ selector } .stk-img-resizer-wrapper::after`,
310+
`${ selector } .stk-img-resizer-wrapper::before`,
311+
] ) : undefined,
289312
styleRule: 'mask-image',
290313
vendorPrefixes: [ '-webkit-' ],
291314
attrName: 'imageShape',
@@ -309,6 +332,11 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
309332
`${ selector }::after`,
310333
`${ selector }::before`,
311334
],
335+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( [
336+
`${ selector } img`,
337+
`${ selector }::after`,
338+
`${ selector }::before`,
339+
] ) : undefined,
312340
styleRule: 'mask-image',
313341
vendorPrefixes: [ '-webkit-' ],
314342
attrName: 'imageShape',
@@ -332,6 +360,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
332360
...propsToPass,
333361
renderIn: 'save',
334362
selector: `${ selector }::after`,
363+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }::after` ) : undefined,
335364
hoverSelector: `${ hoverSelector }::after`,
336365
hoverSelectorCallback,
337366
styleRuleCallback: getAttribute => {
@@ -367,6 +396,9 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
367396
...propsToPass,
368397
renderIn: 'edit',
369398
selector: `${ selector } .stk-img-resizer-wrapper::after`,
399+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper(
400+
`${ selector } .stk-img-resizer-wrapper::after`
401+
) : undefined,
370402
hoverSelector: `${ hoverSelector } .stk-img-resizer-wrapper::after`,
371403
hoverSelectorCallback,
372404
styleRuleCallback: getAttribute => {
@@ -406,6 +438,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
406438
...propsToPass,
407439
renderIn: 'edit',
408440
selector: `${ selector }::after`,
441+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }::after` ) : undefined,
409442
hoverSelector: `${ selector }::before`,
410443
styleRuleCallback: getAttribute => {
411444
const colorType = getAttribute( 'imageOverlayColorType' )
@@ -446,6 +479,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
446479
...propsToPass,
447480
renderIn: 'save',
448481
selector: `${ selector }::after`,
482+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }::after` ) : undefined,
449483
hoverSelector: `${ selector }::before`,
450484
styleRuleCallback: getAttribute => {
451485
const colorType = getAttribute( 'imageOverlayColorType' )
@@ -489,6 +523,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
489523
...propsToPass,
490524
renderIn: 'save',
491525
selector: `${ selector }`,
526+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }` ) : undefined,
492527
hoverSelector: `${ selector }::before`,
493528
styleRule: '--stk-gradient-overlay',
494529
attrName: 'imageOverlayOpacity',
@@ -498,6 +533,7 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
498533
...propsToPass,
499534
renderIn: 'edit',
500535
selector: `${ selector } .stk-img-resizer-wrapper`,
536+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector } .stk-img-resizer-wrapper` ) : undefined,
501537
hoverSelector: `${ selector } .stk-img-resizer-wrapper::before`,
502538
styleRule: '--stk-gradient-overlay',
503539
attrName: 'imageOverlayOpacity',
@@ -509,13 +545,17 @@ export const addStyles = ( blockStyleGenerator, props = {} ) => {
509545
...propsToPass,
510546
renderIn: 'save',
511547
selector: `${ selector }::after, ${ selector }::before`,
548+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper( `${ selector }::after, ${ selector }::before` ) : undefined,
512549
styleRule: 'mix-blend-mode',
513550
attrName: 'imageOverlayBlendMode',
514551
key: 'imageOverlayBlendMode-save',
515552
}, {
516553
...propsToPass,
517554
renderIn: 'edit',
518555
selector: `${ selector } .stk-img-resizer-wrapper::after, ${ selector } .stk-img-resizer-wrapper::before`,
556+
selectorCallback: selectorCallbackWrapper ? selectorCallbackWrapper(
557+
`${ selector } .stk-img-resizer-wrapper::after, ${ selector } .stk-img-resizer-wrapper::before`
558+
) : undefined,
519559
hoverSelectorCallback,
520560
styleRule: 'mix-blend-mode',
521561
attrName: 'imageOverlayBlendMode',

‎src/block/posts/style.js‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -294,15 +294,17 @@ Image.addStyles( blockStyles, {
294294
}
295295
return true
296296
},
297-
selectorCallback: getAttribute => {
298-
const className = getAttribute( 'className' )
299-
const blockStyle = getBlockStyle( variations, className )
300-
const imageHasLink = getAttribute( 'imageHasLink' )
301-
302-
if ( [ 'list' ].includes( blockStyle?.name ) && imageHasLink ) {
303-
return `${ itemSelector } .stk-block-posts__image-link`
297+
selectorCallbackWrapper: ( selector = '.stk-img-wrapper' ) => {
298+
return getAttribute => {
299+
const className = getAttribute( 'className' )
300+
const blockStyle = getBlockStyle( variations, className )
301+
const imageHasLink = getAttribute( 'imageHasLink' )
302+
303+
if ( [ 'list' ].includes( blockStyle?.name ) && imageHasLink ) {
304+
return `${ itemSelector } .stk-block-posts__image-link`
305+
}
306+
return selector
304307
}
305-
return '.stk-img-wrapper'
306308
},
307309
widthStyleRuleCallback: getAttribute => {
308310
const className = getAttribute( 'className' )

0 commit comments

Comments
 (0)