vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-11 20:30:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Editor: Introduces fluid typography and uses Style Engine.

Browse Source 
This commit introduces fluid typography block supports and switches to use the Style Engine for typography and colors.

The motivation for fluid typography block supports:
>"Fluid typography" describes how a site's font sizes adapt to every change in screen size, for example, growing larger as the viewport width increases, or smaller as it decreases.
>
>Font sizes can smoothly scale between minimum and maximum viewport widths.

Typography changes introduced from Gutenberg:

* Uses the Style Engine to generate the CSS and classnames in `wp_apply_typography_support()`.
* Introduces `wp_typography_get_preset_inline_style_value()` for backwards-compatibility.
* Introduces a private internal function called `wp_get_typography_value_and_unit()`, for checking and getting typography unit and value.
* Introduces a private internal function called  `wp_get_computed_fluid_typography_value()`, for an internal implementation of CSS `clamp()`.
* Deprecates `wp_typography_get_css_variable_inline_style()`.

References:
* [https://github.com/WordPress/gutenberg/pull/40332 WordPress/gutenberg PR 40332] Style Engine: add typography and color to backend
* [https://github.com/WordPress/gutenberg/pull/39529 WordPress/gutenberg PR 39529] Block supports: add fluid typography

Follow-up to [53076], [52302], [52069], [51089], [50761], [49226].

Props ramonopoly, youknowriad, aristath, oandregal, aaronrobertshaw, cbirdsong, jorgefilipecosta, ironprogrammer, hellofromTonya.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54260 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Tonya Mork
2022-09-20 15:41:44 +00:00
parent 72a1591d94
commit b2849b7718
5 changed files with 536 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/deprecated.php
+40
View File
@@ -4456,3 +4456,43 @@ function _get_path_to_translation_from_lang_dir( $domain ) {
_deprecated_function( __FUNCTION__, '6.1.0' );
return $metadata;
}
/**
* Generates an inline style for a typography feature e.g. text decoration,
* text transform, and font style.
*
* @since 5.8.0
* @access private
* @deprecated 6.1.0 Use wp_style_engine_get_styles() introduced in 6.1.0.
*
* @see wp_style_engine_get_styles()
*
* @param array $attributes Block's attributes.
* @param string $feature Key for the feature within the typography styles.
* @param string $css_property Slug for the CSS property the inline style sets.
* @return string CSS inline style.
*/
function wp_typography_get_css_variable_inline_style( $attributes, $feature, $css_property ) {
_deprecated_function( __FUNCTION__, '6.1.0', 'wp_style_engine_get_styles()' );
// Retrieve current attribute value or skip if not found.
$style_value = _wp_array_get( $attributes, array( 'style', 'typography', $feature ), false );
if ( ! $style_value ) {
return;
}
// If we don't have a preset CSS variable, we'll assume it's a regular CSS value.
if ( strpos( $style_value, "var:preset|{$css_property}|" ) === false ) {
return sprintf( '%s:%s;', $css_property, $style_value );
}
/*
* We have a preset CSS variable as the style.
* Get the style value from the string and return CSS style.
*/
$index_to_splice = strrpos( $style_value, '|' ) + 1;
$slug = substr( $style_value, $index_to_splice );
// Return the actual CSS inline style e.g. `text-decoration:var(--wp--preset--text-decoration--underline);`.
return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
}