Skip to content

Blocks: Use get_block_wrapper_attributes for class attributes #842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
n7studios merged 27 commits into from
Jul 10, 2025
Merged

Blocks: Use get_block_wrapper_attributes for class attributes #842

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
cafe7c5
Blocks: Use `get_block_wrapper_attributes`
n7studios Jul 3, 2025
6e51be4
Strip unnecessary classes
n7studios Jul 3, 2025
8e918fc
Skip empty values on data-* attributes
n7studios Jul 3, 2025
9212867
Broadcasts: add padding when a background color is specified
n7studios Jul 3, 2025
9437a1f
Make $content an optional parameter
n7studios Jul 3, 2025
292f4b9
Bump minimum supported WordPress version to 5.6
n7studios Jul 3, 2025
04ebced
Buttons: Set default classes to render buttons using theme colors whe…
n7studios Jul 3, 2025
bd93188
Fix tests
n7studios Jul 4, 2025
e80e44a
Fix tests
n7studios Jul 4, 2025
6899389
Coding standards
n7studios Jul 4, 2025
3a82bd9
Fix tests
n7studios Jul 4, 2025
17ccae2
Fix tests
n7studios Jul 4, 2025
2f407b4
Member Content: Include button styles
n7studios Jul 4, 2025
0d9c86a
Page Builders: Ensure WP_Block_Supports::$block_to_render is populate…
n7studios Jul 4, 2025
1a39124
PHPStan compat.
n7studios Jul 4, 2025
374855f
Fix test
n7studios Jul 4, 2025
569233f
Fix: Call `get_block_wrapper_attributes` in `get_css_styles`, to fetc…
n7studios Jul 5, 2025
3d4ec1d
Blocks: Add support for margin and padding
n7studios Jul 5, 2025
e62f3f6
Coding standards
n7studios Jul 5, 2025
7cacabc
Merge branch 'use-get-block-wrapper-attributes' into block-margin-pad…
n7studios Jul 7, 2025
7cf61f0
Add tests
n7studios Jul 7, 2025
e1b8997
Broadcasts: Don’t include container element if in the block editor
n7studios Jul 7, 2025
37c2878
Blocks: Add typography support, clear up + standardise `style`
n7studios Jul 9, 2025
6748319
Added tests
n7studios Jul 9, 2025
39ac8e4
Include `fontSize` attribute
n7studios Jul 9, 2025
dfa2481
Merge pull request #848 from Kit/block-typography
n7studios Jul 10, 2025
8fcf2e9
Merge pull request #844 from Kit/block-margin-padding-block-spacing
n7studios Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions includes/blocks/broadcasts/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,14 @@
"link": true,
"background": true,
"text": true
},
"typography": {
"fontSize": true,
"lineHeight": true
},
"spacing": {
"margin": true,
"padding": true
}
},
"editorScript": "convertkit-gutenberg"
Expand Down
41 changes: 30 additions & 11 deletions includes/blocks/class-convertkit-block-broadcasts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ public function get_attributes() {
'default' => $this->get_default_value( 'paginate_label_next' ),
),

