allow inherit theme link styles

gambitph · Dec 3, 2024 · 5c50567 · 5c50567
1 parent 81f1002
commit 5c50567
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 25 deletions.
diff --git a/src/block/button/deprecated.js b/src/block/button/deprecated.js
@@ -2,11 +2,47 @@ import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
+import { semverCompare } from '~stackable/util'
 import {
+	BlockDiv, CustomCSS, Button, Typography,
 	deprecateBlockBackgroundColorOpacity, deprecateButtonGradientColor,
 	deprecateContainerBackgroundColorOpacity, deprecateShadowColor,
 	deprecateContainerShadowColor, deprecateBlockShadowColor,
 } from '~stackable/block-components'
+import { addFilter } from '@wordpress/hooks'
+import { useBlockProps } from '@wordpress/block-editor'
+
+// If button style is link, change BlockDiv tag from <div> to <p> to inherit theme link styles.
+addFilter( 'stackable.button.save.blockDiv.content', 'stackable/inheritThemeLinkStyles', ( output, props, propsToPass, blockClassNames, customAttributes, typographyInnerClassNames ) => {
+	if ( semverCompare( props.version, '<', '3.13.11' ) ) {
+		return (
+			<BlockDiv.Content
+				{ ...useBlockProps.save( { className: blockClassNames } ) }
+				attributes={ props.attributes }
+				applyCustomAttributes={ false }
+				version={ props.version }
+			>
+				{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
+				<CustomCSS.Content attributes={ props.attributes } />
+				<Button.Content
+					{ ...propsToPass }
+					attributes={ props.attributes }
+					buttonProps={ {
+						id: props.attributes.anchorId || undefined,
+						...customAttributes,
+					} }
+				>
+					<Typography.Content
+						attributes={ props.attributes }
+						tagName="span"
+						className={ typographyInnerClassNames }
+					/>
+				</Button.Content>
+			</BlockDiv.Content>
+		)
+	}
+	return output
+} )
 
 const deprecated = [
 	{

diff --git a/src/block/button/edit.js b/src/block/button/edit.js
@@ -98,6 +98,7 @@ const Edit = props => {
 				attributes={ props.attributes }
 				className={ blockClassNames }
 				applyCustomAttributes={ false }
+				blockTag={ blockStyle === 'link' ? 'p' : null }
 			>
 				<Button
 					buttonProps={ {

diff --git a/src/block/button/save.js b/src/block/button/save.js
@@ -20,6 +20,7 @@ import {
  */
 import { compose } from '@wordpress/compose'
 import { useBlockProps } from '@wordpress/block-editor'
+import { applyFilters } from '@wordpress/hooks'
 
 export const Save = props => {
 	const {
@@ -46,29 +47,32 @@ export const Save = props => {
 	] )
 
 	return (
-		<BlockDiv.Content
-			{ ...useBlockProps.save( { className: blockClassNames } ) }
-			attributes={ props.attributes }
-			applyCustomAttributes={ false }
-			version={ props.version }
-		>
-			{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
-			<CustomCSS.Content attributes={ props.attributes } />
-			<Button.Content
-				{ ...propsToPass }
+		applyFilters( 'stackable.button.save.blockDiv.content', (
+			<BlockDiv.Content
+				{ ...useBlockProps.save( { className: blockClassNames } ) }
 				attributes={ props.attributes }
-				buttonProps={ {
-					id: props.attributes.anchorId || undefined,
-					...customAttributes,
-				} }
+				applyCustomAttributes={ false }
+				version={ props.version }
+				blockTag={ props.attributes.className === 'is-style-link' ? 'p' : null }
 			>
-				<Typography.Content
+				{ props.attributes.generatedCss && <style>{ props.attributes.generatedCss }</style> }
+				<CustomCSS.Content attributes={ props.attributes } />
+				<Button.Content
+					{ ...propsToPass }
 					attributes={ props.attributes }
-					tagName="span"
-					className={ typographyInnerClassNames }
-				/>
-			</Button.Content>
-		</BlockDiv.Content>
+					buttonProps={ {
+						id: props.attributes.anchorId || undefined,
+						...customAttributes,
+					} }
+				>
+					<Typography.Content
+						attributes={ props.attributes }
+						tagName="span"
+						className={ typographyInnerClassNames }
+					/>
+				</Button.Content>
+			</BlockDiv.Content>
+		), props, propsToPass, blockClassNames, customAttributes, typographyInnerClassNames )
 	)
 }
 

diff --git a/src/block/icon-list-item/deprecated.js b/src/block/icon-list-item/deprecated.js
@@ -2,7 +2,27 @@ import { Save } from './save'
 import { attributes } from './schema'
 
 import { withVersion } from '~stackable/higher-order'
-import { deprecateBlockShadowColor, deprecateContainerShadowColor } from '~stackable/block-components'
+import {
+	deprecateBlockShadowColor, deprecateContainerShadowColor, Typography,
+} from '~stackable/block-components'
+import { semverCompare } from '~stackable/util'
+
+import { addFilter } from '@wordpress/hooks'
+
+// Change tag from <span> to <p> to inherit theme link styles.
+addFilter( 'stackable.icon-list-item.save.typography.content', 'stackable/inheritThemeLinkStyles', ( output, props, attrs, textClassNames ) => {
+	if ( semverCompare( props.version, '<', '3.13.11' ) ) {
+		return (
+			<Typography.Content
+				attributes={ attrs }
+				className={ textClassNames }
+				tagName="span"
+			/>
+		)
+	}
+
+	return output
+} )
 
 const deprecated = [
 	{

diff --git a/src/block/icon-list-item/edit.js b/src/block/icon-list-item/edit.js
@@ -170,7 +170,6 @@ const Edit = props => {
 					 }
 					<Typography
 						ref={ useEnterRef }
-						tagName="span"
 						className={ textClassNames }
 						onMerge={ onMerge }
 						onPaste={ onPaste }

diff --git a/src/block/icon-list-item/save.js b/src/block/icon-list-item/save.js
@@ -16,6 +16,7 @@ import { getUseSvgDef } from '../icon-list/util'
  * WordPress dependencies
  */
 import { compose } from '@wordpress/compose'
+import { applyFilters } from '@wordpress/hooks'
 
 export const Save = props => {
 	const {
@@ -67,11 +68,10 @@ export const Save = props => {
 						hasLinearGradient={ false }
 					/> }
 				{ attributes.ordered && <span className="stk-block-icon-list-item__marker" aria-hidden="true"></span> }
-				<Typography.Content
+				{ applyFilters( 'stackable.icon-list-item.save.typography.content', <Typography.Content
 					attributes={ attributes }
-					tagName="span"
 					className={ textClassNames }
-				/>
+				/>, props, attributes, textClassNames ) }
 			</div>
 		</BlockDiv.Content>
 	)

diff --git a/src/block/icon-list-item/style.scss b/src/block/icon-list-item/style.scss
@@ -1,6 +1,12 @@
 .stk-block-icon-list-item {
 	list-style-type: none !important;
+
+	.stk-block-icon-list-item__text {
+		margin-block: 0;
+		margin: 0;
+	}
 }
+
 .stk-block-icon-list.stk-block {
 	.wp-block-stackable-icon-list-item:not(:last-child)::after {
 		content: "" !important;

diff --git a/src/block/table-of-contents/deprecated.js b/src/block/table-of-contents/deprecated.js
@@ -8,6 +8,7 @@ import { Save } from './save'
  * External dependencies
  */
 import { withVersion } from '~stackable/higher-order'
+import { semverCompare } from '~stackable/util'
 import compareVersions from 'compare-versions'
 import {
 	deprecateBlockBackgroundColorOpacity, deprecateContainerBackgroundColorOpacity, deprecateTypographyGradientColor,
@@ -19,6 +20,14 @@ import {
  */
 import { addFilter } from '@wordpress/hooks'
 
+addFilter( 'stackable.table-of-contents.save.blockClasses', 'stackable/inheritThemeLinkStyles', ( output, textClasses, props ) => {
+	if ( semverCompare( props.version, '<', '3.13.11' ) ) {
+		return output.filter( className => className !== 'entry-content' )
+	}
+
+	return output
+} )
+
 addFilter( 'stackable.table-of-contents.save.blockClasses', 'stackable/classesNotRendered', ( output, textClasses, props ) => {
 	if ( compareVersions( props.version, '3.6.2' ) === 0 ) {
 		output.push( textClasses )

diff --git a/src/block/table-of-contents/save.js b/src/block/table-of-contents/save.js
@@ -42,6 +42,7 @@ export const Save = props => {
 	const blockClassNames = classnames( applyFilters( 'stackable.table-of-contents.save.blockClasses', [
 		className,
 		'stk-block-table-of-contents',
+		'entry-content', // add this class to inherit theme link styles
 		blockAlignmentClass,
 		responsiveClass,
 	], textClasses, props ) )