StyleEngine final class
Minn\Blocks\StyleEngine · public/minn/src/Minn/Blocks/StyleEngine.php · 195 lines
What a block's style object comes to, as the reference's style engine reads it (probe style-engine): the declarations each style property makes and the class names a preset or a set colour earns.
- Groups in the order background, colour, border, shadow, dimensions, spacing, typography, and properties in their order within a group. - A value goes into the declarations as given. Whether it makes CSS is for the declarations holder to judge. - A preset ("var:preset|color|base") becomes a custom property only where the definition names one for its kind (a colour, a gradient, spacing, a font size or family, a shadow, a dimension, a border radius, a border side's colour). Elsewhere it makes nothing, and with presets turned into class names it makes none anywhere. - Sides and corners ("padding" => ["top" => ...]) name their own properties in the order given. Border sides come after the whole border.
Constants and properties
| const | DEFINITIONS = array ( 'background' => array ( 'backgroundImage' => array ( 'property_keys' => array ( 'default' => 'background-image', ), 'value_func' => array ( 0 => 'WP_Style_Engine', 1 => 'get_url_or_value_css_declaration', ), 'path' => array ( 0 => 'background', 1 => 'backgroundImage', ), ), 'backgroundPosition' => array ( 'property_keys' => array ( 'default' => 'background-position', ), 'path' => array ( 0 => 'background', 1 => 'backgroundPosition', ), ), 'backgroundRepeat' => array ( 'property_keys' => array ( 'default' => 'background-repeat', ), 'path' => array ( 0 => 'background', 1 => 'backgroundRepeat', ), ), 'backgroundSize' => array ( 'property_keys' => array ( 'default' => 'background-size', ), 'path' => array ( 0 => 'background', 1 => 'backgroundSize', ), ), 'backgroundAttachment' => array ( 'property_keys' => array ( 'default' => 'background-attachment', ), 'path' => array ( 0 => 'background', 1 => 'backgroundAttachment', ), ), 'gradient' => array ( 'property_keys' => array ( 'default' => 'background-image', ), 'css_vars' => array ( 'gradient' => '--wp--preset--gradient--$slug', ), 'path' => array ( 0 => 'background', 1 => 'gradient', ), 'classnames' => array ( 'has-background' => true, ), ), ), 'color' => array ( 'text' => array ( 'property_keys' => array ( 'default' => 'color', ), 'path' => array ( 0 => 'color', 1 => 'text', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), 'classnames' => array ( 'has-text-color' => true, 'has-$slug-color' => 'color', ), ), 'background' => array ( 'property_keys' => array ( 'default' => 'background-color', ), 'path' => array ( 0 => 'color', 1 => 'background', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), 'classnames' => array ( 'has-background' => true, 'has-$slug-background-color' => 'color', ), ), 'gradient' => array ( 'property_keys' => array ( 'default' => 'background', ), 'path' => array ( 0 => 'color', 1 => 'gradient', ), 'css_vars' => array ( 'gradient' => '--wp--preset--gradient--$slug', ), 'classnames' => array ( 'has-background' => true, 'has-$slug-gradient-background' => 'gradient', ), ), ), 'border' => array ( 'color' => array ( 'property_keys' => array ( 'default' => 'border-color', 'individual' => 'border-%s-color', ), 'path' => array ( 0 => 'border', 1 => 'color', ), 'classnames' => array ( 'has-border-color' => true, 'has-$slug-border-color' => 'color', ), ), 'radius' => array ( 'property_keys' => array ( 'default' => 'border-radius', 'individual' => 'border-%s-radius', ), 'path' => array ( 0 => 'border', 1 => 'radius', ), 'css_vars' => array ( 'border-radius' => '--wp--preset--border-radius--$slug', ), ), 'style' => array ( 'property_keys' => array ( 'default' => 'border-style', 'individual' => 'border-%s-style', ), 'path' => array ( 0 => 'border', 1 => 'style', ), ), 'width' => array ( 'property_keys' => array ( 'default' => 'border-width', 'individual' => 'border-%s-width', ), 'path' => array ( 0 => 'border', 1 => 'width', ), ), 'top' => array ( 'value_func' => array ( 0 => 'WP_Style_Engine', 1 => 'get_individual_property_css_declarations', ), 'path' => array ( 0 => 'border', 1 => 'top', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), ), 'right' => array ( 'value_func' => array ( 0 => 'WP_Style_Engine', 1 => 'get_individual_property_css_declarations', ), 'path' => array ( 0 => 'border', 1 => 'right', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), ), 'bottom' => array ( 'value_func' => array ( 0 => 'WP_Style_Engine', 1 => 'get_individual_property_css_declarations', ), 'path' => array ( 0 => 'border', 1 => 'bottom', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), ), 'left' => array ( 'value_func' => array ( 0 => 'WP_Style_Engine', 1 => 'get_individual_property_css_declarations', ), 'path' => array ( 0 => 'border', 1 => 'left', ), 'css_vars' => array ( 'color' => '--wp--preset--color--$slug', ), ), ), 'shadow' => array ( 'shadow' => array ( 'property_keys' => array ( 'default' => 'box-shadow', ), 'path' => array ( 0 => 'shadow', ), 'css_vars' => array ( 'shadow' => '--wp--preset--shadow--$slug', ), ), ), 'dimensions' => array ( 'aspectRatio' => array ( 'property_keys' => array ( 'default' => 'aspect-ratio', ), 'path' => array ( 0 => 'dimensions', 1 => 'aspectRatio', ), 'classnames' => array ( 'has-aspect-ratio' => true, ), ), 'height' => array ( 'property_keys' => array ( 'default' => 'height', ), 'path' => array ( 0 => 'dimensions', 1 => 'height', ), 'css_vars' => array ( 'dimension' => '--wp--preset--dimension--$slug', ), ), 'minHeight' => array ( 'property_keys' => array ( 'default' => 'min-height', ), 'path' => array ( 0 => 'dimensions', 1 => 'minHeight', ), 'css_vars' => array ( 'dimension' => '--wp--preset--dimension--$slug', ), ), 'minWidth' => array ( 'property_keys' => array ( 'default' => 'min-width', ), 'path' => array ( 0 => 'dimensions', 1 => 'minWidth', ), 'css_vars' => array ( 'dimension' => '--wp--preset--dimension--$slug', ), ), 'objectFit' => array ( 'property_keys' => array ( 'default' => 'object-fit', ), 'path' => array ( 0 => 'dimensions', 1 => 'objectFit', ), ), 'width' => array ( 'property_keys' => array ( 'default' => 'width', ), 'path' => array ( 0 => 'dimensions', 1 => 'width', ), 'css_vars' => array ( 'dimension' => '--wp--preset--dimension--$slug', ), ), ), 'spacing' => array ( 'padding' => array ( 'property_keys' => array ( 'default' => 'padding', 'individual' => 'padding-%s', ), 'path' => array ( 0 => 'spacing', 1 => 'padding', ), 'css_vars' => array ( 'spacing' => '--wp--preset--spacing--$slug', ), ), 'margin' => array ( 'property_keys' => array ( 'default' => 'margin', 'individual' => 'margin-%s', ), 'path' => array ( 0 => 'spacing', 1 => 'margin', ), 'css_vars' => array ( 'spacing' => '--wp--preset--spacing--$slug', ), ), ), 'typography' => array ( 'fontSize' => array ( 'property_keys' => array ( 'default' => 'font-size', ), 'path' => array ( 0 => 'typography', 1 => 'fontSize', ), 'css_vars' => array ( 'font-size' => '--wp--preset--font-size--$slug', ), 'classnames' => array ( 'has-$slug-font-size' => 'font-size', ), ), 'fontFamily' => array ( 'property_keys' => array ( 'default' => 'font-family', ), 'css_vars' => array ( 'font-family' => '--wp--preset--font-family--$slug', ), 'path' => array ( 0 => 'typography', 1 => 'fontFamily', ), 'classnames' => array ( 'has-$slug-font-family' => 'font-family', ), ), 'fontStyle' => array ( 'property_keys' => array ( 'default' => 'font-style', ), 'path' => array ( 0 => 'typography', 1 => 'fontStyle', ), ), 'fontWeight' => array ( 'property_keys' => array ( 'default' => 'font-weight', ), 'path' => array ( 0 => 'typography', 1 => 'fontWeight', ), ), 'lineHeight' => array ( 'property_keys' => array ( 'default' => 'line-height', ), 'path' => array ( 0 => 'typography', 1 => 'lineHeight', ), ), 'textColumns' => array ( 'property_keys' => array ( 'default' => 'column-count', ), 'path' => array ( 0 => 'typography', 1 => 'textColumns', ), ), 'textDecoration' => array ( 'property_keys' => array ( 'default' => 'text-decoration', ), 'path' => array ( 0 => 'typography', 1 => 'textDecoration', ), ), 'textIndent' => array ( 'property_keys' => array ( 'default' => 'text-indent', ), 'path' => array ( 0 => 'typography', 1 => 'textIndent', ), ), 'textTransform' => array ( 'property_keys' => array ( 'default' => 'text-transform', ), 'path' => array ( 0 => 'typography', 1 => 'textTransform', ), ), 'letterSpacing' => array ( 'property_keys' => array ( 'default' => 'letter-spacing', ), 'path' => array ( 0 => 'typography', 1 => 'letterSpacing', ), ), 'writingMode' => array ( 'property_keys' => array ( 'default' => 'writing-mode', ), 'path' => array ( 0 => 'typography', 1 => 'writingMode', ), ), ), ) | The reference's style definitions, by group and property (WP_Style_Engine::BLOCK_STYLE_DEFINITIONS_METADATA). |
Public
| static | parse(array $styles, array $options = array ( )): array# | A style object's declarations and class names.
@return array{classnames: list<string>, declarations: array<string, mixed>} | ||||||
| static | slug(mixed $value, string $kind): ?string# | A preset's slug for a kind ("var:preset|color|base" for color is "base"), or null. | ||||||
| static | var(mixed $value, array $vars): ?string# | A preset as the custom property the definition names for its kind, or null. @param array<string, string> $vars
| ||||||
| static | classNames(mixed $value, array $definition): array# | A preset's class names for a definition. @param array<string, mixed> $definition @return list<string>
| ||||||
| static | declarationsFor(mixed $value, array $definition, array $options = array ( )): array# | The declarations one definition makes of a value; presets as class names make none. @param array<string, mixed> $definition @param array<string, mixed> $options @return array<string, mixed>
| ||||||
| static | individual(mixed $value, array $definition, array $options = array ( )): array# | A border side's declarations. @param array<string, mixed> $definition @param array<string, mixed> $options @return array<string, mixed>
| ||||||
| static | urlOrValue(mixed $value, array $definition): array# | A url or a plain value. @param array<string, mixed> $definition @return array<string, mixed>
| ||||||
| static | kebab(string $text): string# | A name in kebab case, as the reference's _wp_to_kebab_case cuts it ("lineHeight", "Zz Space" become "line-height", "zz-space"). |
Internals 8
Private and protected methods: how the class does its work. Not a contract; they change whenever the code is tidied.
| private | at(array $styles, array $path): mixed# |
| |||
| private | present(mixed $value): bool# | ||||
| private | classes(mixed $value, array $names): array# |
| |||
| private | declarations(mixed $value, array $definition, array $vars): array# |
| |||
| private | one(mixed $value, string $property, array $vars): array# |
| |||
| private | sides(array $value, string $pattern, array $vars): array# | Sides or corners in the order given. A preset becomes the custom property the definition names for its kind, and is dropped when there is none; with no custom properties to use (presets as class names, or none defined) it stays as written.
| |||
| private | side(array $value, array $definition, array $vars): array# | A border side's parts in the order given, each one its group defines (named by that definition's pattern): a preset through the side's own custom properties, an unmatched one left empty.
| |||
| private | url(mixed $value, string $property): array# | @return array<string, mixed> |
Nothing matches.