PluginProbe
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder / 2.14.0
aBlocks – Gutenberg Blocks, User Dashboard Builder, Popup Builder, Form Builder & Animation Builder v2.14.0
2.14.0 2.13.0 2.13.1 2.12.0 2.11.1 2.11.0 2.10.0 2.9.0 2.7.4 2.7.5 2.7.6 2.7.7 2.8.0 2.8.1 2.9.1 trunk 1.0 1.0-beta1 1.0-beta2 1.0-beta3 1.0.1 1.0.2 1.0.3 1.1.0 1.1.1 All 81 releases
← All changes | includes/blocks/accordion/block.php +174 -80 2.9.1 → 2.14.0 View file →
@@ -6,8 +6,9 @@
6 6 }
7 7
8 8 use ABlocks\Classes\BlockBaseAbstract;
9 9 use ABlocks\Classes\CssGenerator;
10 +use ABlocks\Classes\CssGeneratorV2;
10 11 use ABlocks\Helper;
11 12 use ABlocks\Controls\Typography;
12 13 use ABlocks\Controls\TextShadow;
13 14 use ABlocks\Controls\TextStroke;
@@ -15,13 +16,59 @@
15 16 use ABlocks\Controls\Border;
16 17 use ABlocks\Controls\Dimensions;
17 18 use ABlocks\Controls\Alignment;
18 19 use ABlocks\Controls\Range;
20 +use ABlocks\Controls\Color;
19 21
20 22 class Block extends BlockBaseAbstract {
21 23 protected $block_name = 'accordion';
22 24
23 - public function build_css( $attributes ) {
25 + public function render_callback( $attributes, $content, $block_instance ) {
26 + $content = parent::render_callback( $attributes, $content, $block_instance );
27 + if ( ! empty( $attributes['enableFaqSchema'] ) ) {
28 + static $faq_schema_rendered = false;
29 + if ( ! $faq_schema_rendered ) {
30 + $schema = $this->generate_faq_schema( $block_instance );
31 + if ( $schema ) {
32 + $content .= '<script type="application/ld+json">' . wp_json_encode( $schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES ) . '</script>';
33 + $faq_schema_rendered = true;
34 + }
35 + }
36 + }
37 + return $content;
38 + }
39 +
40 + private function generate_faq_schema( $block_instance ) {
41 + $items = [];
42 + foreach ( $block_instance->inner_blocks as $inner_block ) {
43 + if ( $inner_block->name !== 'ablocks/single-accordion' ) {
44 + continue;
45 + }
46 + $question = isset( $inner_block->attributes['accordionTitle'] ) ? wp_strip_all_tags( $inner_block->attributes['accordionTitle'] ) : '';
47 + $answer_parts = [];
48 + foreach ( $inner_block->inner_blocks as $child ) {
49 + $answer_parts[] = wp_strip_all_tags( render_block( $child->parsed_block ) );
50 + }
51 + $answer = trim( preg_replace( '/\s+/', ' ', implode( ' ', $answer_parts ) ) );
52 + if ( $question && $answer ) {
53 + $items[] = [
54 + '@type' => 'Question',
55 + 'name' => $question,
56 + 'acceptedAnswer' => [ '@type' => 'Answer', 'text' => $answer ],
57 + ];
58 + }
59 + }
60 + if ( empty( $items ) ) {
61 + return null;
62 + }
63 + return [
64 + '@context' => 'https://schema.org',
65 + '@type' => 'FAQPage',
66 + 'mainEntity' => $items,
67 + ];
68 + }
69 +
70 + public function build_css_v1( $attributes ) {
24 71 $css_generator = new CssGenerator( $attributes );
25 72
26 73 $css_generator->add_class_styles(
27 74 '{{WRAPPER}} .ablocks-block--single-accordion',
@@ -26,39 +73,45 @@
26 73 $css_generator->add_class_styles(
27 74 '{{WRAPPER}} .ablocks-block--single-accordion',
28 75 $this->get_item_css( $attributes ),
29 76 $this->get_item_css( $attributes, 'Tablet' ),
30 - $this->get_item_css( $attributes, 'Mobile' )
77 + $this->get_item_css( $attributes, 'Mobile' ),
78 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_css( $attributes, $device ); } )
31 79 );
32 80 $css_generator->add_class_styles(
33 81 '{{WRAPPER}} .ablocks-block--single-accordion:hover',
34 82 $this->get_item_hover_css( $attributes ),
35 83 $this->get_item_hover_css( $attributes, 'Tablet' ),
36 - $this->get_item_hover_css( $attributes, 'Mobile' )
84 + $this->get_item_hover_css( $attributes, 'Mobile' ),
85 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_hover_css( $attributes, $device ); } )
37 86 );
38 87 $css_generator->add_class_styles(
39 88 '{{WRAPPER}} .ablocks-block--single-accordion__heading .ablocks-block-accordion-title',
40 89 $this->get_title_css( $attributes ),
41 90 $this->get_title_css( $attributes, 'Tablet' ),
42 - $this->get_title_css( $attributes, 'Mobile' )
91 + $this->get_title_css( $attributes, 'Mobile' ),
92 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_css( $attributes, $device ); } )
43 93 );
44 94 $css_generator->add_class_styles(
45 95 '{{WRAPPER}} .ablocks-block--single-accordion__heading:hover .ablocks-block-accordion-title',
46 96 $this->get_title_hover_css( $attributes ),
47 97 $this->get_title_hover_css( $attributes, 'Tablet' ),
48 - $this->get_title_hover_css( $attributes, 'Mobile' )
98 + $this->get_title_hover_css( $attributes, 'Mobile' ),
99 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_hover_css( $attributes, $device ); } )
49 100 );
50 101 $css_generator->add_class_styles(
51 102 '{{WRAPPER}} .ablocks-block--single-accordion-is-selected .ablocks-block-accordion-title',
52 103 $this->get_title_active_css( $attributes ),
53 104 $this->get_title_active_css( $attributes, 'Tablet' ),
54 - $this->get_title_active_css( $attributes, 'Mobile' )
105 + $this->get_title_active_css( $attributes, 'Mobile' ),
106 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_active_css( $attributes, $device ); } )
55 107 );
56 108 $css_generator->add_class_styles(
57 109 '{{WRAPPER}} .ablocks-block--single-accordion__heading',
58 110 $this->get_panel_css( $attributes ),
59 111 $this->get_panel_css( $attributes, 'Tablet' ),
60 - $this->get_panel_css( $attributes, 'Mobile' )
112 + $this->get_panel_css( $attributes, 'Mobile' ),
113 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_css( $attributes, $device ); } )
61 114 );
62 115 $css_generator->add_class_styles(
63 116 '{{WRAPPER}} .ablocks-block--single-accordion__heading:hover',
64 117 $this->get_panel_hover_css( $attributes ),
@@ -68,9 +121,10 @@
68 121 $css_generator->add_class_styles(
69 122 '{{WRAPPER}} .ablocks-block--single-accordion-is-selected .ablocks-block--single-accordion__heading',
70 123 $this->get_panel_active_css( $attributes ),
71 124 $this->get_panel_active_css( $attributes, 'Tablet' ),
72 - $this->get_panel_active_css( $attributes, 'Mobile' )
125 + $this->get_panel_active_css( $attributes, 'Mobile' ),
126 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_active_css( $attributes, $device ); } )
73 127 );
74 128 $css_generator->add_class_styles(
75 129 '{{WRAPPER}} .ablocks-block--single-accordion__heading svg.ablocks-svg-icon',
76 130 $this->get_icon_css( $attributes )
@@ -86,18 +140,113 @@
86 140 $css_generator->add_class_styles(
87 141 '{{WRAPPER}} .ablocks-block--single-accordion__body-content',
88 142 $this->get_content_css( $attributes ),
89 143 $this->get_content_css( $attributes, 'Tablet' ),
90 - $this->get_content_css( $attributes, 'Mobile' )
144 + $this->get_content_css( $attributes, 'Mobile' ),
145 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_css( $attributes, $device ); } )
91 146 );
92 147 $css_generator->add_class_styles(
93 148 '{{WRAPPER}} .ablocks-block--single-accordion__body-content:hover',
94 149 $this->get_content_hover_css( $attributes ),
95 150 $this->get_content_hover_css( $attributes, 'Tablet' ),
96 - $this->get_content_hover_css( $attributes, 'Mobile' )
151 + $this->get_content_hover_css( $attributes, 'Mobile' ),
152 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_hover_css( $attributes, $device ); } )
97 153 );
98 154 return $css_generator->generate_css();
99 155 }
156 + public function build_css_v2( $attributes ) {
157 + $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
158 +
159 + $css_generator->add_class_styles(
160 + '{{WRAPPER}} .ablocks-block--single-accordion',
161 + $this->get_item_css( $attributes ),
162 + $this->get_item_css( $attributes, 'Tablet' ),
163 + $this->get_item_css( $attributes, 'Mobile' ),
164 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_css( $attributes, $device ); } )
165 + );
166 + $css_generator->add_class_styles(
167 + '{{WRAPPER}} .ablocks-block--single-accordion:hover',
168 + $this->get_item_hover_css( $attributes ),
169 + $this->get_item_hover_css( $attributes, 'Tablet' ),
170 + $this->get_item_hover_css( $attributes, 'Mobile' ),
171 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_item_hover_css( $attributes, $device ); } )
172 + );
173 + $css_generator->add_class_styles(
174 + '{{WRAPPER}} .ablocks-block--single-accordion__heading .ablocks-block-accordion-title',
175 + $this->get_title_css( $attributes ),
176 + $this->get_title_css( $attributes, 'Tablet' ),
177 + $this->get_title_css( $attributes, 'Mobile' ),
178 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_css( $attributes, $device ); } )
179 + );
180 + $css_generator->add_class_styles(
181 + '{{WRAPPER}} .ablocks-block--single-accordion__heading:hover .ablocks-block-accordion-title',
182 + $this->get_title_hover_css( $attributes ),
183 + $this->get_title_hover_css( $attributes, 'Tablet' ),
184 + $this->get_title_hover_css( $attributes, 'Mobile' ),
185 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_hover_css( $attributes, $device ); } )
186 + );
187 + $css_generator->add_class_styles(
188 + '{{WRAPPER}} .ablocks-block--single-accordion-is-selected .ablocks-block-accordion-title',
189 + $this->get_title_active_css( $attributes ),
190 + $this->get_title_active_css( $attributes, 'Tablet' ),
191 + $this->get_title_active_css( $attributes, 'Mobile' ),
192 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_title_active_css( $attributes, $device ); } )
193 + );
194 + $css_generator->add_class_styles(
195 + '{{WRAPPER}} .ablocks-block--single-accordion__heading',
196 + $this->get_panel_css( $attributes ),
197 + $this->get_panel_css( $attributes, 'Tablet' ),
198 + $this->get_panel_css( $attributes, 'Mobile' ),
199 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_css( $attributes, $device ); } )
200 + );
201 + $css_generator->add_class_styles(
202 + '{{WRAPPER}} .ablocks-block--single-accordion__heading:hover',
203 + $this->get_panel_hover_css( $attributes ),
204 + $this->get_panel_hover_css( $attributes, 'Tablet' ),
205 + $this->get_panel_hover_css( $attributes, 'Mobile' ),
206 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_hover_css( $attributes, $device ); } )
207 + );
208 + $css_generator->add_class_styles(
209 + '{{WRAPPER}} .ablocks-block--single-accordion-is-selected .ablocks-block--single-accordion__heading',
210 + $this->get_panel_active_css( $attributes ),
211 + $this->get_panel_active_css( $attributes, 'Tablet' ),
212 + $this->get_panel_active_css( $attributes, 'Mobile' ),
213 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_panel_active_css( $attributes, $device ); } )
214 + );
215 + $css_generator->add_class_styles(
216 + '{{WRAPPER}} .ablocks-block--single-accordion__heading svg.ablocks-svg-icon',
217 + $this->get_icon_css( $attributes )
218 + );
219 + $css_generator->add_class_styles(
220 + '{{WRAPPER}} .ablocks-block--single-accordion__heading:hover svg.ablocks-svg-icon',
221 + $this->get_icon_hover_css( $attributes )
222 + );
223 + $css_generator->add_class_styles(
224 + '{{WRAPPER}} .ablocks-block--single-accordion-is-selected svg.ablocks-svg-icon',
225 + $this->get_icon_active_css( $attributes )
226 + );
227 + $css_generator->add_class_styles(
228 + '{{WRAPPER}} .ablocks-block--single-accordion__body-content',
229 + $this->get_content_css( $attributes ),
230 + $this->get_content_css( $attributes, 'Tablet' ),
231 + $this->get_content_css( $attributes, 'Mobile' ),
232 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_css( $attributes, $device ); } )
233 + );
234 + $css_generator->add_class_styles(
235 + '{{WRAPPER}} .ablocks-block--single-accordion__body-content:hover',
236 + $this->get_content_hover_css( $attributes ),
237 + $this->get_content_hover_css( $attributes, 'Tablet' ),
238 + $this->get_content_hover_css( $attributes, 'Mobile' ),
239 + $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_content_hover_css( $attributes, $device ); } )
240 + );
241 + return $css_generator->generate_css();
242 + }
243 + public function build_css( $attributes ) {
244 + if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
245 + return $this->build_css_v2( $attributes );
246 + }
247 + return $this->build_css_v1( $attributes );
248 + }
100 249 public function get_item_css( $attributes, $device = '' ) {
101 250 $css = [];
102 251
103 252 return array_merge(
@@ -121,14 +270,12 @@
121 270 isset( $attributes['itemBorder'] ) ? Border::get_hover_css( $attributes['itemBorder'], '', $device ) : []
122 271 );
123 272 }
124 273 public function get_title_css( $attributes, $device = '' ) {
125 - $css = [];
126 - if ( ! empty( $attributes['headerTextColor'] ) ) {
127 - $css['color'] = $attributes['headerTextColor'];
128 - }
129 -
274 + $typographyValueGlobal = ! empty( $attributes['headerTypographyGlobal'] ) ? $attributes['headerTypographyGlobal'] : '';
275 + $typography_value = isset( $attributes['headerTypography'] ) ? $attributes['headerTypography'] : [];
130 276 return array_merge(
277 + [ 'color' => Color::get_css( isset( $attributes['headerTextColor'] ) ? $attributes['headerTextColor'] : '' ) ],
131 278 Range::get_css([
132 279 'attributeValue' => $attributes['iconSpace'],
133 280 'attribute_object_key' => 'value',
134 281 'isResponsive' => false,
@@ -135,70 +282,38 @@
135 282 'defaultValue' => 10,
136 283 'property' => 'margin-left',
137 284 'device' => $device,
138 285 ]),
139 - $css,
140 - Typography::get_css( $attributes['headerTypography'], '', $device ),
286 + Typography::get_css( $typography_value, '', $device, $typographyValueGlobal ),
141 287 TextShadow::get_css( $attributes['headerTextShadow'], '', $device ),
142 288 TextStroke::get_css( $attributes['headerTextStroke'], '', $device )
143 289 );
144 290 }
145 291 public function get_title_hover_css( $attributes, $device = '' ) {
146 - $css = [];
147 - if ( ! empty( $attributes['headerTextColorH'] ) ) {
148 - $css['color'] = $attributes['headerTextColorH'];
149 - }
150 - return array_merge(
151 - $css,
152 - );
292 + return [ 'color' => Color::get_css( isset( $attributes['headerTextColorH'] ) ? $attributes['headerTextColorH'] : '' ) ];
153 293 }
154 294 public function get_title_active_css( $attributes, $device = '' ) {
155 - $css = [];
156 - if ( ! empty( $attributes['headerTextActiveColor'] ) ) {
157 - $css['color'] = $attributes['headerTextActiveColor'];
158 - }
159 - return array_merge(
160 - $css,
161 - );
295 + return [ 'color' => Color::get_css( isset( $attributes['headerTextActiveColor'] ) ? $attributes['headerTextActiveColor'] : '' ) ];
162 296 }
163 297 public function get_panel_css( $attributes, $device = '' ) {
164 - $css = [];
165 - if ( ! empty( $attributes['headerBackgroundColor'] ) ) {
166 - $css['background'] = $attributes['headerBackgroundColor'];
167 - }
168 298 return array_merge(
169 - $css,
299 + [ 'background' => Color::get_css( isset( $attributes['headerBackgroundColor'] ) ? $attributes['headerBackgroundColor'] : '' ) ],
170 300 isset( $attributes['headerBorder'] ) ? Border::get_css( $attributes['headerBorder'], '', $device ) : [],
171 301 isset( $attributes['headerPadding'] ) ? Dimensions::get_css( $attributes['headerPadding'], 'padding', $device ) : []
172 302 );
173 303 }
174 304 public function get_panel_hover_css( $attributes, $device = '' ) {
175 - $css = [];
176 - if ( ! empty( $attributes['headerBackgroundColorH'] ) ) {
177 - $css['background'] = $attributes['headerBackgroundColorH'];
178 - }
179 305 return array_merge(
180 - $css,
306 + [ 'background' => Color::get_css( isset( $attributes['headerBackgroundColorH'] ) ? $attributes['headerBackgroundColorH'] : '' ) ],
181 307 isset( $attributes['headerBorder'] ) ? Border::get_hover_css( $attributes['headerBorder'], '', $device ) : []
182 308 );
183 309 }
184 310 public function get_panel_active_css( $attributes, $device = '' ) {
185 - $css = [];
186 - if ( ! empty( $attributes['headerBackgroundActiveColor'] ) ) {
187 - $css['background'] = $attributes['headerBackgroundActiveColor'];
188 - }
189 - return array_merge(
190 - $css,
191 - );
311 + return [ 'background' => Color::get_css( isset( $attributes['headerBackgroundActiveColor'] ) ? $attributes['headerBackgroundActiveColor'] : '' ) ];
192 312 }
193 313 public function get_icon_css( $attributes, $device = '' ) {
194 - $css = [];
195 -
196 - if ( ! empty( $attributes['iconColor'] ) ) {
197 - $css['fill'] = $attributes['iconColor'];
198 - }
199 314 return array_merge(
200 - $css,
315 + [ 'fill' => Color::get_css( isset( $attributes['iconColor'] ) ? $attributes['iconColor'] : '' ) ],
201 316 Range::get_css([
202 317 'attributeValue' => $attributes['iconSize'],
203 318 'attribute_object_key' => 'value',
204 319 'isResponsive' => false,
@@ -208,42 +323,21 @@
208 323 ]),
209 324 );
210 325 }
211 326 public function get_icon_hover_css( $attributes ) {
212 - $css = [];
213 - if ( ! empty( $attributes['iconColorH'] ) ) {
214 - $css['fill'] = $attributes['iconColorH'];
215 - }
216 - return array_merge(
217 - $css,
218 - );
327 + return [ 'fill' => Color::get_css( isset( $attributes['iconColorH'] ) ? $attributes['iconColorH'] : '' ) ];
219 328 }
220 329 public function get_icon_active_css( $attributes ) {
221 - $css = [];
222 - if ( ! empty( $attributes['iconActiveColor'] ) ) {
223 - $css['fill'] = $attributes['iconActiveColor'];
224 - }
225 - return array_merge(
226 - $css,
227 - );
330 + return [ 'fill' => Color::get_css( isset( $attributes['iconActiveColor'] ) ? $attributes['iconActiveColor'] : '' ) ];
228 331 }
229 332 public function get_content_css( $attributes, $device = '' ) {
230 - $css = [];
231 - if ( ! empty( $attributes['bodyBackground'] ) ) {
232 - $css['background'] = $attributes['bodyBackground'];
233 - }
234 333 return array_merge(
235 - $css,
334 + [ 'background' => Color::get_css( isset( $attributes['bodyBackground'] ) ? $attributes['bodyBackground'] : '' ) ],
236 335 isset( $attributes['bodyPadding'] ) ? Dimensions::get_css( $attributes['bodyPadding'], 'padding', $device ) : []
237 336 );
238 337 }
239 338 public function get_content_hover_css( $attributes, $device = '' ) {
240 - $css = [];
241 - if ( ! empty( $attributes['bodyBackgroundH'] ) ) {
242 - $css['background'] = $attributes['bodyBackgroundH'];
243 - }
244 - return array_merge(
245 - $css,
246 - );
339 +
340 + return [ 'background' => Color::get_css( isset( $attributes['bodyBackgroundH'] ) ? $attributes['bodyBackgroundH'] : '' ) ];
247 341
248 342 }
249 343 }