Customizable entry index pages

[brandonkelly]

Description

Gives entries the ability to divide their sources into multiple index pages, via the Customize Sources modal.

Each page gets its own spot in the global CP navigation.

Additionally, the entrify/categories and entries/tags commands have been updated to automatically assign newly-created sections in “Categories” and “Tags” entry index pages, respectively.

Related issues

• FR: Entrification: Ability to create "Groups" for Entry Types #13307
• Section Groups Accordions – Entries Sidebar #11340
• Entrification: Global sets and categories #14650
• Is there a way to reverse the "entrify/categories" command? #15162
• FR: Section/source groups #14609
• Make Categories = Structures? #9781

[linear]

CMS-1551 Content section

[thupsi]

Yay! Been waiting a long time for this 🙂

Maybe the content icon should change to something else now, to reflect the full spectrum of content types? Maybe something more abstract, similar to the "categories" icon?

[brandonkelly]

The newspaper icon feels pretty generic to me, but open to other suggestions!

[brandonkelly]

pen-nib could work:

[mmikkel]

pen-nib could work:

I don't really have a problem with the newspaper and don't really see the big reason to change it – but, it'd throw my hat in the ring for something like pen-line or pen-to-square instead of that one 🙂 Feels maybe a bit more contemporary (and do young people even know what a fountain pen is, or what it looks like)? 🫠

Anyway, whatever the icon ends up being, can't wait to give this PR a spin! 🎉

[thupsi]

Yeah, like @mmikkel says, I think the pen nib is too retro. I do prefer pen-line and pen-to-square to that, but still all these don't mean "content" to me.

For a more broad symbolism I would suggest something like cubes, cube, diagram-project, circle-nodes, chart-diagram. Or even use sitemap (and use something with folders for the categories icon, until they go away completely).

[thupsi]

My main reasoning is that the icon should represent content in the classic sense, but also, equally, globals and categories. It's indeed a little difficult to encompass all these, I know!

[thupsi]

Hm, even rectangle-list would work IMO. It kinda looks like a newspaper, but also like a digital piece of content.

And.. I'm stopping now, sorry 🙂

[gcamacho079]

Awesome feature! Here are some notes from an accessibility audit on the modal updates:

• The "New page" button and "New source" disclosure menus should be moved out of the footer. Their current placement in the footer leads to unexpected focus order, since having them in the footer introduces the expectation that they would be located immediately before the "Cancel" button in the focus order. In addition, they are very distant from the columns/lists when zoomed. Recommend either:
  • Moving the buttons next to the h2 elements, or
  • Adding buttons directly after the last .customize-sources-item, similar to what's done in the Field Layout Editor
• .customize-sources-item elements should use li wrapped in ol
• Keyboard users can’t move the sources to another page. I recommend adding these options to the Actions disclosure menu or opening a modal (similar to the "Move to..." action in the element index footer disclosure menu)
• Instead of adding new translations for "Page actions" and "Source actions", for consistency with other action menus in the UI, you can use aria-describedby on the Actions button to reference an ID on each item's .label element
• Each .cs-sidebar element should reference the sidebar heading via aria-labelledby, so that each navigation landmark has a unique accessible name
• When adding a new page or source, the Craft.cp.announce() method should be called with a success message
• The modal should be unusable at a minimum screen size of 320px. I recommend updating the view at small viewport widths to only show a single screen at a time, with the ability to navigate back and forth through the flow. Focus should be managed so that when the screen changes, keyboard focus is moved to an appropriate element in the new screen. (See screenshot below)

(Thanks @brianjhanson for brainstorming ideas!)

[ryansupercool]

This is looking really nice.

This may not be the right place to discuss this, and it's not clear if this is the "Unified Content View" in its final form or just a step towards it, but how do you see Custom Elements fitting into the unified view, if at all?

We've a plugin that adds various Custom Elements to Craft for Event management. In Craft 4, those elements sit under Events in the sidebar, along with "Entries", "Globals", "Categories", "Assets" etc (the same as Commerce).

