[4.0] Upgrade column blog layouts to according CSS classes #31570

Harmageddon · 2020-12-03T17:57:41Z

Pull Request for Issue #27478. This is an alternative approach to #30910.

Summary of Changes

Instead of re-adding the parameters that were removed with #18319, this approach searches for the "column" and "ordering" parameters from J3 and converts the values into the according CSS classes, i.e. columns-X in the case of horizontal ordering, or masonry-X in the case of vertical ordering.

Testing Instructions

As this PR modifies the update mechanism, you need to test it by upgrading a J3 site to J4. Note that you might not be able to update afterwards to higher J4-beta versions on the same site (don't know how this behaves with PR update packages). So I'd recommend to set up a clean, new installation (or a copy from an existing one) only for this PR.

Set up a local 3.10-alpha installation.
Create a set of articles, at least 4, in the same category. They should have different text lengths and at least 4 of them should also be featured.
For each of the three menu item types "Category Blog", "Featured" and "List All Categories", create several menu items that differ in the parameters "Number of Columns" and "Multi-Column Order". Some should be using only one column, some two or three. Some should use the global order, some horizontal and some vertical.
To be able to repeatedly test the upgrade process, you might want to create a backup of files and database at this point.
Upgrade your site to J4 using the update package of this PR.

At "Components - Joomla! Update", click on "Options".
Update Channel: Custom URL
Minimum Stability: Development
Custom URL: At the GitHub page of this PR, scroll down to the bottom. Click on "Show all checks". Next to "Download — Prebuilt packages are available for download.", click on "Details". Search for the part "You can test this package as an update by using this custom update server:" and copy the URL from there.

How to test the "List All Categories" menu item type

Create a menu item of type "List All Categories"
- Select a Top Level Category: Root
- In the tab "Blog Layout", you can configure the parameters "Number of Columns" and "Multi-Column Order".
Either create a new category, again with at least 4 articles, that has no own menu item, or unpublish all menu items for the category that you created above in step 2.
To test, navigate to frontend, click on your "List All Categories" menu item and then click on the title of your category. The category should now be displayed in blog layout according to the parameters you specified above.

Actual result BEFORE applying this Pull Request

("before applying this PR" = using an unpatched update package, such as the normal beta6 or nightly build)

All blog views are rendered in only one column, all with the same order. The above-mentioned parameters are gone without a trace.

Expected result AFTER applying this Pull Request

The number of columns should stay the same compared to before the upgrade. Depending on whether the according menu item used horizontal or vertical ordering, the articles should now be arranged in a similar manner.

More precisely (with "local" = set in the menu item, "global" = in the configuration of com_content):

Before Upgrade (J3)				After Upgrade (J4)
columns (local)	order (local)	columns (global)	order (global)	CSS class (local)	CSS class (global)
3	horizontal	2	vertical	columns-3	masonry-2
3	vertical	2	vertical	masonry-3	masonry-2
3	(global)	2	vertical	masonry-3	masonry-2
(global)	horizontal	2	vertical	columns-2	masonry-2
(global)	(global)	2	vertical	(global)	masonry-2
3	horizontal	1	vertical	columns-3
(global)	(global)	2	vertical	(global)	masonry-2
1	(global)	2	vertical	(global)	masonry-2 ^[1]

Obviously, this table is not exhaustive because listing all possible combinations would take some time and space. So please feel free to come up with your own combinations!

Documentation Changes Required

Not sure where to document this. We definitely need to document what classes are available for layouts in the Cassiopeia template.

Open Points

I'm not sure how to handle the "categories" view. In J3, it has parameters to control the blog layouts which are displayed when users click on one of the categories. In J4, this tab exists as well, but I don't see a "blog class" field there. Should we add such a field there? (This is the reason, why this PR is created as a draft. After fixing this, the PR should be ready to test)

The masonry layout breaks articles in two if it fits the column layout. This is a different display from J3. And looking at this part, which seems to have no effect at all, I doubt if this behaviour is intended or if it is preferable to avoid breaking articles there.

joomla-cms/templates/cassiopeia/scss/blocks/_modifiers.scss

Lines 214 to 224 in 8053386

    
           &[class^="masonry-"], 
        
           &[class*=" masonry-"] { 
        
             display: block; 
        
             column-gap: $cassiopeia-grid-gutter; 
        
             .blog-item { 
        
               margin-bottom: $cassiopeia-grid-gutter; 
        
               page-break-inside: avoid; 
        
               break-inside: avoid; 
        
             } 
        
           }

I could add another modifier CSS class that could be used to avoid breaking. In that case, the next question would be whether this class should be included in the conversion from J3 to J4 that is done with this PR. Or we could change this for the masonry layout in general, if breaking inside articles is not intended at all. Comments?

Screenshots

order	J3	J4
horizontal
vertical

chmst · 2020-12-03T20:07:28Z

@richard67 please have a look here.

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

brianteeman · 2020-12-03T21:44:42Z

The masonry layout breaks articles in two if it fits the column layout.

I am assuming this is referring to article 4 in the screenshot for cassiopeia vertical ?

I agree that the scss implies the intention was to prevent the column break. If you are saying it doesn't work then wont simply fixing it prevent the need for any extra classes

Harmageddon · 2020-12-03T22:41:05Z

I am assuming this is referring to article 4 in the screenshot for cassiopeia vertical ?

Yes, exactly.

I agree that the scss implies the intention was to prevent the column break. If you are saying it doesn't work then wont simply fixing it prevent the need for any extra classes

I guess so. Maybe @ciar4n or somebody who is more involved with the Cassiopeia template can tell whether the current behaviour is intended or not? I don't want to break anything just because I assume it's a bug.

brianteeman · 2020-12-03T23:02:05Z

Are you using firefox?

Harmageddon · 2020-12-03T23:09:12Z

Are you using firefox?

Ohh. Yes I am. And in Chromium, the breaking is indeed avoided. Good point!

So this seems to be some weird Firefox thing that it doesn't respect break-inside: avoid for elements that have a display: flex. Too tired now, but I'll do some research tomorrow if this is a known bug or behaviour.

brianteeman · 2020-12-03T23:10:03Z

It is a known bug which is why I asked ;)

