Skip to content

Commit 5c50567

Browse files
kaeizenkaeizen
committed
allow inherit theme link styles
1 parent 81f1002 commit 5c50567

File tree

9 files changed

+101
-25
lines changed

9 files changed

+101
-25
lines changed

‎src/block/button/deprecated.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,47 @@ import { Save } from './save'
22
import { attributes } from './schema'
33

44
import { withVersion } from '~stackable/higher-order'
5+
import { semverCompare } from '~stackable/util'
56
import {
7+
BlockDiv, CustomCSS, Button, Typography,
68
deprecateBlockBackgroundColorOpacity, deprecateButtonGradientColor,
79
deprecateContainerBackgroundColorOpacity, deprecateShadowColor,
810
deprecateContainerShadowColor, deprecateBlockShadowColor,
911
} from '~stackable/block-components'
12+
import { addFilter } from '@wordpress/hooks'
13+
import { useBlockProps } from '@wordpress/block-editor'
14+
15+
// If button style is link, change BlockDiv tag from <div> to <p> to inherit theme link styles.
16+
addFilter( 'stackable.button.save.blockDiv.content', 'stackable/inheritThemeLinkStyles', ( output, props, propsToPass, blockClassNames, customAttributes, typographyInnerClassNames ) => {
17+
if ( semverCompare( props.version, '<', '3.13.11' ) ) {
18+
return (
19+
<BlockDiv.Content
20+
{ ...useBlockProps.save( { className: blockClassNames } ) }
21+
attributes={ props.attributes }
22+
applyCustomAttributes={ false }
23+
version={ props.version }
24+
>
25+
{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
26+
<CustomCSS.Content attributes={ props.attributes } />
27+
<Button.Content
28+
{ ...propsToPass }
29+
attributes={ props.attributes }
30+
buttonProps={ {
31+
id: props.attributes.anchorId || undefined,
32+
...customAttributes,
33+
} }
34+
>
35+
<Typography.Content
36+
attributes={ props.attributes }
37+
tagName="span"
38+
className={ typographyInnerClassNames }
39+
/>
40+
</Button.Content>
41+
</BlockDiv.Content>
42+
)
43+
}
44+
return output
45+
} )
1046

1147
const deprecated = [
1248
{

‎src/block/button/edit.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ const Edit = props => {
9898
attributes={ props.attributes }
9999
className={ blockClassNames }
100100
applyCustomAttributes={ false }
101+
blockTag={ blockStyle === 'link' ? 'p' : null }
101102
>
102103
<Button
103104
buttonProps={ {

‎src/block/button/save.js‎

Lines changed: 24 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
*/
2121
import { compose } from '@wordpress/compose'
2222
import { useBlockProps } from '@wordpress/block-editor'
23+
import { applyFilters } from '@wordpress/hooks'
2324

2425
export const Save = props => {
2526
const {
@@ -46,29 +47,32 @@ export const Save = props => {
4647
] )
4748

4849
return (
49-
<BlockDiv.Content
50-
{ ...useBlockProps.save( { className: blockClassNames } ) }
51-
attributes={ props.attributes }
52-
applyCustomAttributes={ false }
53-
version={ props.version }
54-
>
55-
{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
56-
<CustomCSS.Content attributes={ props.attributes } />
57-
<Button.Content
58-
{ ...propsToPass }
50+
applyFilters( 'stackable.button.save.blockDiv.content', (
51+
<BlockDiv.Content
52+
{ ...useBlockProps.save( { className: blockClassNames } ) }
5953
attributes={ props.attributes }
60-
buttonProps={ {
61-
id: props.attributes.anchorId || undefined,
62-
...customAttributes,
63-
} }
54+
applyCustomAttributes={ false }
55+
version={ props.version }
56+
blockTag={ props.attributes.className === 'is-style-link' ? 'p' : null }
6457
>
65-
<Typography.Content
58+
{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
59+
<CustomCSS.Content attributes={ props.attributes } />
60+
<Button.Content
61+
{ ...propsToPass }
6662
attributes={ props.attributes }
67-
tagName="span"
68-
className={ typographyInnerClassNames }
69-
/>
70-
</Button.Content>
71-
</BlockDiv.Content>
63+
buttonProps={ {
64+
id: props.attributes.anchorId || undefined,
65+
...customAttributes,
66+
} }
67+
>
68+
<Typography.Content
69+
attributes={ props.attributes }
70+
tagName="span"
71+
className={ typographyInnerClassNames }
72+
/>
73+
</Button.Content>
74+
</BlockDiv.Content>
75+
), props, propsToPass, blockClassNames, customAttributes, typographyInnerClassNames )
7276
)
7377
}
7478

‎src/block/icon-list-item/deprecated.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,27 @@ import { Save } from './save'
22
import { attributes } from './schema'
33

44
import { withVersion } from '~stackable/higher-order'
5-
import { deprecateBlockShadowColor, deprecateContainerShadowColor } from '~stackable/block-components'
5+
import {
6+
deprecateBlockShadowColor, deprecateContainerShadowColor, Typography,
7+
} from '~stackable/block-components'
8+
import { semverCompare } from '~stackable/util'
9+
10+
import { addFilter } from '@wordpress/hooks'
11+
12+
// Change tag from <span> to <p> to inherit theme link styles.
13+
addFilter( 'stackable.icon-list-item.save.typography.content', 'stackable/inheritThemeLinkStyles', ( output, props, attrs, textClassNames ) => {
14+
if ( semverCompare( props.version, '<', '3.13.11' ) ) {
15+
return (
16+
<Typography.Content
17+
attributes={ attrs }
18+
className={ textClassNames }
19+
tagName="span"
20+
/>
21+
)
22+
}
23+
24+
return output
25+
} )
626

727
const deprecated = [
828
{

‎src/block/icon-list-item/edit.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,6 @@ const Edit = props => {
170170
}
171171
<Typography
172172
ref={ useEnterRef }
173-
tagName="span"
174173
className={ textClassNames }
175174
onMerge={ onMerge }
176175
onPaste={ onPaste }

‎src/block/icon-list-item/save.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { getUseSvgDef } from '../icon-list/util'
1616
* WordPress dependencies
1717
*/
1818
import { compose } from '@wordpress/compose'
19+
import { applyFilters } from '@wordpress/hooks'
1920

2021
export const Save = props => {
2122
const {
@@ -67,11 +68,10 @@ export const Save = props => {
6768
hasLinearGradient={ false }
6869
/> }
6970
{ attributes.ordered && <span className="stk-block-icon-list-item__marker" aria-hidden="true"></span> }
70-
<Typography.Content
71+
{ applyFilters( 'stackable.icon-list-item.save.typography.content', <Typography.Content
7172
attributes={ attributes }
72-
tagName="span"
7373
className={ textClassNames }
74-
/>
74+
/>, props, attributes, textClassNames ) }
7575
</div>
7676
</BlockDiv.Content>
7777
)

‎src/block/icon-list-item/style.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
.stk-block-icon-list-item {
22
list-style-type: none !important;
3+
4+
.stk-block-icon-list-item__text {
5+
margin-block: 0;
6+
margin: 0;
7+
}
38
}
9+
410
.stk-block-icon-list.stk-block {
511
.wp-block-stackable-icon-list-item:not(:last-child)::after {
612
content: "" !important;

‎src/block/table-of-contents/deprecated.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { Save } from './save'
88
* External dependencies
99
*/
1010
import { withVersion } from '~stackable/higher-order'
11+
import { semverCompare } from '~stackable/util'
1112
import compareVersions from 'compare-versions'
1213
import {
1314
deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecateTypographyGradientColor,
@@ -19,6 +20,14 @@ import {
1920
*/
2021
import { addFilter } from '@wordpress/hooks'
2122

23+
addFilter( 'stackable.table-of-contents.save.blockClasses', 'stackable/inheritThemeLinkStyles', ( output, textClasses, props ) => {
24+
if ( semverCompare( props.version, '<', '3.13.11' ) ) {
25+
return output.filter( className => className !== 'entry-content' )
26+
}
27+
28+
return output
29+
} )
30+
2231
addFilter( 'stackable.table-of-contents.save.blockClasses', 'stackable/classesNotRendered', ( output, textClasses, props ) => {
2332
if ( compareVersions( props.version, '3.6.2' ) === 0 ) {
2433
output.push( textClasses )

‎src/block/table-of-contents/save.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export const Save = props => {
4242
const blockClassNames = classnames( applyFilters( 'stackable.table-of-contents.save.blockClasses', [
4343
className,
4444
'stk-block-table-of-contents',
45+
'entry-content', // add this class to inherit theme link styles
4546
blockAlignmentClass,
4647
responsiveClass,
4748
], textClasses, props ) )

0 commit comments

Comments
 (0)