With the move of Globals and Categories to Entries, and now "Content", those Custom Elements are beginning to feel a little out of place, after all, it's all "content".

Could/should Custom Elements be able to put themselves in the mix of "Content"? Could a solution here be to hoist those new nested sources to the top level in the sidebar, allowing for a Craft 3 like setup?

[thupsi]

I've been playing with this feature (couldn't wait for it to be released 🙂) and I like it a lot! Way to go Brandon & team! 🎉

Some quick suggestions & observations:

1. Can you make the top-level "Content" label configurable?
For example, in some projects it would make sense to have the tree like so:

Site (instead of "Content")
├── Content
├── Taxonomies
└── Settings 

2. Optional icons for pages.
It would really help when the main nav is collapsed.

3. Pages with only one source should not display the sidebar / sources list.
It looks reduntant and repetitive if the page has the same name with the solitary source. In fact, if a page contains only a single, it's even more reduntant and repetitive (the title is repeated 3 times), so...

4. Pages with only a single should just display the single's edit form.
That for me would be ideal, and it also would be nice if even sources with only one single displayed the single's edit form like described in #17760. But that one maybe is out-of-scope for this PR.

5. The default "Entries" page should not be removable, and/or we should have a way to bring back no-longer accessible non-custom sources.
For example, if I delete "entries", all my non-custom sources disappear. The same if I move a non-custom source to a new page and later delete that page.

Feel free to ignore all of the above 🙂

[thupsi]

Continuing with unsolicited suggestions:

IMO, the "Content" grouping feels a little too opinionated and forced , which is a bit weird for Craft, where almost everything follows a blank slate philosophy.

Yes, all entries are content, but taxonomies and global settings maybe are not, at least not in the mind of all users. The fact that all these are now "entries" under the hood, is a technicallity that shouldn't dictate the author facing UI. I would argue that, for certain projects, there is enough semantic separation between the various "Pages" to warrant their own place as top level nav items. Therefore, I would love to see an option to have the "Content" section ungrouped, or even allow additional "Sections" outside of "Content".

I can see how that could be a awkward due to missing icons for pages/sections but see my suggestion above for optional page icons.

UPDATE WITH EXAMPLE:
Notice how, in the screenshot bellow, it looks strange, from an author's perspective, that "Settings" is inside "Content" (while "Assets" is not):

[ryanleichty]

Anything that gets us closer to Sanity's structure tool and flexibility I'm a fan of 🎉

[gcamacho079]

Accessibility

• When trying to create a page with an empty page name field, nothing happens. The Page Name field should be marked required and an error should show if the user tries to submit the form with an empty Page Name field.
• The explicit tabindex attribute can be removed from “Back to…” buttons.
• Keyboard focus is dropped when removing a page from the list of Pages. I recommend moving focus to an Action menu button for the previous/next element. (Note: this should be tested in cases where (a) the page is the last one in the nav list, and (b) when there is no previous/next item in the list. In cases where the last item is removed, focus can be moved to the “New page” button.)

General UX feedback

Breadcrumbs

The breadcrumb structure for custom index pages is a bit confusing for me. For example, I created a "Blog Post" index page with only a single source:

One of the entries inside has a breadcrumb structure that I find unexpected based on the "Blog Post" index structure.

Navigation

This issue could potentially introduce WCAG violations, so depending on how we choose to resolve this, @AugustMiller may need to mention it in the Docs.

Description: Admins can create pages that conflict with pre-existing navigation items. For example, you could create a "Settings" page that conflicts with the existing top-level Settings link. They could be slightly differentiated by setting a different icon, but because icons are marked as decorative in the code, they would have identical accessible names and be impossible for AT users to differentiate.

Suggestion: Do not allow the creation of Pages with names that conflict with pre-existing navigation items, or add instructions that warn against doing so.

Drag handles for smaller viewports

