Skip to content

Commit

Permalink
Fix applying bindings or pattern overrides to button blocks with empt…
Browse files Browse the repository at this point in the history
…y text (#62220)

* Dynamically check button text and avoid rendering a button when empty

* Handle both anchor and button tags

* Fix lint issues

* Address review feedback

* Simplify checks for empty content

* Check for comment tokens

* Update native test snapshots

* Update initial HTML native test snippet

----

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: dmsnell <dmsnell@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
  • Loading branch information
5 people authored Jun 10, 2024
1 parent d751809 commit 9c3dabc
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 19 deletions.
1 change: 1 addition & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ function gutenberg_reregister_core_block_types() {
'archives.php' => 'core/archives',
'avatar.php' => 'core/avatar',
'block.php' => 'core/block',
'button.php' => 'core/button',
'calendar.php' => 'core/calendar',
'categories.php' => 'core/categories',
'cover.php' => 'core/cover',
Expand Down
80 changes: 80 additions & 0 deletions packages/block-library/src/button/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<?php
/**
* Server-side rendering of the `core/button` block.
*
* @package WordPress
*/

/**
* Renders the `core/button` block on the server,
*
* @since 6.6.0
*
* @param array $attributes The block attributes.
* @param string $content The block content.
* @param WP_Block $block The block object.
*
* @return string The block content.
*/
function render_block_core_button( $attributes, $content ) {
$p = new WP_HTML_Tag_Processor( $content );

/*
* The button block can render an `<a>` or `<button>` and also has a
* `<div>` wrapper. Find the a or button tag.
*/
$tag = null;
while ( $p->next_tag() ) {
$tag = $p->get_tag();
if ( 'A' === $tag || 'BUTTON' === $tag ) {
break;
}
}

/*
* If this happens, the likelihood is there's no block content,
* or the block has been modified by a plugin.
*/
if ( null === $tag ) {
return $content;
}

// If the next token is the closing tag, the button is empty.
$is_empty = true;
while ( $p->next_token() && $tag !== $p->get_token_name() && $is_empty ) {
if ( '#comment' !== $p->get_token_type() ) {
/**
* Anything else implies this is not empty.
* This might include any text content (including a space),
* inline images or other HTML.
*/
$is_empty = false;
}
}

/*
* When there's no text, render nothing for the block.
* See https://github.com/WordPress/gutenberg/issues/17221 for the
* reasoning behind this.
*/
if ( $is_empty ) {
return '';
}

return $content;
}

/**
* Registers the `core/button` block on server.
*
* @since 6.6.0
*/
function register_block_core_button() {
register_block_type_from_metadata(
__DIR__ . '/button',
array(
'render_callback' => 'render_block_core_button',
)
);
}
add_action( 'init', 'register_block_core_button' );
4 changes: 0 additions & 4 deletions packages/block-library/src/button/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,6 @@ export default function save( { attributes, className } ) {
width,
} = attributes;

if ( RichText.isEmpty( text ) ) {
return null;
}

const TagName = tagName || 'a';
const isButtonTag = 'button' === TagName;
const buttonType = type || 'button';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,69 @@

exports[`Buttons block color customization sets a background color 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} /--></div>
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-luminous-vivid-amber-background-color has-background wp-element-button" href=""></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block color customization sets a custom gradient background color 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} /--></div>
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" href="" style="background:linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block color customization sets a gradient background color 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>
<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-light-green-cyan-to-vivid-green-cyan-gradient-background has-background wp-element-button" href=""></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block color customization sets a text color 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} /--></div>
<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} -->
<div class="wp-block-button"><a class="wp-block-button__link has-pale-pink-color has-text-color wp-element-button" href=""></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block justify content sets Justify items center option 1`] = `
"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button /--></div>
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block justify content sets Justify items left option 1`] = `
"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"left"}} -->
<div class="wp-block-buttons"><!-- wp:button /--></div>
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block justify content sets Justify items right option 1`] = `
"<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"right"}} -->
<div class="wp-block-buttons"><!-- wp:button /--></div>
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->"
`;

exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button /-->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
<!-- /wp:button -->
<!-- wp:button /--></div>
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->
<!-- wp:paragraph -->
Expand All @@ -56,7 +74,9 @@ exports[`Buttons block when a button is shown adds another button using the inli

exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
"<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button /-->
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href=""></a></div>
<!-- /wp:button -->
<!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Hello!</a></div>
Expand Down
11 changes: 6 additions & 5 deletions packages/block-library/src/buttons/test/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
import { registerCoreBlocks } from '@wordpress/block-library';

const BUTTONS_HTML = `<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button /--></div>
<div class="wp-block-buttons"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button"></a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->`;

beforeAll( () => {
Expand Down Expand Up @@ -248,10 +250,9 @@ describe( 'Buttons block', () => {
'Justify items right',
].forEach( ( justificationOption ) =>
it( `sets ${ justificationOption } option`, async () => {
const initialHtml = `<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button /--></div>
<!-- /wp:buttons -->`;
const screen = await initializeEditor( { initialHtml } );
const screen = await initializeEditor( {
initialHtml: BUTTONS_HTML,
} );

const [ block ] = await screen.findAllByLabelText(
/Buttons Block\. Row 1/
Expand Down

1 comment on commit 9c3dabc

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 9c3dabc.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9445595056
📝 Reported issues:

Please sign in to comment.