← All changes | includes/classes/css-generator-v2.php +126 -47 2.9.0 → 2.13.1 View file →

		@@ -5,11 +5,11 @@
5	5	exit;
6	6	}
7	7
8	8	use ABlocks\Classes\AssetsGenerator;
	9	+use ABlocks\Classes\FontStack;
9	10
10	11	class CssGeneratorV2 {
11		- private $font_category;
12	12	private $custom_css = '';
13	13	private $parent_class;
14	14	private $class_styles = [];
15	15
		@@ -17,9 +17,8 @@
17	17	$this->parent_class = '.ablocks-block-' . $attributes['block_id'];
18	18	if ( isset( $attributes['_custom_css'] ) ) {
19	19	$this->custom_css = $attributes['_custom_css'];
20	20	}
21		- $this->font_category = include ABLOCKS_BLOCKS_DIR_PATH . 'fonts.php';
22	21
23	22	// Alert - don't touch here
24	23	if ( isset( $attributes['_margin'] ) ) { // check has advanced tab or not
25	24	$this->add_class_styles(
		@@ -25,9 +24,12 @@
25	24	$this->add_class_styles(
26	25	'{{WRAPPER}}',
27	26	BlockGlobal::get_wrapper_css( $attributes ),
28	27	BlockGlobal::get_wrapper_css( $attributes, 'Tablet' ),
29		- 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	+ } )
30	32	);
31	33	$this->add_class_styles(
32	34	'{{WRAPPER}}:hover',
33	35	BlockGlobal::get_wrapper_hover_css( $attributes ),
		@@ -49,22 +51,80 @@
49	51	$this->add_class_styles(
50	52	'{{WRAPPER}} > .ablocks-block-container',
51	53	BlockGlobal::get_container_css( $attributes ),
52	54	BlockGlobal::get_container_css( $attributes, 'Tablet' ),
53		- 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	+ } )
54	59	);
55	60	}//end if
56	61	}
57	62
58		- 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 = [] ) {
59	64	$this->class_styles[] = [
60	65	'class_name' => $class_name,
61	66	'desktop_styles' => $desktop_styles,
62	67	'tablet_styles' => $tablet_styles,
63		- 'mobile_styles' => $mobile_styles
	68	+ 'mobile_styles' => $mobile_styles,
	69	+ // Optional map of custom breakpoints: [ suffix => [ width, styles ] ].
	70	+ 'responsive_styles' => $responsive_styles,
64	71	];
65	72	}
66	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 = (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	+
67	127	public function generate_css() {
68	128	$css_output = '';
69	129
70	130	foreach ( $this->class_styles as $class_style ) {
		@@ -93,16 +153,53 @@
93	153
94	154	// Always add desktop CSS
95	155	$addToCssBlocks( '', '', $desktop_css );
96	156
97		- // Only add tablet CSS if it differs from desktop
98		- if ( $tablet_raw !== $desktop_raw ) {
99		- $addToCssBlocks( 'tablet', $this->get_breakpoint( 'tablet' ), $tablet_css );
100		- }
	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	+ }
101	163
102		- // Only add mobile CSS if it differs from desktop AND tablet
103		- if ( $mobile_raw !== $tablet_raw ) {
104		- $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 desktop.
	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	+ foreach ( $bp_list as $bp ) {
	190	+ $bp_styles = $this->filter_responsive_styles( $desktop_styles, $bp['styles'] );
	191	+ $bp_raw = $this->generate_css_for_media_query( 'bp', $bp_styles );
	192	+ if ( $bp_raw === $desktop_raw || '' === trim( $bp_raw ) ) {
	193	+ continue;
	194	+ }
	195	+ $bp_css = AssetsGenerator::minify_css( $bp_raw );
	196	+ $media = \ABlocks\Helper::breakpoint_media_condition( $bp['min'], $bp['max'] );
	197	+ if ( '' === $bp_css || '' === $media ) {
	198	+ continue;
	199	+ }
	200	+ $css_blocks[] = "@media screen and $media {\n$parent_selector {\n$bp_css\n}\n}";
	201	+ }
105	202	}
106	203
107	204	$css_output .= implode( "\n\n", $css_blocks ) . "\n\n";
108	205	}//end foreach
		@@ -120,8 +217,12 @@
120	217	return '';
121	218	}
122	219	$css_string = implode("\n", array_map(
123	220	function ( $property, $value ) {
	221	+ // See Helper::esc_css_value(): these values come from block
	222	+ // attributes and land inside an inline <style> element.
	223	+ $property = \ABlocks\Helper::esc_css_value( $property );
	224	+ $value = \ABlocks\Helper::esc_css_value( $value );
124	225	return "$property: $value;";
125	226	},
126	227	array_keys( $styles ),
127	228	$styles
		@@ -130,13 +231,14 @@
130	231	return $css_string . "\n";
131	232	}
132	233
133	234	public function get_breakpoint( $media_query ) {
	235	+ $bp = \ABlocks\Helper::get_breakpoints();
134	236	switch ( $media_query ) {
135	237	case 'tablet':
136		- return '800px';
	238	+ return $bp['tablet'] . 'px';
137	239	case 'mobile':
138		- return '480px';
	240	+ return $bp['mobile'] . 'px';
139	241	default:
140	242	return '1200px';
141	243	}
142	244	}
		@@ -151,15 +253,17 @@
151	253
152	254	$styles = [];
153	255
154	256	foreach ( $base_styles as $prop => $value ) {
155		- if ( 'font-family' === $prop && isset( $this->font_category[ $value ] ) ) {
156		- $value = $this->get_font_family_css( $value, $this->font_category[ $value ] );
	257	+ if ( 'font-family' === $prop ) {
	258	+ // Safety net for styles that bypass the Typography control and set a
	259	+ // bare family name directly. FontStack leaves finished values alone.
	260	+ $value = FontStack::build( $value );
157	261	}
158	262	// Trim value to avoid whitespace-only entries
159	263	$trimmed = trim( $value );
160	264	// // Remove if empty, or if it matches only a unit (like 'px', '%', 'em') without any number
161		- if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%)$/i', $trimmed ) ) {
	265	+ if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%|s|ms|deg|fr|ch|ex)$/i', $trimmed ) ) {
162	266	continue;
163	267	}
164	268
165	269	$styles[ $prop ] = $trimmed;
		@@ -177,9 +281,9 @@
