Skip to content

Commit

Permalink
Toying around with a style engine store mainly.
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramonjd
ramonjd committed May 31, 2022
1 parent e70bb79 commit a6b7318
Show file tree
Hide file tree
Showing 3 changed files with 173 additions and 93 deletions.
78 changes: 78 additions & 0 deletions packages/style-engine/class-wp-style-engine-renderer.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<?php
// @TODO we probably don't need this right now.
// Just toying around.
/**
* WP_Style_Engine_Renderer
*
* Renders CSS on the frontend.
*
* @package Gutenberg
*/

if ( class_exists( 'WP_Style_Engine_Renderer' ) ) {
return;
}

/**
* Renders CSS on the frontend..
*
* @access private
*/
class WP_Style_Engine_Renderer {
/**
* Constructor.
*
* @return void
*/
public function __construct() {
// @TODO some argument to determine how/where the styles are rendered.
// For example, we could enqueue specific inline styles like global styles, see: gutenberg_enqueue_global_styles().
//
}

/**
* Prints registered styles in the page head or footer.
*
* @see $this->enqueue_block_support_styles
*/
public function render_registered_styles( $styles ) {
if ( empty( $styles ) ) {
return;
}

$output = '';

foreach ( $styles as $selector => $rules ) {
$output .= "\t$selector { ";
$output .= implode( ' ', $rules );
$output .= " }\n";
}

echo "<style>\n$output</style>\n";
}

/**
* Taken from gutenberg_enqueue_block_support_styles()
*
* This function takes care of adding inline styles
* in the proper place, depending on the theme in use.
*
* For block themes, it's loaded in the head.
* For classic ones, it's loaded in the body
* because the wp_head action happens before
* the render_block.
*
* @see gutenberg_enqueue_block_support_styles()
*/
private function enqueue_block_support_styles() {
$action_hook_name = 'wp_footer';
if ( wp_is_block_theme() ) {
$action_hook_name = 'wp_head';
}
add_action(
$action_hook_name,
array( $this, 'render_registered_styles' )
);
}
}

114 changes: 28 additions & 86 deletions packages/style-engine/class-wp-style-engine-store.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,46 @@
* @package Gutenberg
*/