See https://www.smashingmagazine.com/2019/02/css-fragmentation/

Harmageddon · 2020-12-04T13:35:33Z

It is a known bug which is why I asked ;)

See https://www.smashingmagazine.com/2019/02/css-fragmentation/

Hmm, if I'm not missing anything, that article says that Firefox has issues with break-avoid: column, break-after and many other things. But that it should support break-inside: avoid / page-break-inside: avoid, which we are using here.
I filed a bug for Firefox, because I couldn't find any information on this behaviour: https://bugzilla.mozilla.org/show_bug.cgi?id=1680720
So for the moment, I'd treat this as a separate browser issue that we might need to keep in mind, but don't need to fix with this PR.

Harmageddon · 2020-12-04T15:26:52Z

For the "categories" view, I now chose the simplest option, that is, adding the "blog class leading" and "blog class" field to the "Blog Layout" tab of this view.
One question I'm asking myself right now: We have these two fields which include the "useglobal" flag, but we don't have a global option to set the blog class for intro or leading articles. Should we add this to the config of com_content? If we don't, this PR is going to replace global options for the number of columns or the order with local options, i.e. a class specified in the respective menu item.

administrator/components/com_admin/script.php

chmst · 2020-12-07T13:48:44Z

Looks really good. It resolves the migration problem in an elegant way without needs for extra params in J4.

About the categories view:
I don't remember that categories are displayed in columns in j3 and think that these params in j3 were not used at all and can be ignored.

ChristineWk · 2020-12-08T13:34:05Z

About the categories view:
I don't remember that categories are displayed in columns in j3 and think that these params in j3 were not used at all and can be ignored.

Checking something on a 3.10-0-alpha4-dev:

a) Articles Options Blog/Featured Layouts > Multi Column Order: down or across.

b) Menu Item Typ: Category List > Choose a Category > there are no columns.

c) Here I'm not sure:
Menu Item Typ: Featured Articles > Show all featured articles from one or multiple categories in a single or multi column layout.
But it's the same as a)

Harmageddon · 2020-12-08T15:03:09Z

About the categories view:
I don't remember that categories are displayed in columns in j3 and think that these params in j3 were not used at all and can be ignored.

No, they are used indeed. I'm going to update the test instructions with this.
If you have a "List all categories" view, you can choose how a single of these categories should be displayed when you click on one of them (given that the category doesn't have its own menu item). Quoting the hint on that parameter tab:

These options are also used when you select one of the category links, on the first page and/or thereafter, unless they are changed for a specific menu item.

This includes the columns parameters. So if you select to display two columns there, this does not apply directly to the "List all categories" view, but to category views accessible from there.

@ChristineWk This PR treats cases a) and c) (plus d) the menu item type "List all categories", as explained above).

b) Menu Item Typ: Category List > Choose a Category > there are no columns.

Correct, the category list doesn't include columns and thus, needs no changes here.

N6REJ · 2020-12-10T17:44:09Z

