← All changes | includes/classes/css-generator.php +108 -14 2.11.0 → 2.13.0 View file →

		@@ -28,9 +28,12 @@
28	28	$this->add_class_styles(
29	29	'{{WRAPPER}}',
30	30	BlockGlobal::get_wrapper_css( $attributes ),
31	31	BlockGlobal::get_wrapper_css( $attributes, 'Tablet' ),
32		- BlockGlobal::get_wrapper_css( $attributes, 'Mobile' )
	32	+ BlockGlobal::get_wrapper_css( $attributes, 'Mobile' ),
	33	+ $this->custom_device_map( function ( $device ) use ( $attributes ) {
	34	+ return BlockGlobal::get_wrapper_css( $attributes, $device );
	35	+ } )
33	36	);
34	37	$this->add_class_styles(
35	38	'{{WRAPPER}}:hover',
36	39	BlockGlobal::get_wrapper_hover_css( $attributes ),
		@@ -52,22 +55,76 @@
52	55	$this->add_class_styles(
53	56	'{{WRAPPER}} > .ablocks-block-container',
54	57	BlockGlobal::get_container_css( $attributes ),
55	58	BlockGlobal::get_container_css( $attributes, 'Tablet' ),
56		- BlockGlobal::get_container_css( $attributes, 'Mobile' )
	59	+ BlockGlobal::get_container_css( $attributes, 'Mobile' ),
	60	+ $this->custom_device_map( function ( $device ) use ( $attributes ) {
	61	+ return BlockGlobal::get_container_css( $attributes, $device );
	62	+ } )
57	63	);
58	64	}//end if
59	65	}
60	66
61		- public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [] ) {
	67	+ public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [], $responsive_styles = [] ) {
62	68	$this->class_styles[] = [
63	69	'class_name' => $class_name,
64	70	'desktop_styles' => $desktop_styles,
65	71	'tablet_styles' => $tablet_styles,
66		- 'mobile_styles' => $mobile_styles
	72	+ 'mobile_styles' => $mobile_styles,
	73	+ 'responsive_styles' => $responsive_styles,
67	74	];
68	75	}
69	76
	77	+ /**
	78	+ * Custom-breakpoint style map from a per-device builder (excludes the
	79	+ * built-in Tablet/Mobile so the standard path is untouched).
	80	+ */
	81	+ public function custom_device_map( $builder ) {
	82	+ $map = [];
	83	+
	84	+ // Nothing to build when the site registers no custom breakpoints — and
	85	+ // running the phantom probe anyway is not free: it hands every control a
	86	+ // device suffix that has no stored keys, which is what made controls that
	87	+ // read `$value[ 'x' . $device ]` unguarded spray "Undefined array key
	88	+ // …___ablocksphantom___" notices on every page under WP_DEBUG.
	89	+ $custom_devices = [];
	90	+ foreach ( \ABlocks\Helper::get_responsive_devices() as $d ) {
	91	+ if ( $d['width'] <= 0 || 'Tablet' === $d['id'] || 'Mobile' === $d['id'] ) {
	92	+ continue;
	93	+ }
	94	+ $custom_devices[] = $d;
	95	+ }
	96	+ if ( empty( $custom_devices ) ) {
	97	+ return $map;
	98	+ }
	99	+
	100	+ // Subtract a "phantom" baseline (builder run against a value-less suffix)
	101	+ // so controls that only default Tablet/Mobile don't leak phantom
	102	+ // declarations into custom breakpoints. Leaves only real overrides.
	103	+ $phantom = (array) call_user_func( $builder, '__ablocksphantom__' );
	104	+ foreach ( $custom_devices as $d ) {
	105	+ if ( $d['width'] <= 0 || 'Tablet' === $d['id'] || 'Mobile' === $d['id'] ) {
	106	+ continue;
	107	+ }
	108	+ $actual = (array) call_user_func( $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	+
70	127	public function generate_css() {
71	128	$css_output = '';
72	129
73	130	foreach ( $this->class_styles as $class_style ) {
		@@ -94,18 +151,50 @@
94	151
95	152	// Always add desktop CSS
96	153	$addToCssBlocks( '', '', $desktop_css );
97	154
98		- // Only add tablet CSS if it differs from desktop
99		- if ( $tablet_raw !== $desktop_raw ) {
100		- $addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css );
	155	+ if ( empty( $class_style['responsive_styles'] ) ) {
	156	+ // Standard path (no custom breakpoints) — unchanged output.
	157	+ if ( $tablet_raw !== $desktop_raw ) {
	158	+ $addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css );
	159	+ }
	160	+ if ( $mobile_raw !== $tablet_raw ) {
	161	+ $addToCssBlocks( 'mobile', $this->get_breakpoint( 'mobile' ), $mobile_css );
	162	+ }
	163	+ } else {
	164	+ // Custom breakpoints present: emit every breakpoint width-descending
	165	+ // (narrowest last so it wins), each deduped against desktop.
	166	+ $bp_defaults = \ABlocks\Helper::get_breakpoints();
	167	+ $bp_list = [
	168	+ [ 'width' => $bp_defaults['tablet'], 'min' => 0, 'max' => $bp_defaults['tablet'], 'styles' => $class_style['tablet_styles'] ],
	169	+ [ 'width' => $bp_defaults['mobile'], 'min' => 0, 'max' => $bp_defaults['mobile'], 'styles' => $class_style['mobile_styles'] ],
	170	+ ];
	171	+ foreach ( $class_style['responsive_styles'] as $bp ) {
	172	+ $bp_list[] = [
	173	+ 'width' => (int) $bp['width'],
	174	+ 'min' => isset( $bp['min'] ) ? (int) $bp['min'] : 0,
	175	+ 'max' => isset( $bp['max'] ) ? (int) $bp['max'] : (int) $bp['width'],
	176	+ 'styles' => $bp['styles'],
	177	+ ];
	178	+ }
	179	+ usort( $bp_list, function ( $a, $b ) {
	180	+ return (int) $b['width'] - (int) $a['width'];
	181	+ } );
	182	+ foreach ( $bp_list as $bp ) {
	183	+ $bp_styles = $this->filter_responsive_styles( $desktop_styles, $bp['styles'] );
	184	+ $bp_raw = $this->generate_css_for_media_query( 'bp', $bp_styles );
	185	+ if ( $bp_raw === $desktop_raw || '' === trim( $bp_raw ) ) {
	186	+ continue;
	187	+ }
	188	+ $bp_css = AssetsGenerator::minify_css( $bp_raw );
	189	+ $media = \ABlocks\Helper::breakpoint_media_condition( $bp['min'], $bp['max'] );
	190	+ if ( '' === $bp_css || '' === $media ) {
	191	+ continue;
	192	+ }
	193	+ $css_blocks[] = "@media screen and $media {\n$parent_selector {\n$bp_css\n}\n}";
	194	+ }
101	195	}
102	196
103		- // Only add mobile CSS if it differs from desktop AND tablet
104		- if ( $mobile_raw !== $tablet_raw ) {
105		- $addToCssBlocks( 'mobile', $this->get_breakpoint( 'mobile' ), $mobile_css );
106		- }
107		-
108	197	$css_output .= implode( "\n\n", $css_blocks ) . "\n\n";
109	198	}//end foreach
110	199
111	200	$css_output .= $this->get_custom_css();
		@@ -120,8 +209,12 @@
120	209	return '';
121	210	}
122	211	$css_string = implode("\n", array_map(
123	212	function ( $property, $value ) {
	213	+ // See Helper::esc_css_value(): these values come from block
	214	+ // attributes and land inside an inline <style> element.
	215	+ $property = \ABlocks\Helper::esc_css_value( $property );
	216	+ $value = \ABlocks\Helper::esc_css_value( $value );
124	217	return "$property: $value;";
125	218	},
126	219	array_keys( $styles ),
127	220	$styles
		@@ -130,13 +223,14 @@
130	223	return $css_string . "\n";
131	224	}
132	225
133	226	public function get_breakpoint( $media_query ) {
	227	+ $bp = \ABlocks\Helper::get_breakpoints();
134	228	switch ( $media_query ) {
135	229	case 'tablet':
136		- return '800px';
	230	+ return $bp['tablet'] . 'px';
137	231	case 'mobile':
138		- return '480px';
	232	+ return $bp['mobile'] . 'px';
139	233	default:
140	234	return '1200px';
141	235	}
142	236	}