// Probably don't need this, but it was just helped to design things.
if ( ! interface_exists( 'WP_Style_Engine_Store_Interface' ) ) {
/**
* Registers and retrieves stored styles.
*
* @access private
*/
interface WP_Style_Engine_Store_Interface {
/**
* Register a style
*
* @param string $key Unique key for a $style_data object.
* @param array $style_data Associative array of style information.
* @return void
*/
public function register( $key, $style_data );

/**
* Retrieves style data from the store.
*
* @param string $key Unique key for a $style_data object.
* @return void
*/
public function get( $key );
}
if ( class_exists( 'WP_Style_Engine_Store' ) ) {
return;
}

/**
* Registers and stores styles to be processed or rendered on the frontend.
*
* For each style category we could have a separate object, e.g.,
* $global_style_store = new WP_Style_Engine_Store();
* $block_supports_style_store = new WP_Style_Engine_Store();
*
* @access private
*/
class WP_Style_Engine_Store implements WP_Style_Engine_Store_Interface {
class WP_Style_Engine_Store {
/**
* Registered styles.
*
* @var WP_Style_Engine_Store|null
*/
private $registered_styles = array();

/**
* A key to identify the store. Default value is 'global'.
*
* @var WP_Style_Engine_Store|null
*/
private $store_key = 'global-styles';

/**
* Constructor.
*
* @param string $store_key A key/name/id to identify the store.
* @return void
*/
public function __construct( $store_key = null ) {
if ( ! empty( $store_key ) ) {
$this->store_key = $store_key;
}
}

/**
* Register a style
*
Expand All @@ -70,6 +70,8 @@ public function register( $key, $style_data ) {
*
* @param string $key Optional unique key for a $style_data object to return a single style object.
* @param array? $style_data Associative array of style information.
*
* @return array Registered styles
*/
public function get( $key = null ) {
if ( isset( $this->registered_styles[ $key ] ) ) {
Expand All @@ -78,63 +80,3 @@ public function get( $key = null ) {
return $this->registered_styles;
}
}

/*
For each style category we could have a separate object:
e.g.,
$global_style_store = new WP_Style_Engine_Store();
$block_supports_style_store = new WP_Style_Engine_Store();
@TODO
Work out enqueuing and rendering
*/
/**
* Prints registered styles in the page head or footer.
*
* @see $this->enqueue_block_support_styles
public function output_registered_block_support_styles() {
if ( empty( $this->registered_block_support_styles ) ) {
return;
}
$output = '';
foreach ( $this->registered_block_support_styles as $selector => $rules ) {
$output .= "\t$selector { ";
$output .= implode( ' ', $rules );
$output .= " }\n";
}
echo "<style>\n$output</style>\n";
} */

/**
* Taken from gutenberg_enqueue_block_support_styles()
*
* This function takes care of adding inline styles
* in the proper place, depending on the theme in use.
*
* For block themes, it's loaded in the head.
* For classic ones, it's loaded in the body
* because the wp_head action happens before
* the render_block.
*
* @see gutenberg_enqueue_block_support_styles()
private function enqueue_block_support_styles() {
$action_hook_name = 'wp_footer';
if ( wp_is_block_theme() ) {
$action_hook_name = 'wp_head';
}
add_action(
$action_hook_name,
array( $this, 'output_registered_block_support_styles' )
);
} */


74 changes: 67 additions & 7 deletions packages/style-engine/class-wp-style-engine.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ class WP_Style_Engine {
*/
private static $instance = null;

/**
* Registered styles.
*
* @var WP_Style_Engine_Store|null
*/
private $block_supports_store = null;

/**
* Style definitions that contain the instructions to
* parse/output valid Gutenberg styles from a block's attributes.
Expand Down Expand Up @@ -119,6 +126,13 @@ class WP_Style_Engine {
),
);

/**
* Gather internals.
*/
public function __construct() {
$this->block_supports_store = new WP_Style_Engine_Store( 'block_supports' );
}

/**
* Utility method to retrieve the main instance of the class.
*
Expand All @@ -134,6 +148,19 @@ public static function get_instance() {
return self::$instance;
}

/**
* Global public interface to register block support styles support.
*
* @access private
*
* @param string $key Unique key for a $style_data object.
* @param array $style_data Associative array of style information.
* @return void
*/
public function register_block_support_styles( $key, $style_data ) {
$this->block_supports_store->register( $key, $style_data );
}

/**
* Extracts the slug in kebab case from a preset string, e.g., "heavenly-blue" from 'var:preset|color|heavenlyBlue'.
*
Expand Down Expand Up @@ -204,20 +231,21 @@ protected static function get_css( $style_value, $style_definition ) {
* Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
*
* @param array $block_styles An array of styles from a block's attributes.
*
* @param array $options array(
* 'selector' => (string) When a selector is passed, `generate()` will return a full CSS rule `$selector { ...rules }`, otherwise a concatenated string of properties and values.
* );.
* @return array|null array(
* 'styles' => (string) A CSS ruleset formatted to be placed in an HTML `style` attribute or tag.
* 'classnames' => (string) Classnames separated by a space.
* );
*/
public function generate( $block_styles ) {
public function generate( $block_styles, $options ) {
if ( empty( $block_styles ) || ! is_array( $block_styles ) ) {
return null;
}

$css_rules = array();
$classnames = array();
$styles_output = array();

// Collect CSS and classnames.
foreach ( self::BLOCK_STYLE_DEFINITIONS_METADATA as $definition_group ) {
Expand All @@ -234,21 +262,33 @@ public function generate( $block_styles ) {
}

// Build CSS rules output.
$css_output = '';
$selector = isset( $options['selector'] ) ? $options['selector'] : null;
$css = array();
$styles_output = array();

if ( ! empty( $css_rules ) ) {
// Generate inline style rules.
// In the future there might be a flag in the option to output
// inline CSS rules (for HTML style attributes) vs selectors + rules for style tags.
foreach ( $css_rules as $rule => $value ) {
$filtered_css = esc_html( safecss_filter_attr( "{$rule}: {$value}" ) );
if ( ! empty( $filtered_css ) ) {
$css_output .= $filtered_css . '; ';
$css[] = $filtered_css . ';';
}
}
}

if ( ! empty( $css_output ) ) {
$styles_output['css'] = trim( $css_output );
// Return css, if any.
if ( ! empty( $css ) ) {
// Return an entire rule if there is a selector.
if ( $selector ) {
$style_block = "$selector { ";
$style_block .= implode( ' ', $css );
$style_block .= ' }';
$styles_output['css'] = $style_block;
} else {
$styles_output['css'] = implode( ' ', $css );
}
}

if ( ! empty( $classnames ) ) {
Expand Down Expand Up @@ -294,6 +334,8 @@ protected static function get_css_rules( $style_value, $style_property ) {
* Returns an CSS ruleset.
* Styles are bundled based on the instructions in BLOCK_STYLE_DEFINITIONS_METADATA.
*
* @access public
*
* @param array $block_styles An array of styles from a block's attributes.
*
* @return array|null array(
Expand All @@ -308,3 +350,21 @@ function wp_style_engine_generate( $block_styles ) {
}
return null;
}

// @TODO Just testing!
/**
* Global public interface to register block support styles support.
*
* @access public
*
* @param string $key Unique key for a $style_data object.
* @param array $style_data Associative array of style information.
* @return void
*/
function wp_style_engine_register_block_support_styles( $key, $style_data ) {
if ( class_exists( 'WP_Style_Engine' ) ) {
$style_engine = WP_Style_Engine::get_instance();
$style_engine->register_block_support_styles( $key, $style_data );
}
}

0 comments on commit a6b7318

Please sign in to comment.