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 <[email protected]>
Co-authored-by: dmsnell <[email protected]>
Co-authored-by: kevin940726 <[email protected]>
Co-authored-by: SantosGuillamot <[email protected]>
  • Loading branch information
5 people authored and ellatrix committed Jun 11, 2024
1 parent abd75ac commit 719e680
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

0 comments on commit 719e680

Please sign in to comment.