← All changes
|
modules/atomic-widgets/css-converter/converter-registry-factory.php
+69
-2
4.2.3
→
trunk
View file →
| @@ -10,8 +10,9 @@ | ||
| 10 | 10 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Border_Radius_Property_Converter; |
| 11 | 11 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Color_Property_Converter; |
| 12 | 12 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Dimensions_Property_Converter; |
| 13 | 13 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Filter_Property_Converter; |
| 14 | +use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Flex_Longhand_Converter; | |
| 14 | 15 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Flex_Property_Converter; |
| 15 | 16 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Transform_Origin_Property_Converter; |
| 16 | 17 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Transform_Property_Converter; |
| 17 | 18 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Transition_Property_Converter; |
| @@ -22,8 +23,9 @@ | ||
| 22 | 23 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Object_Side_Merge_Converter; |
| 23 | 24 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Size_Property_Converter; |
| 24 | 25 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\Span_Property_Converter; |
| 25 | 26 | use Elementor\Modules\AtomicWidgets\CssConverter\Converters\String_Property_Converter; |
| 27 | +use Elementor\Modules\AtomicWidgets\CssConverter\ValueParsers\Size_Value_Parser; | |
| 26 | 28 | use Elementor\Modules\AtomicWidgets\PropTypes\Background_Image_Overlay_Size_Scale_Prop_Type; |
| 27 | 29 | use Elementor\Modules\AtomicWidgets\PropTypes\Background_Prop_Type; |
| 28 | 30 | use Elementor\Modules\AtomicWidgets\PropTypes\Border_Radius_Prop_Type; |
| 29 | 31 | use Elementor\Modules\AtomicWidgets\PropTypes\Dimensions_Prop_Type; |
| @@ -28,9 +30,11 @@ | ||
| 28 | 30 | use Elementor\Modules\AtomicWidgets\PropTypes\Border_Radius_Prop_Type; |
| 29 | 31 | use Elementor\Modules\AtomicWidgets\PropTypes\Dimensions_Prop_Type; |
| 30 | 32 | use Elementor\Modules\AtomicWidgets\PropTypes\Border_Width_Prop_Type; |
| 31 | 33 | use Elementor\Modules\AtomicWidgets\PropTypes\Color_Prop_Type; |
| 34 | +use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\Number_Prop_Type; | |
| 32 | 35 | use Elementor\Modules\AtomicWidgets\PropTypes\Primitives\String_Prop_Type; |
| 36 | +use Elementor\Modules\AtomicWidgets\PropTypes\Size_Prop_Type; | |
| 33 | 37 | use Elementor\Modules\AtomicWidgets\Styles\Style_Schema; |
| 34 | 38 | use Elementor\Modules\Variables\Services\Variables_Service; |
| 35 | 39 | |
| 36 | 40 | if ( ! defined( 'ABSPATH' ) ) { |
| @@ -210,8 +214,29 @@ | ||
| 210 | 214 | 'margin-inline-end' => [ 'margin', 'inline-end' ], |
| 211 | 215 | ]; |
| 212 | 216 | |
| 213 | 217 | /** |
| 218 | + * Flex longhands that each contribute one field to the aggregate `flex` prop | |
| 219 | + * (Flex_Prop_Type). Not Style_Schema properties themselves; accumulated into | |
| 220 | + * the schema aggregate by Flex_Longhand_Converter. | |
| 221 | + * | |
| 222 | + * @return array<string, string> input property -> Flex_Prop_Type field key | |
| 223 | + */ | |
| 224 | + public static function flex_longhand_specs(): array { | |
| 225 | + return [ | |
| 226 | + 'flex-grow' => 'flexGrow', | |
| 227 | + 'flex-shrink' => 'flexShrink', | |
| 228 | + 'flex-basis' => 'flexBasis', | |
| 229 | + ]; | |
| 230 | + } | |
| 231 | + | |
| 232 | + /** | |
| 233 | + * CSS-wide keywords accepted as `custom` size values for flex-basis. The UI exposes a free | |
| 234 | + * "custom" input for flex-basis, so these are stored verbatim as {size: "<keyword>", unit: "custom"}. | |
| 235 | + */ | |
| 236 | + const FLEX_BASIS_CUSTOM_KEYWORDS = [ 'initial', 'inherit', 'unset', 'revert', 'revert-layer' ]; | |
| 237 | + | |
| 238 | + /** | |
| 214 | 239 | * Filter-function lists backed by Array(Css_Filter_Func) (filter, backdrop-filter). Handled |
| 215 | 240 | * uniformly by Filter_Property_Converter + Filter_Value_Parser; the two share inner items and |
| 216 | 241 | * differ only by the wrapping $$type, which is sourced from the live schema. |
| 217 | 242 | */ |
| @@ -319,8 +344,9 @@ | ||
| 319 | 344 | self::DIMENSIONS_PROPERTIES, |
| 320 | 345 | self::FILTER_PROPERTIES, |
| 321 | 346 | self::OTHER_PROPERTIES, |
| 322 | 347 | array_keys( self::border_side_specs() ), |
| 348 | + array_keys( self::flex_longhand_specs() ), | |
| 323 | 349 | self::BACKGROUND_FIELD_PROPERTIES, |
| 324 | 350 | self::BACKGROUND_LAYER_PROPERTIES, |
| 325 | 351 | self::NOOP_PROPERTIES, |
| 326 | 352 | self::REJECTED_PROPERTIES |
| @@ -335,9 +361,9 @@ | ||
| 335 | 361 | * they are intentionally absent and route to custom_css. |
| 336 | 362 | * |
| 337 | 363 | * @return array<string, array{0: string, 1: string}> |
| 338 | 364 | */ |
| 339 | - private static function border_side_specs(): array { | |
| 365 | + public static function border_side_specs(): array { | |
| 340 | 366 | return [ |
| 341 | 367 | 'border-top-width' => [ 'border-width', 'block-start' ], |
| 342 | 368 | 'border-right-width' => [ 'border-width', 'inline-end' ], |
| 343 | 369 | 'border-bottom-width' => [ 'border-width', 'block-end' ], |
| @@ -345,8 +371,12 @@ | ||
| 345 | 371 | 'border-top-left-radius' => [ 'border-radius', 'start-start' ], |
| 346 | 372 | 'border-top-right-radius' => [ 'border-radius', 'start-end' ], |
| 347 | 373 | 'border-bottom-right-radius' => [ 'border-radius', 'end-end' ], |
| 348 | 374 | 'border-bottom-left-radius' => [ 'border-radius', 'end-start' ], |
| 375 | + 'border-start-start-radius' => [ 'border-radius', 'start-start' ], | |
| 376 | + 'border-start-end-radius' => [ 'border-radius', 'start-end' ], | |
| 377 | + 'border-end-end-radius' => [ 'border-radius', 'end-end' ], | |
| 378 | + 'border-end-start-radius' => [ 'border-radius', 'end-start' ], | |
| 349 | 379 | ]; |
| 350 | 380 | } |
| 351 | 381 | |
| 352 | 382 | public static function create( ?Variables_Service $variables_service = null ): Converter_Registry { |
| @@ -388,9 +418,9 @@ | ||
| 388 | 418 | $schema = Style_Schema::get_style_schema(); |
| 389 | 419 | $converters = []; |
| 390 | 420 | |
| 391 | 421 | foreach ( self::STRING_PROPERTIES as $property ) { |
| 392 | - $converters[ $property ] = new String_Property_Converter( $property, $schema[ $property ]->get_enum() ); | |
| 422 | + $converters[ $property ] = new String_Property_Converter( $property, $schema[ $property ]->get_enum(), $schema[ $property ]->get_key() ); | |
| 393 | 423 | } |
| 394 | 424 | |
| 395 | 425 | foreach ( self::SIZE_PROPERTIES as $property ) { |
| 396 | 426 | $allow_unitless = in_array( $property, self::UNITLESS_SIZE_PROPERTIES, true ); |
| @@ -420,8 +450,45 @@ | ||
| 420 | 450 | $converters['border-radius'] = new Border_Radius_Property_Converter( 'border-radius' ); |
| 421 | 451 | $converters['border-width'] = new Dimensions_Property_Converter( 'border-width', Border_Width_Prop_Type::class ); |
| 422 | 452 | $converters['object-position'] = new Object_Position_Property_Converter(); |
| 423 | 453 | $converters['flex'] = new Flex_Property_Converter(); |
| 454 | + | |
| 455 | + $converters['flex-grow'] = new Flex_Longhand_Converter( | |
| 456 | + 'flex-grow', | |
| 457 | + 'flexGrow', | |
| 458 | + static function ( string $v ): ?array { | |
| 459 | + if ( ! is_numeric( $v ) ) { | |
| 460 | + return null; | |
| 461 | + } | |
| 462 | + return Number_Prop_Type::generate( (float) $v ); | |
| 463 | + } | |
| 464 | + ); | |
| 465 | + | |
| 466 | + $converters['flex-shrink'] = new Flex_Longhand_Converter( | |
| 467 | + 'flex-shrink', | |
| 468 | + 'flexShrink', | |
| 469 | + static function ( string $v ): ?array { | |
| 470 | + if ( ! is_numeric( $v ) ) { | |
| 471 | + return null; | |
| 472 | + } | |
| 473 | + return Number_Prop_Type::generate( (float) $v ); | |
| 474 | + } | |
| 475 | + ); | |
| 476 | + | |
| 477 | + $converters['flex-basis'] = new Flex_Longhand_Converter( | |
| 478 | + 'flex-basis', | |
| 479 | + 'flexBasis', | |
| 480 | + static function ( string $v ): ?array { | |
| 481 | + if ( in_array( strtolower( $v ), self::FLEX_BASIS_CUSTOM_KEYWORDS, true ) ) { | |
| 482 | + return Size_Prop_Type::generate( [ | |
| 483 | + 'size' => $v, | |
| 484 | + 'unit' => 'custom', | |
| 485 | + ] ); | |
| 486 | + } | |
| 487 | + $parsed = Size_Value_Parser::parse( $v ); | |
| 488 | + return null !== $parsed ? Size_Prop_Type::generate( $parsed ) : null; | |
| 489 | + } | |
| 490 | + ); | |
| 424 | 491 | $converters['transition'] = new Transition_Property_Converter(); |
| 425 | 492 | $converters['transform'] = new Transform_Property_Converter(); |
| 426 | 493 | $converters['transform-origin'] = new Transform_Origin_Property_Converter(); |
| 427 | 494 | $converters['box-shadow'] = new Box_Shadow_Property_Converter(); |