← All changes | includes/blocks/container/block.php +90 -9 2.10.0 → 2.14.0 View file →

		@@ -28,16 +28,31 @@
28	28	$css_generator->add_class_styles(
29	29	'{{WRAPPER}}.ablocks-block--container',
30	30	$this->get_main_wrapper_css( $attributes ),
31	31	$this->get_main_wrapper_css( $attributes, 'Tablet' ),
32		- $this->get_main_wrapper_css( $attributes, 'Mobile' )
	32	+ $this->get_main_wrapper_css( $attributes, 'Mobile' ),
	33	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_main_wrapper_css( $attributes, $device ); } )
33	34	);
34	35
35	36	$css_generator->add_class_styles(
	37	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay',
	38	+ $this->get_link_overlay_wrapper_css( $attributes )
	39	+ );
	40	+ $css_generator->add_class_styles(
	41	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay > .ablocks-block-container__link-overlay',
	42	+ $this->get_link_overlay_css( $attributes )
	43	+ );
	44	+ $css_generator->add_class_styles(
	45	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay > *:not(.ablocks-block-container__link-overlay):not(.ablocks-background--video):not(.ablocks-background-video-wrapper)',
	46	+ $this->get_link_overlay_content_css( $attributes )
	47	+ );
	48	+
	49	+ $css_generator->add_class_styles(
36	50	'{{WRAPPER}} > .ablocks-block-container',
37	51	$this->get_block_container_css( $attributes ),
38	52	$this->get_block_container_css( $attributes, 'Tablet' ),
39		- $this->get_block_container_css( $attributes, 'Mobile' )
	53	+ $this->get_block_container_css( $attributes, 'Mobile' ),
	54	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_block_container_css( $attributes, $device ); } )
40	55	);
41	56
42	57	$css_generator->add_class_styles(
43	58	'{{WRAPPER}} > .ablocks-block-container',
		@@ -42,15 +57,17 @@
42	57	$css_generator->add_class_styles(
43	58	'{{WRAPPER}} > .ablocks-block-container',
44	59	$this->get_inner_blocks_closest_parent_css( $attributes ),
45	60	$this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
46		- $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' )
	61	+ $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
	62	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
47	63	);
48	64	$css_generator->add_class_styles(
49	65	'{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)',
50	66	$this->get_container_inner_blocks_row_column_display_css( $attributes ),
51	67	$this->get_container_inner_blocks_row_column_display_css( $attributes, 'Tablet' ),
52		- $this->get_container_inner_blocks_row_column_display_css( $attributes, 'Mobile' )
	68	+ $this->get_container_inner_blocks_row_column_display_css( $attributes, 'Mobile' ),
	69	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_inner_blocks_row_column_display_css( $attributes, $device ); } )
53	70	);
54	71
55	72	$css_generator->add_class_styles(
56	73	'{{WRAPPER}}::before',
		@@ -100,8 +117,9 @@
100	117	body:not(.ablocks-is-fse-theme) {{WRAPPER}}.ablocks-block--container--is-root',
101	118	$this->reset_static_css( $attributes ),
102	119	$this->reset_static_css( $attributes, 'Tablet' ),
103	120	$this->reset_static_css( $attributes, 'Mobile' ),
	121	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->reset_static_css( $attributes, $device ); } )
104	122	);
105	123	}
106	124	$css_generator->add_class_styles(
107	125	'{{WRAPPER}}.ablocks-block--container',
		@@ -106,17 +124,32 @@
106	124	$css_generator->add_class_styles(
107	125	'{{WRAPPER}}.ablocks-block--container',
108	126	$this->get_main_wrapper_css( $attributes ),
109	127	$this->get_main_wrapper_css( $attributes, 'Tablet' ),
110		- $this->get_main_wrapper_css( $attributes, 'Mobile' )
	128	+ $this->get_main_wrapper_css( $attributes, 'Mobile' ),
	129	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_main_wrapper_css( $attributes, $device ); } )
