fix: if OceanWP theme is used, initially use the theme's margin to fo…

…llow its layout

src/block-components/typography/edit.js

@@ -100,6 +100,15 @@ export const Controls = props => {
 
 	const onChangeContent = useCallback( text => setDebouncedText( escapeHTML( text ) ), [] )
 
+	// OceanWP compatibility.
+	// If OceanWP theme is used, initially use the theme's margin to follow its layout
+	useEffect( () => {
+		if ( hasRemoveMargins ) {
+			const value = getAttribute( 'useThemeTextMargins' )
+			updateAttribute( 'useThemeTextMargins', applyFilters( 'stackable.heading.edit.useThemeTextMargins', value ) )
+		}
+	}, [] )
+
 	return (
 		<>
 			{ applyFilters( 'stackable.block-component.typography.before', null, props ) }

src/compatibility/index.js

@@ -1,2 +1,3 @@
 import './kadence-theme'
 import './wp-6-2'
+import './oceanwp'

src/compatibility/oceanwp/index.js

@@ -0,0 +1,26 @@
+/**
+ * Kadence Theme compatibility.
+ */
+
+/**
+ * External dependencies
+ */
+import { currentTheme } from 'stackable'
+
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks'
+
+addFilter( 'stackable.heading.edit.useThemeTextMargins', 'stackable/compatibility/oceanwp', value => {
+	if ( currentTheme !== 'oceanwp' ) {
+		return value
+	}
+
+	// If no value has been set, default to true to use OceanWP margins
+	if ( value === '' ) {
+		return true
+	}
+
+	return value
+} )