177	281	foreach ( $responsive_styles as $prop => $value ) {
178	282	$trimmed = trim( $value );
179	283
180	284	// // Remove if empty, or if it matches only a unit (like 'px', '%', 'em') without any number
181		- if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%)$/i', $trimmed ) ) {
	285	+ if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%|s|ms|deg|fr|ch|ex)$/i', $trimmed ) ) {
182	286	continue;
183	287	}
184	288
185	289	// Only include if the value is different from base styles
		@@ -191,36 +295,11 @@
191	295	return $difference;
192	296	}
193	297
194	298
195		- public function get_font_family_css( string $font_name, string $category ): string {
196		- // Quote font name if it contains spaces
197		- if ( strpos( $font_name, ' ' ) !== false ) {
198		- $font_name = '"' . $font_name . '"';
199		- }
200		-
201		- // Map category to fallback
202		- switch ( $category ) {
203		- case 'serif':
204		- $fallback = 'serif';
205		- break;
206		- case 'sans-serif':
207		- $fallback = 'sans-serif';
208		- break;
209		- case 'monospace':
210		- $fallback = 'monospace';
211		- break;
212		- case 'display':
213		- $fallback = 'sans-serif';
214		- break;
215		- case 'handwriting':
216		- $fallback = 'cursive';
217		- break;
218		- default:
219		- $fallback = 'sans-serif';
220		- }
221		-
222		- return $font_name . ', ' . $fallback;
	299	+ public function get_font_family_css( string $font_name, string $category = '' ): string {
	300	+ // Kept for back-compat; the stack is built centrally now.
	301	+ return FontStack::build( $font_name );
223	302	}
224	303
225	304
226	305	}