← All changes | includes/blocks/price-menu/block.php +188 -70 2.9.1 → 2.16.0 View file →

		@@ -1,9 +1,14 @@
1	1	<?php
2	2	namespace ABlocks\Blocks\PriceMenu;
3	3
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
4	8	use ABlocks\Classes\BlockBaseAbstract;
5	9	use ABlocks\Classes\CssGenerator;
	10	+use ABlocks\Classes\CssGeneratorV2;
6	11	use ABlocks\Controls\Alignment;
7	12	use ABlocks\Controls\Border;
8	13	use ABlocks\Controls\Dimensions;
9	14	use ABlocks\Controls\Typography;
		@@ -9,13 +14,14 @@
9	14	use ABlocks\Controls\Typography;
10	15	use ABlocks\Controls\TextShadow;
11	16	use ABlocks\Controls\TextStroke;
12	17	use ABlocks\Controls\Range;
13		-
	18	+use ABlocks\Controls\Color;
	19	+use ABlocks\Blocks\PriceMenuItem\Block as PriceMenuItemBlock;
14	20	class Block extends BlockBaseAbstract {
15	21	protected $block_name = 'price-menu';
16	22
17		- public function build_css( $attributes ) {
	23	+ public function build_css_v1( $attributes ) {
18	24
19	25	$css_generator = new CssGenerator( $attributes, $this->block_name );
20	26
21	27	$css_generator->add_class_styles(
		@@ -83,23 +89,138 @@
83	89	$this->get_price_text_css( $attributes, '' ),
84	90	$this->get_price_text_css( $attributes, 'Tablet' ),
85	91	$this->get_price_text_css( $attributes, 'Mobile' ),
86	92	);
	93	+ $this->add_layout_styles( $css_generator, $attributes );
87	94
88	95	return $css_generator->generate_css();
89	96	}
	97	+ public function build_css_v2( $attributes ) {
90	98
	99	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	100	+
	101	+ $css_generator->add_class_styles(
	102	+ '{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--price-menu > .ablocks-block-container',
	103	+ $this->get_all_menu_css( $attributes, '' ),
	104	+ $this->get_all_menu_css( $attributes, 'Tablet' ),
	105	+ $this->get_all_menu_css( $attributes, 'Mobile' ),
	106	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_all_menu_css( $attributes, $device ); } )
	107	+ );
	108	+ $css_generator->add_class_styles(
	109	+ '{{WRAPPER}} .ablocks-price-menu-item, {{WRAPPER}} .ablocks-price-menu-item-details',
	110	+ $this->get_gap_around_css( $attributes, '' ),
	111	+ $this->get_gap_around_css( $attributes, 'Tablet' ),
	112	+ $this->get_gap_around_css( $attributes, 'Mobile' ),
	113	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_gap_around_css( $attributes, $device ); } )
	114	+ );
	115	+ $css_generator->add_class_styles(
	116	+ '{{WRAPPER}} .ablocks-price-menu-item-details-brief',
	117	+ $this->get_details_brief_css( $attributes, '' ),
	118	+ $this->get_details_brief_css( $attributes, 'Tablet' ),
	119	+ $this->get_details_brief_css( $attributes, 'Mobile' ),
	120	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_details_brief_css( $attributes, $device ); } )
	121	+ );
	122	+ $css_generator->add_class_styles(
	123	+ '{{WRAPPER}} .ablocks-block--price-menu-item',
	124	+ $this->get_item_css( $attributes, '' ),
	125	+ $this->get_item_css( $attributes, 'Tablet' ),
	126	+ $this->get_item_css( $attributes, 'Mobile' ),
	127	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_css( $attributes, $device ); } )
	128	+ );
	129	+ $css_generator->add_class_styles(
	130	+ '{{WRAPPER}} .ablocks-block--price-menu-item:hover',
	131	+ $this->get_item_hover_css( $attributes, '' ),
	132	+ $this->get_item_hover_css( $attributes, 'Tablet' ),
	133	+ $this->get_item_hover_css( $attributes, 'Mobile' ),
	134	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_hover_css( $attributes, $device ); } )
	135	+ );
	136	+
	137	+ $css_generator->add_class_styles(
	138	+ '{{WRAPPER}} .ablocks-price-menu-item',
	139	+ $this->get_inner_item_css( $attributes, '' ),
	140	+ $this->get_inner_item_css( $attributes, 'Tablet' ),
	141	+ $this->get_inner_item_css( $attributes, 'Mobile' ),
	142	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_item_css( $attributes, $device ); } )
	143	+ );
	144	+
	145	+ // TitleText CSS
	146	+ $css_generator->add_class_styles(
	147	+ '{{WRAPPER}} .ablocks-price-menu-item-details-title',
	148	+ $this->get_title_text_css( $attributes, '' ),
	149	+ $this->get_title_text_css( $attributes, 'Tablet' ),
	150	+ $this->get_title_text_css( $attributes, 'Mobile' ),
	151	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_text_css( $attributes, $device ); } )
	152	+ );
	153	+ // DescriptionText CSS
	154	+ $css_generator->add_class_styles(
	155	+ '{{WRAPPER}} .ablocks-price-menu-item-details-des',
	156	+ $this->get_description_text_css( $attributes, '' ),
	157	+ $this->get_description_text_css( $attributes, 'Tablet' ),
	158	+ $this->get_description_text_css( $attributes, 'Mobile' ),
	159	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_description_text_css( $attributes, $device ); } )
	160	+ );
	161	+ // SeparatorText CSS
	162	+ $css_generator->add_class_styles(
	163	+ '{{WRAPPER}} .ablocks-price-menu-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
	164	+ $this->get_divider_css( $attributes, '' ),
	165	+ $this->get_divider_css( $attributes, 'Tablet' ),
	166	+ $this->get_divider_css( $attributes, 'Mobile' ),
	167	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_css( $attributes, $device ); } )
	168	+ );
	169	+ // PriceText CSS
	170	+ $css_generator->add_class_styles(
	171	+ '{{WRAPPER}} .ablocks-price-menu-item-price',
	172	+ $this->get_price_text_css( $attributes, '' ),
	173	+ $this->get_price_text_css( $attributes, 'Tablet' ),
	174	+ $this->get_price_text_css( $attributes, 'Mobile' ),
	175	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_price_text_css( $attributes, $device ); } )
	176	+ );
	177	+ $this->add_layout_styles( $css_generator, $attributes );
	178	+
	179	+ return $css_generator->generate_css();
	180	+ }
	181	+
	182	+ // Divider width and Price alignment layout; shared with the items (see
	183	+ // PriceMenuItem\Block and src/blocks/price-menu/edit.js).
	184	+ private function add_layout_styles( $css_generator, $attributes ) {
	185	+ $css_generator->add_class_styles(
	186	+ '{{WRAPPER}} .ablocks-divider',
	187	+ $this->get_divider_width_css( $attributes, '' ),
	188	+ $this->get_divider_width_css( $attributes, 'Tablet' ),
	189	+ $this->get_divider_width_css( $attributes, 'Mobile' ),
	190	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_width_css( $attributes, $device ); } )
	191	+ );
	192	+ $css_generator->add_class_styles(
	193	+ '{{WRAPPER}} .ablocks-price-menu-item',
	194	+ PriceMenuItemBlock::get_item_width_css( $attributes, '' ),
	195	+ PriceMenuItemBlock::get_item_width_css( $attributes, 'Tablet' ),
	196	+ PriceMenuItemBlock::get_item_width_css( $attributes, 'Mobile' ),
	197	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return PriceMenuItemBlock::get_item_width_css( $attributes, $device ); } )
	198	+ );
	199	+ $css_generator->add_class_styles(
	200	+ '{{WRAPPER}} .ablocks-price-menu-item-details-brief > .ablocks-price-menu-item-price',
	201	+ PriceMenuItemBlock::get_price_row_css( $attributes )
	202	+ );
	203	+ }
	204	+
	205	+ public function get_divider_width_css( $attributes, $device = '' ) {
	206	+ return PriceMenuItemBlock::get_divider_width_css( $attributes, $device, '--ablocks-pm-divider-width', 100 );
	207	+ }
	208	+ public function build_css( $attributes ) {
	209	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	210	+ return $this->build_css_v2( $attributes );
	211	+ }
	212	+ return $this->build_css_v1( $attributes );
	213	+ }
	214	+