Where are you getting masonry from? in bs4 its card-columns. https://getbootstrap.com/docs/4.5/components/card/#card-columns

chmst · 2020-12-10T17:52:41Z

At the moment it is bootstrap4. I would prefer a pure css solution, but this not necessary in scope of this pr

Harmageddon · 2020-12-10T18:27:06Z

Where are you getting masonry from? in bs4 its card-columns. https://getbootstrap.com/docs/4.5/components/card/#card-columns

Masonry classes were introduced in #18319. But yes, card-columns might be an alternative.

adj9 · 2020-12-12T11:36:56Z

I have done the various steps from J! 3.10, but then didn't apply the PR and upgraded to J! 4-dev with Joomla! Update.
After the update I have this screen.

The content has remained the same. About the modules you have to reposition them, but it's part of the upgrade steps J3->J4.

With PR enabled, I can't find the "Number of Columns" and "Order of Multiple Columns" parameters in "Blog Layout".
Screan:

Is npm necessary?

ChristineWk · 2020-12-12T12:05:21Z

I have done the various steps from J! 3.10, but then didn't apply the PR and upgraded to J! 4-dev with Joomla! Update.
After the update I have this screen.

(?) #28465
#31561

Harmageddon · 2020-12-12T12:48:00Z

Thank you for testing!

After the update I have this screen.

That's a known issue, see comment by @ChristineWk. Not sure if it's fixed by #31561, but we can ignore it for this PR.

In order to update based on this PR here, you need to use a custom update package. I added some details to the testing instructions. If it's not clear what to do, feel free to ask! :-)

With PR enabled, I can't find the "Number of Columns" and "Order of Multiple Columns" parameters in "Blog Layout".

This PR does not re-introduce the parameters, because in #18319, the choice was made to remove these parameters and use CSS classes instead. This PR adds a step to the update to 4.0 (which is why you need to use the update package of this PR instead of applying the PR after the update). There, the parameters from J3 are converted to the according CSS classes for J4.
So after you updated with an update package from this PR, the field "Blog Class" in your screenshot should contain something, and in frontend, the layout should look similar to that from J3.

Is npm necessary?

No, not for this PR.

adj9 · 2020-12-12T16:06:28Z

Reset del sito, base 3.9.24-dev
Upgrade to 3.10
Create 4 articles in a category
Create a Blog category
Upgrade to 4 from URL custom of PR

The position of the items remains and is correct.

Blog Layout of the BackEnd is this

I did not understand how you act on the parameters "Number of Columns" and "Multi-Column Order".

adj9 · 2020-12-12T16:30:31Z

Sorry

The parameter Blog Class works.

adj9 · 2020-12-12T16:35:49Z

I have tested this item ✅ successfully on 905d509

With a prev steps, the par Blog Class works. :)

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

ghost · 2020-12-13T05:09:33Z

I have tested this item ✅ successfully on 905d509

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

ChristineWk · 2020-12-13T14:49:15Z

@Harmageddon Could you please wait with merging, as I'm trying to start the update from J 3.10.0.alpha4-dev to J 4.0.0 (with the update package) Thks. I hope it will work :-)

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

ChristineWk · 2020-12-13T15:37:36Z

a) Update was successful:

::

b) Your site has been updated. Your Joomla version is now ‎4.0.0-beta6-dev+pr.31570

c) but: It's broken.
An error has occurred.
0 Call to undefined method Joomla\CMS\Application\AdministratorApplication::isAdmin()

Then I made some checks etc:

There are tables not up to date! > Then Repair button > Update Structure > OK now.

Then I checked via "System" > Templates
Administrator: Atum
Site: Cassiopeia and Protostar (Copy)

Maintenance: Global Check in of:
categories_table
extensions_table
modules_table
Result: 219 items check in.

Templates Style: Changed Cassiopeia to default.

System Dashboard = OK
Home Dashboard = Broken (see above response).
Frontend: No Cassiopeia

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

chmst · 2020-12-28T14:11:36Z

About the Open Points: My suggestion

Adding both input fields into the categories layout is correct.
We add these classes to config.xml
Question is, which class to use during migration for a vertical "down" ordering. A class "column-x" means that the articles appear "across".

masonry-x (bootstrap v4) means ordering "down" but has some disadvantages
card-column is the correct and newer implementation for masonry but does not say how many columns.
something other like columns-down-x or card-columns-x

I think that users would understand best the masonry-x. Otherwise we must explain our own class. We can use this now as is or override the whole in our scss / layouts.

Would be nice to have mor meanings about that.

richard67 · 2021-01-02T09:17:23Z

