← All changes | includes/classes/css-generator.php +310 -0 1.0.2 → 2.14.0 View file →

		@@ -1,0 +1,310 @@
	1	+<?php
	2	+namespace ABlocks\Classes;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\AssetsGenerator;
	9	+use ABlocks\Classes\FontStack;
	10	+
	11	+class CssGenerator {
	12	+ private $custom_css = '';
	13	+ private $parent_class;
	14	+ private $class_styles = [];
	15	+
	16	+ public function __construct( $attributes = [] ) {
	17	+ if ( ! isset( $attributes['block_id'] ) ) {
	18	+ return;
	19	+ }
	20	+ $this->parent_class = '.ablocks-block-' . $attributes['block_id'];
	21	+ if ( isset( $attributes['_custom_css'] ) ) {
	22	+ $this->custom_css = $attributes['_custom_css'];
	23	+ }
	24	+
	25	+
	26	+ // Alert - don't touch here
	27	+ if ( isset( $attributes['_margin'] ) ) { // check has advanced tab or not
	28	+ $this->add_class_styles(
	29	+ '{{WRAPPER}}',
	30	+ BlockGlobal::get_wrapper_css( $attributes ),
	31	+ BlockGlobal::get_wrapper_css( $attributes, 'Tablet' ),
	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	+ } )
	36	+ );
	37	+ $this->add_class_styles(
	38	+ '{{WRAPPER}}:hover',
	39	+ BlockGlobal::get_wrapper_hover_css( $attributes ),
	40	+ BlockGlobal::get_wrapper_hover_css( $attributes, 'Tablet' ),
	41	+ BlockGlobal::get_wrapper_hover_css( $attributes, 'Mobile' )
	42	+ );
	43	+ $this->add_class_styles(
	44	+ '{{WRAPPER}}.ablocks-hide-on-desktop,{{WRAPPER}}.ablocks-hide-on-tablet,{{WRAPPER}}.ablocks-hide-on-mobile',
	45	+ BlockGlobal::get_wrapper_device_responsive_css( $attributes ),
	46	+ BlockGlobal::get_wrapper_device_responsive_css( $attributes, 'Tablet' ),
	47	+ BlockGlobal::get_wrapper_device_responsive_css( $attributes, 'Mobile' )
	48	+ );
	49	+ $this->add_class_styles(
	50	+ '{{WRAPPER}}:hover > .ablocks-block-container',
	51	+ BlockGlobal::get_container_hover_css( $attributes ),
	52	+ BlockGlobal::get_container_hover_css( $attributes, 'Tablet' ),
	53	+ BlockGlobal::get_container_hover_css( $attributes, 'Mobile' )
	54	+ );
	55	+ $this->add_class_styles(
	56	+ '{{WRAPPER}} > .ablocks-block-container',
	57	+ BlockGlobal::get_container_css( $attributes ),
	58	+ BlockGlobal::get_container_css( $attributes, 'Tablet' ),
	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	+ } )
	63	+ );
	64	+ }//end if
	65	+ }
	66	+
	67	+ public function add_class_styles( $class_name, $desktop_styles, $tablet_styles = [], $mobile_styles = [], $responsive_styles = [] ) {
	68	+ $this->class_styles[] = [
	69	+ 'class_name' => $class_name,
	70	+ 'desktop_styles' => $desktop_styles,
	71	+ 'tablet_styles' => $tablet_styles,
	72	+ 'mobile_styles' => $mobile_styles,
	73	+ 'responsive_styles' => $responsive_styles,
	74	+ ];
	75	+ }
	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 = \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	+
	127	+ public function generate_css() {
	128	+ $css_output = '';
	129	+
	130	+ foreach ( $this->class_styles as $class_style ) {
	131	+ $desktop_styles = $this->remove_empty_css( $class_style['desktop_styles'] );
	132	+ $tablet_styles = $this->filter_responsive_styles( $desktop_styles, $class_style['tablet_styles'] );
	133	+ $mobile_styles = $this->filter_responsive_styles( array_merge( $desktop_styles, $tablet_styles ), $class_style['mobile_styles'] );
	134	+
	135	+ $desktop_raw = $this->generate_css_for_media_query( 'desktop', $desktop_styles );
	136	+ $tablet_raw = $this->generate_css_for_media_query( 'tablet', $tablet_styles );
	137	+ $mobile_raw = $this->generate_css_for_media_query( 'mobile', $mobile_styles );
	138	+
	139	+ $desktop_css = AssetsGenerator::minify_css( $desktop_raw );
	140	+ $tablet_css = AssetsGenerator::minify_css( $tablet_raw );
	141	+ $mobile_css = AssetsGenerator::minify_css( $mobile_raw );
	142	+
	143	+ $parent_selector = $this->get_parent_selector( $class_style['class_name'] );
	144	+ $css_blocks = [];
	145	+
	146	+ $addToCssBlocks = function ( $mediaQuery, $max_width, $css ) use ( &$css_blocks, $parent_selector ) {
	147	+ if ( ! empty( $css ) ) {
	148	+ $css_blocks[] = ( '' !== $mediaQuery ) ? "@media screen and (max-width: $max_width) {\n$parent_selector {\n$css\n}\n}" : "$parent_selector {\n$css\n}";
	149	+ }
	150	+ };
	151	+
	152	+ // Always add desktop CSS
	153	+ $addToCssBlocks( '', '', $desktop_css );
	154	+
	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 what it inherits.
	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	+ $emitted = [];
	183	+ foreach ( $bp_list as $i => $bp ) {
	184	+ // Dedupe against what this breakpoint inherits — desktop plus every
	185	+ // wider breakpoint whose range contains it — not desktop alone, so an
	186	+ // explicit value that equals desktop's still overrides a wider
	187	+ // custom breakpoint's.
	188	+ $parent = $desktop_styles;
	189	+ for ( $j = 0; $j < $i; $j++ ) {
	190	+ if ( \ABlocks\Helper::breakpoint_contains( $bp_list[ $j ], $bp ) ) {
	191	+ $parent = array_merge( $parent, $emitted[ $j ] );
	192	+ }
	193	+ }
	194	+ $bp_styles = $this->filter_responsive_styles( $parent, $bp['styles'] );
	195	+ $emitted[ $i ] = $bp_styles;
	196	+ $bp_raw = $this->generate_css_for_media_query( 'bp', $bp_styles );
	197	+ if ( '' === trim( $bp_raw ) ) {
	198	+ continue;
	199	+ }
	200	+ $bp_css = AssetsGenerator::minify_css( $bp_raw );
	201	+ $media = \ABlocks\Helper::breakpoint_media_condition( $bp['min'], $bp['max'] );
	202	+ if ( '' === $bp_css || '' === $media ) {
	203	+ continue;
	204	+ }
	205	+ $css_blocks[] = "@media screen and $media {\n$parent_selector {\n$bp_css\n}\n}";
	206	+ }
	207	+ }
	208	+
	209	+ $css_output .= implode( "\n\n", $css_blocks ) . "\n\n";
	210	+ }//end foreach
	211	+
	212	+ $css_output .= $this->get_custom_css();
	213	+
	214	+ return preg_replace( '/\s+/', ' ', $css_output );
	215	+ }
	216	+ public function get_custom_css() {
	217	+ return preg_replace( '/\bselector\b/', $this->parent_class, $this->custom_css );
	218	+ }
	219	+ public function generate_css_for_media_query( $media_query, $styles ) {
	220	+ if ( empty( $styles ) ) {
	221	+ return '';
	222	+ }
	223	+ $css_string = implode("\n", array_map(
	224	+ function ( $property, $value ) {
	225	+ // See Helper::esc_css_value(): these values come from block
	226	+ // attributes and land inside an inline <style> element.
	227	+ $property = \ABlocks\Helper::esc_css_value( $property );
	228	+ $value = \ABlocks\Helper::esc_css_value( $value );
	229	+ return "$property: $value;";
	230	+ },
	231	+ array_keys( $styles ),
	232	+ $styles
	233	+ ));
	234	+
	235	+ return $css_string . "\n";
	236	+ }
	237	+
	238	+ public function get_breakpoint( $media_query ) {
	239	+ $bp = \ABlocks\Helper::get_breakpoints();
	240	+ switch ( $media_query ) {
	241	+ case 'tablet':
	242	+ return $bp['tablet'] . 'px';
	243	+ case 'mobile':
	244	+ return $bp['mobile'] . 'px';
	245	+ default:
	246	+ return '1200px';
	247	+ }
	248	+ }
	249	+
	250	+ public function get_parent_selector( $class_name ) {
	251	+ return $this->parent_class ? str_replace( '{{WRAPPER}}', $this->parent_class, $class_name ) : $class_name;
	252	+ }
	253	+
	254	+ private function remove_empty_css( $base_styles ) {
	255	+ if ( empty( $base_styles ) || ! is_array( $base_styles ) || ( is_array( $base_styles ) && ! count( $base_styles ) ) ) {
	256	+ return [];
	257	+ }
	258	+
	259	+ $styles = [];
	260	+
	261	+ foreach ( $base_styles as $prop => $value ) {
	262	+ if ( 'font-family' === $prop ) {
	263	+ // Safety net for styles that bypass the Typography control and set a
	264	+ // bare family name directly. FontStack leaves finished values alone.
	265	+ $value = FontStack::build( $value );
	266	+ }
	267	+ // Trim value to avoid whitespace-only entries
	268	+ $trimmed = trim( $value );
	269	+ // // Remove if empty, or if it matches only a unit (like 'px', '%', 'em') without any number
	270	+ if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%|s|ms|deg|fr|ch|ex)$/i', $trimmed ) ) {
	271	+ continue;
	272	+ }
	273	+
	274	+ $styles[ $prop ] = $trimmed;
	275	+ }
	276	+
	277	+ return $styles;
	278	+ }
	279	+
	280	+ private function filter_responsive_styles( $base_styles, $responsive_styles ) {
	281	+ if ( empty( $responsive_styles ) || ! is_array( $responsive_styles ) ) {
	282	+ return [];
	283	+ }
	284	+
	285	+ $difference = [];
	286	+
	287	+ foreach ( $responsive_styles as $prop => $value ) {
	288	+ $trimmed = trim( $value );
	289	+
	290	+ // // Remove if empty, or if it matches only a unit (like 'px', '%', 'em') without any number
	291	+ if ( $trimmed === '' || preg_match( '/^(px|em|rem|vh|vw|vmin|vmax|cm|mm|in|pt|pc|%|s|ms|deg|fr|ch|ex)$/i', $trimmed ) ) {
	292	+ continue;
	293	+ }
	294	+
	295	+ // Only include if the value is different from base styles
	296	+ if ( ! isset( $base_styles[ $prop ] ) || $base_styles[ $prop ] !== $trimmed ) {
	297	+ $difference[ $prop ] = $trimmed;
	298	+ }
	299	+ }
	300	+
	301	+ return $difference;
	302	+ }
	303	+
	304	+
	305	+ public function get_font_family_css( string $font_name, string $category = '' ): string {
	306	+ // Kept for back-compat; the stack is built centrally now.
	307	+ return FontStack::build( $font_name );
	308	+ }
	309	+}
	310	+