feat/typography typescale #3482
Conversation
…/Stackable into feat/size-control-steps
🤖 Pull request artifacts
|
…ng, convert from rem if only has px support
| @@ -284,6 +287,8 @@ export const Controls = props => { | |||
| video: 'column-gap', | |||
| description: __( 'Sets the distance between two or more columns', i18n ), | |||
| } } | |||
| marks={ presetMarks } | |||
| hasCSSVariableValue={ true } | |||
There was a problem hiding this comment.
I think we had a discussion before to remove this prop hasCSSVariableValue since it can just be detected from the value
| $this->form_tag_selector( 'p' ), // Core text. | ||
| $this->form_tag_selector( 'li' ), // Core lists. | ||
| $this->form_tag_selector( 'td' ) // Core table cells. | ||
| $is_apply_body_to_html = get_option( 'stackable_is_apply_body_to_html' ) ?? false; |
There was a problem hiding this comment.
I believe get_option() is never null since it returns false if the value is not yet set. So we can do just:
| $is_apply_body_to_html = get_option( 'stackable_is_apply_body_to_html' ) ?? false; | |
| $is_apply_body_to_html = get_option( 'stackable_is_apply_body_to_html' ); |
Can you also move this code to the if statement where it is used to make it closer and easier to read.
|
|
||
| private function load_presets( $json_path ) { | ||
| if ( file_exists( $json_path ) ) { | ||
| $json_data = file_get_contents( $json_path ); |
There was a problem hiding this comment.
Use wp_json_file_decode instead
| if ( customPresets && typeof customPresets === 'object' ) { | ||
| renderGlobalStyles( customPresets, setStyles ) | ||
| } | ||
| }, [ JSON.stringify( customPresets ) ] ) |
There was a problem hiding this comment.
This might work without needing to do JSON.stringify()
| }, [ JSON.stringify( customPresets ) ] ) | |
| }, [ customPresets ] ) |
| $this->custom_presets = get_option( 'stackable_global_custom_preset_controls' ); | ||
| $this->theme_presets = WP_Theme_JSON_Resolver::get_theme_data()->get_settings(); | ||
| $this->default_presets = WP_Theme_JSON_Resolver::get_core_data()->get_settings(); | ||
| $this->stackable_presets = $this->load_presets( __DIR__ . '/presets.json'); | ||
|
|
||
| add_filter( 'stackable_inline_styles_nodep', array( $this, 'add_preset_controls_styles' ) ); | ||
| add_filter( 'stackable_inline_editor_styles', array( $this, 'add_preset_controls_styles' ) ); |
There was a problem hiding this comment.
These will be called even in the front end where I don't think the presets are needed.
I recommend to place the code the populates custom_presets, theme_presets etc into a new function:
public function load_presets() {
$this->custom_presets = get_option( 'stackable_global_custom_preset_controls' );
// ...
}Then calling $this->load_presets() when the values are about to be used.
This is so that the loading process will only be called when needed (currently this performed for every page load)
| return ! is_array( $input ) ? array( array() ) : $input; | ||
| } | ||
|
|
||
| private function load_presets( $json_path ) { |
There was a problem hiding this comment.
Maybe change this function name since it's not actually loading presets, it's just loading the provided json file
| ? $preset['size'] | ||
| : "var(--wp--preset--$prefix--$slug)"; | ||
|
|
||
| $css .= "--stk--preset--$prefix--$slug: $value;\n"; |
There was a problem hiding this comment.
Instead of building the css from strings, you can return an object here instead, then later on use wp_style_engine_get_stylesheet_from_css_rules to build the css so we get the benefit of sanitation.
| public function deepGet( $array, $keys ) { | ||
| return array_reduce( $keys, fn( $value, $key ) => $value[ $key ] ?? null, $array ); | ||
| } |
There was a problem hiding this comment.
If you use wp_style_engine_get_stylesheet_from_css_rules from the previous comment, you might not need to use this anymore
| disabled: true, | ||
| }, | ||
| { | ||
| label: __( '1.067 - Minor Second', i18n ), |
There was a problem hiding this comment.
Make the English portion only as translatable:
| label: __( '1.067 - Minor Second', i18n ), | |
| // Translators: First %s is a unit, second %s is a name of the unit | |
| label: sprintf( __( '%s - %s', i18n ), '1.067', __( 'Minor Second', i18n ) ), |
| // Update the custom presets when using typography as presets | ||
| if ( useTypographyAsPresets ) { | ||
| const fontSizePresets = TYPOGRAPHY_TAGS | ||
| .filter( ( { presetSlug } ) => !! presetSlug ) | ||
| .map( ( { | ||
| selector, presetName, presetSlug, | ||
| } ) => { | ||
| const size = typographySettings[ selector ]?.fontSize ?? getDefaultFontSize( selector ) ?? 16 | ||
| const unit = typographySettings[ selector ]?.fontSizeUnit ?? 'px' | ||
| return { | ||
| name: presetName, | ||
| slug: presetSlug, | ||
| size: `${ size }${ unit }`, | ||
| } | ||
| } ) | ||
| // Add the preset for extra small | ||
| let xSmallSize = typographySettings[ '.stk-subtitle' ]?.fontSize ?? getDefaultFontSize( '.stk-subtitle' ) ?? 16 | ||
| let xSmallUnit = typographySettings[ '.stk-subtitle' ]?.fontSizeUnit ?? 'px' | ||
| if ( xSmallUnit === 'px' ) { | ||
| xSmallSize = Math.pow( xSmallSize / 16, 2 ) | ||
| xSmallUnit = 'rem' | ||
| } else { | ||
| xSmallSize = Math.pow( xSmallSize, 2 ) | ||
| } | ||
|
|
||
| fontSizePresets.push( { | ||
| name: 'XS', | ||
| slug: 'x-small', | ||
| size: `${ xSmallSize }${ xSmallUnit ?? 'px' }`, | ||
| } ) | ||
| // Reverse the presets so it's from smallest to biggest | ||
| fontSizePresets.reverse() | ||
|
|
||
| const newSettings = { ...allCustomPresets, fontSizes: fontSizePresets } | ||
|
|
||
| clearTimeout( saveTypographyAsPresetsThrottle ) | ||
| saveTypographyAsPresetsThrottle = setTimeout( () => { | ||
| const settings = new models.Settings( { stackable_global_custom_preset_controls: newSettings } ) // eslint-disable-line camelcase | ||
| settings.save() | ||
| }, 300 ) | ||
|
|
||
| dispatch( 'stackable/global-preset-controls.custom' ).updateCustomPresetControls( newSettings ) |
There was a problem hiding this comment.
Looks like this code updates the preset controls and belongs to the preset controls area. In the preset controls area, you can just listen to calls to stackable.global-settings.typography.update-trigger and perform preset changes accordingly
No description provided.