111	130	);
112	131
	132	+ $css_generator->add_class_styles(
	133	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay',
	134	+ $this->get_link_overlay_wrapper_css( $attributes )
	135	+ );
	136	+ $css_generator->add_class_styles(
	137	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay > .ablocks-block-container__link-overlay',
	138	+ $this->get_link_overlay_css( $attributes )
	139	+ );
	140	+ $css_generator->add_class_styles(
	141	+ '{{WRAPPER}}.ablocks-block--container-has-link-overlay > *:not(.ablocks-block-container__link-overlay):not(.ablocks-background--video):not(.ablocks-background-video-wrapper)',
	142	+ $this->get_link_overlay_content_css( $attributes )
	143	+ );
	144	+
113	145	// Block Container only available root block
114	146	$css_generator->add_class_styles(
115	147	$attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container' : '{{WRAPPER}}',
116	148	$this->get_block_container_css( $attributes ),
117	149	$this->get_block_container_css( $attributes, 'Tablet' ),
118		- $this->get_block_container_css( $attributes, 'Mobile' )
	150	+ $this->get_block_container_css( $attributes, 'Mobile' ),
	151	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_block_container_css( $attributes, $device ); } )
119	152	);
120	153
121	154	$css_generator->add_class_styles(
122	155	$attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container' : '{{WRAPPER}}',
		@@ -121,15 +154,17 @@
121	154	$css_generator->add_class_styles(
122	155	$attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container' : '{{WRAPPER}}',
123	156	$this->get_inner_blocks_closest_parent_css( $attributes ),
124	157	$this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
125		- $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' )
	158	+ $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
	159	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
126	160	);
127	161	$css_generator->add_class_styles(
128	162	'{{WRAPPER}}.ablocks-has-block-container > .ablocks-block-container',
129	163	$this->get_inner_blocks_closest_parent_css( $attributes ),
130	164	$this->get_inner_blocks_closest_parent_css( $attributes, 'Tablet' ),
131		- $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' )
	165	+ $this->get_inner_blocks_closest_parent_css( $attributes, 'Mobile' ),
	166	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_inner_blocks_closest_parent_css( $attributes, $device ); } )
132	167	);
133	168
134	169	$css_generator->add_class_styles(
135	170	$attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)' : '{{WRAPPER}}',
		@@ -134,9 +169,10 @@
134	169	$css_generator->add_class_styles(
135	170	$attributes['isRootContainer'] ? '{{WRAPPER}} > .ablocks-block-container > *:not(style,.ablocks-block--container)' : '{{WRAPPER}}',
136	171	$this->get_container_inner_blocks_row_column_display_css_2( $attributes ),
137	172	$this->get_container_inner_blocks_row_column_display_css_2( $attributes, 'Tablet' ),
138		- $this->get_container_inner_blocks_row_column_display_css_2( $attributes, 'Mobile' )
	173	+ $this->get_container_inner_blocks_row_column_display_css_2( $attributes, 'Mobile' ),
	174	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_inner_blocks_row_column_display_css_2( $attributes, $device ); } )
139	175	);
140	176
141	177	$css_generator->add_class_styles(
142	178	'{{WRAPPER}}::before',
		@@ -142,8 +178,9 @@
142	178	'{{WRAPPER}}::before',
143	179	$this->get_container_before_css( $attributes ),
144	180	$this->get_container_before_css( $attributes, 'Tablet' ),
145	181	$this->get_container_before_css( $attributes, 'Mobile' ),
	182	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_before_css( $attributes, $device ); } )
146	183	);
147	184	$css_generator->add_class_styles(
148	185	'{{WRAPPER}}:hover::before',
149	186	$this->get_container_before_hover_css( $attributes ),
		@@ -148,8 +185,9 @@
148	185	'{{WRAPPER}}:hover::before',
149	186	$this->get_container_before_hover_css( $attributes ),
150	187	$this->get_container_before_hover_css( $attributes, 'Tablet' ),
151	188	$this->get_container_before_hover_css( $attributes, 'Mobile' ),
	189	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_container_before_hover_css( $attributes, $device ); } )
152	190	);
153	191	$css_generator->add_class_styles(
154	192	'{{WRAPPER}} .ablocks-container-shape-top > svg',
155	193	$this->getContainerShapeTopSvgCSS( $attributes ),
		@@ -154,8 +192,9 @@
154	192	'{{WRAPPER}} .ablocks-container-shape-top > svg',
155	193	$this->getContainerShapeTopSvgCSS( $attributes ),
156	194	$this->getContainerShapeTopSvgCSS( $attributes, 'Tablet' ),
157	195	$this->getContainerShapeTopSvgCSS( $attributes, 'Mobile' ),
	196	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeTopSvgCSS( $attributes, $device ); } )
