lorensimon

Hi Alvaro,

with some deeper troubleshooting I was able to locate the root cause of the problem. The blocks.php program looks for style.css or style.min.css in dev.collegegolfdrive.com/wp-includes/blocks/cover. In that folder only the style-rtl.css and style-rtl.min.css existed.

Once I copied these files from another installation, the cover block appeared fine.

I don’t know if these files were always missing or what caused them to disappear.

I will for now mark this as resolved and will continue to work on the website. If the problem appears again I will open another thread.

Thank you for your help in troubleshooting.

It should be easy to just put a link to a page of my website where I put the image….hopefully it works.

https://dev.collegegolfdrive.com/debug/

Hi Alvaro, thanks for keeping looking into this with me. I checked the theme.json and there are no errors, but I had already tried to replace my theme.json file with the standard theme one and it had not solved the problem. I am also trying to share a screenshot (I am not able to upload images to hopefully you can see the link) where you can see that the cover block is correctly rendered in the editor. In my troubleshooting I understood that the way editor pulls in the css code is different from the way the frontend does, which explains why one looks good and the other does not.

• This reply was modified 1 year, 9 months ago by lorensimon.

Hi Alvaro,

I am using version 6.2.2 with no Gutenberg plugin. I did some further troubleshooting but I did not yet found the root cause.

To prove my reasoning, I copied the content of the file style-rtl.css under /wp-includes/blocks/cover and pasted into the “additional block CSS” in the site editor under the cover block, and the functionality is now working.

This is a workaround as I want to use the standard blocks styles. I still want to figure out what from my problem site is telling WordPress to not link the standard cover block stylesheet while, for instance, the navigation block stylesheet is linked correctly.

Hi Alvaro, first of all thanks for spending time helping troubleshooting.

Second, the issue is not with the HTML code, but with the CSS / style. If you use developer tools in your browser, as well as a fresh test site I built, you will see under the sources section that there is a folder wp-includes/blocks/cover, which is missing from my problem site. I am not a developer, but looking at the response of my test site, as well as your test site, there is a statement that links the cover stylesheet from wp-includes, which is missing from my problem site. I have not yet been able to locate what triggers it, but it seems to me that the WordPress functionality looks for the blocks that are used to figure out what blocks styles needs to be linked. Maybe because my cover block is in a custom template parts of or for some other reason that I don’t know WordPress does not see that the cover block is being used, so it does not bring the corresponding block style.

<link rel='stylesheet' id='wp-block-cover-css' ......

Disabling all plugins with the current theme did not solve the issue. Using the parent theme removes all the custom template parts, so there is nothing to test because the entire front page functionality is gone. The other thing to notice is that when I am in site editing mode, the cover functionality appears correct. But when I am browsing the page, there seems to be functionality that enqueues the stylesheets for the blocks being used, and the cover block is not being detected as used. Quite frustrating.

Hi Alvaro, I tried and it does not change. I also eliminated all custom CSS but still no difference. The only way it works is if I start from a fresh WordPress installation with the standard theme. But that means that I would need to rebuild the site from scratch and potentially at some point could bump into the same issue. Not having a great time with the full site editor……

Looking at the browser development tool it seems that the cover block style in wp-includes is not loaded for some reason.

success! Max-width and object-fit: cover did the trick.

I “kind of” figured it out but not fully. With a custom CSS on the image class I set the width to 100%. What I really wanted to do is set a max height so when the width is stretched the aspect ratio is constant, and the image is zoomed in. I am still playing with CSS to see if can achieve it.