Skip to content

Commit 15f520a

Browse files
n7studiosn7studios
authored
Merge pull request #842 from Kit/use-get-block-wrapper-attributes
Blocks: Use `get_block_wrapper_attributes` for `class` attributes
2 parents 623fb9b + 8fcf2e9 commit 15f520a

21 files changed

Lines changed: 552 additions & 257 deletions

‎includes/blocks/broadcasts/block.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,14 @@
6161
"link": true,
6262
"background": true,
6363
"text": true
64+
},
65+
"typography": {
66+
"fontSize": true,
67+
"lineHeight": true
68+
},
69+
"spacing": {
70+
"margin": true,
71+
"padding": true
6472
}
6573
},
6674
"editorScript": "convertkit-gutenberg"

‎includes/blocks/class-convertkit-block-broadcasts.php‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ public function get_attributes() {
230230
'default' => $this->get_default_value( 'paginate_label_next' ),
231231
),
232232

233-
// get_supports() color attribute.
233+
// get_supports() style, color and typography attributes.
234234
'style' => array(
235235
'type' => 'object',
236236
),
@@ -240,6 +240,9 @@ public function get_attributes() {
240240
'textColor' => array(
241241
'type' => 'string',
242242
),
243+
'fontSize' => array(
244+
'type' => 'string',
245+
),
243246

244247
// Always required for Gutenberg.
245248
'is_gutenberg_example' => array(
@@ -260,12 +263,20 @@ public function get_attributes() {
260263
public function get_supports() {
261264

262265
return array(
263-
'className' => true,
264-
'color' => array(
266+
'className' => true,
267+
'color' => array(
265268
'link' => true,
266269
'background' => true,
267270
'text' => true,
268271
),
272+
'typography' => array(
273+
'fontSize' => true,
274+
'lineHeight' => true,
275+
),
276+
'spacing' => array(
277+
'margin' => true,
278+
'padding' => true,
279+
),
269280
);
270281

271282
}
@@ -455,8 +466,8 @@ public function get_default_values() {
455466
*
456467
* @since 1.9.7.4
457468
*
458-
* @param array $atts Block / Shortcode Attributes.
459-
* @return string Output
469+
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
470+
* @return string
460471
*/
461472
public function render( $atts ) {
462473

@@ -487,15 +498,21 @@ public function render( $atts ) {
487498
}
488499

489500
// Build HTML.
490-
$html = $this->build_html( $posts, $atts );
501+
$html = $this->build_html(
502+
$posts,
503+
$atts,
504+
! $this->is_block_editor_request(),
505+
$this->get_css_classes(),
506+
$this->get_css_styles( $atts )
507+
);
491508

492509
/**
493510
* Filter the block's content immediately before it is output.
494511
*
495512
* @since 1.9.7.4
496513
*
497-
* @param string $html ConvertKit Broadcasts HTML.
498-
* @param array $atts Block Attributes.
514+
* @param string $html ConvertKit Broadcasts HTML.
515+
* @param array $atts Block Attributes.
499516
*/
500517
$html = apply_filters( 'convertkit_block_broadcasts_render', $html, $atts );
501518

@@ -564,9 +581,11 @@ public function render_ajax() {
564581
* @param ConvertKit_Resource_Posts $posts ConvertKit Posts Resource class.
565582
* @param array $atts Block attributes.
566583
* @param bool $include_container Include container div in HTML.
567-
* @return string HTML
584+
* @param array $css_classes CSS classes to apply to block.
585+
* @param array $css_styles CSS inline styles to apply to block.
586+
* @return string
568587
*/
569-
private function build_html( $posts, $atts, $include_container = true ) {
588+
private function build_html( $posts, $atts, $include_container = true, $css_classes = array(), $css_styles = array() ) {
570589

571590
// Get paginated subset of Posts.
572591
$broadcasts = $posts->get_paginated_subset( $atts['page'], $atts['limit'] );
@@ -579,7 +598,7 @@ private function build_html( $posts, $atts, $include_container = true ) {
579598

580599
// Include container, if required.
581600
if ( $include_container ) {
582-
$html .= '<div class="' . implode( ' ', map_deep( $atts['_css_classes'], 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $atts['_css_styles'], 'esc_attr' ) ) . '" ' . $this->get_atts_as_html_data_attributes( $atts ) . '>';
601+
$html .= '<div class="' . implode( ' ', map_deep( $css_classes, 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $css_styles, 'esc_attr' ) ) . '" ' . $this->get_atts_as_html_data_attributes( $atts ) . '>';
583602
}
584603

585604
// Start list.

‎includes/blocks/class-convertkit-block-form-trigger.php‎

Lines changed: 19 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -159,42 +159,20 @@ public function get_attributes() {
159159

160160
// The below are built in Gutenberg attributes registered in get_supports().
161161

162-
// Color.
162+
// get_supports() style, color and typography attributes.
163+
'style' => array(
164+
'type' => 'object',
165+
),
163166
'backgroundColor' => array(
164167
'type' => 'string',
165168
),
166169
'textColor' => array(
167170
'type' => 'string',
168171
),
169-
170-
// Typography.
171172
'fontSize' => array(
172173
'type' => 'string',
173174
),
174175

175-
// Spacing/Dimensions > Padding.
176-
'style' => array(
177-
'type' => 'object',
178-
'visualizers' => array(
179-
'type' => 'object',
180-
'padding' => array(
181-
'type' => 'object',
182-
'top' => array(
183-
'type' => 'boolean',
184-
),
185-
'bottom' => array(
186-
'type' => 'boolean',
187-
),
188-
'left' => array(
189-
'type' => 'boolean',
190-
),
191-
'right' => array(
192-
'type' => 'boolean',
193-
),
194-
),
195-
),
196-
),
197-
198176
// Always required for Gutenberg.
199177
'is_gutenberg_example' => array(
200178
'type' => 'boolean',
@@ -225,13 +203,12 @@ public function get_supports() {
225203
'__experimentalSkipSerialization' => true,
226204
),
227205
'typography' => array(
228-
'fontSize' => true,
206+
'fontSize' => true,
207+
'lineHeight' => true,
229208
),
230209
'spacing' => array(
231-
'padding' => array(
232-
'horizontal',
233-
'vertical',
234-
),
210+
'margin' => true,
211+
'padding' => true,
235212
),
236213
);
237214

@@ -363,8 +340,8 @@ public function get_default_values() {
363340
*
364341
* @since 2.2.0
365342
*
366-
* @param array $atts Block / Shortcode Attributes.
367-
* @return string Output
343+
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
344+
* @return string
368345
*/
369346
public function render( $atts ) {
370347

@@ -376,7 +353,13 @@ public function render( $atts ) {
376353
$settings = new ConvertKit_Settings();
377354

378355
// Build HTML.
379-
$html = $this->get_html( $atts['form'], $atts['text'], $atts['_css_classes'], $atts['_css_styles'], $this->is_block_editor_request() );
356+
$html = $this->get_html(
357+
$atts['form'],
358+
$atts['text'],
359+
$this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ),
360+
$this->get_css_styles( $atts ),
361+
$this->is_block_editor_request()
362+
);
380363

381364
// Bail if an error occured.
382365
if ( is_wp_error( $html ) ) {
@@ -409,7 +392,7 @@ public function render( $atts ) {
409392
* @param int $id Form ID.
410393
* @param string $button_text Button Text.
411394
* @param array $css_classes CSS classes to apply to link (typically included when using Gutenberg).
412-
* @param array $css_styles CSS inline styles to apply to link (typically included when using Gutenberg).
395+
* @param array $css_styles CSS inline styles to apply to link (typically included when using Shortcode or third party page builder module / widget).
413396
* @param bool $return_as_span If true, returns a <span> instead of <a>. Useful for the block editor so that the element is interactible.
414397
* @return WP_Error|string Button HTML
415398
*/
@@ -467,7 +450,7 @@ private function get_html( $id, $button_text, $css_classes = array(), $css_style
467450
$html .= '<a data-formkit-toggle="' . esc_attr( $form['uid'] ) . '" href="' . esc_url( $form['embed_url'] ) . '"';
468451
}
469452

470-
$html .= ' class="wp-block-button__link ' . implode( ' ', map_deep( $css_classes, 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $css_styles, 'esc_attr' ) ) . '">';
453+
$html .= ' class="' . implode( ' ', map_deep( $css_classes, 'sanitize_html_class' ) ) . '" style="' . implode( ';', map_deep( $css_styles, 'esc_attr' ) ) . '">';
471454
$html .= esc_html( $button_text );
472455

473456
if ( $return_as_span ) {

‎includes/blocks/class-convertkit-block-product.php‎

Lines changed: 12 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -195,42 +195,20 @@ public function get_attributes() {
195195

196196
// The below are built in Gutenberg attributes registered in get_supports().
197197

198-
// Color.
198+
// get_supports() style, color and typography attributes.
199+
'style' => array(
200+
'type' => 'object',
201+
),
199202
'backgroundColor' => array(
200203
'type' => 'string',
201204
),
202205
'textColor' => array(
203206
'type' => 'string',
204207
),
205-
206-
// Typography.
207208
'fontSize' => array(
208209
'type' => 'string',
209210
),
210211

211-
// Spacing/Dimensions > Padding.
212-
'style' => array(
213-
'type' => 'object',
214-
'visualizers' => array(
215-
'type' => 'object',
216-
'padding' => array(
217-
'type' => 'object',
218-
'top' => array(
219-
'type' => 'boolean',
220-
),
221-
'bottom' => array(
222-
'type' => 'boolean',
223-
),
224-
'left' => array(
225-
'type' => 'boolean',
226-
),
227-
'right' => array(
228-
'type' => 'boolean',
229-
),
230-
),
231-
),
232-
),
233-
234212
// Always required for Gutenberg.
235213
'is_gutenberg_example' => array(
236214
'type' => 'boolean',
@@ -261,13 +239,12 @@ public function get_supports() {
261239
'__experimentalSkipSerialization' => true,
262240
),
263241
'typography' => array(
264-
'fontSize' => true,
242+
'fontSize' => true,
243+
'lineHeight' => true,
265244
),
266245
'spacing' => array(
267-
'padding' => array(
268-
'horizontal',
269-
'vertical',
270-
),
246+
'margin' => true,
247+
'padding' => true,
271248
),
272249
);
273250

@@ -414,8 +391,8 @@ public function get_default_values() {
414391
*
415392
* @since 1.9.8.5
416393
*
417-
* @param array $atts Block / Shortcode Attributes.
418-
* @return string Output
394+
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
395+
* @return string
419396
*/
420397
public function render( $atts ) {
421398

@@ -437,8 +414,8 @@ public function render( $atts ) {
437414
'discount_code' => $atts['discount_code'],
438415
'checkout' => $atts['checkout'],
439416
'disable_modal' => ( $atts['disable_modal_on_mobile'] && wp_is_mobile() ),
440-
'css_classes' => $atts['_css_classes'],
441-
'css_styles' => $atts['_css_styles'],
417+
'css_classes' => $this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ),
418+
'css_styles' => $this->get_css_styles( $atts ),
442419
'return_as_span' => $this->is_block_editor_request(),
443420
)
444421
);

0 commit comments

Comments
 (0)