Skip to content
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

Jump to bottom

Gutenblocks: add new utility to get all classes for a given block #13302

Merged
merged 5 commits into from
Aug 26, 2019
Merged

Gutenblocks: add new utility to get all classes for a given block #13302

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e5a38a0
Gutenberg: add new utility to get all CSS classes for a block.
jeherve Aug 22, 2019
10708f1
Use new block_classes in all blocks that rely on classes.
jeherve Aug 22, 2019
f8914ba
Escape class output
jeherve Aug 23, 2019
b3546c7
Omit the data type from the description
jeherve Aug 23, 2019
6694fae
Check if empty instead of isset
jeherve Aug 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
42 changes: 42 additions & 0 deletions class.jetpack-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -689,4 +689,46 @@ public static function load_independent_blocks() {
}
}
}

/**
* Get CSS classes for a block.
*
* @since 7.7.0
*
* @param string $slug Block slug.
* @param array $attr Block attributes.
* @param array $extra Potential extra classes you may want to provide.
*
* @return string $classes List of CSS classes for a block.
*/
public static function block_classes( $slug = '', $attr, $extra = array() ) {
if ( empty( $slug ) ) {
return '';
}

// Basic block name class.
$classes = array(
'wp-block-jetpack-' . $slug,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noting that (I think) setting className:false in block's supports attributes would normally disable the primary class name as well but this always enforces it.

I don't think we'll ever have any such blocks in Jetpack so it doesn't really matter, but wanted to note in case anyone looks up this PR later on for inspiration to implement this also in core Gutenberg.

);

// Add alignment if provided.
if (
! empty( $attr['align'] )
&& in_array( $attr['align'], array( 'left', 'center', 'right', 'wide', 'full' ), true )
) {
array_push( $classes, 'align' . $attr['align'] );
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we even have to take care of alignment? I thought we could pretty much rely on Gutenberg's supports feature for alignment... 🤔 I'll try to dig up a PR I vaguely recall where I was doing something like that...

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think some of our blocks are little old in that we handled it manually. Gutenberg's support might be purely frontend side and backend side has to be handled manually like this?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For reference, this is the commit I was thinking of: Automattic/wp-calypso@d675ab0

I'll see if that kind of change can be applied here...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, nevermind, that doesn't really apply to dynamic blocks/the server side/PHP.


// Add custom classes if provided in the block editor.
if ( ! empty( $attr['className'] ) ) {
array_push( $classes, $attr['className'] );
}

// Add any extra classes.
if ( is_array( $extra ) && ! empty( $extra ) ) {
$classes = array_merge( $classes, $extra );
}

return implode( $classes, ' ' );
}
}
13 changes: 2 additions & 11 deletions extensions/blocks/gif/gif.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,8 @@ function jetpack_gif_block_render( $attr ) {
return null;
}

/* TODO: replace with centralized block_class function */
$align = isset( $attr['align'] ) ? $attr['align'] : 'center';
$type = 'gif';
$classes = array(
'wp-block-jetpack-' . $type,
'align' . $align,
);
if ( isset( $attr['className'] ) ) {
array_push( $classes, $attr['className'] );
}
$classes = implode( $classes, ' ' );
$classes = Jetpack_Gutenberg::block_classes( 'gif', $attr );

$placeholder = sprintf( '<a href="%s">%s</a>', esc_url( $giphy_url ), esc_attr( $search_text ) );

ob_start();
Expand Down
12 changes: 1 addition & 11 deletions extensions/blocks/mailchimp/mailchimp.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,7 @@ function jetpack_mailchimp_block_load_assets( $attr ) {

$values['submitButtonText'] = empty( $values['submitButtonText'] ) ? $defaults['submitButtonText'] : $values['submitButtonText'];

/* TODO: replace with centralized block_class function */
$align = isset( $attr['align'] ) ? $attr['align'] : 'center';
$type = 'mailchimp';
$classes = array(
'wp-block-jetpack-' . $type,
'align' . $align,
);
if ( isset( $attr['className'] ) ) {
array_push( $classes, $attr['className'] );
}
$classes = implode( $classes, ' ' );
$classes = Jetpack_Gutenberg::block_classes( 'mailchimp', $attr );

$button_styles = array();
if ( ! empty( $attr['customBackgroundButtonColor'] ) ) {
Expand Down
4 changes: 3 additions & 1 deletion extensions/blocks/repeat-visitor/repeat-visitor.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@
function jetpack_repeat_visitor_block_render( $attributes, $content ) {
Jetpack_Gutenberg::load_assets_as_required( 'repeat-visitor' );

$classes = Jetpack_Gutenberg::block_classes( 'repeat-visitor', $attributes );

$count = isset( $_COOKIE['jp-visit-counter'] ) ? intval( $_COOKIE['jp-visit-counter'] ) : 0;
$criteria = isset( $attributes['criteria'] ) ? $attributes['criteria'] : 'after-visits';
$threshold = isset( $attributes['threshold'] ) ? intval( $attributes['threshold'] ) : 3;
Expand All @@ -37,5 +39,5 @@ function jetpack_repeat_visitor_block_render( $attributes, $content ) {
}

// return an empty div so that view script increments the visit counter in the cookie.
return '<div class="wp-block-jetpack-repeat-visitor"></div>';
return '<div class="' . esc_attr( $classes ) . '"></div>';
}
23 changes: 12 additions & 11 deletions modules/memberships/class-jetpack-memberships.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,17 +208,18 @@ public function render_button( $attrs ) {
'powered_text' => __( 'Powered by WordPress.com', 'jetpack' ),
);

$classes = array(
'wp-block-button__link',
'components-button',
'is-primary',
'is-button',
'wp-block-jetpack-' . self::$button_block_name,
self::$css_classname_prefix . '-' . $data['id'],
$classes = Jetpack_Gutenberg::block_classes(
self::$button_block_name,
$attrs,
array(
'wp-block-button__link',
'components-button',
'is-primary',
'is-button',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not entirely sure classes like this belong into a top-level block element, that's pre-existing. (It might raise the question if the new util is really needed, or more of a symptom of suboptimal architectural choices, but oh well.)

self::$css_classname_prefix . '-' . $data['id'],
)
);
if ( isset( $attrs['className'] ) ) {
array_push( $classes, $attrs['className'] );
}

if ( isset( $attrs['submitButtonText'] ) ) {
$data['button_label'] = $attrs['submitButtonText'];
}
Expand Down Expand Up @@ -249,7 +250,7 @@ public function render_button( $attrs ) {
esc_attr( $data['powered_text'] ),
esc_attr( $data['id'] ),
esc_attr( get_locale() ),
esc_attr( implode( $classes, ' ' ) ),
esc_attr( $classes ),
esc_attr( $button_styles ),
wp_kses( $data['button_label'], self::$tags_allowed_in_the_button )
);
Expand Down