Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed Mar 17, 2022
1 parent b115040 commit 8b36af3
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 0 deletions.
47 changes: 47 additions & 0 deletions lib/block-supports/typography.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,53 @@ function gutenberg_typography_get_css_variable_inline_style( $attributes, $featu
return sprintf( '%s:var(--wp--preset--%s--%s);', $css_property, $css_property, $slug );
}

function gutenberg_get_typography_font_size_value( $preset ) {
// This is where we'll keep options I guess.
// Comment out to show how things work.
$typography_settings = gutenberg_get_global_settings( array( 'typography' ) );

// if ( ! isset( $typography_settings['fluid'] ) ) {
// return $preset['size'];
// }

// Should be defined by theme.json, maybe take from layout?
$minimum_viewport_width = 640 / 16; // rem for now. 1200(px) / 16 to get rem.
$maximum_viewport_width = 1600 / 16; // Ditto.

/*
Up next;
- Challenge: looping through fontSizes and calculating clamp functions for every size relies preferably on rem/px or unitless values.
- Apply this to custom font-size values.
*/

// Matches rem or unitless values only.
$pattern = '/^(\d*\.?\d+)(rem|px)?$/';
preg_match_all( $pattern, $preset['size'], $matches );

if ( isset( $matches[1][0] ) ) {
$base_value = intval( $matches[1][0] );

if ( isset( $matches[2][0] ) && 'px' === $matches[2][0] ) {
// Calculate rem to px.

$base_value = $base_value / 16;
}

$minimum_font_size = $base_value * 1; // A min value should ideally be coming from theme.json.
$maximum_font_size = $base_value * 1.5; // Ditto on the max.
$factor = ( 1 / ( $maximum_viewport_width - $minimum_viewport_width ) ) * ( $maximum_font_size - $minimum_font_size );
$calc_rem = $minimum_font_size - ( $minimum_viewport_width * $factor );
$calc_vw = 100 * $factor;
$min = min( $minimum_font_size, $maximum_font_size );
$max = max( $minimum_font_size, $maximum_font_size );

return "clamp({$min}rem, {$calc_rem}rem + {$calc_vw}vw, {$max}rem)";

} else {
return $preset['size'];
}
}

// Register the block support.
WP_Block_Supports::get_instance()->register(
'typography',
Expand Down
108 changes: 108 additions & 0 deletions lib/compat/wordpress-6.0/class-wp-theme-json-gutenberg.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,114 @@
*/
class WP_Theme_JSON_Gutenberg extends WP_Theme_JSON_5_9 {

/**
* Presets are a set of values that serve
* to bootstrap some styles: colors, font sizes, etc.
*
* They are a unkeyed array of values such as:
*
* ```php
* array(
* array(
* 'slug' => 'unique-name-within-the-set',
* 'name' => 'Name for the UI',
* <value_key> => 'value'
* ),
* )
* ```
*
* This contains the necessary metadata to process them:
*
* - path => Where to find the preset within the settings section.
* - prevent_override => Whether a theme preset with the same slug as a default preset
* should not override it or the path to a setting for the same
* When defaults.
* The relationship between whether to override the defaults
* and whether the defaults are enabled is inverse:
* - If defaults are enabled => theme presets should not be overriden
* - If defaults are disabled => theme presets should be overriden
* For example, a theme sets defaultPalette to false,
* making the default palette hidden from the user.
* In that case, we want all the theme presets to be present,
* so they should override the defaults by setting this false.
* - value_key => the key that represents the value
* - value_func => optionally, instead of value_key, a function to generate
* the value that takes a preset as an argument
* (either value_key or value_func should be present)
* - css_vars => template string to use in generating the CSS Custom Property.
* Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
* substituting the $slug for the slug's value for each preset value.
* - classes => array containing a structure with the classes to
* generate for the presets, where for each array item
* the key is the class name and the value the property name.
* The "$slug" substring will be replaced by the slug of each preset.
* For example:
* 'classes' => array(
* '.has-$slug-color' => 'color',
* '.has-$slug-background-color' => 'background-color',
* '.has-$slug-border-color' => 'border-color',
* )
* - properties => array of CSS properties to be used by kses to
* validate the content of each preset
* by means of the remove_insecure_properties method.
*/
const PRESETS_METADATA = array(
array(
'path' => array( 'color', 'palette' ),
'prevent_override' => array( 'color', 'defaultPalette' ),
'use_default_presets' => array( 'color', 'defaultPalette' ),
'use_default_names' => false,
'value_key' => 'color',
'css_vars' => '--wp--preset--color--$slug',
'classes' => array(
'.has-$slug-color' => 'color',
'.has-$slug-background-color' => 'background-color',
'.has-$slug-border-color' => 'border-color',
),
'properties' => array( 'color', 'background-color', 'border-color' ),
),
array(
'path' => array( 'color', 'gradients' ),
'prevent_override' => array( 'color', 'defaultGradients' ),
'use_default_presets' => array( 'color', 'defaultGradients' ),
'use_default_names' => false,
'value_key' => 'gradient',
'css_vars' => '--wp--preset--gradient--$slug',
'classes' => array( '.has-$slug-gradient-background' => 'background' ),
'properties' => array( 'background' ),
),
array(
'path' => array( 'color', 'duotone' ),
'prevent_override' => array( 'color', 'defaultDuotone' ),
'use_default_presets' => array( 'color', 'defaultDuotone' ),
'use_default_names' => false,
'value_func' => 'gutenberg_get_duotone_filter_property',
'css_vars' => '--wp--preset--duotone--$slug',
'classes' => array(),
'properties' => array( 'filter' ),
),
array(
'path' => array( 'typography', 'fontSizes' ),
'prevent_override' => false,
'use_default_presets' => true,
'use_default_names' => true,
'value_func' => 'gutenberg_get_typography_font_size_value',
'css_vars' => '--wp--preset--font-size--$slug',
'classes' => array( '.has-$slug-font-size' => 'font-size' ),
'properties' => array( 'font-size' ),
),
array(
'path' => array( 'typography', 'fontFamilies' ),
'prevent_override' => false,
'use_default_presets' => true,
'use_default_names' => false,
'value_key' => 'fontFamily',
'css_vars' => '--wp--preset--font-family--$slug',
'classes' => array( '.has-$slug-font-family' => 'font-family' ),
'properties' => array( 'font-family' ),
),
);

/**
* The top-level keys a theme.json can have.
*
Expand Down

0 comments on commit 8b36af3

Please sign in to comment.