Arbutus: Load more posts button style is not applied live

[nellofn]

Steps to replicate

• Add a Blog Posts block
• Enable Show "Load more posts" Button
• Set when to show more posts; e.g.: 2 or more posts
• Ensure your site has at least 3 blog posts

Result

No style is applied to the Load more posts (Show more) post button style when the site is viewed live. It only works correctly in edit mode.

In edit mode:

Live:

Expected

I expected the "Load more posts" button to display the theme's style.

• User report: 5565999-zen

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 5565999-zen
• [ ] 5689301-zen

[zdenys]

Related:

• https://github.com/Automattic/themes/issues/5739
• https://github.com/Automattic/newspack-blocks/issues/357

The CSS workaround from the above reports:

/* Fix: Blog Posts Block: Load More Posts button doesn't have the same styling as seen in editor | XXXXXX-hc/zen GH */

.wp-block-newspack-blocks-homepage-articles button {
  border-width: 0;
  border-radius: 5px;
  color:white;
  font-size: 1.1em;
  background-color: var(--wp--preset--color--custom-color-7);
  padding-top: calc(var(--wp--custom--button--spacing--padding--top) + var(--wp--custom--button--border--width));
  padding-bottom: calc(var(--wp--custom--button--spacing--padding--bottom) + var(--wp--custom--button--border--width));
  padding-left: calc(var(--wp--custom--button--spacing--padding--left) + var(--wp--custom--button--border--width));
  padding-right: calc(var(--wp--custom--button--spacing--padding--right) + var(--wp--custom--button--border--width));
  text-decoration: none;
  font-weight: var(--wp--custom--button--typography--font-weight);
}

.wp-block-newspack-blocks-homepage-articles button:hover {
  background-color: var(--wp--preset--color--custom-color-7);
}

/* End  | XXXXXX-hc/zen */

[ariel-maidana]

Another case, with Appleton theme: 5689301-zd-woothemes Please notify the user once it's fixed.

[devNigel]

Another report, with theme Byrne: 39271158-hc

I was also able to reproduce it on TT3 theme.

Please notify the user in a new ticket once it's fixed.