[4] Introducing Joomla’s first blank state

[PhilETaylor]

Summary of Changes

So I mentioned about the possibility of blank states in Joomla 4 as a comment on someone's PR a long time ago. It received quite a bit of positive feedback but no one has actually attempted it

So here is "an attempt"

The concept is that rather than a new user getting a first time out of the box experience with "no matching results" or a state that is unhelpful, that the user receives a welcome and an introduction to each area.

This PR is a PROOF OF CONCEPT for Articles ONLY - if it received praise then I might do the others, and others can join in too..

The blank state template is ONLY USED when you have no articles in your database. It is NOT used if a search/filter produces no results (in that case, you would correctly get "No Matching Results" message like you currently do.

To be clear

This is not a new concept. Everyone else is already doing it.

More examples of Empty State Design:
https://www.toptal.com/designers/ux/empty-state-ux-design

Testing Instructions

Apply PR on a site with no articles.
Add article - blank state design disappears and you see a list of articles
filter the articles by something (search for kashfdksjhgfkjsdhf) and see that you DONT see the blank slate but you DO get "No Matching Results"
Trash your article - and see that you DONT see the blank slate
Empty your trash (leaving ZERO articles in the db) and see that you DO now see the blank slate

Actual result BEFORE applying this Pull Request

At the moment the out of the box experience (without demo data) is a bunch of left menu items that all lead to blank pages saying "no matching results"

User is "welcomed" to Joomla with a negative messages

Expected result AFTER applying this Pull Request

Empty State Design / Blank state Design pattern is used.

Documentation Changes Required

Screenshots.

[richard67]

@PhilETaylor Please remove any emojis from title and description of PRs. They can confuse our CI tools.

[richard67]

... and the issue tracker can be confused, too.

[richard67]

Beside the above comment (which is fixed now), I like this PR. Much more user friendly way to show there are no items.

[brianteeman]

1. As a non-coder I didn't understand what you meant by blankstate. Now I understand it to mean "no records yet" ?
2. Can you add aria-hidden="true" to the icon please
3. The voice you have used for the message is very informal, which is fine, but everywhere else we use a more formal voice such as "No articles have been created yet,"

[brianteeman]

Actually I can see now that I test it that the text you propose is not correct as it is displayed when you have created articles they just are trashed.

And if you have trashed all the articles then there is no way to select them to permanently delete or to restore them (unless you create a new article). So I guess the check for "blankstate" is not correct.

[brianteeman]

Same thing happens if I only have unpublished items. So there is a bug there.

[brianteeman]

Something weird is going on - trying to replicate it reliably

[Bond97]

I think, that it will be better to add this page "looks like..." to other menu items under the same visibility conditions: categories, featured articles, fields, field groups and menus.

@PhilETaylor what do you think about it?

[brianteeman]

OK so if you set a filter and the filter returns no results you get the blank state which is clearly not what you intended.

[brianteeman]

[brianteeman]

Phil I can replicate it in any scenario where there are no matching results and I assume that you only meant this to be displayed when there are no records at all

[brianteeman]

Yes that did it. This is a great improvement.

[richard67]

@PhilETaylor I guess that was it. But it's not only PostgreSQL which requires it, MySQL would require it too if sunning in strict mode, Oracle would require it (if we would support that).

[wilsonge]

I love this :) Lets get some tests and get it in. Thankyou so much!!

[TLWebdesign]

I have tested this item ✅ successfully on 8d3accc

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.}

[RickR2H]

I have tested this item ✅ successfully on 8d3accc

Very nice feature! Thanks!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.}

[richard67]

I've advertised a bit a JoomlaDay USA, so we did not have to wait very long for testers 😄

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/33264.}