Skip to content

WordPress 6.3 Image Compatibility Fix #738

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

Open
michaelbourne wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

WordPress 6.3 Image Compatibility Fix #738

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfdbdf4
WordPress 6.3 Image Compatibility Fix
michaelbourne Aug 1, 2023
5ab9c45
Update Display.php
michaelbourne Aug 1, 2023
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
30 changes: 24 additions & 6 deletions classes/Webp/Picture/Display.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,6 +190,9 @@ private function remove_picture_tags( $html ) {
* @return string A <picture> tag.
*/
protected function build_picture_tag( $image ) {
/**
* List of ignored <img> attributes.
*/
$to_remove = [
'alt' => '',
'height' => '',
Expand All @@ -203,6 +206,8 @@ protected function build_picture_tag( $image ) {
'data-lazy-sizes' => '',
'data-sizes' => '',
'sizes' => '',
'decoding' => '',
'fetchpriority' => '',
];

$attributes = array_diff_key( $image['attributes'], $to_remove );
Expand All @@ -219,8 +224,8 @@ protected function build_picture_tag( $image ) {
$attributes = apply_filters( 'imagify_picture_attributes', $attributes, $image );

/**
* Cover Blocks.
* Remove Gutenberg specific attributes from picture tag, leave them on img tag.
* Optional: $attributes['class'] = 'imagify-webp-cover-wrapper'; for website admin styling ease.
*/
if ( ! empty( $image['attributes']['class'] ) && strpos( $image['attributes']['class'], 'wp-block-cover__image-background' ) !== false ) {
unset( $attributes['style'] );
Expand All @@ -229,6 +234,15 @@ protected function build_picture_tag( $image ) {
unset( $attributes['data-object-position'] );
}

/**
* Image Blocks with an Aspect Ratio set.
* Remove Gutenberg specific attributes from picture tag, leave them on img tag.
*/
if ( ! empty( $image['attributes']['style'] ) && strpos( $image['attributes']['style'], 'aspect-ratio:' ) !== false ) {
unset( $attributes['style'] );
unset( $attributes['class'] );
}

$output = '<picture' . $this->build_attributes( $attributes ) . ">\n";
/**
* Allow to add more <source> tags to the <picture> tag.
Expand Down Expand Up @@ -325,27 +339,31 @@ protected function build_source_tag( $image ) {
*/
protected function build_img_tag( $image ) {
/**
* Gutenberg fix.
* Gutenberg fixes.
* Check for the 'wp-block-cover__image-background' class on the original image, and leave that class and style attributes if found.
* Check for aspect-ratio inline style since WP 6.3
*/
if ( ! empty( $image['attributes']['class'] ) && strpos( $image['attributes']['class'], 'wp-block-cover__image-background' ) !== false ) {
$to_remove = [
'id' => '',
'title' => '',
];

$attributes = array_diff_key( $image['attributes'], $to_remove );
} elseif ( ! empty( $image['attributes']['style'] ) && strpos( $image['attributes']['style'], 'aspect-ratio:' ) !== false ) {
$to_remove = [
'id' => '',
'title' => '',
];
} else {
$to_remove = [
'class' => '',
'id' => '',
'style' => '',
'title' => '',
];

$attributes = array_diff_key( $image['attributes'], $to_remove );
}

$attributes = array_diff_key( $image['attributes'], $to_remove );

/**
* Filter the attributes to be added to the <img> tag.
*
Expand Down