Move functions around

packages/block-editor/README.md

@@ -348,6 +348,10 @@ _Returns_
 
 Undocumented declaration.
 
+### findInPresetsBy
+
+Undocumented declaration.
+
 ### FontSizePicker
 
 _Related_
@@ -527,6 +531,35 @@ _Returns_
 
 -   `Object`: Typography block support derived CSS classes & styles.
 
+### getTypographyFontSizeValue
+
+Returns a font-size value based on a given font-size preset.
+Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+
+_Parameters_
+
+-   _preset_ `Preset`:
+-   _typographySettings_ `Object`:
+-   _typographySettings.fluid_ `boolean|TypographySettings`: Whether fluid typography is enabled, and, optionally, fluid font size options.
+
+_Returns_
+
+-   `string|*`: A font-size value or the value of preset.size.
+
+### getValueFromVariable
+
+Attempts to fetch the value of a theme.json CSS variable.
+
+_Parameters_
+
+-   _features_ `Object`: GlobalStylesContext config, e.g., user, base or merged. Represents the theme.json tree.
+-   _blockName_ `string`: The name of a block as represented in the styles property. E.g., 'root' for root-level, and 'core/${blockName}' for blocks.
+-   _variable_ `string|*`: An incoming style value. A CSS var value is expected, but it could be any value.
+
+_Returns_
+
+-   `string|*|{ref}`: The value of the CSS var, if found. If not found, the passed variable argument.
+
 ### InnerBlocks
 
 _Related_
@@ -616,6 +649,10 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/plain-text/README.md>
 
+### PRESET_METADATA
+
+Undocumented declaration.
+
 ### RichText
 
 _Related_

packages/block-editor/src/utils/index.js

@@ -1,4 +1,9 @@
 export { default as transformStyles } from './transform-styles';
 export * from './block-variation-transforms';
 export { default as getPxFromCssUnit } from './parse-css-unit-to-px';
-export { getValueFromVariable as __experimentalGetValueFromVariable } from './style-variable-resolution';
+export {
+	PRESET_METADATA,
+	findInPresetsBy,
+	getValueFromVariable,
+} from './style-variable-resolution';
+export { getTypographyFontSizeValue } from './typography';

packages/block-editor/src/utils/style-variable-resolution.js

@@ -6,71 +6,7 @@ import { get } from 'lodash';
 /**
  * Internal dependencies
  */
-import { getComputedFluidTypographyValue } from '../components/font-sizes';
-
-// All of this has been copied from the edit/site package for now.
-
-export function getTypographyFontSizeValue( preset, typographySettings ) {
-	const { size: defaultSize } = preset;
-
-	/*
-	 * Catches falsy values and 0/'0'.
-	 * Fluid calculations cannot be performed on 0.
-	 */
-	if ( ! defaultSize || '0' === defaultSize ) {
-		return defaultSize;
-	}
-
-	if (
-		! typographySettings?.fluid ||
-		( typeof typographySettings?.fluid === 'object' &&
-			Object.keys( typographySettings.fluid ).length === 0 )
-	) {
-		return defaultSize;
-	}
-
-	// A font size has explicitly bypassed fluid calculations.
-	if ( false === preset?.fluid ) {
-		return defaultSize;
-	}
-
-	const fluidTypographySettings =
-		typeof typographySettings?.fluid === 'object'
-			? typographySettings?.fluid
-			: {};
-
-	const fluidFontSizeValue = getComputedFluidTypographyValue( {
-		minimumFontSize: preset?.fluid?.min,
-		maximumFontSize: preset?.fluid?.max,
-		fontSize: defaultSize,
-		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
-	} );
-
-	if ( !! fluidFontSizeValue ) {
-		return fluidFontSizeValue;
-	}
-
-	return defaultSize;
-}
-
-/* Supporting data. */
-export const ROOT_BLOCK_NAME = 'root';
-export const ROOT_BLOCK_SELECTOR = 'body';
-export const ROOT_BLOCK_SUPPORTS = [
-	'background',
-	'backgroundColor',
-	'color',
-	'linkColor',
-	'buttonColor',
-	'fontFamily',
-	'fontSize',
-	'fontStyle',
-	'fontWeight',
-	'lineHeight',
-	'textDecoration',
-	'textTransform',
-	'padding',
-];
+import { getTypographyFontSizeValue } from './typography';
 
 export const PRESET_METADATA = [
 	{
@@ -131,30 +67,7 @@ export const PRESET_METADATA = [
 	},
 ];
 
-export const STYLE_PATH_TO_CSS_VAR_INFIX = {
-	'color.background': 'color',
-	'color.text': 'color',
-	'elements.link.color.text': 'color',
-	'elements.button.color.text': 'color',
-	'elements.button.backgroundColor': 'background-color',
-	'elements.heading.color': 'color',
-	'elements.heading.backgroundColor': 'background-color',
-	'elements.heading.gradient': 'gradient',
-	'color.gradient': 'gradient',
-	'typography.fontSize': 'font-size',
-	'typography.fontFamily': 'font-family',
-};
-
-// A static list of block attributes that store global style preset slugs.
-export const STYLE_PATH_TO_PRESET_BLOCK_ATTRIBUTE = {
-	'color.background': 'backgroundColor',
-	'color.text': 'textColor',
-	'color.gradient': 'gradient',
-	'typography.fontSize': 'fontSize',
-	'typography.fontFamily': 'fontFamily',
-};
-
-function findInPresetsBy(
+export function findInPresetsBy(
 	features,
 	blockName,
 	presetPath,
@@ -205,46 +118,6 @@ function findInPresetsBy(
 	}
 }
 
-export function getPresetVariableFromValue(
-	features,
-	blockName,
-	variableStylePath,
-	presetPropertyValue
-) {
-	if ( ! presetPropertyValue ) {
-		return presetPropertyValue;
-	}
-
-	const cssVarInfix = STYLE_PATH_TO_CSS_VAR_INFIX[ variableStylePath ];
-
-	const metadata = PRESET_METADATA.find(
-		( data ) => data.cssVarInfix === cssVarInfix
-	);
-
-	if ( ! metadata ) {
-		// The property doesn't have preset data
-		// so the value should be returned as it is.
-		return presetPropertyValue;
-	}
-	const { valueKey, path } = metadata;
-
-	const presetObject = findInPresetsBy(
-		features,
-		blockName,
-		path,
-		valueKey,
-		presetPropertyValue
-	);
-
-	if ( ! presetObject ) {
-		// Value wasn't found in the presets,
-		// so it must be a custom value.
-		return presetPropertyValue;
-	}
-
-	return `var:preset|${ cssVarInfix }|${ presetObject.slug }`;
-}
-
 function getValueFromPresetVariable(
 	features,
 	blockName,
@@ -347,34 +220,3 @@ export function getValueFromVariable( features, blockName, variable ) {
 	}
 	return variable;
 }
-
-/**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * @example
- * ```js
- * const scope = '.a, .b .c';
- * const selector = '> .x, .y';
- * const merged = scopeSelector( scope, selector );
- * // merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * ```
- *
- * @param {string} scope    Selector to scope to.
- * @param {string} selector Original selector.
- *
- * @return {string} Scoped selector.
- */
-export function scopeSelector( scope, selector ) {
-	const scopes = scope.split( ',' );
-	const selectors = selector.split( ',' );
-
-	const selectorsScoped = [];
-	scopes.forEach( ( outer ) => {
-		selectors.forEach( ( inner ) => {
-			selectorsScoped.push( `${ outer.trim() } ${ inner.trim() }` );
-		} );
-	} );
-
-	return selectorsScoped.join( ', ' );
-}