| @@ -10,9 +10,9 @@ | ||
| 10 | 10 | class Typography extends ControlBaseAbstract { |
| 11 | 11 | public static function get_attribute_default_value( $is_responsive = false, $default = [] ) { |
| 12 | 12 | $base_values = [ |
| 13 | 13 | 'fontFamily' => '', |
| 14 | - 'weight' => '400', | |
| 14 | + 'weight' => '', | |
| 15 | 15 | 'transform' => '', |
| 16 | 16 | 'style' => '', |
| 17 | 17 | 'decoration' => '', |
| 18 | 18 | 'fontSize' => '', |
| @@ -52,8 +52,12 @@ | ||
| 52 | 52 | |
| 53 | 53 | |
| 54 | 54 | public static function get_attribute( $attributeName, $isResponsive = false, $default = [] ) { |
| 55 | 55 | return [ |
| 56 | + $attributeName . 'Global' => [ | |
| 57 | + 'type' => 'string', | |
| 58 | + 'default' => '', | |
| 59 | + ], | |
| 56 | 60 | $attributeName => [ |
| 57 | 61 | 'type' => 'object', |
| 58 | 62 | 'default' => self::get_attribute_default_value( $isResponsive, $default ), |
| 59 | 63 | ] |
| @@ -59,56 +63,128 @@ | ||
| 59 | 63 | ] |
| 60 | 64 | ]; |
| 61 | 65 | } |
| 62 | 66 | |
| 63 | - public static function get_css( $attribute_value, $property = '', $device = '' ) { | |
| 64 | - global $ablocks_fonts; | |
| 65 | - if ( empty( $attribute_value ) ) { | |
| 67 | + /** | |
| 68 | + * @param mixed $attribute_value Stored typography object. | |
| 69 | + * @param string $property Unused legacy argument. | |
| 70 | + * @param string $device Device suffix. | |
| 71 | + * @param string $attribute_global_name Global typography id, if any. | |
| 72 | + * @param bool $expand_font_stack Whether to turn the stored family into | |
| 73 | + * a full stack. The atomic compiler must | |
| 74 | + * pass false — see below. | |
| 75 | + */ | |
| 76 | + public static function get_css( $attribute_value, $property = '', $device = '', $attribute_global_name = '', $expand_font_stack = true ) { | |
| 77 | + $global_value = []; | |
| 78 | + if ( $attribute_global_name ) { | |
| 79 | + $global_typography = wp_list_pluck( \Ablocks\Helper::get_settings( 'global_typography', [] ), 'value', 'id' ); | |
| 80 | + $global_value = ( isset( $global_typography[ $attribute_global_name ] ) ? (array) $global_typography[ $attribute_global_name ] : [] ); | |
| 81 | + } | |
| 82 | + | |
| 83 | + if ( empty( $attribute_value ) && ! count( $global_value ) ) { | |
| 66 | 84 | return []; |
| 67 | 85 | } |
| 86 | + | |
| 68 | 87 | $default_attr_value = self::get_attribute_default_value( (bool) $device ); |
| 69 | 88 | $value = wp_parse_args( $attribute_value, $default_attr_value ); |
| 70 | 89 | $css = []; |
| 71 | 90 | |
| 72 | - // Parse font family | |
| 73 | - if ( ! empty( $value['fontFamily'] ) ) { | |
| 74 | - $font_family = $value['fontFamily']; | |
| 75 | - $font_weight = ! empty( $value['weight'] ) ? $value['weight'] : '400'; | |
| 91 | + // Helper: add CSS property with global fallback | |
| 92 | + $add_prop = function( $prop, $local_val, $local_unit, $global_key, $css_var_name ) use ( $attribute_global_name, $global_value, &$css ) { | |
| 93 | + if ( ! empty( $global_value[ $global_key ] ) ) { | |
| 94 | + $css[ $prop ] = "var(--ablocks-{$attribute_global_name}-{$css_var_name})"; | |
| 95 | + } elseif ( \ABlocks\Helper::has_responsive_value( $local_val ) ) { | |
| 96 | + // A stored 0 is a real value (matches the editor's addProp()). | |
| 97 | + $css[ $prop ] = $local_unit ? $local_val . $local_unit : $local_val; | |
| 98 | + } | |
| 99 | + }; | |
| 76 | 100 | |
| 77 | - $css['font-family'] = $font_family; | |
| 101 | + // Font family. Output the CSS value only — font *discovery* is no longer | |
| 102 | + // done at render time. The set of fonts a page uses is collected from | |
| 103 | + // saved block attributes (FontCollector) and emitted by core via | |
| 104 | + // theme.json (CoreFontRegistry). See docs/FONT-MANAGEMENT-PLAN.md. | |
| 105 | + // | |
| 106 | + // The stored attribute is a bare family name (that name doubles as the | |
| 107 | + // download key), so FontStack turns it into a real stack — quoted, with a | |
| 108 | + // metric-adjusted fallback face and a generic tail derived from the font's | |
| 109 | + // own category. There is no per-block fallback field: `fontFallback` is | |
| 110 | + // read only so a value set through a filter still wins. | |
| 111 | + if ( ! empty( $global_value['fontFamily'] ) ) { | |
| 112 | + $css['font-family'] = "var(--ablocks-{$attribute_global_name}-font-family)"; | |
| 113 | + } elseif ( ! empty( $value['fontFamily'] ) ) { | |
| 114 | + // A stored family becomes a full stack everywhere EXCEPT the atomic | |
| 115 | + // compiler, whose declarations are hashed in JS at save time and | |
| 116 | + // again here at render time and must agree byte for byte. A stack | |
| 117 | + // cannot take part in that: it depends on the metrics table, the | |
| 118 | + // `font_metric_fallback` setting and the `ablocks/font_stack` | |
| 119 | + // filter, none of which the editor can see. | |
| 120 | + $family = $expand_font_stack | |
| 121 | + ? \ABlocks\Classes\FontStack::build( | |
| 122 | + $value['fontFamily'], | |
| 123 | + isset( $value['fontFallback'] ) ? $value['fontFallback'] : '' | |
| 124 | + ) | |
| 125 | + : $value['fontFamily']; | |
| 126 | + if ( '' !== $family ) { | |
| 127 | + $css['font-family'] = $family; | |
| 128 | + } | |
| 129 | + } | |
| 78 | 130 | |
| 79 | - if ( isset( $ablocks_fonts[ $font_family ] ) ) { | |
| 80 | - if ( ! in_array( $font_weight, $ablocks_fonts[ $font_family ], true ) ) { | |
| 81 | - $ablocks_fonts[ $font_family ][] = $font_weight; | |
| 131 | + // Desktop-only styles | |
| 132 | + if ( empty( $device ) ) { | |
| 133 | + $add_prop( 'font-weight', $value['weight'] ?? '', null, 'weight', 'weight' ); | |
| 134 | + $add_prop( 'text-transform', $value['transform'] ?? '', null, 'transform', 'transform' ); | |
| 135 | + $add_prop( 'font-style', $value['style'] ?? '', null, 'style', 'style' ); | |
| 136 | + $add_prop( 'text-decoration', $value['decoration'] ?? '', null, 'decoration', 'decoration' ); | |
| 137 | + } | |
| 138 | + | |
| 139 | + // Device-specific typography | |
| 140 | + $map = [ | |
| 141 | + 'fontSize' => 'font-size', | |
| 142 | + 'lineHeight' => 'line-height', | |
| 143 | + 'letterSpacing' => 'letter-spacing', | |
| 144 | + 'wordSpacing' => 'word-spacing', | |
| 145 | + ]; | |
| 146 | + | |
| 147 | + foreach ( $map as $prop => $css_prop ) { | |
| 148 | + $local_val = $value[ $prop . $device ] ?? ''; | |
| 149 | + $local_unit = $value[ $prop . 'Unit' . $device ] ?? ''; | |
| 150 | + // A custom breakpoint has no unit default, so a value set there | |
| 151 | + // without touching the unit compiled unitless. Cascade like the | |
| 152 | + // editor's unit selector does, else px. Native devices unchanged. | |
| 153 | + if ( '' === $local_unit && ! in_array( $device, [ '', 'Tablet', 'Mobile' ], true ) ) { | |
| 154 | + $local_unit = \ABlocks\Helper::get_responsive_value( (array) $attribute_value, $prop . 'Unit', $device ); | |
| 155 | + if ( ! $local_unit ) { | |
| 156 | + $local_unit = 'px'; | |
| 82 | 157 | } |
| 83 | - } else { | |
| 84 | - $ablocks_fonts[ $font_family ] = [ $font_weight ]; | |
| 85 | 158 | } |
| 86 | - update_option( ABLOCKS_FONTS_SETTINGS_NAME, wp_json_encode( $ablocks_fonts ) ); | |
| 159 | + $global_key = $prop . $device; | |
| 160 | + | |
| 161 | + $css_var_name = $css_prop . ( $device ? '-' . strtolower( $device ) : '' ); | |
| 162 | + | |
| 163 | + $add_prop( $css_prop, $local_val, $local_unit, $global_key, $css_var_name ); | |
| 87 | 164 | } |
| 88 | 165 | |
| 89 | - // For desktop-specific styles | |
| 166 | + /* | |
| 167 | + * Columns, direction and text stroke. Appended after the original | |
| 168 | + * members so anything saved before these existed compiles byte-for-byte | |
| 169 | + * as it did — for atomic blocks the style class is a hash of this | |
| 170 | + * output. Desktop-only, like weight/transform/style/decoration above, | |
| 171 | + * and with no global-typography equivalent to fall back to. Mirrors the | |
| 172 | + * tail of typographyPairs() in src/blocks/atomic-shared/styles.js. | |
| 173 | + */ | |
| 90 | 174 | if ( empty( $device ) ) { |
| 91 | - if ( ! empty( $value['weight'] ) && $value['weight'] !== '400' ) { | |
| 92 | - $css['font-weight'] = $value['weight']; | |
| 175 | + if ( isset( $value['columns'] ) && '' !== $value['columns'] ) { | |
| 176 | + $css['column-count'] = $value['columns']; | |
| 93 | 177 | } |
| 94 | - if ( ! empty( $value['transform'] ) ) { | |
| 95 | - $css['text-transform'] = $value['transform']; | |
| 178 | + if ( ! empty( $value['direction'] ) ) { | |
| 179 | + $css['direction'] = $value['direction']; | |
| 96 | 180 | } |
| 97 | - if ( ! empty( $value['style'] ) ) { | |
| 98 | - $css['font-style'] = $value['style']; | |
| 181 | + if ( isset( $value['strokeWidth'] ) && '' !== $value['strokeWidth'] ) { | |
| 182 | + $stroke_unit = ! empty( $value['strokeWidthUnit'] ) ? $value['strokeWidthUnit'] : 'px'; | |
| 183 | + $css['-webkit-text-stroke-width'] = $value['strokeWidth'] . $stroke_unit; | |
| 99 | 184 | } |
| 100 | - if ( ! empty( $value['decoration'] ) ) { | |
| 101 | - $css['text-decoration'] = $value['decoration']; | |
| 102 | - } | |
| 103 | - } | |
| 104 | - | |
| 105 | - // Device-specific font properties | |
| 106 | - $properties = [ 'fontSize', 'lineHeight', 'letterSpacing', 'wordSpacing' ]; | |
| 107 | - foreach ( $properties as $prop ) { | |
| 108 | - if ( ! empty( $value[ $prop . $device ] ) && ! empty( $value[ $prop . 'Unit' . $device ] ) ) { | |
| 109 | - $css_prop = strtolower( preg_replace( '/([a-z])([A-Z])/', '$1-$2', $prop ) ); | |
| 110 | - $css[ $css_prop ] = $value[ $prop . $device ] . $value[ $prop . 'Unit' . $device ]; | |
| 185 | + if ( ! empty( $value['strokeColor'] ) ) { | |
| 186 | + $css['-webkit-text-stroke-color'] = $value['strokeColor']; | |
| 111 | 187 | } |
| 112 | 188 | } |
| 113 | 189 | |
| 114 | 190 | return $css; |
