This is a sub-issue to #1813898: [META] Add editable responsive layouts to Drupal core

Problem/motivation

Drupal themes are limited to mostly one specific layout, so site builders opted to use more flexible solutions like Panels that allows people to switch between different layouts for different pages / locations. We have added layouts under #1787634: [META] Decouple layouts from themes to core, which will allow for the selection of layouts, but it is still not possible for site builders to edit layouts on the fly.

Also, today's various output devices require websites to be available with responsive layouts, where a page layout is not fixed to one configuration, but instead depend on how the content should be presented on different devices.

Proposed solution

Drupal core already has breakpoints and grids to offer guides are proposed in #1816650: Add swappable (dynamic) grid systems to core. Finally, a dynamic set of regions are proposed in #1813910: Add region module to Drupal core (for editable responsive layouts). These combined with a user interface to map regions to grids on different breakpoints and exposing those as layouts for the existing layout system provides full flexibility to site builders to create their own layouts.

- Introduce a responsive layout plugin
- Define grids and breakpoints to be used for these layouts (neither module has UIs to make this editable yet)
- Define a default layout to be cloned and edited

EditLayout.jpg

Remaining tasks

There are clearly lots of cleanup tasks and opportunities for this patch. Javascript needs to be cleaned up, more support for non-equal-column grids, em based breakpoints. Tests need to be added, and so on and on.

CommentFileSizeAuthor
#6 rlayout-6.patch131.74 KBGábor Hojtsy
#6 interdiff.txt5.43 KBGábor Hojtsy
#5 rlayoutset.test_layout_01.yml_.txt950 bytesnevergone
#4 medium_plan.png20.3 KBnevergone
#4 medium_result.png20.35 KBnevergone
#4 wide_plan.png21.09 KBnevergone
#4 wide_result.png23.24 KBnevergone
#4 some_item_is_not_dragabble_among.png13.29 KBnevergone
#2 EditLayout.jpg95.51 KBGábor Hojtsy
#1 rlayout-1.patch134.95 KBGábor Hojtsy
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Issue tags: +Spark, +Spark Sprint 7
FileSize
rlayout-1.patch134.95 KB

The proposed patch is feature equivalent to the http://drupal.org/project/layout module.

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
FileSize
EditLayout.jpg95.51 KB

Status: Needs review » Needs work

The last submitted patch, rlayout-1.patch, failed testing.

nevergone’s picture

nevergone CreditAttribution: nevergone commented
FileSize
some_item_is_not_dragabble_among.png13.29 KB
wide_result.png23.24 KB
wide_plan.png21.09 KB
medium_result.png20.35 KB
medium_plan.png20.3 KB

Some reflection:

I designed a medium width layout:
http://drupal.org/files/medium_plan.png

But after save, the result:
http://drupal.org/files/medium_result.png

Similar the wide layout plan and result:
http://drupal.org/files/wide_plan.png
http://drupal.org/files/wide_result.png

It is not possible to move elements many times between each other:
http://drupal.org/files/some_item_is_not_dragabble_among.png

nevergone’s picture

nevergone CreditAttribution: nevergone commented
FileSize
rlayoutset.test_layout_01.yml_.txt950 bytes

And the test layout config…

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
FileSize
interdiff.txt5.43 KB
rlayout-6.patch131.74 KB

Updated pages patch to latest core and other changes carried over form similar codebase in #1813910: Add region module to Drupal core (for editable responsive layouts):

- moved rlayout entity to annotated plugin
- renamed delete_confirm to confirm_delete as per core standards
- added an initial short help text
- removed $items init from hook_menu

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, rlayout-6.patch, failed testing.

dcrocks’s picture

dcrocks CreditAttribution: dcrocks commented

A nitpick. I know your default layout is just a sample but I was wondering why you define a 'body' region when I thought the drupalism was 'content'. I just thought it confusing to not use a common drupal label and a label in common use as html's 'body' element.

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Status: Needs work » Postponed

Well, anyway, due to core things not happening below this layer that we wanted to build on, we just need to go and focus on those things and will pretty likely not have a responsive layout builder (and therefore this module) in core. Unless someone comes and want to run with all these. Start from #1813898: [META] Add editable responsive layouts to Drupal core.

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Version: 8.x-dev » 9.x-dev
Status: Postponed » Needs work

Given the feature freeze yesterday, this clearly did not happen. Moving to Drupal 9. Watch http://drupal.org/project/layout (or the renamed version rather, given core has now a layout module).

Gábor Hojtsy’s picture

Gábor Hojtsy
he/him
Primary language Hungarian
Location Hungary
CreditAttribution: Gábor Hojtsy commented
Issue summary: View changes

Add image, more notes on remaining tasks

catch’s picture

catch
he/him
Primary language English
CreditAttribution: catch commented
Version: 9.x-dev » 8.1.x-dev

Not impossible to do in a minor version, so moving back.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.0-alpha1 will be released the week of July 31, 2017, which means new developments and disruptive changes should now be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.6.x-dev » 8.7.x-dev

Drupal 8.6.0-alpha1 will be released the week of July 16, 2018, which means new developments and disruptive changes should now be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.