Untangling Calypso: Make the template/page Homepage relationship clearer

[dsas]

Sites with block themes may have their homepages supplied via the theme rather than it being a page in its own right.

Calypso included a section on the page list as it was where many users expected to find a link to edit their home page. It was added in 2022 (see pbxlJb-2OQ-p2) and was used by thousands of people per day

We previously explored adding a notice to the top of the wp-admin Pages list for this, but eventually stopped pursuing that because we couldn't find a way to make it feel like part of the Core experience (see: p1736240593802549-slack-C04DZ8M0GHW).

We should look at either adding a similar notice to wp-admin (possibly a quick win) or at other ways to make this easier.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Appearance & Themes: The issue discusses adding functionality related to the front page, which falls under themes and site appearance.
• [Feature] Calypso & wp-admin Navigation: The content addresses navigation elements between Calypso and wp-admin, specifically around editing posts and pages.
• [Feature] Posts & Pages Lists: The issue relates to the management and visibility of posts within the page list context.

[dsas]

Customer reports:

• 9297332-zd-a8c
• 9301281-zd-a8c
• 9320629-zd-a8c

[github-actions]

Support References

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

• 9297332-zen
• 9301281-zen
• 9320629-zen

[richtabor]

We previously explored Automattic/jetpack#40702 for this

Another idea: what about a dismissible admin notice for editing your home page (instead of the custom implementation in #40702?

[richtabor]

A previous idea I shared was adding an "Edit page" admin bar link when the home page is set to a template. It would open up in the site editor with the canvas open.

[matt-west]

It would be good to get the Dotorg designers input on this. This problem doesn’t feel unique to WordPress.com, so ideally we can find a solution that finds its way back into Core at some point.

cc @jasmussen @jameskoster @fcoveram

[jasmussen]

Appreciate the ping, Matt, thank you 🙏

The problem space isn't new, and we've explored core-first solutions that mimic what Calypso had, with pinned special links, discussed both here and here. Jay let me know if I'm forgetting anything.

In other words, there are decent plans in place for the longer view, which also involve using DataViews for these sections. But obviously that's not feasible for the moment, which actually ties our hands quite a bit.

A different take on Automattic/jetpack#40702 that perhaps looks a bit more core-forward, quite a bit simplified, is not that far from some of the longer term ideas proposed for the space. It sounds like what led to the revert was the additional quick actions added, or am I missing nuance?

Alternately, I'd support @richtabor's proposal:

A dismissible admin notice for editing your home page

You could even make it not dismissible.

Your homepage uses the Blog Home template. [Edit page] [Edit template]

---

A previous idea I shared was adding an "Edit page" admin bar link when the home page is set to a template. It would open up in the site editor with the canvas open.

Is that not already in place? I see this on my site:

[jameskoster]

Something similar to Automattic/jetpack#40702 seems reasonable to me in the short term. Though the Dashicons home icon would arguably better blend in with wp-admin, and hard-coding the @wordpress/icons home icon isn't sustainable anyway. I'm also unsure how helpful the template name is going to be to the average user, especially when the homepage resolves to index which sounds quite technical. Maybe it's better to simply say "Your homepage is set to display latest posts", or maybe no description at all?

Agree an admin notice could also work, but I worry about banner blindness with that approach; we've all seen how the admin_notices hook can be abused by plugins.

[jasmussen]

Though the Dashicons home icon would arguably better blend in with wp-admin, and hard-coding the @wordpress/icons home icon isn't sustainable anyway.

Can't we avoid an icon? If it's a yellow notice, I don't think we want to add one anyway.

Maybe it's better to simply say "Your homepage is set to display latest posts", or maybe no description at all?

👍 👍

[matt-west]

Thanks for the input @jameskoster and @jasmussen.

How about we follow the styles of the info notice so it’s more in-keeping with Core, drop the home icon and secondary actions, and simplify the template copy.

Thoughts?

[jameskoster]

For me the appearance depends on whether it's technically a notice or not. If so, it should probably just match the standard notice styling layout. Otherwise I don't think it should resemble a notice so closely to avoid confusion.

As an alternative option, wp-admin provides a .card class that we could use.

[matt-west]

Thanks @jameskoster. Let’s use the card instead.

[jasmussen]

Card works well, and connects with other similar above-content cards some of the other untangled mockups delve into, i.e. themes: pdL8AQ-10Z-p2

I'd still avoid the icon, though, and given the contents of this card is up to us, I'd get closer to your layout, @matt-west, i.e. with the edit link on the right.

[dsas]

Sounds like we're looking for something that looks like this then:

---

Is it a problem that the designs lose the View stats link? In Calypso we show a stats link for real and virtual pages, but none of the proposals here include one. Its not a blocker to getting this resolved quickly, we can always add a stats link later if necessary.

In Calypso something like 20-30% of all of the 'View stats' clicks were for virtual homepages, though perhaps not high absolute numbers. (see 36d33-pb/)

[jasmussen]

Is it a problem that the designs lose the View stats link? In Calypso we show a stats link for real and virtual pages, but none of the proposals here include one. Its not a blocker to getting this resolved quickly, we can always add a stats link later if necessary.

Do you mean this link?

If there are meaningful numbers to support a stats link, let's think about how to include one. But if this is also the case, we need to consider what this means for data-views powered pages. A column with just this icon in each, isn't a great experience:

Could we show the actual sparkline for each page, there, instead?

[dsas]

Do you mean this link?

Yep, in Calypso it's 'Statistics' in the meatball menu, and in wp-admin it's a column with a graph icon.

I agree the current stats link would be much nicer as a sparkline. I'm confident it's possible, but it'll require some work. The sparkline react component you currently see in /sites for example is specific to overall site visits, and the APIs it uses are centered around that too. We'd have to add a new similar component for page visits that hooks up to the same underlying chart library along with (probably new) views-per-page APIs.

[matt-west]

@dsas Could we maintain the overflow menu with the three dots in addition to the more visible Edit homepage button? That would include View page, Copy link, Statistics, and QR code items.

So on the left side of the banner we’d have:

Your homepage is set to display latest posts

And on the right side:

[Edit homepage] [Vertical dots icon]

I’m also not sure the Edit homepage link needs underlining. This should ideally be a Tertiary Button component which has no underline, but gains a background fill on hover.

[jasmussen]

I’m also not sure the Edit homepage link needs underlining. This should ideally be a Tertiary Button component which has no underline, but gains a background fill on hover.

So long as there's no separate CSS to style this. I'm keen on us inheriting surrounding styles rather than building up new code debt.

[dsas]

Unsure exactly what the last two comments mean in practice :)