// get_supports() color attribute.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
Expand All @@ -236,6 +236,9 @@ public function get_attributes() {
'textColor' => array(
'type' => 'string',
),
'fontSize' => array(
'type' => 'string',
),

// Always required for Gutenberg.
'is_gutenberg_example' => array(
Expand All @@ -256,12 +259,20 @@ public function get_attributes() {
public function get_supports() {

return array(
'className' => true,
'color' => array(
'className' => true,
'color' => array(
'link' => true,
'background' => true,
'text' => true,
),
'typography' => array(
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'margin' => true,
'padding' => true,
),
);

}
Expand Down Expand Up @@ -441,8 +452,8 @@ public function get_default_values() {
*
* @since 1.9.7.4
*
* @param array $atts Block / Shortcode Attributes.
* @return string Output
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
* @return string
*/
public function render( $atts ) {

Expand Down Expand Up @@ -473,15 +484,21 @@ public function render( $atts ) {
}

// Build HTML.
$html = $this->build_html( $posts, $atts );
$html = $this->build_html(
$posts,
$atts,
! $this->is_block_editor_request(),
$this->get_css_classes(),
$this->get_css_styles( $atts )
);

/**
* Filter the block's content immediately before it is output.
*
* @since 1.9.7.4
*
* @param string $html ConvertKit Broadcasts HTML.
* @param array $atts Block Attributes.
* @param string $html ConvertKit Broadcasts HTML.
* @param array $atts Block Attributes.
*/
$html = apply_filters( 'convertkit_block_broadcasts_render', $html, $atts );

Expand Down Expand Up @@ -550,9 +567,11 @@ public function render_ajax() {
* @param ConvertKit_Resource_Posts $posts ConvertKit Posts Resource class.
* @param array $atts Block attributes.
* @param bool $include_container Include container div in HTML.
* @return string HTML
* @param array $css_classes CSS classes to apply to block.
* @param array $css_styles CSS inline styles to apply to block.
* @return string
*/
private function build_html( $posts, $atts, $include_container = true ) {
private function build_html( $posts, $atts, $include_container = true, $css_classes = array(), $css_styles = array() ) {

// Get paginated subset of Posts.
$broadcasts = $posts->get_paginated_subset( $atts['page'], $atts['limit'] );
Expand All @@ -565,7 +584,7 @@ private function build_html( $posts, $atts, $include_container = true ) {

// Include container, if required.
if ( $include_container ) {
$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 ) . '>';
$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 ) . '>';
}

// Start list.
Expand Down
55 changes: 19 additions & 36 deletions includes/blocks/class-convertkit-block-form-trigger.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,42 +159,20 @@ public function get_attributes() {

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

// Color.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
'backgroundColor' => array(
'type' => 'string',
),
'textColor' => array(
'type' => 'string',
),

// Typography.
'fontSize' => array(
'type' => 'string',
),

// Spacing/Dimensions > Padding.
'style' => array(
'type' => 'object',
'visualizers' => array(
'type' => 'object',
'padding' => array(
'type' => 'object',
'top' => array(
'type' => 'boolean',
),
'bottom' => array(
'type' => 'boolean',
),
'left' => array(
'type' => 'boolean',
),
'right' => array(
'type' => 'boolean',
),
),
),
),

// Always required for Gutenberg.
'is_gutenberg_example' => array(
'type' => 'boolean',
Expand Down Expand Up @@ -225,13 +203,12 @@ public function get_supports() {
'__experimentalSkipSerialization' => true,
),
'typography' => array(
'fontSize' => true,
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'padding' => array(
'horizontal',
'vertical',
),
'margin' => true,
'padding' => true,
),
);

Expand Down Expand Up @@ -363,8 +340,8 @@ public function get_default_values() {
*
* @since 2.2.0
*
* @param array $atts Block / Shortcode Attributes.
* @return string Output
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
* @return string
*/
public function render( $atts ) {

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

// Build HTML.
$html = $this->get_html( $atts['form'], $atts['text'], $atts['_css_classes'], $atts['_css_styles'], $this->is_block_editor_request() );
$html = $this->get_html(
$atts['form'],
$atts['text'],
$this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ),
$this->get_css_styles( $atts ),
$this->is_block_editor_request()
);

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

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

if ( $return_as_span ) {
Expand Down
47 changes: 12 additions & 35 deletions includes/blocks/class-convertkit-block-product.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,42 +195,20 @@ public function get_attributes() {

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

// Color.
// get_supports() style, color and typography attributes.
'style' => array(
'type' => 'object',
),
'backgroundColor' => array(
'type' => 'string',
),
'textColor' => array(
'type' => 'string',
),

// Typography.
'fontSize' => array(
'type' => 'string',
),

// Spacing/Dimensions > Padding.
'style' => array(
'type' => 'object',
'visualizers' => array(
'type' => 'object',
'padding' => array(
'type' => 'object',
'top' => array(
'type' => 'boolean',
),
'bottom' => array(
'type' => 'boolean',
),
'left' => array(
'type' => 'boolean',
),
'right' => array(
'type' => 'boolean',
),
),
),
),

// Always required for Gutenberg.
'is_gutenberg_example' => array(
'type' => 'boolean',
Expand Down Expand Up @@ -261,13 +239,12 @@ public function get_supports() {
'__experimentalSkipSerialization' => true,
),
'typography' => array(
'fontSize' => true,
'fontSize' => true,
'lineHeight' => true,
),
'spacing' => array(
'padding' => array(
'horizontal',
'vertical',
),
'margin' => true,
'padding' => true,
),
);

Expand Down Expand Up @@ -414,8 +391,8 @@ public function get_default_values() {
*
* @since 1.9.8.5
*
* @param array $atts Block / Shortcode Attributes.
* @return string Output
* @param array $atts Block / Shortcode / Page Builder Module Attributes.
* @return string
*/
public function render( $atts ) {

Expand All @@ -437,8 +414,8 @@ public function render( $atts ) {
'discount_code' => $atts['discount_code'],
'checkout' => $atts['checkout'],
'disable_modal' => ( $atts['disable_modal_on_mobile'] && wp_is_mobile() ),
'css_classes' => $atts['_css_classes'],
'css_styles' => $atts['_css_styles'],
'css_classes' => $this->get_css_classes( array( 'wp-block-button__link', 'wp-element-button' ) ),
'css_styles' => $this->get_css_styles( $atts ),
'return_as_span' => $this->is_block_editor_request(),
)
);
Expand Down
Loading