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

Fix applying bindings or pattern overrides to button blocks with empty text #62220

Merged
merged 8 commits into from
Jun 10, 2024
Merged

Fix applying bindings or pattern overrides to button blocks with empty text #62220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
ef3f7b3
Dynamically check button text and avoid rendering a button when empty
talldan Jun 3, 2024
26809e3
Handle both anchor and button tags
talldan Jun 3, 2024
a6fddd1
Fix lint issues
talldan Jun 3, 2024
9acd4e6
Address review feedback
talldan Jun 4, 2024
08c70ec
Simplify checks for empty content
talldan Jun 4, 2024
f622395
Check for comment tokens
talldan Jun 10, 2024
4ad2cc2
Update native test snapshots
talldan Jun 10, 2024
9de03b5
Update initial HTML native test snippet
talldan Jun 10, 2024
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
1 change: 1 addition & 0 deletions lib/blocks.php
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
40 changes: 30 additions & 10 deletions packages/block-library/src/buttons/test/__snapshots__/edit.native.js.snap
View file
Open in desktop
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
View file
Open in desktop
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
Loading