91	215	public function get_item_css( $attributes, $device = '' ) {
92	216	$css = [];
93	217
94		- if ( isset( $attributes['transition'] ) ) {
	218	+ if ( ! empty( $attributes['transition'] ) ) {
95	219	$css['transition-duration'] = $attributes['transition'] . 's';
96	220	}
97		-
98		- if ( isset( $attributes['itemBackground'] ) ) {
99		- $css['background'] = $attributes['itemBackground'];
100		- }
101	221	return array_merge(
	222	+ [ 'background' => Color::get_css( isset( $attributes['itemBackground'] ) ? $attributes['itemBackground'] : '' ) ],
102	223	$css,
103	224	isset( $attributes['alignment'] ) ? Alignment::get_css( $attributes['alignment'], 'justify-content', $device ) : [],
104	225	isset( $attributes['itemBorder'] ) ? Border::get_css( $attributes['itemBorder'], '', $device ) : [],
105	226	isset( $attributes['itemPadding'] ) ? Dimensions::get_css( $attributes['itemPadding'], 'padding', $device ) : [],
		@@ -106,14 +227,10 @@
106	227	);
107	228	}
108	229
109	230	public function get_item_hover_css( $attributes, $device = '' ) {
110		- $css = [];
111		- if ( isset( $attributes['itemBackgroundH'] ) ) {
112		- $css['background'] = $attributes['itemBackgroundH'];
113		- }
114	231	return array_merge(
115		- $css,
	232	+ [ 'background' => Color::get_css( isset( $attributes['itemBackgroundH'] ) ? $attributes['itemBackgroundH'] : '' ) ],
116	233	isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : [],
117	234	);
118	235	}
119	236
		@@ -161,31 +278,65 @@
161	278	$css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
162	279	}
163	280	}
164	281
165		- return array_merge(
166		- Range::get_css([
167		- 'attributeValue' => $attributes['gap'],
168		- 'attribute_object_key' => 'value',
169		- 'isResponsive' => true,
170		- 'hasUnit' => true,
171		- 'defaultValue' => 10,
172		- 'unitDefaultValue' => 'px',
173		- 'property' => 'gap',
174		- 'device' => $device,
175		- ]),
176		- $css
177		- );
	282	+ $gap = Range::get_css([
	283	+ 'attributeValue' => $attributes['gap'],
	284	+ 'attribute_object_key' => 'value',
	285	+ 'isResponsive' => true,
	286	+ 'hasUnit' => true,
	287	+ 'defaultValue' => 10,
	288	+ 'unitDefaultValue' => 'px',
	289	+ 'property' => 'gap',
	290	+ 'device' => $device,
	291	+ ]);
	292	+ // Title & price gap; unset falls back to the gap above. Longhands only: a
	293	+ // `gap` shorthand at a narrower breakpoint would reset an inherited
	294	+ // column-gap that the generator dedupes away.
	295	+ $title_price_gap = Range::get_css([
	296	+ 'attributeValue' => isset( $attributes['titlePriceGap'] ) ? $attributes['titlePriceGap'] : [],
	297	+ 'attributeObjectKey' => 'value',
	298	+ 'isResponsive' => true,
	299	+ 'hasUnit' => true,
	300	+ 'unitDefaultValue' => 'px',
	301	+ 'property' => 'column-gap',
	302	+ 'device' => $device,
	303	+ ]);
	304	+ $gap_css = [];
	305	+ if ( isset( $gap['gap'] ) ) {
	306	+ $gap_css['row-gap'] = $gap['gap'];
	307	+ }
	308	+ // A % gap is rigid and would crush the title once it outgrows the free
	309	+ // space, so it becomes shrinkable spacers (style.css) that yield first.
	310	+ if ( PriceMenuItemBlock::is_percent_title_price_gap( $attributes, $device ) ) {
	311	+ $gap_css['column-gap'] = '0px';
	312	+ $gap_css['--ablocks-pm-tp-gap'] = $title_price_gap['column-gap'];
	313	+ $gap_css['--ablocks-pm-tp-spacer'] = 'block';
	314	+ return array_merge( $gap_css, $css );
	315	+ }
	316	+ if ( isset( $title_price_gap['column-gap'] ) || isset( $gap['gap'] ) ) {
	317	+ $gap_css['column-gap'] = isset( $title_price_gap['column-gap'] ) ? $title_price_gap['column-gap'] : $gap['gap'];
	318	+ }
	319	+ if ( $device && PriceMenuItemBlock::has_percent_title_price_gap( $attributes ) ) {
	320	+ $gap_css['--ablocks-pm-tp-spacer'] = 'none';
	321	+ }
	322	+
	323	+ return array_merge( $gap_css, $css );
