| 1 |
<?php |
| 2 |
namespace ABlocks\Controls; |
| 3 |
|
| 4 |
if ( ! defined( 'ABSPATH' ) ) { |
| 5 |
exit; |
| 6 |
} |
| 7 |
|
| 8 |
use ABlocks\Classes\ControlBaseAbstract; |
| 9 |
|
| 10 |
class Typography extends ControlBaseAbstract { |
| 11 |
public static function get_attribute_default_value( $is_responsive = false, $default = [] ) { |
| 12 |
$base_values = [ |
| 13 |
'fontFamily' => '', |
| 14 |
'weight' => '', |
| 15 |
'transform' => '', |
| 16 |
'style' => '', |
| 17 |
'decoration' => '', |
| 18 |
'fontSize' => '', |
| 19 |
'fontSizeUnit' => 'px', |
| 20 |
'lineHeight' => '', |
| 21 |
'lineHeightUnit' => 'px', |
| 22 |
'letterSpacing' => '', |
| 23 |
'letterSpacingUnit' => 'px', |
| 24 |
'wordSpacing' => '', |
| 25 |
'wordSpacingUnit' => 'px', |
| 26 |
]; |
| 27 |
|
| 28 |
if ( $is_responsive ) { |
| 29 |
$responsive_values = [ |
| 30 |
'fontSizeTablet' => '', |
| 31 |
'fontSizeMobile' => '', |
| 32 |
'fontSizeUnitTablet' => 'px', |
| 33 |
'fontSizeUnitMobile' => 'px', |
| 34 |
'lineHeightTablet' => '', |
| 35 |
'lineHeightMobile' => '', |
| 36 |
'lineHeightUnitTablet' => 'px', |
| 37 |
'lineHeightUnitMobile' => 'px', |
| 38 |
'letterSpacingTablet' => '', |
| 39 |
'letterSpacingMobile' => '', |
| 40 |
'letterSpacingUnitTablet' => 'px', |
| 41 |
'letterSpacingUnitMobile' => 'px', |
| 42 |
'wordSpacingTablet' => '', |
| 43 |
'wordSpacingMobile' => '', |
| 44 |
'wordSpacingUnitTablet' => 'px', |
| 45 |
'wordSpacingUnitMobile' => 'px', |
| 46 |
]; |
| 47 |
return array_merge( $base_values, $responsive_values, $default ); |
| 48 |
}//end if |
| 49 |
|
| 50 |
return array_merge( $base_values, $default ); |
| 51 |
} |
| 52 |
|
| 53 |
|
| 54 |
public static function get_attribute( $attributeName, $isResponsive = false, $default = [] ) { |
| 55 |
return [ |
| 56 |
$attributeName . 'Global' => [ |
| 57 |
'type' => 'string', |
| 58 |
'default' => '', |
| 59 |
], |
| 60 |
$attributeName => [ |
| 61 |
'type' => 'object', |
| 62 |
'default' => self::get_attribute_default_value( $isResponsive, $default ), |
| 63 |
] |
| 64 |
]; |
| 65 |
} |
| 66 |
|
| 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 ) ) { |
| 84 |
return []; |
| 85 |
} |
| 86 |
|
| 87 |
$default_attr_value = self::get_attribute_default_value( (bool) $device ); |
| 88 |
$value = wp_parse_args( $attribute_value, $default_attr_value ); |
| 89 |
$css = []; |
| 90 |
|
| 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 |
}; |
| 100 |
|
| 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 |
} |
| 130 |
|
| 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'; |
| 157 |
} |
| 158 |
} |
| 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 ); |
| 164 |
} |
| 165 |
|
| 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 |
*/ |
| 174 |
if ( empty( $device ) ) { |
| 175 |
if ( isset( $value['columns'] ) && '' !== $value['columns'] ) { |
| 176 |
$css['column-count'] = $value['columns']; |
| 177 |
} |
| 178 |
if ( ! empty( $value['direction'] ) ) { |
| 179 |
$css['direction'] = $value['direction']; |
| 180 |
} |
| 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; |
| 184 |
} |
| 185 |
if ( ! empty( $value['strokeColor'] ) ) { |
| 186 |
$css['-webkit-text-stroke-color'] = $value['strokeColor']; |
| 187 |
} |
| 188 |
} |
| 189 |
|
| 190 |
return $css; |
| 191 |
} |
| 192 |
} |
| 193 |
|
