Spearhead: Find a way to re-create posts page (homepage) in the editor.

[alaczek]

In Spearhead the homepage (as presented on the demo site) is actually a posts page, so it's automatically generated from blog posts, not created in the editor. We're looking at including Spearhead in signup flow, but we need the homepage to be editable in Gutenberg, because that's where customers are dropped at the end of signup. While it's mostly doable using the Blog Posts block, we can't re-create the grey background behind the site header.

Here's how they look side-by-side:

The background color not stretching behind the header throws the whole design off and makes it much weaker. This is one of the things that FSE will take care of in the future, but we're keen to use Spearhead in a podcast-specific signup flow that launches in February. So over on the View team, we were wondering if it would be possible to create some sort of unobtrusive workaround to address this for now. The ideas we came up with so far were:

• a CSS class that we could apply to a cover block or group block that contains the first post
• a theme option that would enable background for the header area (possibly only on the static homepage?)

Any and all other ideas for achieving this are welcome!

[MaggieCabrera]

Hi @alaczek. What you are seeing on the demo site is a sticky post. I don't know much about the signup flow process, but what Spearhead is doing is it's adding the sticky class to the article and the has-sticky-post class to the body to achieve this.

[alaczek]

We can add a CSS class sticky to the first block on the homepage, but no way to manipulate body classes. Sticky posts is somewhat obscure functionality, and we don't want customers coming through the Anchor signup flow to have to figure this out to set up the site. Ideally, we want them to be able to set up the homepage without leaving the editor.

[ianstewart]

@MaggieCabrera the signup flow is a bit of red herring. What we're looking to make possible is the ability to set up a homepage of a Spearhead-site using just gutenberg. So that someone wouldn't need to have their homepage …

1. List only blog posts
2. And have one post set up as a sticky post

… in order to make their homepage look like the demo.

Basically, some way to also get a grey header on a static page, or on the homepage. Could be a theme option like "Use a grey header on static home page" and/or "Use a grey header on all pages."

Normally, I wouldn't recommend having custom theme options in a theme in order to replicate a demo design but … Spearhead is already sort of doing that by relying on a sticky post in order to change the design. :)