← All changes | includes/blocks/menu/block.php +119 -22 2.9.0 → 2.14.0 View file →

		@@ -13,8 +13,9 @@
13	13	use ABlocks\Controls\Range;
14	14	use ABlocks\Controls\BoxShadow;
15	15	use ABlocks\Classes\CssGeneratorV2;
16	16	use ABlocks\Controls\Color;
	17	+use ABlocks\Controls\Alignment;
17	18
18	19	class Block extends BlockBaseAbstract {
19	20	protected $block_name = 'menu';
20	21
		@@ -23,39 +24,45 @@
23	24	$css_generator->add_class_styles(
24	25	'{{WRAPPER}} .ablocks-menu',
25	26	$this->get_menu_css( $attributes, '' ),
26	27	$this->get_menu_css( $attributes, 'Tablet' ),
27		- $this->get_menu_css( $attributes, 'Mobile' )
	28	+ $this->get_menu_css( $attributes, 'Mobile' ),
	29	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
28	30	);
29	31	$css_generator->add_class_styles(
30	32	'{{WRAPPER}}.ablocks-menu',
31	33	$this->get_menu_css( $attributes, '' ),
32	34	$this->get_menu_css( $attributes, 'Tablet' ),
33		- $this->get_menu_css( $attributes, 'Mobile' )
	35	+ $this->get_menu_css( $attributes, 'Mobile' ),
	36	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
34	37	);
35	38	$css_generator->add_class_styles(
36	39	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item',
37	40	$this->get_menu_item_css( $attributes ),
38	41	$this->get_menu_item_css( $attributes, 'Tablet' ),
39		- $this->get_menu_item_css( $attributes, 'Mobile' )
	42	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	43	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
40	44	);
41	45	$css_generator->add_class_styles(
42	46	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link',
43	47	$this->get_menu_item_css( $attributes ),
44	48	$this->get_menu_item_css( $attributes, 'Tablet' ),
45		- $this->get_menu_item_css( $attributes, 'Mobile' )
	49	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	50	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
46	51	);
47	52	$css_generator->add_class_styles(
48	53	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover',
49	54	$this->get_menu_item_hover_css( $attributes, '' ),
50	55	$this->get_menu_item_hover_css( $attributes, 'Tablet' ),
51		- $this->get_menu_item_hover_css( $attributes, 'Mobile' )
	56	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	57	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
52	58	);
53	59	$css_generator->add_class_styles(
54	60	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link:hover',
55	61	$this->get_menu_item_hover_css( $attributes, '' ),
56	62	$this->get_menu_item_hover_css( $attributes, 'Tablet' ),
57		- $this->get_menu_item_hover_css( $attributes, 'Mobile' )
	63	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	64	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
58	65	);
59	66	$css_generator->add_class_styles(
60	67	'{{WRAPPER}} .ablocks-block--menu-child-sub',
61	68	$this->get_sub_menu_css( $attributes, '' ),
		@@ -87,15 +94,17 @@
87	94	$css_generator->add_class_styles(
88	95	'{{WRAPPER}} .ablocks-menu-child-mega',
89	96	$this->getMegaMenuCSS( $attributes ),
90	97	$this->getMegaMenuCSS( $attributes, 'Tablet' ),
91		- $this->getMegaMenuCSS( $attributes, 'Mobile' )
	98	+ $this->getMegaMenuCSS( $attributes, 'Mobile' ),
	99	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getMegaMenuCSS( $attributes, $device ); } )
92	100	);
93	101	$css_generator->add_class_styles(
94	102	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link',
95	103	$this->get_menu_item_link_css( $attributes, '' ),
96	104	$this->get_menu_item_link_css( $attributes, 'Tablet' ),
97		- $this->get_menu_item_link_css( $attributes, 'Mobile' )
	105	+ $this->get_menu_item_link_css( $attributes, 'Mobile' ),
	106	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_link_css( $attributes, $device ); } )
98	107	);
99	108	$css_generator->add_class_styles(
100	109	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__link ',
101	110	$this->get_menu_item_link_hover_css( $attributes, '' ),
		@@ -102,9 +111,10 @@
102	111	);
103	112	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__dropdown-icon svg',
104	113	$this->get_menu_item_dropdown_icon_css( $attributes ),
105	114	$this->get_menu_item_dropdown_icon_css( $attributes, 'Tablet' ),
106		- $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' )
	115	+ $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ),
	116	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_dropdown_icon_css( $attributes, $device ); } )
107	117	);
108	118	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__dropdown-icon svg', $this->get_menu_item_dropdown_icon_hover_css( $attributes ) );
109	119	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper', $this->get_hamburger_menu_wrapper_css( $attributes ) );
110	120	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger ',
		@@ -127,39 +137,47 @@
