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.

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

Block Bindings: Add support to image caption attribute in block bindings #61255

Open
wants to merge 39 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
39 commits
Select commit Hold shift + click to select a range
6939eb5
Add support in the JS hook
SantosGuillamot Jul 1, 2024
33ebfd8
Add support in the PHP array
SantosGuillamot Jul 1, 2024
1539bb5
Transform figure > a selector into a
SantosGuillamot Jul 1, 2024
47bac8c
Modify the image rendering if bindings are set
SantosGuillamot Jul 1, 2024
841165d
Add support for image caption
SantosGuillamot Jul 1, 2024
31a78b8
Adapt Gutenberg compatibility filters
SantosGuillamot Jul 1, 2024
2abb001
Use regex (temporary)
SantosGuillamot Jul 1, 2024
49f327c
Fix regex
SantosGuillamot Jul 1, 2024
c85de98
Another approach: Remove tags in render
SantosGuillamot Jul 1, 2024
f69662d
Update supported binding attribtues in another file
talldan Jul 1, 2024
d1734c5
Update client side pattern override supported attributes
talldan Jul 1, 2024
953eea5
Add `set_inner_text` private method instead of using regex
SantosGuillamot Jul 1, 2024
7f00489
Support only caption
SantosGuillamot Jul 1, 2024
cac2dd1
Only run `set_inner_text` when figcaption exists
SantosGuillamot Jul 1, 2024
fd58bcf
Go back to existing `save.js`
SantosGuillamot Jul 1, 2024
c5abad9
Fix typo
SantosGuillamot Jul 1, 2024
3a9c6e8
Remove comment
SantosGuillamot Jul 1, 2024
01ca7ee
Hide caption controls if the caption is binded
cbravobernal Jul 1, 2024
2967e88
Remove user permissions check
cbravobernal Jul 1, 2024
ec0e52c
Add caption e2e tests
SantosGuillamot Jul 1, 2024
fa01364
Copy latest changes from core
SantosGuillamot Jul 1, 2024
f39fa0b
Remove extra return
SantosGuillamot Jul 1, 2024
45cd9e4
Fix bookmarks
SantosGuillamot Jul 1, 2024
da0886d
Fix compatibility with older versions
SantosGuillamot Jul 1, 2024
75fc917
Move logic to 6.6 compat folder
SantosGuillamot Jul 1, 2024
0fe9b31
Only process image caption in 6.6 compat
SantosGuillamot Jul 1, 2024
435058e
Remove extra spaces
SantosGuillamot Jul 1, 2024
895110a
Don't grab bookmarks until the end
SantosGuillamot Jul 1, 2024
3e183b7
Remove release_bookmark
SantosGuillamot Jul 1, 2024
a2b825c
Add warning
SantosGuillamot Jul 1, 2024
77d7116
Make filter caption specific
SantosGuillamot Jul 1, 2024
dc568a9
Only process caption in WP 6.5
SantosGuillamot Jul 1, 2024
6eeb7c2
Change conditional
SantosGuillamot Jul 1, 2024
0e3b174
Add support for 6.4
SantosGuillamot Jul 1, 2024
7311680
Clarify methods only apply to figcaption
SantosGuillamot Jul 1, 2024
d38d635
Remove check to always run caption processing
SantosGuillamot Jul 1, 2024
586d7df
Add backport changelog
SantosGuillamot Jul 1, 2024
ac597ee
Move changelog to 6.7 folder
SantosGuillamot Jul 1, 2024
be4c4c2
Remove caption restriction in pattern overrides
SantosGuillamot Jul 1, 2024
File filter

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Clarify methods only apply to figcaption
  • Loading branch information
