| @@ -24,9 +24,12 @@ | ||
| 24 | 24 | $this->add_class_styles( |
| 25 | 25 | '{{WRAPPER}}', |
| 26 | 26 | BlockGlobal::get_wrapper_css( $attributes ), |
| 27 | 27 | BlockGlobal::get_wrapper_css( $attributes, 'Tablet' ), |
| 28 | - BlockGlobal::get_wrapper_css( $attributes, 'Mobile' ) | |
| 28 | + BlockGlobal::get_wrapper_css( $attributes, 'Mobile' ), | |
| 29 | + $this->custom_device_map( function ( $device ) use ( $attributes ) { | |
| 30 | + return BlockGlobal::get_wrapper_css( $attributes, $device ); | |
| 31 | + } ) | |
| 29 | 32 | ); |
| 30 | 33 | $this->add_class_styles( |
| 31 | 34 | '{{WRAPPER}}:hover', |
| 32 | 35 | BlockGlobal::get_wrapper_hover_css( $attributes ), |
| @@ -48,22 +51,80 @@ | ||
| 48 | 51 | $this->add_class_styles( |
| 49 | 52 | '{{WRAPPER}} > .ablocks-block-container', |
| 50 | 53 | BlockGlobal::get_container_css( $attributes ), |
| 51 | 54 | BlockGlobal::get_container_css( $attributes, 'Tablet' ), |
| 52 | - BlockGlobal::get_container_css( $attributes, 'Mobile' ) | |
| 55 | + BlockGlobal::get_container_css( $attributes, 'Mobile' ), | |
| 56 | + $this->custom_device_map( function ( $device ) use ( $attributes ) { | |
| 57 | + return BlockGlobal::get_container_css( $attributes, $device ); | |
| 58 | + } ) | |
| 53 | 59 | ); |
| 54 | 60 | }//end if |
| 55 | 61 | } |
| 56 | 62 | |
| 57 | - public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [] ) { | |
| 63 | + public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [], $responsive_styles = [] ) { | |
| 58 | 64 | $this->class_styles[] = [ |
| 59 | 65 | 'class_name' => $class_name, |
| 60 | 66 | 'desktop_styles' => $desktop_styles, |
| 61 | 67 | 'tablet_styles' => $tablet_styles, |
| 62 | - 'mobile_styles' => $mobile_styles | |
| 68 | + 'mobile_styles' => $mobile_styles, | |
| 69 | + // Optional map of custom breakpoints: [ suffix => [ width, styles ] ]. | |
| 70 | + 'responsive_styles' => $responsive_styles, | |
| 63 | 71 | ]; |
| 64 | 72 | } |
| 65 | 73 | |
| 74 | + /** | |
| 75 | + * Build the custom-breakpoint style map for a selector from a per-device | |
| 76 | + * builder closure. Only user-registered custom breakpoints (not the built-in | |
| 77 | + * Tablet/Mobile) are included, so the standard path is untouched. | |
| 78 | + */ | |
| 79 | + public function custom_device_map( $builder ) { | |
| 80 | + $map = []; | |
| 81 | + | |
| 82 | + // Nothing to build when the site registers no custom breakpoints — and | |
| 83 | + // running the phantom probe anyway is not free: it hands every control a | |
| 84 | + // device suffix that has no stored keys, which is what made controls that | |
| 85 | + // read `$value[ 'x' . $device ]` unguarded spray "Undefined array key | |
| 86 | + // …___ablocksphantom___" notices on every page under WP_DEBUG. | |
| 87 | + $custom_devices = []; | |
| 88 | + foreach ( \ABlocks\Helper::get_responsive_devices() as $d ) { | |
| 89 | + if ( $d['width'] <= 0 || 'Tablet' === $d['id'] || 'Mobile' === $d['id'] ) { | |
| 90 | + continue; | |
| 91 | + } | |
| 92 | + $custom_devices[] = $d; | |
| 93 | + } | |
| 94 | + if ( empty( $custom_devices ) ) { | |
| 95 | + return $map; | |
| 96 | + } | |
| 97 | + | |
| 98 | + // Phantom baseline: the builder run against a suffix that has no stored | |
| 99 | + // values. Controls that hardcode only Tablet/Mobile defaults emit | |
| 100 | + // "phantom" declarations (e.g. border-width:0) for any unknown suffix; | |
| 101 | + // subtracting the phantom leaves only genuinely-overridden custom values, | |
| 102 | + // with no per-control changes. | |
| 103 | + $phantom = \ABlocks\Helper::call_device_builder( $builder, '__ablocksphantom__' ); | |
| 104 | + foreach ( $custom_devices as $d ) { | |
| 105 | + if ( $d['width'] <= 0 || 'Tablet' === $d['id'] || 'Mobile' === $d['id'] ) { | |
| 106 | + continue; | |
| 107 | + } | |
| 108 | + $actual = \ABlocks\Helper::call_device_builder( $builder, $d['suffix'] ); | |
| 109 | + $real = []; | |
| 110 | + foreach ( $actual as $prop => $val ) { | |
| 111 | + if ( ! array_key_exists( $prop, $phantom ) || $phantom[ $prop ] !== $val ) { | |
| 112 | + $real[ $prop ] = $val; | |
| 113 | + } | |
| 114 | + } | |
| 115 | + if ( ! empty( $real ) ) { | |
| 116 | + $map[ $d['suffix'] ] = [ | |
| 117 | + 'width' => (int) $d['width'], | |
| 118 | + 'min' => isset( $d['min'] ) ? (int) $d['min'] : 0, | |
| 119 | + 'max' => isset( $d['max'] ) ? (int) $d['max'] : (int) $d['width'], | |
| 120 | + 'styles' => $real, | |
| 121 | + ]; | |
| 122 | + } | |
| 123 | + } | |
| 124 | + return $map; | |
| 125 | + } | |
| 126 | + | |
| 66 | 127 | public function generate_css() { |
| 67 | 128 | $css_output = ''; |
| 68 | 129 | |
| 69 | 130 | foreach ( $this->class_styles as $class_style ) { |
| @@ -92,16 +153,65 @@ | ||
| 92 | 153 | |
| 93 | 154 | // Always add desktop CSS |
| 94 | 155 | $addToCssBlocks( '', '', $desktop_css ); |
| 95 | 156 | |
| 96 | - // Only add tablet CSS if it differs from desktop | |
| 97 | - if ( $tablet_raw !== $desktop_raw ) { | |
| 98 | - $addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css ); | |
| 99 | - } | |
| 157 | + if ( empty( $class_style['responsive_styles'] ) ) { | |
| 158 | + // Standard path (no custom breakpoints) — unchanged output. | |
| 159 | + // Only add tablet CSS if it differs from desktop | |
| 160 | + if ( $tablet_raw !== $desktop_raw ) { | |
| 161 | + $addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css ); | |
| 162 | + } | |
| 100 | 163 | |
| 101 | - // Only add mobile CSS if it differs from desktop AND tablet | |
| 102 | - if ( $mobile_raw !== $tablet_raw ) { | |
| 103 | - $addToCssBlocks( 'mobile', $this->get_breakpoint( 'mobile' ), $mobile_css ); | |
| 164 | + // Only add mobile CSS if it differs from desktop AND tablet | |
| 165 | + if ( $mobile_raw !== $tablet_raw ) { | |
| 166 | + $addToCssBlocks( 'mobile', $this->get_breakpoint( 'mobile' ), $mobile_css ); | |
| 167 | + } | |
| 168 | + } else { | |
| 169 | + // Custom breakpoints present: emit every breakpoint in | |
| 170 | + // width-descending order (narrowest last so it wins the cascade), | |
| 171 | + // each deduped against what it inherits. | |
| 172 | + $bp_defaults = \ABlocks\Helper::get_breakpoints(); | |
| 173 | + $bp_list = [ | |
| 174 | + [ 'width' => $bp_defaults['tablet'], 'min' => 0, 'max' => $bp_defaults['tablet'], 'styles' => $class_style['tablet_styles'] ], | |
| 175 | + [ 'width' => $bp_defaults['mobile'], 'min' => 0, 'max' => $bp_defaults['mobile'], 'styles' => $class_style['mobile_styles'] ], | |
| 176 | + ]; | |
| 177 | + foreach ( $class_style['responsive_styles'] as $bp ) { | |
| 178 | + $bp_list[] = [ | |
| 179 | + 'width' => (int) $bp['width'], | |
| 180 | + 'min' => isset( $bp['min'] ) ? (int) $bp['min'] : 0, | |
| 181 | + 'max' => isset( $bp['max'] ) ? (int) $bp['max'] : (int) $bp['width'], | |
| 182 | + 'styles' => $bp['styles'], | |
| 183 | + ]; | |
| 184 | + } | |
| 185 | + usort( $bp_list, function ( $a, $b ) { | |
| 186 | + return (int) $b['width'] - (int) $a['width']; | |
| 187 | + } ); | |
| 188 | + | |
| 189 | + $emitted = []; | |
| 190 | + foreach ( $bp_list as $i => $bp ) { | |
| 191 | + // Dedupe against what this breakpoint inherits — desktop plus every | |
| 192 | + // wider breakpoint whose range contains it — not desktop alone, so an | |
| 193 | + // explicit value that equals desktop's still overrides a wider | |
| 194 | + // custom breakpoint's. | |
| 195 | + $parent = $desktop_styles; | |
| 196 | + for ( $j = 0; $j < $i; $j++ ) { | |
| 197 | + if ( \ABlocks\Helper::breakpoint_contains( $bp_list[ $j ], $bp ) ) { | |
| 198 | + $parent = array_merge( $parent, $emitted[ $j ] ); | |
| 199 | + } | |
| 200 | + } | |
| 201 | + $bp_styles = $this->filter_responsive_styles( $parent, $bp['styles'] ); | |
| 202 | + $emitted[ $i ] = $bp_styles; | |
| 203 | + $bp_raw = $this->generate_css_for_media_query( 'bp', $bp_styles ); | |
| 204 | + if ( '' === trim( $bp_raw ) ) { | |
| 205 | + continue; | |
| 206 | + } | |
| 207 | + $bp_css = AssetsGenerator::minify_css( $bp_raw ); | |
| 208 | + $media = \ABlocks\Helper::breakpoint_media_condition( $bp['min'], $bp['max'] ); | |
| 209 | + if ( '' === $bp_css || '' === $media ) { | |
| 210 | + continue; | |
| 211 | + } | |
| 212 | + $css_blocks[] = "@media screen and $media {\n$parent_selector {\n$bp_css\n}\n}"; | |
| 213 | + } | |
| 104 | 214 | } |
| 105 | 215 | |
| 106 | 216 | $css_output .= implode( "\n\n", $css_blocks ) . "\n\n"; |
| 107 | 217 | }//end foreach |
| @@ -119,8 +229,12 @@ | ||
| 119 | 229 | return ''; |
| 120 | 230 | } |
| 121 | 231 | $css_string = implode("\n", array_map( |
| 122 | 232 | function ( $property, $value ) { |
| 233 | + // See Helper::esc_css_value(): these values come from block | |
| 234 | + // attributes and land inside an inline <style> element. | |
| 235 | + $property = \ABlocks\Helper::esc_css_value( $property ); | |
| 236 | + $value = \ABlocks\Helper::esc_css_value( $value ); | |
| 123 | 237 | return "$property: $value;"; |
| 124 | 238 | }, |
| 125 | 239 | array_keys( $styles ), |
| 126 | 240 | $styles |
| @@ -129,13 +243,14 @@ | ||
| 129 | 243 | return $css_string . "\n"; |
| 130 | 244 | } |
| 131 | 245 | |
| 132 | 246 | public function get_breakpoint( $media_query ) { |
| 247 | + $bp = \ABlocks\Helper::get_breakpoints(); | |
| 133 | 248 | switch ( $media_query ) { |
| 134 | 249 | case 'tablet': |
| 135 | - return '800px'; | |
| 250 | + return $bp['tablet'] . 'px'; | |
| 136 | 251 | case 'mobile': |
| 137 | - return '480px'; | |
| 252 | + return $bp['mobile'] . 'px'; | |
| 138 | 253 | default: |
| 139 | 254 | return '1200px'; |
| 140 | 255 | } |
| 141 | 256 | } |