As this PR here is still in draft status, and the alternative PR #30910 has been closed, should the issue #27478 be re-opened and the newer duplicate issue #31801 by the same author be closed? Or vice versa?

@Harmageddon Any plans about when you will mark the PR as ready for review?

ChristineWk · 2021-01-02T11:30:51Z

@richard67
My personal opinion is: #27478 should not be re-openend and #31801 should be closed, as both refers to this Draft.

Harmageddon · 2021-01-02T16:48:59Z

@Harmageddon Any plans about when you will mark the PR as ready for review?

I planned to allow for a discussion here regarding the open points (global parameter for Blog Class and the things @chmst pointed out). But if everyone implicitly agrees in silence, I'm going to add the global parameter, resolve the review above, and mark it as ready for review in the next few days. ;-)

chmst · 2021-01-02T17:20:29Z

@Harmageddon yes, please do so. I will be happy to test it and think that it is the best solution we can get.

Harmageddon · 2021-01-05T10:57:38Z

I added the global parameters for the blog class fields, along with a table in the testing instructions above that indicates which setting should lead to which result.
There is one inconsistency that I found (see last row of the table): If in J3, we set the global number of columns to 2, and the local number of columns for one menu item to 1, the update script now uses "columns-2"/"masonry-2" as the global option, but leaves the local class field empty, as one column would be equivalent to not adding any CSS class. However, if this field is empty, the global value of "columns-2"/"masonry-2" is used.
The only solution I see right now would be to use some nonsense class like "columns-1" in the case of a menu item having only one column specified. Does this make sense?

ChristineWk · 2021-01-05T16:33:15Z

I added the global parameters for the blog class fields, along with a table in the testing instructions above that indicates which setting should lead to which result.

Thats works. Thank you!

The only solution I see right now would be to use some nonsense class like "columns-1" in the case of a menu item having only one column specified. Does this make sense?

Hmm. Tested something:

Menus Edit Item: Blog Layout it shows:
Use Global masonry-2 (per default)

a) if you want to delete the: masonry-2. It‘s (was) not possible, it will be changed to: "Use Global (masonry-2)" and becomes inactive.

b) To change that menu to 1 column, you have to enter (overwrite) with e.g: column-1. Thats works.

All other menus remains unchanged (= still showing e.g. masonry-2 Layout) = OK.

richard67 · 2021-01-09T12:35:13Z

@Harmageddon Could you remove the sentence about draft status at the beginning of the testing instructions? Thanks in advance.

Harmageddon · 2021-01-09T12:38:26Z

@richard67 Oh, sorry. Done! Thank you for the reminder. :-)

drmenzelit · 2021-01-09T15:52:40Z

I have tested this item ✅ successfully on ef54688

All columns parameters I had set up in J 3.10 were modified in the corresponding class (columns-x or masonry-x) after update to J4

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

ChristineWk · 2021-01-09T16:20:50Z

Thanks @drmenzelit for testing.

In principle, the test was also successful for me, but I waited for a comment, because of the topic of column-1, as written above. Ev. to enter manually: column-1 (if desired) was just a suggestion & shouldn't be a problem.

drmenzelit · 2021-01-09T16:24:03Z

@ChristineWk sorry, I missed your comment...

drmenzelit · 2021-01-09T16:30:02Z

a) if you want to delete the: masonry-2. It‘s (was) not possible, it will be changed to: "Use Global (masonry-2)" and becomes inactive.

b) To change that menu to 1 column, you have to enter (overwrite) with e.g: column-1. Thats works.

a) That is the same behaviour as in columns parameters in J3, if you don't set a specific number of columns in the menu item, the global configuration will be taken
b) Related to a), I think it is ok to have to change manually to columns-1 if you want to have 1 column ( you have to do the same in J3)

ChristineWk · 2021-01-09T16:48:54Z

Thanks Viviana for your clarification/help

b) Related to a), I think it is ok to have to change manually to columns-1 if you want to have 1 column ( you have to do the same in J3)

That's what I meant.

ChristineWk · 2021-01-09T16:49:31Z

I have tested this item ✅ successfully on ef54688

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

richard67 · 2021-01-09T16:50:46Z

RTC

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

Harmageddon · 2021-01-09T16:53:24Z

@ChristineWk @drmenzelit Thank you for testing! :-)
I think I agree with you: People who want this very specific setting of having two columns globally, and one column for a single menu item just have to use the workaround with "column-1", or need to remove the global class and set the "column-2" locally. This should be okay, if we document the available classes somewhere.

wilsonge · 2021-01-23T20:51:08Z