127	137	$css_generator->add_class_styles(
128	138	'{{WRAPPER}} .ablocks-menu',
129	139	$this->get_menu_css( $attributes, '' ),
130	140	$this->get_menu_css( $attributes, 'Tablet' ),
131		- $this->get_menu_css( $attributes, 'Mobile' )
	141	+ $this->get_menu_css( $attributes, 'Mobile' ),
	142	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
132	143	);
133	144	$css_generator->add_class_styles(
134	145	'{{WRAPPER}}.ablocks-menu',
135	146	$this->get_menu_css( $attributes, '' ),
136	147	$this->get_menu_css( $attributes, 'Tablet' ),
137		- $this->get_menu_css( $attributes, 'Mobile' )
	148	+ $this->get_menu_css( $attributes, 'Mobile' ),
	149	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_css( $attributes, $device ); } )
138	150	);
139	151	$css_generator->add_class_styles(
140	152	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item',
141	153	$this->get_menu_item_css( $attributes ),
142	154	$this->get_menu_item_css( $attributes, 'Tablet' ),
143		- $this->get_menu_item_css( $attributes, 'Mobile' )
	155	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	156	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_responsive_background_only_css( $attributes ) ),
	157	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
144	158	);
145	159	$css_generator->add_class_styles(
146	160	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link',
147	161	$this->get_menu_item_css( $attributes ),
148	162	$this->get_menu_item_css( $attributes, 'Tablet' ),
149		- $this->get_menu_item_css( $attributes, 'Mobile' )
	163	+ $this->get_menu_item_css( $attributes, 'Mobile' ),
	164	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_responsive_background_only_css( $attributes ) ),
	165	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_css( $attributes, $device ); } )
150	166	);
151	167	$css_generator->add_class_styles(
152	168	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover',
153	169	$this->get_menu_item_hover_css( $attributes, '' ),
154	170	$this->get_menu_item_hover_css( $attributes, 'Tablet' ),
155		- $this->get_menu_item_hover_css( $attributes, 'Mobile' )
	171	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	172	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
156	173	);
157	174	$css_generator->add_class_styles(
158	175	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item .ablocks-menu-item__link:hover',
159	176	$this->get_menu_item_hover_css( $attributes, '' ),
160	177	$this->get_menu_item_hover_css( $attributes, 'Tablet' ),
161		- $this->get_menu_item_hover_css( $attributes, 'Mobile' )
	178	+ $this->get_menu_item_hover_css( $attributes, 'Mobile' ),
	179	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_hover_css( $attributes, $device ); } )
162	180	);
163	181	$css_generator->add_class_styles(
164	182	'{{WRAPPER}} .ablocks-block--menu-child-sub',
165	183	$this->get_sub_menu_css( $attributes, '' ),
		@@ -164,8 +182,9 @@
164	182	'{{WRAPPER}} .ablocks-block--menu-child-sub',
165	183	$this->get_sub_menu_css( $attributes, '' ),
166	184	$this->get_sub_menu_css( $attributes, 'Tablet' ),
167	185	$this->get_sub_menu_css( $attributes, 'Mobile' ),
	186	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_menu_css( $attributes, $device ); } )
168	187	);
169	188	$css_generator->add_class_styles(
170	189	'{{WRAPPER}} .ablocks-block--menu-child-sub:hover',
171	190	$this->get_sub_menu_hover_css( $attributes, '' ),
		@@ -170,8 +189,9 @@
170	189	'{{WRAPPER}} .ablocks-block--menu-child-sub:hover',
171	190	$this->get_sub_menu_hover_css( $attributes, '' ),
172	191	$this->get_sub_menu_hover_css( $attributes, 'Tablet' ),
173	192	$this->get_sub_menu_hover_css( $attributes, 'Mobile' ),
	193	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_sub_menu_hover_css( $attributes, $device ); } )
174	194	);
175	195	$css_generator->add_class_styles(
176	196	'{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item',
177	197	$this->get_subMenu_responsive_css( $attributes, '' ),
		@@ -176,8 +196,9 @@
176	196	'{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item',
177	197	$this->get_subMenu_responsive_css( $attributes, '' ),
178	198	$this->get_subMenu_responsive_css( $attributes, 'Tablet' ),
179	199	$this->get_subMenu_responsive_css( $attributes, 'Mobile' ),
	200	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_subMenu_responsive_css( $attributes, $device ); } )