SantosGuillamot committed Jul 1, 2024
commit 7311680db43119f2808082afc8cb171a6bb358bb
36 changes: 22 additions & 14 deletions lib/compat/wordpress-6.6/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -66,14 +66,14 @@ function gutenberg_block_bindings_replace_caption( $block_content, $block_name,
*/

/**
* Replace the inner text of an HTML with the passed content.
* Replace the inner content of a figcaption element with the passed content.
*
* @param string $new_content New text to insert in the HTML element.
* @return bool Whether the inner text was properly replaced.
* @param string $new_content New content to insert in the figcaption element.
* @return bool Whether the inner content was properly replaced.
*/
public function gutenberg_set_inner_text( $new_content ) {
public function gutenberg_set_content_between_figcaption_balanced_tags( $new_content ) {
// Check that the processor is paused on an opener tag.
if ( $this->is_tag_closer() ) {
if ( $this->is_tag_closer() || 'FIGCAPTION' !== $this->get_tag() ) {
return false;
}

Expand Down Expand Up @@ -123,13 +123,17 @@ public function gutenberg_set_inner_text( $new_content ) {
}

/**
* Add a new HTML element after the current tag.
* Add a new figcaption element after the `img` or `a` tag.
*
* @param string $new_element New HTML element to append after the current tag.
* @param string $new_element New figcaption element to append after the tag.
* @return bool Whether the element was properly appended.
*/
public function gutenberg_append_element_after_tag( $new_element ) {
public function gutenberg_append_figcaption_element_after_tag( $new_element ) {
$tag_name = $this->get_tag();
// Ensure figcaption is only added in the correct place.
if ( 'IMG' !== $tag_name && 'A' !== $tag_name ) {
return false;
}
$this->set_bookmark( 'current_tag' );
// Visit the closing tag if exists.
if ( ! $this->next_tag(
Expand Down Expand Up @@ -166,16 +170,20 @@ public function gutenberg_append_element_after_tag( $new_element ) {
}

/**
* Remove the current tag element.
* Remove the current figcaption tag element.
*
* @return bool Whether the element was properly removed.
*/
public function gutenberg_remove_current_tag_element() {
public function gutenberg_remove_figcaption_tag_element() {
$tag_name = $this->get_tag();
// Ensure only figcaption is removed.
if ( 'FIGCAPTION' !== $tag_name ) {
return false;
}
// Set position of the opener tag.
$this->set_bookmark( 'opener_tag' );

// Visit the closing tag.
$tag_name = $this->get_tag();
if ( ! $this->next_tag(
array(
'tag_name' => $tag_name,
Expand Down Expand Up @@ -228,17 +236,17 @@ public function gutenberg_remove_current_tag_element() {

if ( $block_reader->next_tag( 'figcaption' ) ) {
if ( empty( $new_value ) ) {
$block_reader->gutenberg_remove_current_tag_element();
$block_reader->gutenberg_remove_figcaption_tag_element();
} else {
$block_reader->gutenberg_set_inner_text( $new_value );
$block_reader->gutenberg_set_content_between_figcaption_balanced_tags( $new_value );
}
} else {
$block_reader->seek( 'figure' );
if ( ! $block_reader->next_tag( 'a' ) ) {
$block_reader->seek( 'figure' );
$block_reader->next_tag( 'img' );
}
$block_reader->gutenberg_append_element_after_tag( '<figcaption class="wp-element-caption">' . $new_value . '</figcaption>' );
$block_reader->gutenberg_append_figcaption_element_after_tag( '<figcaption class="wp-element-caption">' . $new_value . '</figcaption>' );
}

return $block_reader->get_updated_html();
Expand Down
28 changes: 19 additions & 9 deletions packages/block-library/src/image/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -36,12 +36,17 @@ function render_block_core_image( $attributes, $content, $block ) {
*/

/**
* Add a new HTML element after the current tag.
* Add a new figcaption element after the `img` or `a` tag.
*
* @param string $new_element New HTML element to append after the current tag.
* @param string $new_element New figcaption element to append after the tag.
* @return bool Whether the element was properly appended.
*/
public function append_element_after_tag( $new_element ) {
public function append_figcaption_element_after_tag( $new_element ) {
$tag_name = $this->get_tag();
Copy link
Contributor

Choose a reason for hiding this comment

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

// Ensure figcaption is only added in the correct place.
if ( 'IMG' !== $tag_name && 'A' !== $tag_name ) {
return false;
}
$this->set_bookmark( 'current_tag' );
// Visit the closing tag if exists.
if ( ! $this->next_tag(
Expand Down Expand Up @@ -70,19 +75,24 @@ public function append_element_after_tag( $new_element ) {

// Append the new element.
$this->lexical_updates[] = new WP_HTML_Text_Replacement( $after_closer_tag, 0, $new_element );
return true;
}

/**
* Remove the current tag element.
* Remove the current figcaption tag element.
*
* @return bool Whether the element was properly removed.
*/
public function remove_current_tag_element() {
public function remove_figcaption_tag_element() {
$tag_name = $this->get_tag();
// Ensure only figcaption is removed.
if ( 'FIGCAPTION' !== $tag_name ) {
return false;
}
// Set position of the opener tag.
$this->set_bookmark( 'opener_tag' );

// Visit the closing tag.
$tag_name = $this->get_tag();
if ( ! $this->next_tag(
array(
'tag_name' => $tag_name,
Expand All @@ -95,7 +105,7 @@ public function remove_current_tag_element() {
// Set position of the closer tag.
$this->set_bookmark( 'closer_tag' );

// Get tag positions.
// Get position of the tags.
$opener_tag_bookmark = $this->bookmarks['opener_tag'];
$closer_tag_bookmark = $this->bookmarks['closer_tag'];

Expand Down Expand Up @@ -180,7 +190,7 @@ public function remove_current_tag_element() {
if ( $p->next_tag( 'figcaption' ) ) {
// Remove `<figcaption>` if exists and caption attribute exists but it is empty.
if ( isset( $attributes['caption'] ) && strlen( $attributes['caption'] ) === 0 ) {
$p->remove_current_tag_element();
$p->remove_figcaption_tag_element();
}
} else {
// Add caption if it doesn't exist and the caption is not empty.
Expand All @@ -191,7 +201,7 @@ public function remove_current_tag_element() {
$p->seek( 'figure' );
$p->next_tag( 'img' );
}
$p->append_element_after_tag( '<figcaption class="wp-element-caption">' . $attributes['caption'] . '</figcaption>' );
$p->append_figcaption_element_after_tag( '<figcaption class="wp-element-caption">' . $attributes['caption'] . '</figcaption>' );
}
}
$p->release_bookmark( 'figure' );
Expand Down