Blog Posts block: "Read More" link doesn't have CSS customization

Gustavo-Hilario commented 2 years ago

Quick summary

When adding the Blog Posts block and enabling the Read More link, you will see the button design correctly on the editor, but once the page is published or if we can the preview, we will see that the customization isn't being applied.

Steps to reproduce

Create a new page or post.
Add the Blog Posts block there.
Enable the Show "Load more posts" Button option and add a text to the button.
Preview the page so you will see the button customization is gone.

https://user-images.githubusercontent.com/50875131/154827913-0e00239b-79fc-4326-ad48-61fe0315697e.mov

What you expected to happen

I expected to preview the page and see that the button has the same look it has on the editor.

What actually happened

The Read More button doesn't have any customization. From the inspector on the editor, I can see this button uses several CSS variables. I'm not sure why that isn't working, though.

Context

User report here: 4794504-zen. They use the Russell theme, but I could reproduce it with several themes. So it doesn't seem to be a theme-specific issue.

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No response

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Most (> 50%)

Available workarounds?

Yes, difficult to implement

Workaround details

This is not ideal, but we can try to use CSS code to give this button a similar design that shows on the editor. Please, test the code before sharing it with any user. You will want to replace XX with the correct page id.

.wp-block-newspack-blocks-homepage-articles button {
  border-width: 0;
  padding: 1.3em;
  text-decoration: none;
  background-color: #384143;
  font-family:"DM Sans", sans-serif;;
  color: #ffffff;
  font-size:18px;
  border-radius:4px;
}

.wp-block-newspack-blocks-homepage-articles button:hover {
  background-color: #967e7e;
}

laurelfulford commented 2 years ago

Thanks for filing this, @Gustavo-Hilario!

It looks like the issue is that the Homepage Post block button has the class wp-block-button__link in the editor, but not on the front-end -- updating the front-end markup to match should fix this issue.

(As an aside, it's kind of weird to me that Russell doesn't include any styles for a normal <button> HTML element -- or at least that they don't match the button block!).

matticbot commented 2 years ago

:tada: This issue has been resolved in version 1.57.0-alpha.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

matticbot commented 2 years ago

:tada: This issue has been resolved in version 1.57.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

Automattic / newspack-blocks