| 1 |
<?php |
| 2 |
/** |
| 3 |
* Render block CSS. |
| 4 |
* |
| 5 |
* @package ghostkit |
| 6 |
*/ |
| 7 |
|
| 8 |
if ( ! defined( 'ABSPATH' ) ) { |
| 9 |
exit; |
| 10 |
} |
| 11 |
|
| 12 |
/** |
| 13 |
* Class GhostKit_Extension_Styles |
| 14 |
*/ |
| 15 |
class GhostKit_Extension_Styles { |
| 16 |
/** |
| 17 |
* Array of CSS properties, that support pixels. |
| 18 |
* |
| 19 |
* @var array |
| 20 |
*/ |
| 21 |
private static $css_props_with_pixels = array( 'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width', 'border-width', 'border-bottom-left-radius', 'border-bottom-right-radius', 'border-top-left-radius', 'border-top-right-radius', 'border-radius', 'bottom', 'top', 'left', 'right', 'font-size', 'height', 'width', 'min-height', 'min-width', 'max-height', 'max-width', 'margin-left', 'margin-right', 'margin-top', 'margin-bottom', 'margin', 'padding-left', 'padding-right', 'padding-top', 'padding-bottom', 'padding', 'outline-width' ); |
| 22 |
|
| 23 |
/** |
| 24 |
* GhostKit_Extension_Styles constructor. |
| 25 |
*/ |
| 26 |
public static function init() { |
| 27 |
GhostKit_Extensions::register( |
| 28 |
'styles', |
| 29 |
array( |
| 30 |
'default_supports' => array( |
| 31 |
'styles' => array( |
| 32 |
'customSelector' => false, |
| 33 |
), |
| 34 |
), |
| 35 |
) |
| 36 |
); |
| 37 |
|
| 38 |
add_filter( 'gkt_block_custom_styles', 'GhostKit_Extension_Styles::block_custom_styles', 10, 2 ); |
| 39 |
} |
| 40 |
|
| 41 |
/** |
| 42 |
* Check if string end with. |
| 43 |
* |
| 44 |
* @param string $subject full string. |
| 45 |
* @param string $test test string. |
| 46 |
* |
| 47 |
* @return boolean |
| 48 |
*/ |
| 49 |
private static function endswith( $subject, $test ) { |
| 50 |
$strlen = strlen( $subject ); |
| 51 |
$testlen = strlen( $test ); |
| 52 |
|
| 53 |
if ( $testlen > $strlen ) { |
| 54 |
return false; |
| 55 |
} |
| 56 |
|
| 57 |
return substr_compare( $subject, $test, $strlen - $testlen, $testlen ) === 0; |
| 58 |
} |
| 59 |
|
| 60 |
/** |
| 61 |
* Convert camel case string to dash case. |
| 62 |
* |
| 63 |
* @param string $str string to convert. |
| 64 |
* @return string converted string. |
| 65 |
*/ |
| 66 |
private static function camel2dash( $str ) { |
| 67 |
return strtolower( preg_replace( '/([a-zA-Z])(?=[A-Z])/', '$1-', $str ) ); |
| 68 |
} |
| 69 |
|
| 70 |
/** |
| 71 |
* Get styles from block attribute. |
| 72 |
* |
| 73 |
* @param string $blocks_css - block css. |
| 74 |
* @param array $block - block data. |
| 75 |
* |
| 76 |
* @return string - ready to use styles string. |
| 77 |
*/ |
| 78 |
public static function block_custom_styles( $blocks_css, $block ) { |
| 79 |
$attributes = $block['attrs'] ?? array(); |
| 80 |
|
| 81 |
$id = $attributes['ghostkit']['id'] ?? ''; |
| 82 |
$styles = $attributes['ghostkit']['styles'] ?? ''; |
| 83 |
|
| 84 |
if ( $id && $styles ) { |
| 85 |
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] ); |
| 86 |
$custom_selector = isset( $block_type->supports['ghostkit']['styles']['customSelector'] ) |
| 87 |
? $block_type->supports['ghostkit']['styles']['customSelector'] |
| 88 |
: false; |
| 89 |
|
| 90 |
$selector = '.ghostkit-custom-' . $id; |
| 91 |
|
| 92 |
if ( $custom_selector ) { |
| 93 |
$selector = str_replace( '&', $selector, $custom_selector ); |
| 94 |
} |
| 95 |
|
| 96 |
if ( ! empty( $blocks_css ) ) { |
| 97 |
$blocks_css .= ' '; |
| 98 |
} |
| 99 |
|
| 100 |
$blocks_css .= self::parse( |
| 101 |
ghostkit_decode( |
| 102 |
array( |
| 103 |
$selector => $styles, |
| 104 |
) |
| 105 |
) |
| 106 |
); |
| 107 |
} |
| 108 |
|
| 109 |
return $blocks_css; |
| 110 |
} |
| 111 |
|
| 112 |
/** |
| 113 |
* Parse styles from block attribute. |
| 114 |
* |
| 115 |
* @param array $data - styles data. |
| 116 |
* @param string $selector - current styles selector (useful for nested styles). |
| 117 |
* @param boolean $escape - escape strings to save in database. |
| 118 |
* |
| 119 |
* @return string - ready to use styles string. |
| 120 |
*/ |
| 121 |
public static function parse( $data = array(), $selector = '', $escape = true ) { |
| 122 |
$result = array(); |
| 123 |
$result_css = ''; |
| 124 |
|
| 125 |
// add styles. |
| 126 |
foreach ( $data as $k => $val ) { |
| 127 |
// array values. |
| 128 |
if ( is_array( $val ) ) { |
| 129 |
// media for different screens. |
| 130 |
if ( strpos( $k, 'media_' ) === 0 ) { |
| 131 |
$result_css .= $result_css ? ' ' : ''; |
| 132 |
$result_css .= '@media #{ghostkitvar:' . $k . '} {'; |
| 133 |
$result_css .= ' ' . self::parse( $val, $selector, $escape ); |
| 134 |
$result_css .= ' }'; |
| 135 |
|
| 136 |
// @supports css. |
| 137 |
} elseif ( strpos( $k, '@supports' ) === 0 ) { |
| 138 |
$result_css .= $result_css ? ' ' : ''; |
| 139 |
$result_css .= $k . ' {'; |
| 140 |
$result_css .= ' ' . self::parse( $val, $selector, $escape ); |
| 141 |
$result_css .= ' }'; |
| 142 |
|
| 143 |
// nested selectors. |
| 144 |
} else { |
| 145 |
$nested_selector = $selector; |
| 146 |
|
| 147 |
if ( $nested_selector ) { |
| 148 |
if ( strpos( $k, '&' ) !== false ) { |
| 149 |
$nested_selector = str_replace( '&', $nested_selector, $k ); |
| 150 |
} else { |
| 151 |
$nested_selector = $nested_selector . ' ' . $k; |
| 152 |
} |
| 153 |
} else { |
| 154 |
$nested_selector = $k; |
| 155 |
} |
| 156 |
|
| 157 |
$result_css .= ( $result_css ? ' ' : '' ) . self::parse( $val, $nested_selector, $escape ); |
| 158 |
} |
| 159 |
|
| 160 |
// style properties and values. |
| 161 |
} elseif ( isset( $val ) && false !== $val ) { |
| 162 |
// fix selector > and < usage. |
| 163 |
if ( $escape ) { |
| 164 |
$selector = str_replace( '>', '>', $selector ); |
| 165 |
$selector = str_replace( '<', '<', $selector ); |
| 166 |
} |
| 167 |
|
| 168 |
if ( ! isset( $result[ $selector ] ) || ! $result[ $selector ] ) { |
| 169 |
$result[ $selector ] = ''; |
| 170 |
} |
| 171 |
|
| 172 |
$is_custom = 'custom' === $k; |
| 173 |
$prop_name = self::camel2dash( $k ); |
| 174 |
$prop_value = $val; |
| 175 |
|
| 176 |
// Prepare custom styles as text. |
| 177 |
if ( $is_custom ) { |
| 178 |
if ( ! empty( $prop_value ) && '' !== $prop_value && $selector ) { |
| 179 |
if ( ! isset( $result['custom'] ) ) { |
| 180 |
$result['custom'] = ''; |
| 181 |
} else { |
| 182 |
$result['custom'] .= ' '; |
| 183 |
} |
| 184 |
|
| 185 |
$result['custom'] .= str_replace( 'selector', $selector, ghostkit_decode( $prop_value ) ); |
| 186 |
} |
| 187 |
|
| 188 |
// Prepare styles from props. |
| 189 |
} else { |
| 190 |
$with_important = self::endswith( $prop_value, ' !important' ); |
| 191 |
|
| 192 |
if ( $with_important ) { |
| 193 |
$prop_value = str_replace( ' !important', '', $prop_value ); |
| 194 |
} |
| 195 |
|
| 196 |
// add pixels. |
| 197 |
if ( |
| 198 |
// Ensure that value is number, or string, which contains numbers. |
| 199 |
( |
| 200 |
( is_numeric( $prop_value ) && 0 !== $prop_value ) || |
| 201 |
( is_string( $prop_value ) && $prop_value && preg_match( '/^[0-9.\-]*$/', $prop_value ) ) |
| 202 |
) && |
| 203 |
// Ensure that property support units. |
| 204 |
// For example, we should not add pixes to z-index. |
| 205 |
in_array( $prop_name, self::$css_props_with_pixels, true ) |
| 206 |
) { |
| 207 |
$prop_value .= 'px'; |
| 208 |
} |
| 209 |
|
| 210 |
// add custom css. |
| 211 |
if ( ! empty( $prop_value ) && '' !== $prop_value ) { |
| 212 |
if ( $with_important ) { |
| 213 |
$prop_value .= ' !important'; |
| 214 |
} |
| 215 |
|
| 216 |
$result[ $selector ] .= ' ' . $prop_name . ': ' . $prop_value . ';'; |
| 217 |
} |
| 218 |
} |
| 219 |
} |
| 220 |
} |
| 221 |
|
| 222 |
// add styles to selectors. |
| 223 |
foreach ( $result as $k => $val ) { |
| 224 |
if ( 'custom' === $k ) { |
| 225 |
$result_css = $val . ( $result_css ? " $result_css" : '' ); |
| 226 |
} else { |
| 227 |
$result_css = $k . ' {' . $val . ' }' . ( $result_css ? " $result_css" : '' ); |
| 228 |
} |
| 229 |
} |
| 230 |
|
| 231 |
return $result_css; |
| 232 |
} |
| 233 |
} |
| 234 |
|
| 235 |
GhostKit_Extension_Styles::init(); |
| 236 |
|
