← All changes | includes/blocks/price-menu/block.php +83 -26 2.12.0 → 2.16.0 View file →

		@@ -15,8 +15,9 @@
15	15	use ABlocks\Controls\TextShadow;
16	16	use ABlocks\Controls\TextStroke;
17	17	use ABlocks\Controls\Range;
18	18	use ABlocks\Controls\Color;
	19	+use ABlocks\Blocks\PriceMenuItem\Block as PriceMenuItemBlock;
19	20	class Block extends BlockBaseAbstract {
20	21	protected $block_name = 'price-menu';
21	22
22	23	public function build_css_v1( $attributes ) {
		@@ -88,8 +89,9 @@
88	89	$this->get_price_text_css( $attributes, '' ),
89	90	$this->get_price_text_css( $attributes, 'Tablet' ),
90	91	$this->get_price_text_css( $attributes, 'Mobile' ),
91	92	);
	93	+ $this->add_layout_styles( $css_generator, $attributes );
92	94
93	95	return $css_generator->generate_css();
94	96	}
95	97	public function build_css_v2( $attributes ) {
		@@ -100,8 +102,9 @@
100	102	'{{WRAPPER}}:not(.ablocks-has-block-container), {{WRAPPER}}.ablocks-block--price-menu > .ablocks-block-container',
101	103	$this->get_all_menu_css( $attributes, '' ),
102	104	$this->get_all_menu_css( $attributes, 'Tablet' ),
103	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 ); } )
104	107	);
105	108	$css_generator->add_class_styles(
106	109	'{{WRAPPER}} .ablocks-price-menu-item, {{WRAPPER}} .ablocks-price-menu-item-details',
107	110	$this->get_gap_around_css( $attributes, '' ),
		@@ -106,8 +109,9 @@
106	109	'{{WRAPPER}} .ablocks-price-menu-item, {{WRAPPER}} .ablocks-price-menu-item-details',
107	110	$this->get_gap_around_css( $attributes, '' ),
108	111	$this->get_gap_around_css( $attributes, 'Tablet' ),
109	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 ); } )
110	114	);
111	115	$css_generator->add_class_styles(
112	116	'{{WRAPPER}} .ablocks-price-menu-item-details-brief',
113	117	$this->get_details_brief_css( $attributes, '' ),
		@@ -112,8 +116,9 @@
112	116	'{{WRAPPER}} .ablocks-price-menu-item-details-brief',
113	117	$this->get_details_brief_css( $attributes, '' ),
114	118	$this->get_details_brief_css( $attributes, 'Tablet' ),
115	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 ); } )
116	121	);
117	122	$css_generator->add_class_styles(
118	123	'{{WRAPPER}} .ablocks-block--price-menu-item',
119	124	$this->get_item_css( $attributes, '' ),
		@@ -118,8 +123,9 @@
118	123	'{{WRAPPER}} .ablocks-block--price-menu-item',
119	124	$this->get_item_css( $attributes, '' ),
120	125	$this->get_item_css( $attributes, 'Tablet' ),
121	126	$this->get_item_css( $attributes, 'Mobile' ),
	127	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_css( $attributes, $device ); } )
122	128	);
123	129	$css_generator->add_class_styles(
124	130	'{{WRAPPER}} .ablocks-block--price-menu-item:hover',
125	131	$this->get_item_hover_css( $attributes, '' ),
		@@ -124,8 +130,9 @@
124	130	'{{WRAPPER}} .ablocks-block--price-menu-item:hover',
125	131	$this->get_item_hover_css( $attributes, '' ),
126	132	$this->get_item_hover_css( $attributes, 'Tablet' ),
127	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 ); } )
128	135	);
129	136
130	137	$css_generator->add_class_styles(
131	138	'{{WRAPPER}} .ablocks-price-menu-item',
		@@ -131,8 +138,9 @@
131	138	'{{WRAPPER}} .ablocks-price-menu-item',
132	139	$this->get_inner_item_css( $attributes, '' ),
133	140	$this->get_inner_item_css( $attributes, 'Tablet' ),
134	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 ); } )
135	143	);
136	144
137	145	// TitleText CSS
138	146	$css_generator->add_class_styles(
		@@ -139,8 +147,9 @@
139	147	'{{WRAPPER}} .ablocks-price-menu-item-details-title',
140	148	$this->get_title_text_css( $attributes, '' ),
141	149	$this->get_title_text_css( $attributes, 'Tablet' ),
142	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 ); } )
143	152	);
144	153	// DescriptionText CSS
145	154	$css_generator->add_class_styles(
146	155	'{{WRAPPER}} .ablocks-price-menu-item-details-des',
		@@ -146,8 +155,9 @@
146	155	'{{WRAPPER}} .ablocks-price-menu-item-details-des',
147	156	$this->get_description_text_css( $attributes, '' ),
148	157	$this->get_description_text_css( $attributes, 'Tablet' ),
149	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 ); } )
150	160	);
151	161	// SeparatorText CSS
152	162	$css_generator->add_class_styles(
153	163	'{{WRAPPER}} .ablocks-price-menu-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
		@@ -153,8 +163,9 @@
153	163	'{{WRAPPER}} .ablocks-price-menu-divider__pattern-' . ( $attributes['dividerType'] === 'mask-style' ? 'mask' : 'css' ),
154	164	$this->get_divider_css( $attributes, '' ),
155	165	$this->get_divider_css( $attributes, 'Tablet' ),
156	166	$this->get_divider_css( $attributes, 'Mobile' ),
	167	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_divider_css( $attributes, $device ); } )
