added implementation for text block

gambitph · Aug 15, 2024 · 7bca63a · 7bca63a
1 parent 55a4edf
commit 7bca63a
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 18 deletions.
diff --git a/src/block-components/typography/style.js b/src/block-components/typography/style.js
@@ -198,3 +198,194 @@ export const Style = props => {
 Style.Content = props => {
 	return <Styles { ...props } />
 }
+
+Style.addStyles = ( blockStyleGenerator, props = {} ) => {
+	const propsToPass = {
+		...props,
+		version: props.version,
+		versionAdded: '3.0.0',
+		versionDeprecated: '',
+	}
+	const {
+		selector = '',
+		selectorCallback = null,
+		attrNameTemplate = '%s',
+		inherit = true,
+		inheritMin,
+		inheritMax = 50,
+		hoverSelector = '',
+		hoverSelectorCallback = null,
+		dependencies = [],
+	} = props
+
+	blockStyleGenerator.addBlockStyles( 'textShadow', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textShadow',
+		attrName: 'textShadow',
+		key: 'textShadow',
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontSize', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontSize',
+		attrName: 'fontSize',
+		key: 'fontSize',
+		hasUnits: 'px',
+		responsive: 'all',
+		clampCallback: ( _value, getAttribute, device, state ) => {
+			const currentValue = getAttribute( 'fontSize', device, state )
+			const isMobile = device === 'mobile'
+
+			let value = _value
+			const clampedValue = inherit && clampInheritedStyle(
+				_value,
+				{
+					min: inheritMin, max: inheritMax,
+				}
+			)
+
+			/**
+			 * When clamping values in mobile, make sure to get the
+			 * clamped desktop value first before checking the clamped
+			 * tablet value.
+			 *
+			 * When the tablet is already clamped, the fallback value should
+			 * be undefined already to avoid generating 2 identical styles.
+			 */
+			if ( isMobile ) {
+				const clampedDesktopValue = inherit && clampInheritedStyle(
+					getAttribute( 'fontSize', 'desktop', state ),
+					{
+						min: inheritMin, max: inheritMax,
+					}
+				)
+				value = clampedDesktopValue ? clampedDesktopValue : value
+			}
+
+			value = clampedValue ? clampedValue : value
+			value = typeof currentValue !== 'undefined' && currentValue !== ''
+				? currentValue
+				: isMobile ? undefined : value
+			return value
+		},
+		dependencies: [ 'fontSizeUnit', 'fontSize', ...dependencies ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'textColor1', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRuleCallback: getAttribute => {
+			const textColorType = getAttribute( 'textColorType' )
+			return textColorType === 'gradient' ? 'backgroundImage' : 'color'
+		},
+		hover: 'all',
+		hoverSelector,
+		hoverSelectorCallback,
+		attrName: 'textColor1',
+		key: 'textColor1-color',
+		valuePreCallback: ( value, getAttribute, device, state ) => {
+			if ( ! value && getAttribute( 'textColorType', 'desktop', state ) === 'gradient' ) {
+				return 'currentColor'
+			}
+			return value
+		},
+		valueCallback: ( value, getAttribute ) => {
+			const textColorType = getAttribute( 'textColorType' )
+			const isGradient = value?.startsWith( 'linear-' ) || value?.startsWith( 'radial-' )
+
+			// If the type was switched, adjust the value so that gradient will show up.
+			if ( textColorType === 'gradient' && ! isGradient ) {
+				return `linear-gradient(${ value } 0%, ${ value } 100%)`
+			} else if ( textColorType !== 'gradient' && isGradient ) {
+				const color = value.match( /((rgba?|var)\([^\)]+\)|#[\w\d]+)/ )
+				if ( color ) {
+					return color[ 0 ]
+				}
+			}
+			return value
+		},
+		dependencies: [ 'textColorType', ...dependencies ],
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'lineHeight', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'lineHeight',
+		attrName: 'lineHeight',
+		key: 'lineHeight',
+		responsive: 'all',
+		hasUnits: 'em',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontWeight', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontWeight',
+		attrName: 'fontWeight',
+		key: 'fontWeight',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'textTransform', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'textTransform',
+		attrName: 'textTransform',
+		key: 'textTransform',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontStyle', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontStyle',
+		attrName: 'fontStyle',
+		key: 'fontStyle',
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'fontFamily', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'fontFamily',
+		attrName: 'fontFamily',
+		key: 'fontFamily',
+		valueCallback: value => getFontFamily( value ),
+		dependencies,
+	} ] )
+
+	blockStyleGenerator.addBlockStyles( 'letterSpacing', [ {
+		...propsToPass,
+		selector,
+		selectorCallback,
+		attrNameTemplate,
+		styleRule: 'letterSpacing',
+		attrName: 'letterSpacing',
+		key: 'letterSpacing',
+		format: '%spx',
+		responsive: 'all',
+		dependencies,
+	} ] )
+}
diff --git a/src/block/text/edit.js b/src/block/text/edit.js
@@ -1,14 +1,13 @@
 /**
  * Internal dependencies
  */
-import { TextStyles } from './style'
+import { blockStyles } from './style'
 
 /**
  * External dependencies
  */
 import {
 	BlockDiv,
-	useGeneratedCss,
 	CustomCSS,
 	Responsive,
 	Advanced,
@@ -28,6 +27,7 @@ import {
 	InspectorTabs,
 	AdvancedRangeControl,
 	InspectorLayoutControls,
+	useBlockCssGenerator,
 } from '~stackable/components'
 import { useBlockContext } from '~stackable/hooks'
 import {
@@ -62,11 +62,9 @@ const Edit = props => {
 		onReplace,
 		onRemove,
 		mergeBlocks,
-		clientId,
+		// clientId,
 	} = props
 
-	useGeneratedCss( props.attributes )
-
 	const textClasses = getTypographyClasses( props.attributes )
 	const blockAlignmentClass = getAlignmentClasses( props.attributes )
 	const {
@@ -90,6 +88,17 @@ const Edit = props => {
 		parentBlock, isFirstBlock, isLastBlock,
 	} )
 
+	// Generate the CSS styles for the block.
+	const blockCss = useBlockCssGenerator( {
+		attributes: props.attributes,
+		blockStyles,
+		clientId: props.clientId,
+		context: props.context,
+		setAttributes: props.setAttributes,
+		blockState: props.blockState,
+		version: VERSION,
+	} )
+
 	return (
 		<>
 			<>
@@ -141,11 +150,12 @@ const Edit = props => {
 				<ConditionalDisplay.InspectorControls />
 			</>
 
-			<TextStyles
+			{ blockCss && <style key="block-css">{ blockCss }</style> }
+			{ /* <TextStyles
 				version={ VERSION }
 				blockState={ props.blockState }
 				clientId={ clientId }
-			/>
+			/> */ }
 			<CustomCSS mainBlockClass="stk-block-text" />
 
 			<BlockDiv

diff --git a/src/block/text/save.js b/src/block/text/save.js
@@ -1,8 +1,6 @@
 /**
  * Internal dependencies
  */
-import { TextStyles } from './style'
-
 import {
 	BlockDiv,
 	CustomCSS,
@@ -48,7 +46,7 @@ export const Save = props => {
 			attributes={ attributes }
 			version={ props.version }
 		>
-			<TextStyles.Content version={ props.version } attributes={ attributes } />
+			{ attributes.generatedCss && <style>{ attributes.generatedCss }</style> }
 			<CustomCSS.Content attributes={ attributes } />
 			<Typography.Content
 				attributes={ attributes }

diff --git a/src/block/text/style.js b/src/block/text/style.js
@@ -10,17 +10,19 @@ import {
 	EffectsAnimations,
 	Transform,
 } from '~stackable/block-components'
-import { BlockCss, BlockCssCompiler } from '~stackable/components'
+import {
+	BlockCss, BlockCssCompiler, BlockStyleGenerator,
+} from '~stackable/components'
 
 /**
  * WordPress dependencies
  */
 import { memo } from '@wordpress/element'
 
-const typographyOptions = {
-	selector: '.stk-block-text__text',
-	hoverSelector: '.stk-block-text__text:hover',
-}
+// const typographyOptions = {
+// 	selector: '.stk-block-text__text',
+// 	hoverSelector: '.stk-block-text__text:hover',
+// }
 
 const Styles = props => {
 	const propsToPass = {
@@ -53,15 +55,42 @@ const Styles = props => {
 	)
 }
 
+export const blockStyles = new BlockStyleGenerator( {
+	versionAdded: '3.0.0',
+	versionDeprecated: '',
+} )
+
+blockStyles.addBlockStyles( 'columns', [ {
+	selector: '',
+	styleRule: 'columnCount',
+	attrName: 'columns',
+	key: 'columns',
+	responsive: 'all',
+} ] )
+
+blockStyles.addBlockStyles( 'columnGap', [ {
+	selector: '',
+	styleRule: 'columnGap',
+	attrName: 'columnGap',
+	key: 'columnGap',
+	responsive: 'all',
+	format: '%spx',
+} ] )
+
+Typography.Style.addStyles( blockStyles, {
+	selector: '.stk-block-text__text',
+	hoverSelector: '.stk-block-text__text:hover',
+} )
+
 export const TextStyles = memo( props => {
 	return (
 		<>
 			<Alignment.Style { ...props } />
 			<BlockDiv.Style { ...props } />
 			<Advanced.Style { ...props } />
 			<Transform.Style { ...props } />
-			<Typography.Style { ...props } { ...typographyOptions } />
-			<Styles { ...props } />
+			{ /* <Typography.Style { ...props } { ...typographyOptions } /> */ }
+			{ /* <Styles { ...props } /> */ }
 			<EffectsAnimations.Style { ...props } />
 		</>
 	)
@@ -82,7 +111,7 @@ TextStyles.Content = props => {
 			<BlockDiv.Style.Content { ...props } />
 			<Advanced.Style.Content { ...props } />
 			<Transform.Style.Content { ...props } />
-			<Typography.Style.Content { ...props } { ...typographyOptions } />
+			{ /* <Typography.Style.Content { ...props } { ...typographyOptions } /> */ }
 			<EffectsAnimations.Style.Content { ...props } />
 			<MarginBottom.Style.Content { ...props } />
 			<Styles { ...props } />