178	324	}
179	325
180	326	public function get_all_menu_css( $attributes, $device = '' ) {
	327	+ $css = [];
	328	+ $css['display'] = 'flex';
	329	+ $css['flex-wrap'] = 'wrap';
	330	+ $css['flex-direction'] = 'column';
181	331
182	332	return array_merge(
	333	+ $css,
183	334	Range::get_css([
184	335	'attributeValue' => $attributes['columnGap'],
185	336	'attribute_object_key' => 'value',
186	337	'isResponsive' => true,
187		- 'isResponsive' => true,
	338	+ 'hasUnit' => true,
188	339	'defaultValue' => 20,
189	340	'unitDefaultValue' => 'px',
190	341	'property' => 'gap',
191	342	'device' => $device,
		@@ -193,18 +344,12 @@
193	344	);
194	345	}
195	346
196	347	public function get_title_text_css( $attributes, $device = '' ) {
197		- $css = [];
198		- $title_color = isset( $attributes['titleColor'] ) ? $attributes['titleColor'] : '';
199		-
200		- if ( isset( $attributes['titleColor'] ) ) {
201		- $css['color'] = $title_color;
202		- }
203		-
	348	+ $typographyValueGlobal = ! empty( $attributes['titleTypographyGlobal'] ) ? $attributes['titleTypographyGlobal'] : array();
204	349	return array_merge(
205		- $css,
206		- isset( $attributes['titleTypography'] ) ? Typography::get_css( $attributes['titleTypography'], '', $device ) : [],
	350	+ [ 'color' => Color::get_css( isset( $attributes['titleColor'] ) ? $attributes['titleColor'] : '' ) ],
	351	+ isset( $attributes['titleTypography'] ) ? Typography::get_css( $attributes['titleTypography'], '', $device, $typographyValueGlobal ) : [],
207	352	isset( $attributes['titleTextStroke'] ) ? TextStroke::get_css( $attributes['titleTextStroke'], '', $device ) : [],
208	353	isset( $attributes['titleTextShadow'] ) ? TextShadow::get_css( $attributes['titleTextShadow'], '', $device ) : [],
209	354	isset( $attributes['titleAlignment'] ) ? Alignment::get_css( $attributes['titleAlignment'], 'text-align', $device ) : [],
210	355	);
		@@ -209,18 +354,12 @@
209	354	isset( $attributes['titleAlignment'] ) ? Alignment::get_css( $attributes['titleAlignment'], 'text-align', $device ) : [],
210	355	);
211	356	}
212	357	public function get_description_text_css( $attributes, $device = '' ) {
213		- $css = [];
214		- $description_color = isset( $attributes['descriptionColor'] ) ? $attributes['descriptionColor'] : '';
215		-
216		- if ( isset( $attributes['descriptionColor'] ) && isset( $attributes['descriptionColor'] ) ) {
217		- $css['color'] = $description_color;
218		- }
219		-
	358	+ $typographyValueGlobal = ! empty( $attributes['descriptionTypographyGlobal'] ) ? $attributes['descriptionTypographyGlobal'] : array();
220	359	return array_merge(
221		- $css,
222		- isset( $attributes['descriptionTypography'] ) ? Typography::get_css( $attributes['descriptionTypography'], '', $device ) : [],
	360	+ [ 'color' => Color::get_css( isset( $attributes['descriptionColor'] ) ? $attributes['descriptionColor'] : '' ) ],
	361	+ isset( $attributes['descriptionTypography'] ) ? Typography::get_css( $attributes['descriptionTypography'], '', $device, $typographyValueGlobal ) : [],
223	362	isset( $attributes['descriptionTextStroke'] ) ? TextStroke::get_css( $attributes['descriptionTextStroke'], '', $device ) : [],
224	363	isset( $attributes['descriptionTextShadow'] ) ? TextShadow::get_css( $attributes['descriptionTextShadow'], '', $device ) : [],
225	364	isset( $attributes['descriptionAlignment'] ) ? Alignment::get_css( $attributes['descriptionAlignment'], 'text-align', $device ) : [],
226	365	);
		@@ -226,16 +365,11 @@
226	365	);
227	366	}
228	367	public function get_divider_css( $attributes, $device = '' ) {
229	368	$css = [];
230		- $divider_width = isset( $attributes['width'][ 'value' . $device ] ) ? $attributes['width'][ 'value' . $device ] : 60;
231		- $divider_color = isset( $attributes['color'] ) ? $attributes['color'] : '#000000';
232		- $default_Unit = $attributes['allowDescription'] === true ? '%' : 'px';
	369	+ $css['--ablocks-divider-pattern-color'] = Color::get_css(
	370	+ isset( $attributes['color'] ) ? $attributes['color'] : '#000000');
233	371
234		- if ( isset( $attributes['color'] ) && ! empty( $attributes['color'] ) ) {
235		- $css['--ablocks-divider-pattern-color'] = $divider_color;
236		- }
237		-
238	372	$moreRangeCSS = [];
239	373	if ( isset( $attributes['dividerType'] ) && $attributes['dividerType'] === 'mask-style' && isset( $attributes['size'] ) && ! empty( $attributes['size'] ) ) {
240	374	$moreRangeCSS = Range::get_css([
241	375	'attributeValue' => $attributes['size'],
		@@ -267,32 +401,16 @@
267	401	}
268	402
269	403	return array_merge(
270	404	$css,
271		- Range::get_css([
272		- 'attributeValue' => $attributes['width'],
273		- 'attribute_object_key' => 'value',
274		- 'isResponsive' => true,
275		- 'defaultValue' => 100,
276		- 'hasUnit' => false,
277		- 'unitDefaultValue' => $attributes['allowDescription'] === true ? '%' : 'px',
278		- 'property' => 'width',
279		- 'device' => $device,
280		- ]),
281	405	$moreRangeCSS,
282	406	);
283	407	}
284	408	public function get_price_text_css( $attributes, $device = '' ) {
285		- $css = [];
286		- $price_color = isset( $attributes['priceColor'] ) ? $attributes['priceColor'] : '';
287		-
288		- if ( isset( $attributes['priceColor'] ) ) {
289		- $css['color'] = $price_color;
290		- }
291		-
	409	+ $typographyValueGlobal = ! empty( $attributes['priceTypographyGlobal'] ) ? $attributes['priceTypographyGlobal'] : array();
292	410	return array_merge(
293		- $css,
294		- isset( $attributes['priceTypography'] ) ? Typography::get_css( $attributes['priceTypography'], '', $device ) : [],
	411	+ [ 'color' => Color::get_css( isset( $attributes['priceColor'] ) ? $attributes['priceColor'] : '' ) ],
	412	+ isset( $attributes['priceTypography'] ) ? Typography::get_css( $attributes['priceTypography'], '', $device, $typographyValueGlobal ) : [],
295	413	isset( $attributes['priceTextStroke'] ) ? TextStroke::get_css( $attributes['priceTextStroke'], '', $device ) : [],
296	414	isset( $attributes['priceTextShadow'] ) ? TextShadow::get_css( $attributes['priceTextShadow'], '', $device ) : [],
297	415	isset( $attributes['priceAlignment'] ) ? Alignment::get_css( $attributes['priceAlignment'], 'text-align', $device ) : [],
298	416	);