class-grid.php — GenerateBlocks 2.2.0

generateblocks / includes / blocks / class-grid.php

generateblocks / includes / blocks Last commit date

class-grid.php

307 lines

1	<?php
2	/**
3	* Handles the Grid block.
4	*
5	* @package GenerateBlocks
6	*/
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit; // Exit if accessed directly.
10	}
11
12	/**
13	* Add Grid related functions.
14	*/
15	class GenerateBlocks_Block_Grid {
16	/**
17	* Keep track of all blocks of this type on the page.
18	*
19	* @var array $block_ids The current block id.
20	*/
21	private static $block_ids = [];
22
23	/**
24	* Keep track of CSS we want to output once per block type.
25	*
26	* @var boolean
27	*/
28	private static $singular_css_added = false;
29
30	/**
31	* Block defaults.
32	*/
33	public static function defaults() {
34	return [
35	'horizontalGap' => '',
36	'verticalGap' => '',
37	'verticalAlignment' => '',
38	'horizontalGapTablet' => '',
39	'verticalGapTablet' => '',
40	'verticalAlignmentTablet' => 'inherit',
41	'horizontalGapMobile' => '',
42	'verticalGapMobile' => '',
43	'verticalAlignmentMobile' => 'inherit',
44	'horizontalAlignment' => '',
45	'horizontalAlignmentTablet' => '',
46	'horizontalAlignmentMobile' => '',
47	'useLegacyRowGap' => false,
48	];
49	}
50
51	/**
52	* Store our block ID in memory.
53	*
54	* @param string $id The block ID to store.
55	*/
56	public static function store_block_id( $id ) {
57	self::$block_ids[] = $id;
58	}
59
60	/**
61	* Check if our block ID exists.
62	*
63	* @param string $id The block ID to store.
64	*/
65	public static function block_id_exists( $id ) {
66	return in_array( $id, (array) self::$block_ids );
67	}
68
69	/**
70	* Compile our CSS data based on our block attributes.
71	*
72	* @param array $attributes Our block attributes.
73	*/
74	public static function get_css_data( $attributes ) {
75	$css = new GenerateBlocks_Dynamic_CSS();
76	$desktop_css = new GenerateBlocks_Dynamic_CSS();
77	$tablet_css = new GenerateBlocks_Dynamic_CSS();
78	$tablet_only_css = new GenerateBlocks_Dynamic_CSS();
79	$mobile_css = new GenerateBlocks_Dynamic_CSS();
80	$css_data = [];
81
82	$defaults = generateblocks_get_block_defaults();
83
84	$settings = wp_parse_args(
85	$attributes,
86	$defaults['gridContainer']
87	);
88
89	$id = $attributes['uniqueId'];
90	$blockVersion = ! empty( $settings['blockVersion'] ) ? $settings['blockVersion'] : 1;
91
92	// Use legacy settings if needed.
93	if ( $blockVersion < 2 ) {
94	$settings = GenerateBlocks_Legacy_Attributes::get_settings( '1.4.0', 'grid', $settings, $attributes );
95	}
96
97	$gap_direction = 'left';
98
99	if ( is_rtl() ) {
100	$gap_direction = 'right';
101	}
102
103	// Don't output horizontal gap defaults if we're using global styles.
104	if ( $blockVersion < 2 && isset( $settings['useGlobalStyle'] ) && $settings['useGlobalStyle'] && isset( $settings['globalStyleId'] ) && $settings['globalStyleId'] ) {
105	if ( (string) $settings['horizontalGap'] === (string) $defaults['gridContainer']['horizontalGap'] ) {
106	$settings['horizontalGap'] = '';
107	}
108	}
109
110	// Only add this CSS once.
111	if ( ! self::$singular_css_added ) {
112	do_action(
113	'generateblocks_block_one_time_css_data',
114	'grid',
115	$settings,
116	$css
117	);
118
119	self::$singular_css_added = true;
120	}
121
122	$css->set_selector( '.gb-grid-wrapper-' . $id );
123	$css->add_property( 'display', 'flex' );
124	$css->add_property( 'flex-wrap', 'wrap' );
125	$css->add_property( 'align-items', $settings['verticalAlignment'] );
126	$css->add_property( 'justify-content', $settings['horizontalAlignment'] );
127
128	if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
129	$css->add_property( 'row-gap', $settings['verticalGap'], 'px' );
130	}
131
132	if ( $settings['horizontalGap'] ) {
133	$css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGap'] . 'px' );
134	}
135
136	$css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
137	$css->add_property( 'box-sizing', 'border-box' );
138	$css->add_property( 'padding-' . $gap_direction, $settings['horizontalGap'], 'px' );
139
140	if ( $blockVersion < 3 \|\| $settings['useLegacyRowGap'] ) {
141	$css->add_property( 'padding-bottom', $settings['verticalGap'], 'px' );
142	}
143
144	$tablet_css->set_selector( '.gb-grid-wrapper-' . $id );
145
146	if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
147	$tablet_css->add_property( 'row-gap', $settings['verticalGapTablet'], 'px' );
148	}
149
150	if ( 'inherit' !== $settings['verticalAlignmentTablet'] ) {
151	$tablet_css->add_property( 'align-items', $settings['verticalAlignmentTablet'] );
152	}
153
154	if ( 'inherit' !== $settings['horizontalAlignmentTablet'] ) {
155	$tablet_css->add_property( 'justify-content', $settings['horizontalAlignmentTablet'] );
156	}
157
158	if ( $settings['horizontalGapTablet'] ) {
159	$tablet_css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGapTablet'] . 'px' );
160	} elseif ( 0 === $settings['horizontalGapTablet'] ) {
161	$tablet_css->add_property( 'margin-' . $gap_direction, $settings['horizontalGapTablet'] );
162	}
163
164	$tablet_css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
165	$tablet_css->add_property( 'padding-' . $gap_direction, $settings['horizontalGapTablet'], 'px' );
166
167	if ( $blockVersion < 3 \|\| $settings['useLegacyRowGap'] ) {
168	$tablet_css->add_property( 'padding-bottom', $settings['verticalGapTablet'], 'px' );
169	}
170
171	$mobile_css->set_selector( '.gb-grid-wrapper-' . $id );
172
173	if ( $blockVersion > 2 && ! $settings['useLegacyRowGap'] ) {
174	$mobile_css->add_property( 'row-gap', $settings['verticalGapMobile'], 'px' );
175	}
176
177	if ( 'inherit' !== $settings['verticalAlignmentMobile'] ) {
178	$mobile_css->add_property( 'align-items', $settings['verticalAlignmentMobile'] );
179	}
180
181	if ( 'inherit' !== $settings['horizontalAlignmentMobile'] ) {
182	$mobile_css->add_property( 'justify-content', $settings['horizontalAlignmentMobile'] );
183	}
184
185	if ( $settings['horizontalGapMobile'] ) {
186	$mobile_css->add_property( 'margin-' . $gap_direction, '-' . $settings['horizontalGapMobile'] . 'px' );
187	} elseif ( 0 === $settings['horizontalGapMobile'] ) {
188	$mobile_css->add_property( 'margin-' . $gap_direction, $settings['horizontalGapMobile'] );
189	}
190
191	$mobile_css->set_selector( '.gb-grid-wrapper-' . $id . ' > .gb-grid-column' );
192	$mobile_css->add_property( 'padding-' . $gap_direction, $settings['horizontalGapMobile'], 'px' );
193
194	if ( $blockVersion < 3 \|\| $settings['useLegacyRowGap'] ) {
195	$mobile_css->add_property( 'padding-bottom', $settings['verticalGapMobile'], 'px' );
196	}
197
198	// Store this block ID in memory.
199	self::store_block_id( $id );
200
201	/**
202	* Do generateblocks_block_css_data hook
203	*
204	* @since 1.0
205	*
206	* @param string $name The name of our block.
207	* @param array $settings The settings for the current block.
208	* @param object $css Our desktop/main CSS data.
209	* @param object $desktop_css Our desktop only CSS data.
210	* @param object $tablet_css Our tablet CSS data.
211	* @param object $tablet_only_css Our tablet only CSS data.
212	* @param object $mobile_css Our mobile CSS data.
213	*/
214	do_action(
215	'generateblocks_block_css_data',
216	'grid',
217	$settings,
218	$css,
219	$desktop_css,
220	$tablet_css,
221	$tablet_only_css,
222	$mobile_css
223	);
224
225	return [
226	'main' => $css->css_output(),
227	'desktop' => $desktop_css->css_output(),
228	'tablet' => $tablet_css->css_output(),
229	'tablet_only' => $tablet_only_css->css_output(),
230	'mobile' => $mobile_css->css_output(),
231	];
232	}
233
234	/**
235	* Wrapper function for our dynamic buttons.
236	*
237	* @since 1.6.0
238	* @param array $attributes The block attributes.
239	* @param string $content The dynamic text to display.
240	* @param WP_Block $block Block instance.
241	*/
242	public static function render_block( $attributes, $content, $block ) {
243	if ( ! isset( $attributes['isDynamic'] ) \|\| ! $attributes['isDynamic'] ) {
244	// Add styles to this block if needed.
245	$content = generateblocks_maybe_add_block_css(
246	$content,
247	[
248	'class_name' => 'GenerateBlocks_Block_Grid',
249	'attributes' => $attributes,
250	'block_ids' => self::$block_ids,
251	]
252	);
253
254	return $content;
255	}
256
257	$defaults = generateblocks_get_block_defaults();
258
259	$settings = wp_parse_args(
260	$attributes,
261	$defaults['gridContainer']
262	);
263
264	$classNames = array(
265	'gb-grid-wrapper',
266	'gb-grid-wrapper-' . $settings['uniqueId'],
267	);
268
269	if ( ! empty( $settings['className'] ) ) {
270	$classNames[] = $settings['className'];
271	}
272
273	// Add styles to this block if needed.
274	$output = generateblocks_maybe_add_block_css(
275	'',
276	[
277	'class_name' => 'GenerateBlocks_Block_Grid',
278	'attributes' => $attributes,
279	'block_ids' => self::$block_ids,
280	]
281	);
282
283	$output .= sprintf(
284	'<div %s>',
285	generateblocks_attr(
286	'grid-wrapper',
287	array(
288	'id' => isset( $settings['anchor'] ) ? $settings['anchor'] : null,
289	'class' => implode( ' ', $classNames ),
290	),
291	$settings,
292	$block
293	)
294	);
295
296	if ( empty( $attributes['isQueryLoop'] ) ) {
297	$output .= $content;
298	} else {
299	$output .= GenerateBlocks_Block_Query_Loop::render_block( $attributes, $content, $block );
300	}
301
302	$output .= '</div>';
303
304	return $output;
305	}
306	}
307