We'll need some custom CSS to style the card, at least to make the homepage text and the edit homepage link to appear on opposite sides of the card.

I'm unsure about using a Tertiary Button component - so far as I know, wp-admin screens don't currently use gutenberg components, and have a different look and feel.

[jasmussen]

We'll need some custom CSS to style the card, at least to make the homepage text and the edit homepage link to appear on opposite sides of the card.

Especially for cases like this, yes there will likely be some local CSS. When that's the case, the more we can reuse that CSS across similar cases, the better. The overall motivation is to avoid code-drift for the sake of any one or other visual. For example, across the platform, there should really only be a single focus style, a single button type, a single radio, checkbox, etc. Any CSS that customizes it to look different from what each of those components come with intrinsically, is the CSS that I'm keen to reduce. Does that make sense?

There's some more context here, p58i-jmy-p2 and still some open questions, in case I'm missing nuance you are able to add!

[dsas]

Could we maintain the overflow menu with the three dots in addition to the more visible Edit homepage button? That would include View page, Copy link, Statistics, and QR code items.

A dev could implement an overflow menu yes. I don't think an overflow menu is used anywhere else in Core wp-admin though, so they'd have to implement one. There is a drop down menu component which could be used I guess.

Any idea if there are other core wp-admin screens where we're using GB components?

[jasmussen]

I'd be tempted to see if there's a way we can do without the menu, and thus without the stats link. Because it's part of the table itself, doesn't necessarily mean it has to be part of this additional notice we are creating.

[matt-west]

I'm on board with that. 👍

We definitely shouldn't implement something just for the sake of this banner.