Skip to content

Commit

Permalink
Proof of concept of adding CSS classes to all blocks with the classNa…
Browse files Browse the repository at this point in the history
…me supports set to true
  • Loading branch information
adamziel committed Jul 8, 2022
1 parent f1c426f commit 3d4d09a
Show file tree
Hide file tree
Showing 5 changed files with 89 additions and 96 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c

- **Name:** core/paragraph
- **Category:** text
- **Supports:** __unstablePasteTextInline, anchor, color (background, link, text), typography (fontSize, lineHeight), ~~className~~
- **Supports:** __unstablePasteTextInline, anchor, className, color (background, link, text), typography (fontSize, lineHeight)
- **Attributes:** align, content, direction, dropCap, placeholder

## Pattern
Expand Down
2 changes: 1 addition & 1 deletion lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ function gutenberg_reregister_core_block_types() {
'columns',
'comments',
'group',
'heading',
'html',
'list',
'media-text',
Expand Down Expand Up @@ -66,7 +67,6 @@ function gutenberg_reregister_core_block_types() {
'home-link.php' => 'core/home-link',
'image.php' => 'core/image',
'gallery.php' => 'core/gallery',
'heading.php' => 'core/heading',
'latest-comments.php' => 'core/latest-comments',
'latest-posts.php' => 'core/latest-posts',
'loginout.php' => 'core/loginout',
Expand Down
86 changes: 86 additions & 0 deletions lib/experimental/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,3 +28,89 @@ function gutenberg_enable_experimental_blocks() {
}

add_action( 'admin_init', 'gutenberg_enable_experimental_blocks' );

function gutenberg_add_default_class_name_to_rendered_block_markup( $block_content, $parsed_block, $block ) {
if ( ! $block_content ) {
return $block_content;
}

if ( ! $block->block_type || $block->block_type->is_dynamic() ) {
return $block_content;
}

$class_name_supports = _wp_array_get( $block->block_type->supports, array( 'className' ), false );
if ( ! $class_name_supports ) {
return $block_content;
}

return gutenberg_add_class_name_to_wrapping_tag(
$block_content,
wp_get_block_default_classname( $block->name )
);
}

add_action( 'render_block', 'gutenberg_add_default_class_name_to_rendered_block_markup', 10, 3 );

function gutenberg_add_class_name_to_wrapping_tag( $block_content, $added_class_name ) {
$matches = array();
$pattern = '/
^(\s*) # Any leading whitespace.
<(?<tag_name>
[a-zA-Z0-9\-]+ # The opening tag...
(?=\s|>) # ...followed by a whitespace or >
# ?= means a "lookahead"
)
(?<before_class> # Any attributes prior to "class"
(?: # ?: is a "non-capturing group"
(?!\sclass=")[^>] # Match all characters until ">" except when
# the next character sequence is \sclass="
# ?! is a "negative lookahead"
)*
)
(?:\s*class="(?<class_name>[^"]+)")? # The class attribute, if any
(?<after_class>[^>]*?) # The rest of the tag
> # The closing tag
/xm';

preg_match(
$pattern,
$block_content,
$matches
);

if ( empty( $matches ) ) {
return $block_content;
}

// Parse the existing class names.
$current_class_attribute = ! empty( $matches['class_name'] ) ? $matches['class_name'] : '';
$current_class_names = explode( ' ', $current_class_attribute );
$current_class_names = array_map( 'trim', $current_class_names );
$current_class_names = array_filter( $current_class_names );

// If wp-block-heading is already included, there's no need to add it again.
if ( in_array( $added_class_name, $current_class_names, true ) ) {
return $block_content;
}

// Otherwise, let's add it to the class names.
$current_class_names[] = $added_class_name;
$new_class_attribute = implode( ' ', $current_class_names );

// Construct a new opening tag.
$new_tag_parts = array(
$matches['tag_name'],
$matches['before_class'],
'class="' . $new_class_attribute . '"',
$matches['after_class'],
);
$new_tag_parts = array_map( 'trim', $new_tag_parts );
$new_tag_parts = array_filter( $new_tag_parts );
$new_tag = '<' . implode( ' ', $new_tag_parts ) . '>';

// Replace the old opening tag with the new one.
$initial_whitespace = $matches[1];
$old_tag_ends_at = strlen( $matches[0] );

return $initial_whitespace . $new_tag . substr( $block_content, $old_tag_ends_at );
}
93 changes: 0 additions & 93 deletions packages/block-library/src/heading/index.php

This file was deleted.

2 changes: 1 addition & 1 deletion packages/block-library/src/paragraph/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
},
"supports": {
"anchor": true,
"className": false,
"className": true,
"color": {
"link": true,
"__experimentalDefaultControls": {
Expand Down

0 comments on commit 3d4d09a

Please sign in to comment.