| 1 |
<?php |
| 2 |
/** |
| 3 |
* Handle custom styles for themes |
| 4 |
* |
| 5 |
* @package BoldBlocks |
| 6 |
* @author Phi Phan <mrphipv@gmail.com> |
| 7 |
* @copyright Copyright (c) 2022, Phi Phan |
| 8 |
*/ |
| 9 |
|
| 10 |
namespace BoldBlocks; |
| 11 |
|
| 12 |
// Exit if accessed directly. |
| 13 |
defined( 'ABSPATH' ) || exit; |
| 14 |
|
| 15 |
if ( ! class_exists( Theme::class ) ) : |
| 16 |
/** |
| 17 |
* The controller class for theme. |
| 18 |
*/ |
| 19 |
class Theme extends CoreComponent { |
| 20 |
/** |
| 21 |
* Supported themes. |
| 22 |
* |
| 23 |
* @var array |
| 24 |
*/ |
| 25 |
protected $themes = [ |
| 26 |
'blockbase' => [ |
| 27 |
'root_padding' => 'var(--wp--custom--gap--horizontal)', |
| 28 |
], |
| 29 |
'twentytwentytwo' => [ |
| 30 |
'root_padding' => 'var(--wp--custom--spacing--outer)', |
| 31 |
], |
| 32 |
'twentytwentythree' => [ |
| 33 |
'root_padding' => 'var(--wp--style--root--padding-left)', |
| 34 |
], |
| 35 |
'twentytwentyfour' => [ |
| 36 |
'root_padding' => 'var(--wp--style--root--padding-left)', |
| 37 |
], |
| 38 |
]; |
| 39 |
|
| 40 |
/** |
| 41 |
* Run main hooks |
| 42 |
* |
| 43 |
* @return void |
| 44 |
*/ |
| 45 |
public function run() { |
| 46 |
// Enqueue styles for frontend. |
| 47 |
add_action( 'wp_enqueue_scripts', [ $this, 'enqueue_scripts_for_theme' ], 99999 ); |
| 48 |
|
| 49 |
// Enqueue styles for the iframe editor. |
| 50 |
add_filter( 'block_editor_settings_all', [ $this, 'enqueue_style_for_the_editor' ] ); |
| 51 |
|
| 52 |
// Add transparency to color palette. |
| 53 |
add_filter( 'wp_theme_json_data_default', [ $this, 'add_transparency_to_color_palette_theme_json_data' ] ); |
| 54 |
|
| 55 |
// Bring back some default settings from theme json data deafault. |
| 56 |
add_filter( 'wp_theme_json_data_theme', [ $this, 'alter_the_theme_json_data_from_theme' ] ); |
| 57 |
} |
| 58 |
|
| 59 |
/** |
| 60 |
* Enqueue custom styles for popular themes. |
| 61 |
* |
| 62 |
* @return void |
| 63 |
*/ |
| 64 |
public function enqueue_scripts_for_theme() { |
| 65 |
$css_variables_stylesheet = ''; |
| 66 |
|
| 67 |
// Get current theme. |
| 68 |
$theme_slug = get_stylesheet(); |
| 69 |
|
| 70 |
$theme_style_handle = ''; |
| 71 |
if ( isset( wp_styles()->registered[ $theme_slug . '-style' ] ) ) { |
| 72 |
$theme_style_handle = $theme_slug . '-style'; |
| 73 |
} elseif ( isset( wp_styles()->registered['global-styles'] ) ) { |
| 74 |
$theme_style_handle = 'global-styles'; |
| 75 |
} elseif ( isset( wp_styles()->registered['global-styles-css-custom-properties'] ) ) { |
| 76 |
$theme_style_handle = 'global-styles-css-custom-properties'; |
| 77 |
} |
| 78 |
|
| 79 |
// Has the style handle. |
| 80 |
if ( $theme_style_handle ) { |
| 81 |
$css_variables_stylesheet = $this->get_custom_css_variables(); |
| 82 |
|
| 83 |
// Enqueue css variables. |
| 84 |
if ( $css_variables_stylesheet ) { |
| 85 |
wp_add_inline_style( $theme_style_handle, $css_variables_stylesheet ); |
| 86 |
} |
| 87 |
} |
| 88 |
} |
| 89 |
|
| 90 |
/** |
| 91 |
* Enqueue scripts/styles for the editor |
| 92 |
* |
| 93 |
* @param array $editor_settings |
| 94 |
* @return void |
| 95 |
*/ |
| 96 |
public function enqueue_style_for_the_editor( $editor_settings ) { |
| 97 |
// Get css variables. |
| 98 |
$css_variables_stylesheet = $this->get_custom_css_variables(); |
| 99 |
|
| 100 |
if ( $css_variables_stylesheet ) { |
| 101 |
$editor_settings['styles'][] = [ 'css' => $css_variables_stylesheet ]; |
| 102 |
} |
| 103 |
|
| 104 |
return $editor_settings; |
| 105 |
} |
| 106 |
|
| 107 |
/** |
| 108 |
* Enqueue custom css variables. |
| 109 |
* |
| 110 |
* @return void |
| 111 |
*/ |
| 112 |
public function get_custom_css_variables() { |
| 113 |
$stylesheet = ''; |
| 114 |
|
| 115 |
// Get theme settings. |
| 116 |
$theme_settings = \WP_Theme_JSON_Resolver::get_merged_data()->get_settings(); |
| 117 |
$use_root_padding = _wp_array_get( $theme_settings, [ 'useRootPaddingAwareAlignments' ], false ); |
| 118 |
|
| 119 |
// Get layout style. |
| 120 |
$stylesheet .= $this->get_layout_style( $use_root_padding, $theme_settings ); |
| 121 |
|
| 122 |
// Get background style. |
| 123 |
$stylesheet .= $this->get_background_style( $use_root_padding ); |
| 124 |
|
| 125 |
// Get transparent color style. |
| 126 |
$theme_colors = _wp_array_get( $theme_settings, [ 'color', 'palette' ] ); |
| 127 |
if ( ! array_search( 'transparent', array_column( $theme_colors, 'color' ), true ) ) { |
| 128 |
$stylesheet .= '.has-transparent-color { color: transparent !important; } .has-transparent-background-color { background-color: transparent !important; } .has-transparent-border-color { border-color: transparent !important; }'; |
| 129 |
} |
| 130 |
|
| 131 |
return $stylesheet; |
| 132 |
} |
| 133 |
|
| 134 |
/** |
| 135 |
* Get layout style for custom blocks |
| 136 |
* |
| 137 |
* @param boolean $use_root_padding |
| 138 |
* @param array $theme_settings |
| 139 |
* @return string |
| 140 |
*/ |
| 141 |
private function get_layout_style( $use_root_padding, $theme_settings ) { |
| 142 |
$css = ''; |
| 143 |
|
| 144 |
// Get current theme. |
| 145 |
$theme_slug = get_stylesheet(); |
| 146 |
|
| 147 |
$spacing_baseline = _wp_array_get( $theme_settings, [ 'custom', 'boldblocks', 'spacing', 'baseline' ], '' ); |
| 148 |
if ( empty( $spacing_baseline ) ) { |
| 149 |
if ( \in_array( $theme_slug, array_keys( $this->themes ), true ) ) { |
| 150 |
$spacing_baseline = _wp_array_get( $this->themes, [ $theme_slug, 'root_padding' ], '' ); |
| 151 |
} else { |
| 152 |
// Get theme json. |
| 153 |
$theme_json_raw = \WP_Theme_JSON_Resolver::get_merged_data()->get_raw_data(); |
| 154 |
|
| 155 |
// Get root horizonal padding. |
| 156 |
$root_padding = _wp_array_get( $theme_json_raw, [ 'styles', 'spacing', 'padding', 'left' ] ); |
| 157 |
|
| 158 |
// Use new root horizonal padding. |
| 159 |
if ( $root_padding ) { |
| 160 |
$spacing_baseline = $root_padding; |
| 161 |
} else { |
| 162 |
// Most of old block based themes using spacing->outer or gap->horizontal for the main horizontal padding. |
| 163 |
$theme_spacing_baseline = _wp_array_get( $theme_settings, [ 'custom', 'spacing', 'outer' ] ); |
| 164 |
if ( $theme_spacing_baseline ) { |
| 165 |
$spacing_baseline = 'var(--wp--custom--spacing--outer)'; |
| 166 |
} else { |
| 167 |
$theme_spacing_baseline = _wp_array_get( $theme_settings, [ 'custom', 'gap', 'horizontal' ] ); |
| 168 |
if ( $theme_spacing_baseline ) { |
| 169 |
$spacing_baseline = 'var(--wp--custom--gap--horizontal)'; |
| 170 |
} |
| 171 |
} |
| 172 |
} |
| 173 |
} |
| 174 |
} |
| 175 |
|
| 176 |
if ( $spacing_baseline ) { |
| 177 |
$css .= 'body{--wp--custom--cbb--spacing--baseline:' . $spacing_baseline . ';}'; |
| 178 |
} else { |
| 179 |
$css .= 'body{--wp--custom--cbb--spacing--baseline: clamp(1.5rem, 5vw, 2.5rem);}'; |
| 180 |
} |
| 181 |
|
| 182 |
if ( ! $use_root_padding ) { |
| 183 |
// Right and left padding are applied to the the block with alignfull class. |
| 184 |
$css .= '.cbb-block.alignfull { padding-right: var(--wp--custom--cbb--spacing--baseline); padding-left: var(--wp--custom--cbb--spacing--baseline); }'; |
| 185 |
|
| 186 |
// Alignfull descestors of the container with left and right padding have negative margins so they can still be full width. |
| 187 |
$css .= '.wp-site-blocks .cbb-block.alignfull .alignfull, .cbb-block.alignfull .alignfull { width: unset; margin-right: calc(var(--wp--custom--cbb--spacing--baseline) * -1) !important; margin-left: calc(var(--wp--custom--cbb--spacing--baseline) * -1) !important; }'; |
| 188 |
} else { |
| 189 |
// Force horizontal paddings to alignfull,has-global-padding blocks. |
| 190 |
$css .= '.cbb-block.alignfull.has-global-padding { padding-right: var(--wp--custom--cbb--spacing--baseline); padding-left: var(--wp--custom--cbb--spacing--baseline); }'; |
| 191 |
|
| 192 |
// Make the nested alignfull blocks fullwidth. |
| 193 |
$css .= '.cbb-block.alignfull.has-global-padding > .alignfull { margin-right: calc(var(--wp--custom--cbb--spacing--baseline) * -1) !important; margin-left: calc(var(--wp--custom--cbb--spacing--baseline) * -1) !important; }'; |
| 194 |
} |
| 195 |
|
| 196 |
return $css; |
| 197 |
} |
| 198 |
|
| 199 |
/** |
| 200 |
* Get spacing style for has-background custom blocks |
| 201 |
* |
| 202 |
* @param boolean $use_root_padding |
| 203 |
* @return string |
| 204 |
*/ |
| 205 |
private function get_background_style( $use_root_padding ) { |
| 206 |
$css = ''; |
| 207 |
|
| 208 |
$background_padding = 'var(--wp--custom--cbb--spacing--background, clamp(1.25rem, 2.5vw, 2rem))'; |
| 209 |
|
| 210 |
if ( ! $use_root_padding ) { |
| 211 |
// Apply spacing for child blocks that have background. |
| 212 |
$css .= '.cbb-block:not(.alignfull).has-parent.has-background,.cbb-block:not(.alignfull).has-parent.bb\:has-background {padding: ' . $background_padding . ';}'; |
| 213 |
|
| 214 |
// Apply spacing for standalone blocks that have background. |
| 215 |
$css .= '.cbb-block:not(.alignfull):not(.has-parent).has-background,.cbb-block:not(.alignfull):not(.has-parent).bb\:has-background {padding-left: ' . $background_padding . ';padding-right: ' . $background_padding . ';}'; |
| 216 |
} else { |
| 217 |
// Apply horizontal spacing for cbb blocks that have background. |
| 218 |
$css .= '.cbb-block:not(.alignfull).has-background,.cbb-block:not(.alignfull).bb\:has-background {padding-left: ' . $background_padding . ';padding-right: ' . $background_padding . ';}'; |
| 219 |
|
| 220 |
// Apply vertical spacing for cbb child blocks that have background. |
| 221 |
$css .= '.cbb-block:not(.alignfull).has-parent.has-background,.cbb-block:not(.alignfull).has-parent.bb\:has-background {padding-top: ' . $background_padding . ';padding-bottom: ' . $background_padding . ';}'; |
| 222 |
|
| 223 |
} |
| 224 |
|
| 225 |
return $css; |
| 226 |
} |
| 227 |
|
| 228 |
/** |
| 229 |
* Add transparency to the default color palette |
| 230 |
* |
| 231 |
* @param array $theme_json |
| 232 |
* @return array |
| 233 |
*/ |
| 234 |
public function add_transparency_to_color_palette_theme_json_data( $theme_json ) { |
| 235 |
$theme_json_data = $theme_json->get_data(); |
| 236 |
$theme_version = $theme_json_data['version'] ?? 2; |
| 237 |
$theme_version = max( $theme_version, 2 ); |
| 238 |
$color_palette = $theme_json_data['settings']['color']['palette']['default'] ?? []; |
| 239 |
if ( ! array_search( 'transparent', array_column( $color_palette, 'color' ), true ) ) { |
| 240 |
$color_palette[] = [ |
| 241 |
'slug' => 'transparent', |
| 242 |
'color' => 'transparent', |
| 243 |
'name' => __( 'Transparent', 'content-blocks-builder' ), |
| 244 |
]; |
| 245 |
|
| 246 |
$updating_data = array( |
| 247 |
'version' => $theme_version, |
| 248 |
'settings' => array( |
| 249 |
'color' => array( |
| 250 |
'palette' => $color_palette, |
| 251 |
), |
| 252 |
), |
| 253 |
); |
| 254 |
|
| 255 |
return $theme_json->update_with( $updating_data ); |
| 256 |
} |
| 257 |
|
| 258 |
return $theme_json; |
| 259 |
} |
| 260 |
|
| 261 |
/** |
| 262 |
* Bring back some default settings from theme json data deafault. |
| 263 |
* |
| 264 |
* @param array $theme_json |
| 265 |
* @return array |
| 266 |
*/ |
| 267 |
public function alter_the_theme_json_data_from_theme( $theme_json ) { |
| 268 |
$theme_json_data = $theme_json->get_data(); |
| 269 |
$theme_version = $theme_json_data['version'] ?? 2; |
| 270 |
$theme_version = max( $theme_version, 2 ); |
| 271 |
// Load default settings. |
| 272 |
$default_settings = [ |
| 273 |
'color' => [ |
| 274 |
'background' => true, |
| 275 |
'text' => true, |
| 276 |
'link' => true, |
| 277 |
'button' => true, |
| 278 |
'caption' => true, |
| 279 |
'custom' => true, |
| 280 |
'customDuotone' => true, |
| 281 |
'customGradient' => true, |
| 282 |
'defaultDuotone' => true, |
| 283 |
'defaultPalette' => true, |
| 284 |
'defaultGradients' => true, |
| 285 |
], |
| 286 |
]; |
| 287 |
|
| 288 |
$updating_settings = apply_filters( 'cbb_theme_json_data_default_settings', $default_settings ); |
| 289 |
|
| 290 |
if ( $updating_settings ) { |
| 291 |
return $theme_json->update_with( |
| 292 |
[ |
| 293 |
'version' => $theme_version, |
| 294 |
'settings' => $updating_settings, |
| 295 |
] |
| 296 |
); |
| 297 |
} |
| 298 |
|
| 299 |
return $theme_json; |
| 300 |
} |
| 301 |
} |
| 302 |
endif; |
| 303 |
|