157	168	);
158	169	// PriceText CSS
159	170	$css_generator->add_class_styles(
160	171	'{{WRAPPER}} .ablocks-price-menu-item-price',
		@@ -160,12 +171,41 @@
160	171	'{{WRAPPER}} .ablocks-price-menu-item-price',
161	172	$this->get_price_text_css( $attributes, '' ),
162	173	$this->get_price_text_css( $attributes, 'Tablet' ),
163	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 ); } )
164	176	);
	177	+ $this->add_layout_styles( $css_generator, $attributes );
165	178
166	179	return $css_generator->generate_css();
167	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	+ }
168	208	public function build_css( $attributes ) {
169	209	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
170	210	return $this->build_css_v2( $attributes );
171	211	}
		@@ -238,21 +278,50 @@
238	278	$css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
239	279	}
240	280	}
241	281
242		- return array_merge(
243		- Range::get_css([
244		- 'attributeValue' => $attributes['gap'],
245		- 'attribute_object_key' => 'value',
246		- 'isResponsive' => true,
247		- 'hasUnit' => true,
248		- 'defaultValue' => 10,
249		- 'unitDefaultValue' => 'px',
250		- 'property' => 'gap',
251		- 'device' => $device,
252		- ]),
253		- $css
254		- );
	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 );
255	324	}
256	325
257	326	public function get_all_menu_css( $attributes, $device = '' ) {
258	327	$css = [];
		@@ -265,9 +334,9 @@
265	334	Range::get_css([
266	335	'attributeValue' => $attributes['columnGap'],
267	336	'attribute_object_key' => 'value',
268	337	'isResponsive' => true,
269		- 'isResponsive' => true,
	338	+ 'hasUnit' => true,
270	339	'defaultValue' => 20,
271	340	'unitDefaultValue' => 'px',
272	341	'property' => 'gap',
273	342	'device' => $device,
		@@ -296,10 +365,8 @@
296	365	);
297	366	}
298	367	public function get_divider_css( $attributes, $device = '' ) {
299	368	$css = [];
300		- $divider_width = isset( $attributes['width'][ 'value' . $device ] ) ? $attributes['width'][ 'value' . $device ] : 60;
301		- $default_Unit = $attributes['allowDescription'] === true ? '%' : 'px';
302	369	$css['--ablocks-divider-pattern-color'] = Color::get_css(
303	370	isset( $attributes['color'] ) ? $attributes['color'] : '#000000');
304	371
305	372	$moreRangeCSS = [];
		@@ -334,18 +401,8 @@
334	401	}
335	402
336	403	return array_merge(
337	404	$css,
338		- Range::get_css([
339		- 'attributeValue' => $attributes['width'],
340		- 'attribute_object_key' => 'value',
341		- 'isResponsive' => true,
342		- 'defaultValue' => 100,
343		- 'hasUnit' => false,
344		- 'unitDefaultValue' => $attributes['allowDescription'] === true ? '%' : 'px',
345		- 'property' => 'width',
346		- 'device' => $device,
347		- ]),
348	405	$moreRangeCSS,
349	406	);
350	407	}
351	408	public function get_price_text_css( $attributes, $device = '' ) {