180	201	);
181	202	$css_generator->add_class_styles(
182	203	'{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item:hover',
183	204	$this->get_subMenu_responsive_hover_css( $attributes, '' ),
		@@ -186,8 +207,9 @@
186	207	'{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-block--menu-item .ablocks-menu-item__link',
187	208	$this->get_subMenu_responsive_text_css( $attributes, '' ),
188	209	$this->get_subMenu_responsive_text_css( $attributes, 'Tablet' ),
189	210	$this->get_subMenu_responsive_text_css( $attributes, 'Mobile' ),
	211	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_subMenu_responsive_text_css( $attributes, $device ); } )
190	212	);
191	213	$css_generator->add_class_styles(
192	214	'{{WRAPPER}} .ablocks-block--menu-child-sub .ablocks-menu-item:hover .ablocks-menu-item__link',
193	215	$this->get_subMenu__text_hover_css( $attributes )
		@@ -195,15 +217,18 @@
195	217	$css_generator->add_class_styles(
196	218	'{{WRAPPER}} .ablocks-menu-child-mega',
197	219	$this->getMegaMenuCSS( $attributes ),
198	220	$this->getMegaMenuCSS( $attributes, 'Tablet' ),
199		- $this->getMegaMenuCSS( $attributes, 'Mobile' )
	221	+ $this->getMegaMenuCSS( $attributes, 'Mobile' ),
	222	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getMegaMenuCSS( $attributes, $device ); } )
200	223	);
201	224	$css_generator->add_class_styles(
202	225	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__link',
203	226	$this->get_menu_item_link_css( $attributes, '' ),
204	227	$this->get_menu_item_link_css( $attributes, 'Tablet' ),
205		- $this->get_menu_item_link_css( $attributes, 'Mobile' )
	228	+ $this->get_menu_item_link_css( $attributes, 'Mobile' ),
	229	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_item_link_css( $attributes, 'Mobile' ) ),
	230	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_link_css( $attributes, $device ); } )
206	231	);
207	232	$css_generator->add_class_styles(
208	233	'{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__link ',
209	234	$this->get_menu_item_link_hover_css( $attributes, '' ),
		@@ -210,9 +235,11 @@
210	235	);
211	236	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item > .ablocks-menu-item__dropdown-icon svg',
212	237	$this->get_menu_item_dropdown_icon_css( $attributes ),
213	238	$this->get_menu_item_dropdown_icon_css( $attributes, 'Tablet' ),
214		- $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' )
	239	+ $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ),
	240	+ $this->get_menu_tablet_hamburger_css( $attributes, $this->get_menu_item_dropdown_icon_css( $attributes, 'Mobile' ) ),
	241	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_item_dropdown_icon_css( $attributes, $device ); } )
215	242	);
216	243	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu > .ablocks-menu-item:hover > .ablocks-menu-item__dropdown-icon svg', $this->get_menu_item_dropdown_icon_hover_css( $attributes ) );
217	244	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper', $this->get_hamburger_menu_wrapper_css( $attributes ) );
218	245	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger ',
		@@ -218,23 +245,38 @@
218	245	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger ',
219	246	$this->get_hamburger_menu_css( $attributes ),
220	247	$this->get_hamburger_menu_css( $attributes, 'Tablet' ),
221	248	$this->get_hamburger_menu_css( $attributes, 'Mobile' ),
	249	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_hamburger_menu_css( $attributes, $device ); } )
222	250	);
223	251	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger:hover ',
224	252	$this->get_hamburgerHoverCSS( $attributes ),
225	253	$this->get_hamburgerHoverCSS( $attributes, 'Tablet' ),
226	254	$this->get_hamburgerHoverCSS( $attributes, 'Mobile' ),
	255	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_hamburgerHoverCSS( $attributes, $device ); } )
227	256	);
228	257	$css_generator->add_class_styles( '{{WRAPPER}} .ablocks-menu__trigger-wrapper .ablocks-menu__trigger .ablocks-menu__trigger-item ',
229	258	$this->get_hamburger_menu_item_css( $attributes )
230	259	);
231	260	// menu active syle
232		- $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-block--menu-item-active',
	261	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active',
233	262	$this->get_menu_active_styles_css( $attributes ),
234	263	$this->get_menu_active_styles_css( $attributes, 'Tablet' ),
235		- $this->get_menu_active_styles_css( $attributes, 'Mobile' )
	264	+ $this->get_menu_active_styles_css( $attributes, 'Mobile' ),
	265	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_menu_active_styles_css( $attributes, $device ); } )