This makes sense to me. Nice job - thanks!

Harmageddon added 2 commits December 2, 2020 18:16

Upgrade functionality for CSS-based blog layouts.

5960253

Use global parameters for num_columns and multi_column_order.

d027a0a

joomla-cms-bot added the PR-4.0-dev label Dec 3, 2020

Harmageddon changed the title ~~J4 upgrade layout classes~~ [4.0] Upgrade column blog layouts to according CSS classes Dec 3, 2020

Added blog class fields to categories view.

eee13c7

chmst reviewed Dec 7, 2020

View reviewed changes

administrator/components/com_admin/script.php Show resolved Hide resolved

Replaced subquery with join.

905d509

drmenzelit mentioned this pull request Dec 29, 2020

[4.0] Multi Column Order Missing #31801

Closed

Added global blog class parameters.

ef54688

Harmageddon marked this pull request as ready for review January 5, 2021 10:58

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Jan 9, 2021

drmenzelit mentioned this pull request Jan 12, 2021

[4.0] Blog Layout #32012

Closed

wilsonge merged commit 6e8f744 into joomla:4.0-dev Jan 23, 2021

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Jan 23, 2021

wilsonge added this to the Joomla 4.0 milestone Jan 23, 2021

Harmageddon mentioned this pull request Feb 28, 2021

[4.0] Fixed empty blog class on update #32547

Merged

richard67 mentioned this pull request Mar 31, 2021

[4.0] Blog layout ux #32943

Merged

chmst mentioned this pull request Apr 27, 2021

[4.0] [REMINDER] Remove migration script for blog layout #33379

Closed

Harmageddon mentioned this pull request May 2, 2021

[4.0] Remove Migration Script #33428

Merged

	&[class^="masonry-"],
	&[class*=" masonry-"] {
	display: block;
	column-gap: $cassiopeia-grid-gutter;

	.blog-item {
	margin-bottom: $cassiopeia-grid-gutter;
	page-break-inside: avoid;
	break-inside: avoid;
	}
	}

[4.0] Upgrade column blog layouts to according CSS classes #31570

[4.0] Upgrade column blog layouts to according CSS classes #31570

Conversation

Harmageddon commented Dec 3, 2020 • edited Loading

Summary of Changes

Testing Instructions

How to test the "List All Categories" menu item type

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Documentation Changes Required

Open Points

Screenshots

chmst commented Dec 3, 2020

brianteeman commented Dec 3, 2020

Harmageddon commented Dec 3, 2020

brianteeman commented Dec 3, 2020

Harmageddon commented Dec 3, 2020

brianteeman commented Dec 3, 2020

Harmageddon commented Dec 4, 2020

Harmageddon commented Dec 4, 2020

chmst commented Dec 7, 2020

ChristineWk commented Dec 8, 2020 • edited Loading

Harmageddon commented Dec 8, 2020

N6REJ commented Dec 10, 2020

chmst commented Dec 10, 2020

Harmageddon commented Dec 10, 2020 • edited Loading

adj9 commented Dec 12, 2020 • edited Loading

ChristineWk commented Dec 12, 2020

Harmageddon commented Dec 12, 2020

adj9 commented Dec 12, 2020 • edited Loading

adj9 commented Dec 12, 2020

adj9 commented Dec 12, 2020

ghost commented Dec 13, 2020

ChristineWk commented Dec 13, 2020

ChristineWk commented Dec 13, 2020

chmst commented Dec 28, 2020

richard67 commented Jan 2, 2021

ChristineWk commented Jan 2, 2021

Harmageddon commented Jan 2, 2021

chmst commented Jan 2, 2021

Harmageddon commented Jan 5, 2021

ChristineWk commented Jan 5, 2021

richard67 commented Jan 9, 2021

Harmageddon commented Jan 9, 2021

drmenzelit commented Jan 9, 2021

ChristineWk commented Jan 9, 2021 • edited Loading

drmenzelit commented Jan 9, 2021

drmenzelit commented Jan 9, 2021

ChristineWk commented Jan 9, 2021

ChristineWk commented Jan 9, 2021

richard67 commented Jan 9, 2021

Harmageddon commented Jan 9, 2021

wilsonge commented Jan 23, 2021

Harmageddon commented Dec 3, 2020 •

edited

Loading

ChristineWk commented Dec 8, 2020 •

edited

Loading

Harmageddon commented Dec 10, 2020 •

edited

Loading

adj9 commented Dec 12, 2020 •

edited

Loading

adj9 commented Dec 12, 2020 •

edited

Loading

ChristineWk commented Jan 9, 2021 •

edited

Loading