Problem/Motivation
We had to abandon some of the designs (particularly sections that were laid-out side-by-side, such as 'Recipe Ingredients' alongside 'Recipe Instructions'). The reason we had to abandon this was so we could continue to use the 'Manage Display' page settings, rather than hardcoding fields into templates.
Proposed resolution
Layout Builder is nearly stable (hopefully it will be for Drupal 8.7). Once this is stable, we should use it so we can be more faithful to the original designs by @kjay
Remaining tasks
Enable Layout Builder moduleSet the 'Full' view mode for recipes to use layout builder templates for rendering content.Make sure that the site still looks like it currently does, no regresssions.
There is a follow-up issue to have this view mode then look like the original designs.
#3027616: Style Recipes in Full View Mode to Look Like the Original Designs
User interface changes
None.
API changes
None.
Data model changes
None.
Comment | File | Size | Author |
---|---|---|---|
#28 | Screenshot_2019-03-29 Edit layout for Recipe content items Site-Install(1).png | 80.7 KB | shaal |
#28 | Screenshot_2019-03-29 Manage display Site-Install.png | 44.49 KB | shaal |
#27 | 3027614-26.patch | 12.86 KB | markconroy |
#27 | interdiff-25-26.txt | 589 bytes | markconroy |
#25 | interdiff-19-25.txt | 533 bytes | markconroy |
Comments
Comment #2
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedComment #3
Denes.Szabo CreditAttribution: Denes.Szabo as a volunteer and at Petend commentedI just tested it manually that is described under the remaining tasks. Everything seems fine.
I will attach few screenshot of a recipe page that proves the layout builder works as expected.
Next steps should be to enable the layout builder module as dependency of the Umami demo and find out the way to to set recipe's full display mode use layout builder from install configuration. If I get it well the new dependency should be added to the info YML.
Comment #4
Denes.Szabo CreditAttribution: Denes.Szabo as a volunteer and at Petend commentedScreenshot of a recipe page without using Layout Builder.
Comment #5
Denes.Szabo CreditAttribution: Denes.Szabo as a volunteer and at Petend commentedScreenshot of a recipe page using Layout Builder.
Comment #6
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedThanks for checking that @Denes.Szabo.
I've now created a patch for us that:
1) Enables layout builder (and layout discovery) modules
2) Sets Layout Builder for the layout of the 'Full' view mode for recipes
I see no regressions, so if you'd like to review this and mark it RTBC if you are happy with it, that would be great. We can then start to work on #3027616: Style Recipes in Full View Mode to Look Like the Original Designs.
Thanks again.
Comment #7
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedSorry, looks like I uploaded the wrong patch.
This one should be working.
Comment #9
BrightBoldI don't know why the tests are failing, but I can confirm that the patch applies cleanly, that with the patch applied Layout Builder is enabled and Recipes in Full view mode are set to use it, and that (as @Denes.Szabo confirmed by making the changes manually), recipe full page views are identical before and after the patch.
BEFORE:
AFTER:
Comment #10
tim.plunkettThis part must be removed, then tests should pass.
Comment #11
BrightBoldThanks Tim! Here goes...
Comment #12
tatarbjPerformed manual tests confirm it works well, here are the steps:
Drupal 8.7.x site (without #11 patch)
8.7.x code is cloned, composer install, site is manually installed from the UI, chosing demo umami as profile.
Site is successfully installed and the recipe node (/recipes/vegan-chocolate-and-nut-brownies) shows the attached screen d87x_before3027614_uid0.png as Anonymous sees it.
You can see how admin/modules pages look like to see none of the Layout related modules are enabled on d87x_before3027614_uid1_modules.png; and the settings of recipe content-type's full view is the classic drupal one on d87x_before3027614_uid1_settings.png.
Drupal 8.7.x site (with #11 patch)
8.7.x code is cloned, patch is applied successfully, composer install, site is manually installed from the UI, chosing demo umami as profile.
Site is successfully installed and the recipe node (/recipes/vegan-chocolate-and-nut-brownies) shows the attached screen on d87x_after3027614_uid0.png as Anonymous sees it.
You can see how admin/modules pages look like to see none of the Layout related modules are enabled on d87x_after3027614_uid1_modules.png; and the settings of recipe content-type's full view is the classic drupal one on d87x_after3027614_uid1_settings.png.
Note: Few pictures are not shown as files are not correctly installed, but as it's on both installation, we should ignore it as false positive in this scope.
The attached screens show the #11 resolves the issue correctly. I've also updated the remaining tasks as all of them are resolved now.
Bests,
Balazs.
Comment #13
Eli-TComment #14
Eli-TPostponing as although RTBC, do not want to risk committing without Layout Builder being stable. Awesome to have this ready to go when that happens!
Comment #16
Gábor HojtsySending for retest now.
Comment #17
Gábor HojtsyI see layout builder is being used but the template is not removed. Is that so to keep the template around in case people disable layout builder? Or should we remove the template since it now works with layout builder?
Comment #18
Gábor HojtsySpeaking of this one: https://cgit.drupalcode.org/drupal/tree/core/profiles/demo_umami/themes/... is that still being used with layout builder?
Comment #19
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedIt looks like we can remove the node--recipe--full.html.twig template, as it's only really being used to create a .node__header .page-title class, but this is also available in the node.html.twig file, so it gets picked up from there not. Actually, I deleted that file just to test before applying the patch and the recipe full view mode was still perfect, so looks like we can remove that file whether we commit this patch or not.
Patch and screenshot of before and after attached (I bet you can't guess which is which).
Comment #21
shaalI tested #19
It looks like
recipe
content type doesn't have Layout enablad.(But if I enable layout manually for that content type - it looks great!)
Comment #22
Gábor HojtsyThat would need to be in the patch then.
Comment #23
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commented@shaal
Correct, that's
default
view mode. We are only using Layout Builder forFull content
Comment #24
Gábor HojtsyTrue, we should not enable it for default. I tried this out and the styling of the layout builder display / help needs some work. It appears much better with the same margins, etc. in bartik.
Comment #25
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedThat’s the ‘highlighted’ region, it doesn't really have anything to do with Layout Builder per se.
Here's a new patch to add our standard container class around it - perhaps we can make it even nice in a new follow-up.
Comment #27
markconroy CreditAttribution: markconroy as a volunteer and at Annertech commentedNew patch, which should stop the failing tests.
Comment #28
shaalLayout builder is enabaled for
Full content
view-mode of therecipe
content type.It is possible to edit the page layout, and change the positions of various elements in the page.
#24 was also fixed, and now the help message is displayed with the correct margin.
Great work!
Comment #29
Gábor HojtsyAssigning credits.
Comment #32
Gábor HojtsyThanks all, committed and will hopefully be included in 8.7.0-beta1.
Comment #33
Gábor HojtsyFollowups!
@markconroy opened #3044250: Make the highlighted region in Umami more flexible so it adapts to its use with Layout Builder and could be used to demonstrate placement of other blocks yesterday, we also need a followup for styling the layout builder components, particularly the checkbox, that is quite unfortunately placed/styled also.
Comment #34
tim.plunkettWhen working on any custom Layout Builder styling, please consider helping expand the handbook docs for how to theme the Layout Builder UI: https://www.drupal.org/docs/8/core/modules/layout-builder/theming-and-ex...
Additionally, there is a known bug when using Full Content view mode, Umami should be aware of that: #2955065: Customized layout does not display for node with customizations enabled when using full content view mode