236	266	);
	267	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active > .ablocks-menu-item__link',
	268	+ [ 'color' => $this->get_menu_active_color_value( $attributes, '' ) ],
	269	+ [ 'color' => $this->get_menu_active_color_value( $attributes, 'Tablet' ) ],
	270	+ [ 'color' => $this->get_menu_active_color_value( $attributes, 'Mobile' ) ],
	271	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return [ 'color' => $this->get_menu_active_color_value( $attributes, $device ) ]; } )
	272	+ );
	273	+ $css_generator->add_class_styles( '{{WRAPPER}} .ablocks-main-menu .ablocks-menu-item.ablocks-block--menu-item-active > .ablocks-menu-item__dropdown-icon svg',
	274	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, '' ) ],
	275	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, 'Tablet' ) ],
	276	+ [ 'fill' => $this->get_menu_active_color_value( $attributes, 'Mobile' ) ],
	277	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return [ 'fill' => $this->get_menu_active_color_value( $attributes, $device ) ]; } )
	278	+ );
237	279	return $css_generator->generate_css();
238	280	}
239	281
240	282	private function get_menu_css( $attributes, $device = '' ) {
		@@ -240,11 +282,19 @@
240	282	private function get_menu_css( $attributes, $device = '' ) {
241	283	$css = [];
242	284	$padding = isset( $attributes['padding'] ) ? $attributes['padding'] : '';
243	285
244		- if ( ! empty( $attributes['alignment'] ) ) {
245		- $css['justify-content'] = $attributes['alignment'];
	286	+ $alignment = isset( $attributes['alignment'] ) ? $attributes['alignment'] : '';
	287	+ if ( is_string( $alignment ) ) {
	288	+ // `alignment` became a responsive object; a menu saved before that
	289	+ // still has the old plain string, which only ever applied to desktop.
	290	+ if ( '' === $device && '' !== $alignment ) {
	291	+ $css['justify-content'] = $alignment;
	292	+ }
	293	+ } else {
	294	+ $css = array_merge( $css, Alignment::get_css( $alignment, 'justify-content', $device ) );
246	295	}
	296	+
247	297	return array_merge(
248	298	Dimensions::get_css( $padding, 'padding', $device ),
249	299	$css
250	300	);
		@@ -474,6 +524,53 @@
474	524	return array_merge(
475	525	[ 'color' => Color::get_css( isset( $attributes['menuActveColor'] ) ? $attributes['menuActveColor'] : '' ) ],
476	526	[ 'background' => Color::get_css( isset( $attributes['menuActveColorBg'] ) ? $attributes['menuActveColorBg'] : '' ) ],
477	527	);
	528	+ }
	529	+ // The responsive text color is emitted with !important on these devices, so the active color needs it too to win over it.
	530	+ private function get_menu_active_color_value( $attributes, $device = '' ) {
	531	+ $color = Color::get_css( isset( $attributes['menuActveColor'] ) ? $attributes['menuActveColor'] : '' );
	532	+ if (
	533	+ '' !== $color &&
	534	+ ( ( $attributes['sideBarMenuDevice'] ?? null ) === 'tablet' && in_array( $device, [ 'Tablet', 'Mobile' ], true ) ||
	535	+ ( ( $attributes['sideBarMenuDevice'] ?? null ) !== 'tablet' && $device === 'Mobile' ) )
	536	+ ) {
	537	+ return $color . ' !important';
	538	+ }
	539	+ return $color;
	540	+ }
	541	+
	542	+ /**
	543	+ * Just the "Menu Responsive" background, with none of get_menu_item_css()'s
	544	+ * other declarations (border, padding, direction, ...) that don't belong in
	545	+ * the tablet-hamburger custom breakpoint below.
	546	+ */
	547	+ private function get_menu_responsive_background_only_css( $attributes ) {
	548	+ if ( empty( $attributes['menuResponsiveBackground'] ) ) {
	549	+ return [];
	550	+ }
	551	+ return [ 'background' => Color::get_css( $attributes['menuResponsiveBackground'] ) ];
	552	+ }
	553	+
	554	+ /**
	555	+ * "Enable Tablet Hamburger Menu" shows a hamburger in the 768px-1024px range
	556	+ * (see style.css) independently of the Tablet(800)/Mobile(480) breakpoints the
	557	+ * responsive controls use, and independently of "Hamburger Menu Device". The
	558	+ * "Menu Responsive" colors were only ever emitted for those two breakpoints,
	559	+ * so they never reached this range. This adds them there too, as a custom
	560	+ * breakpoint on the same selector, without touching the standard Tablet/Mobile
	561	+ * output.
	562	+ */
	563	+ private function get_menu_tablet_hamburger_css( $attributes, $styles ) {
	564	+ if ( empty( $attributes['enableTabletHamburger'] ) || empty( $styles ) ) {
	565	+ return [];
	566	+ }
	567	+ return [
	568	+ 'tabletHamburger' => [
	569	+ 'width' => 1024,
	570	+ 'min' => 768,
	571	+ 'max' => 1024,
	572	+ 'styles' => $styles,
	573	+ ],
	574	+ ];
478	575	}
479	576	}