WordPress
Site Logo Block fails to add width and height attributes to img element when using SVG
Description
Having tested the Site Logo block and standard Image block, this appears to only be an issue on the Site Logo block. When using a PNG the width chosen using the Block UI is correctly added to the element. But when using an SVG (having enabled SVG uploads via code) the UI still shows width and height options but those are not added to the
element.
When rendered on the front end the element doesn't have width or height attributes at all. In the editor the SVG is visible (ie seems to take the width selected in the UI) when the Site Logo block is set to NOT be a link, but disappears when it IS set to be a link.
That appears to be because the following CSS is present:
.components-resizable-box__container>img {
width: inherit;
}
Which of course means when the is wrapped in a it is no longer a direct descendent, so without it's own width and height attributes, the SVG collapses to zero.
Step-by-step reproduction instructions
- Enable SVG uploads via plugin or code
- Add Site Logo block.
- Choose/upload an SVG
- Inspect to see lack of width and height attributes.
Screenshots, screen recording, code snippet
No response
Environment info
WP 6.4.2 Issue persists whether Gutenberg plugin is installed or not Active theme: Twenty Twenty-Four Also tested in custom theme that builds off Bare-bones FSE Starter by WP Development Courses with same result.
Please confirm that you have searched existing issues in the repo.
Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Yes
I have confirmed that it can be reproduced.
Steps to reproduce
- Install a plugin that allows you to upload svg. ex) https://wordpress.org/plugins/safe-svg/
- go to Editor
- go to Header template editing
- upload svg as site logo
- resize the logo's with and height to use drug and drop
https://github.com/WordPress/gutenberg/assets/1205958/a014f081-d9b8-4cc0-86b4-ef79ac781240
The SVG file
<?xml version="1.0" encoding="UTF-8"?>
<svg id="layer-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<circle class="cls-1" cx="100" cy="100" r="100"/>
</svg>
I'm new to block themes. What would be the recommended workaround for this? Right now I'm using wp_enqueue_block_style() to load a css to just set the logo width for core/site-logo. Is that the cleanest solution? I have an HTML template part in my theme but I couldn't find a way to set the logo width there.
@dagoss Try:
.wp-block-site-logo a {
display: block;
}
in Additional CSS https://wordpress.org/documentation/article/styles-overview/#site-wide-custom-css
Hi, This is indeed very annoying. One possible workaround:
.wp-block-site-logo img:not([width]) {
height: 50px;
width: auto;
}
The lack of width and height attributes for an SVG image (and then in the resizable container) seems to be a similar problem with the Image block when using the block's alignment settings (left, center or right). See Trac 55884.
I'd love to see a solution to this one. It has been bothering me for years. SVGs are lightweight and so useful. If you have made them yourself, they are safe, but I have only been using them in a limited way in Wordpress due to this issue. My workaround has been to manually add the width and height info to _wp_attachment_metadata in wp_postmeta.
It is difficult since technically SVGs don't need a height and width. I suppose the answer might be that if the dimensions cannot be extracted from the file then a medium size default could be added so that the image is at least visible. Then display a warning message with an option to manually edit the dimensions through the media library UI (only for SVGs). I am not sure any attempt is made to extract the dimensions at the moment. It would be very nice to have.
Reproduction Report
Description
❌ This report can't validate that the issue can be reproduced.
Environment
- WordPress: 6.9-alpha-60093-src
- PHP: 8.2.29
- Server: Apache/2.4.62 (Debian)
- Database: mysqli (Server: 11.8.2-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
- Browser: Chrome 138.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-Five 1.3
- MU Plugins: None activated
- Plugins:
- Gutenberg 21.3.0-rc.2
- Test Reports 1.2.0
Reproduction Instructions
- Followed the exact ones provided in the OP
Actual Results
- ❌ Error condition is not occurring.
Additional Notes
- It seems that this was already solved at some point. And even if it wasn't, this is not a Gutenberg problem, but a Core problem, so a report in Core should have better done in Trac. Anyway, give that it's already solved, I can close this as
worksforme. If anyone happen to find anything that I'm missing in my steps, please comment, and I will be happy to reopen it and test it back.
Supplemental Artifacts
The issue is in the editor when
- the SVG itself does not have
widthandheightattributes, - the Site Logo is linked, and
- the Site Logo resizes the image.
Steps to reproduce (expanded)
- Save an SVG image file that does not include pixel measurements for
widthandheight.<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="100"/></svg> - Install a plugin that allows you to upload SVG, such as Safe SVG.
- Go to the Editor, and open the Header template.
- Select the Site Logo block, or add the block if it is not already there.
- Upload your SVG and assign it to the block.
- Select the 'Link image to home' option in the sidebar.
- Resize the logo, either by dragging the edge of the image or by using the Width control in the sidebar. The image will become 0 × 0 and disappear because it does not have the 120px default anymore.
- Save another SVG file, this time with small dimensions.
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 200 200"><circle cx="100" cy="100" r="100"/></svg> - Select the existing Site Logo block.
- Replace the image in the sidebar with your new SVG.
- Resize the logo so it is significantly larger than the dimensions in the file. The editor does not scale the image up.
- Save changes and compare the image on the front end, where it displays at the larger size.
The SVG with missing attributes seems fixable by adding display: block on the .custom-logo-link class. Setting the image width to 100%—instead of max-width—might help with the small SVGs too, but that could be inappropriate with other image types.
Updated Reproduction Report
Description
❌ This report validates whether the issue can be reproduced.
Environment
- WordPress: 6.9-alpha-60093-src
- PHP: 8.2.29
- Server: Apache/2.4.62 (Debian)
- Database: mysqli (Server: 11.8.2-MariaDB-ubu2404 / Client: mysqlnd 8.2.29)
- Browser: Chrome 138.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-Five 1.3
- MU Plugins: None activated
- Plugins:
- Gutenberg 21.3.0
- Microformats 2 1.1.0
- Safe SVG 2.3.2
- Test Reports 1.2.0
Testing Instructions
- This time I've been following [https://github.com/WordPress/gutenberg/issues/57717#issuecomment-3137375146 these instructions]
Actual Results
- ❌ Error condition is not occurring
Additional Notes
- @sabernhardt I'm updating this report because I've tested again this morning (yesterday It was late and did not test it correctly)
Check this image:
With your <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><circle cx="100" cy="100" r="100"/></svg>
H and W are showing. So again, I cannot reproduce this
The linked SVG logo, when resized, can become invisible in the editor. I am not aware of any problems with dimensions on the front end.
Default size:
Resized:
@sabernhardt the disappearance of the logo was not the problem but the missing width and height for SVG logos. It appears that you have found a new bug there, right? Shall we open a new ticket to tackle this with all the information more specifically targeted to that?
This issue reports two things:
- The missing attributes for SVGs on the front end probably result from missing 'full' meta for the attachment when enabling the MIME type with a code snippet. A few Core Trac tickets already mention related problems, and plugins such as Safe SVG can fill in the missing meta.
- The invisible linked Site Logo image within the editor needs to be fixed in Gutenberg, and I would prefer to keep this issue focused on that. The Image block might need a similar change for its resizable container.
- The invisible linked Site Logo image within the editor needs to be fixed in Gutenberg, and I would prefer to keep this issue focused on that. The Image block might need a similar change for its resizable container.
True, I only focused on the testing part.
The missing attributes for SVGs on the front end probably result from missing 'full' meta for the attachment when enabling the MIME type with a code snippet. A few Core Trac tickets already mention related problems, and plugins such as Safe SVG can fill in the missing meta.
Yes, I started just using a custom plugin to enable the SVG part and could not reproduce it. How have you been able to reproduce the missing sizes part if you were using Safe SVG in your testing instructions? I think this is the last missing part to proceed with a patch here.
My testing instructions were for reproducing the issue within the editor. The SVG without dimensions disappears when resized and linked, whether using Safe SVG or the snippet in a custom plugin.
It seems the missing 'full' meta does not explain everything for the front end. An SVG uploaded with the code snippet does not have any dimension attributes, whether it is the default logo size or resized.
@sabernhardt its interesting we have not commented on 63714, which is programmed for 6.8.3. There could be any relationship? Could maybe this be solved upstream with this?
@sabernhardt 63714 has been fixed, wondering if this has been solved transitively. Have you had any chance to test it?
Reproduction Report
Description
✅ This report validates that the issue can be reproduced.
Environment
- WordPress: 6.9
- PHP: 8.3.28-dev
- Server: PHP.wasm
- Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
- Browser: Chrome 143.0.0.0
- OS: Windows 10/11
- Theme: Twenty Twenty-Five 1.4
- MU Plugins: None activated
- Plugins:
- Gutenberg 22.2.0
- Safe SVG 2.4.0
- Test Reports 1.2.1
Testing Instructions
- Using this WordPress Playground blueprint, that includes SafeSVG + a WordPress SVG logo without dimensions https://playground.wordpress.net/?blueprint-url=https%3A%2F%2Fgist.githubusercontent.com%2FSirLouen%2F2c528cbbda9cb3f90f6e88dbfd8f4308%2Fraw%2F27aeed9b553ef4dd56153401c115b0466e8710e6%2Fblueprint.json
- Go to Appearance > Editor
- Select the Header
- Add the Site logo and select the WordPress logo SVG in the Media Library (check Supp artifacts to know exactly where).
- Resize it dragging one of the sides
- 🐞 Logo becomes invisible.
Actual Results
- ✅ Error condition occurs (reproduced).