← All changes | includes/blocks/price-menu/block.php +73 -26 2.14.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 ) {
		@@ -171,11 +173,39 @@
171	173	$this->get_price_text_css( $attributes, 'Tablet' ),
172	174	$this->get_price_text_css( $attributes, 'Mobile' ),
173	175	$css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_price_text_css( $attributes, $device ); } )
174	176	);
	177	+ $this->add_layout_styles( $css_generator, $attributes );
175	178
176	179	return $css_generator->generate_css();
177	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	+ }
178	208	public function build_css( $attributes ) {
179	209	if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
180	210	return $this->build_css_v2( $attributes );
181	211	}
		@@ -248,21 +278,50 @@
248	278	$css['justify-content'] = $attributes['alignment'][ 'value' . $device ];
249	279	}
250	280	}
251	281
252		- return array_merge(
253		- Range::get_css([
254		- 'attributeValue' => $attributes['gap'],
255		- 'attribute_object_key' => 'value',
256		- 'isResponsive' => true,
257		- 'hasUnit' => true,
258		- 'defaultValue' => 10,
259		- 'unitDefaultValue' => 'px',
260		- 'property' => 'gap',
261		- 'device' => $device,
262		- ]),
263		- $css
264		- );
	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 );
265	324	}
266	325
267	326	public function get_all_menu_css( $attributes, $device = '' ) {
268	327	$css = [];
		@@ -275,9 +334,9 @@
275	334	Range::get_css([
276	335	'attributeValue' => $attributes['columnGap'],
277	336	'attribute_object_key' => 'value',
278	337	'isResponsive' => true,
279		- 'isResponsive' => true,
	338	+ 'hasUnit' => true,
280	339	'defaultValue' => 20,
281	340	'unitDefaultValue' => 'px',
282	341	'property' => 'gap',
283	342	'device' => $device,
		@@ -306,10 +365,8 @@
306	365	);
307	366	}
308	367	public function get_divider_css( $attributes, $device = '' ) {
309	368	$css = [];
310		- $divider_width = isset( $attributes['width'][ 'value' . $device ] ) ? $attributes['width'][ 'value' . $device ] : 60;
311		- $default_Unit = $attributes['allowDescription'] === true ? '%' : 'px';
312	369	$css['--ablocks-divider-pattern-color'] = Color::get_css(
313	370	isset( $attributes['color'] ) ? $attributes['color'] : '#000000');
314	371
315	372	$moreRangeCSS = [];
		@@ -344,18 +401,8 @@
344	401	}
345	402
346	403	return array_merge(
347	404	$css,
348		- Range::get_css([
349		- 'attributeValue' => $attributes['width'],
350		- 'attribute_object_key' => 'value',
351		- 'isResponsive' => true,
352		- 'defaultValue' => 100,
353		- 'hasUnit' => false,
354		- 'unitDefaultValue' => $attributes['allowDescription'] === true ? '%' : 'px',
355		- 'property' => 'width',
356		- 'device' => $device,
357		- ]),
358	405	$moreRangeCSS,
359	406	);
360	407	}
361	408	public function get_price_text_css( $attributes, $device = '' ) {