158	197	);
159	198	$css_generator->add_class_styles(
160	199	'{{WRAPPER}} .ablocks-container-shape-bottom > svg',
161	200	$this->getContainerShapeBottomSvgCSS( $attributes ),
		@@ -160,8 +199,9 @@
160	199	'{{WRAPPER}} .ablocks-container-shape-bottom > svg',
161	200	$this->getContainerShapeBottomSvgCSS( $attributes ),
162	201	$this->getContainerShapeBottomSvgCSS( $attributes, 'Tablet' ),
163	202	$this->getContainerShapeBottomSvgCSS( $attributes, 'Mobile' ),
	203	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeBottomSvgCSS( $attributes, $device ); } )
164	204	);
165	205
166	206	$css_generator->add_class_styles(
167	207	'{{WRAPPER}} .ablocks-container-shape-top',
		@@ -167,8 +207,9 @@
167	207	'{{WRAPPER}} .ablocks-container-shape-top',
168	208	$this->getContainerShapeTopCSS( $attributes ),
169	209	$this->getContainerShapeTopCSS( $attributes, 'Tablet' ),
170	210	$this->getContainerShapeTopCSS( $attributes, 'Mobile' ),
	211	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeTopCSS( $attributes, $device ); } )
171	212	);
172	213	$css_generator->add_class_styles(
173	214	'{{WRAPPER}} .ablocks-container-shape-bottom',
174	215	$this->getContainerShapeBottomCSS( $attributes ),
		@@ -173,8 +214,9 @@
173	214	'{{WRAPPER}} .ablocks-container-shape-bottom',
174	215	$this->getContainerShapeBottomCSS( $attributes ),
175	216	$this->getContainerShapeBottomCSS( $attributes, 'Tablet' ),
176	217	$this->getContainerShapeBottomCSS( $attributes, 'Mobile' ),
	218	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->getContainerShapeBottomCSS( $attributes, $device ); } )
177	219	);
178	220
179	221	return $css_generator->generate_css();
180	222	}
		@@ -393,8 +435,47 @@
393	435	Dimensions::get_css( $attributes['_padding'], 'padding', $device ),
394	436	$css
395	437	);
396	438	}
	439	+
	440	+ // The container's link (HTML Tag = a) is rendered as an overlay <a>, not as
	441	+ // the wrapping tag, so nested blocks can never end up with an <a> nested
	442	+ // inside another <a>. These three methods position that overlay and lift
	443	+ // the container's real content above it so nested interactive elements
	444	+ // (e.g. an InfoBox button) stay independently clickable.
	445	+ public function get_link_overlay_wrapper_css( $attributes, $device = '' ) {
	446	+ if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
	447	+ return [];
	448	+ }
	449	+ return [ 'position' => 'relative' ];
	450	+ }
	451	+
	452	+ public function get_link_overlay_css( $attributes, $device = '' ) {
	453	+ if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
	454	+ return [];
	455	+ }
	456	+ return [
	457	+ 'position' => 'absolute',
	458	+ 'top' => '0',
	459	+ 'left' => '0',
	460	+ 'right' => '0',
	461	+ 'bottom' => '0',
	462	+ 'width' => '100%',
	463	+ 'height' => '100%',
	464	+ 'z-index' => '0',
	465	+ ];
	466	+ }
	467	+
	468	+ public function get_link_overlay_content_css( $attributes, $device = '' ) {
	469	+ if ( empty( $attributes['htmlTag'] ) || 'a' !== $attributes['htmlTag'] ) {
	470	+ return [];
	471	+ }
	472	+ return [
	473	+ 'position' => 'relative',
	474	+ 'z-index' => '1',
	475	+ ];
	476	+ }
	477	+
397	478	public static function get_container_before_css( $attributes, $device = '' ) {
398	479	if ( ! isset( $attributes['_backgroundOverlay']['backgroundOverlayType'] ) || $attributes['_backgroundOverlay']['backgroundOverlayType'] === 'none' ) {
399	480	return [];
400	481	}