Access global styles from the post editor

lib/compat/wordpress-6.2/block-editor-settings.php

@@ -15,11 +15,12 @@
 function gutenberg_get_block_editor_settings_6_2( $settings ) {
 	if ( wp_theme_has_theme_json() ) {
 		// Add the custom CSS as separate style sheet so any invalid CSS entered by users does not break other global styles.
-		$settings['styles'][] = array(
+		$settings['styles'][]             = array(
 			'css'            => gutenberg_get_global_stylesheet( array( 'custom-css' ) ),
 			'__unstableType' => 'user',
 			'isGlobalStyles' => true,
 		);
+		$settings['__experimentalStyles'] = wp_get_global_styles();
 	}
 
 	return $settings;

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -153,7 +153,7 @@ public function get_item_schema() {
 				'__experimentalStyles'                   => array(
 					'description' => __( 'Styles consolidated from core, theme, and user origins.', 'gutenberg' ),
 					'type'        => 'object',
-					'context'     => array( 'mobile' ),
+					'context'     => array( 'post-editor', 'widgets-editor', 'mobile' ),
 				),
 
 				'__experimentalEnableQuoteBlockV2'       => array(

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/components/index.js

@@ -164,3 +164,4 @@ export { default as __experimentalInspectorPopoverHeader } from './inspector-pop
 
 export { default as BlockEditorProvider } from './provider';
 export { default as useSetting } from './use-setting';
+export { default as __experimentalUseStyle } from './use-style';

packages/block-editor/src/components/line-height-control/index.js

@@ -21,6 +21,7 @@ const LineHeightControl = ( {
 	/** Start opting into the new margin-free styles that will become the default in a future version. */
 	__nextHasNoMarginBottom = false,
 	__unstableInputWidth = '60px',
+	placeholder = BASE_DEFAULT_VALUE,
 	...otherProps
 } ) => {
 	const isDefined = isLineHeightDefined( lineHeight );
@@ -95,7 +96,7 @@ const LineHeightControl = ( {
 				__unstableStateReducer={ stateReducer }
 				onChange={ onChange }
 				label={ __( 'Line height' ) }
-				placeholder={ BASE_DEFAULT_VALUE }
+				placeholder={ placeholder }
 				step={ STEP }
 				value={ value }
 				min={ 0 }

packages/block-editor/src/components/use-style/index.js

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import { get } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockEditContext } from '../block-edit';
+import { store as blockEditorStore } from '../../store';
+import { getValueFromVariable } from '../../utils/style-variable-resolution';
+
+/**
+ * Hook that retrieves the global styles of a block.
+ * It works with nested objects using by finding the value at path.
+ *
+ * @param {string|Array} path The path to the setting.
+ *
+ * @return {any} Returns the style value defined for the path.
+ *
+ * @example
+ * ```js
+ * const backgroundColor = useStyle( 'color.background' );
+ * ```
+ */
+export default function useStyle( path ) {
+	const { name: blockName } = useBlockEditContext();
+
+	const settings = useSelect( ( select ) => {
+		return select( blockEditorStore ).getSettings();
+	}, [] );
+	const stylesForBlock = get( settings, [
+		'__experimentalStyles',
+		'blocks',
+		blockName,
+	] );
+	const value = get( stylesForBlock, path );
+	return useMemo( () => {
+		return getValueFromVariable(
+			settings.__experimentalFeatures,
+			blockName,
+			value
+		);
+	}, [ settings.__experimentalFeatures, blockName, value ] );
+}

packages/block-editor/src/hooks/line-height.js

@@ -9,6 +9,7 @@ import { hasBlockSupport } from '@wordpress/blocks';
 import LineHeightControl from '../components/line-height-control';
 import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
+import useStyle from '../components/use-style';
 
 export const LINE_HEIGHT_SUPPORT_KEY = 'typography.lineHeight';
 
@@ -24,6 +25,7 @@ export function LineHeightEdit( props ) {
 		attributes: { style },
 		setAttributes,
 	} = props;
+	const defaultLineHeight = useStyle( [ 'typography', 'lineHeight' ] );
 
 	const onChange = ( newLineHeightValue ) => {
 		const newStyle = {
@@ -43,6 +45,7 @@ export function LineHeightEdit( props ) {
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"
+			placeholder={ defaultLineHeight }
 		/>
 	);
 }

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

@@ -1,3 +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 {
+	PRESET_METADATA,
+	findInPresetsBy,
+	getValueFromVariable,
+} from './style-variable-resolution';
+export { getTypographyFontSizeValue } from './typography';