Should the drag handles be removed on smaller viewports (i.e., when only a single pane shows at a time)? I accidentally dropped something into the void because there wasn't a drop target. 🤔

[thupsi]

While testing this in a dev environment, I encountered a bug where the sorting of the index "pages" gets stuck, so I can't get them reordered.

So, I do this:

And I get this:

Unfortunately I didn't have time to figure out what triggers this behaviour, so just reporting without steps to reproduce.

[thupsi]

Aaaaand just found another small bug 🐛:

Content page list items on the global sidebar get an id in the form of nav-content-<my-page>. When the name of the page is non-latin though (tested in greek), the <my-page> part is ommited, resulting in multiple list items with an id of nav-content.

[brandonkelly]

@thupsi Thanks for reporting those! Fixed now.

[thupsi]

Hey @brandonkelly, thanks for the fixes! I found though that now the order of the sources themselves in the sidebar can get stuck.

Also, the bug that Lupe reported about the breadcrumbs is still there (don't know if it was fixed and there's been a regression), meaning that sources that belong in index pages other than the current one are visible in the breadcrumbs.

[brandonkelly]

@thupsi Fixed now!

[thupsi]

Ahem 😅

[brandonkelly]

@thupsi That’s fixed now too :)

[thupsi]

Almost there 😅!

I noticed that disabling a source results in displaying Entries in the breadcrumbs of that source's entries, instead of the custom page's title.

I hereby promise to not report any more bugs until after 5.9 is released 🙂

[brandonkelly]

@thupsi Thanks, fixed! And please feel free to continue reporting issues if you come across any ❤️

[thupsi]

@thupsi Thanks, fixed! And please feel free to continue reporting issues if you come across any ❤️

I'll take you up on that then 🙂

It's a breadcrumbs bug yet again!

Here are my custom pages, Content and Theming. There's no other entry index page.

Observe the Content custom page with 3 sources.

Now I'm in an Artworks entry and, sure enough, there's the Artworks breadcrumb nav item.

However, when I press that Artworks link, I end up in a generic Entries page (a place previously thought to have vanished from this earth) where all my enabled sources, from all custom pages, reside.

That's the bug! 🐛

And now for something else...
that might be a bug or not, but sure looks weird for editors.

Let us examine this humble Theming custom page, with a custom source that displays a specific single.

When I go to Theme settings I have this breadcrumb structure: Content>Singles>Theme settings

Only I (the mighty dev) can understand why it's like this: The Theme settings single belongs to the (disabled) Singles source, that is inside the "Content" custom page.

For the editor though it does not make any sense: The Singles source is nowhere to be found in the CP, and, perhaps more importantly, she is currently editing an entry in the Theming page, not the Content page.

The above situation makes me reluctant to distribute singles as appropriate between custom pages, because the breadcrumbs, for some of them, will always appear incorrect.

One possible way to resolve this is described in #18090 by yours truly.

Thank you for your attention to this matter! (●'◡'●)

[brandonkelly]

However, when I press that Artworks link, I end up in a generic Entries page (a place previously thought to have vanished from this earth) where all my enabled sources, from all custom pages, reside.

I’m not able to reproduce that. Can you send a database backup and your Composer files into [email protected] so we can look into it?

Let us examine this humble Theming custom page, with a custom source that displays a specific single.

How exactly are you displaying a specific single as its own source? That’s not possible in the core functionality.

[thupsi]

I’m not able to reproduce that. Can you send a database backup and your Composer files into [email protected] so we can look into it?

Done!

How exactly are you displaying a specific single as its own source? That’s not possible in the core functionality.

It's very possible to do with core functionality 🙂: Custom source that is configured to only show entries from a single section. See screenshot:

As far as I know that's the only way to currently emulate a "Global Set". Sadly, it's a bit of a UI/UX downgrade from a real Global Set, an issue I touch upon in #17760, in my usual long-winded way!

[brandonkelly]

Sorry, of course 🤦🏻