Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Page grid layout template #2112

Merged
merged 67 commits into from
Nov 29, 2023
Merged

Page grid layout template #2112

merged 67 commits into from
Nov 29, 2023

Conversation

jimsafley
Copy link
Member

This PR adds a grid layout to site pages. It gives page builders the option to organize their blocks in a grid rather than just stacked on top of each other (normal flow). It also adds the ability to set page and block templates that are provided by the theme.

@jimsafley jimsafley requested a review from zerocrates November 14, 2023 15:41
@jimsafley
Copy link
Member Author

This PR adds several events.

Modules can add elements to BlockLayoutDataForm using its form.add_elements event. Due to this being a dynamic form, they can opt-in to automatically populate and apply the values by adding a "data-key" attribute containing the corresponding block layout data key. Elements that need more complex handling must attach to the following JS events on the document:

  • o:prepare-block-layout-data: Allow special handling of block layout data after a configure block layout click.
  • o:apply-block-layout-data: Allow special handling of block layout data after a configure block layout apply changes click.

Modules can add elements to PageLayoutDataForm using its form.add_elements event. Element names should be in the form o:layout_data[my_element_name] to automatically populate and apply the values.

To apply styles to the public page that were introduced by new form elements, modules can add classes and inline styles via these PHP events:

  • block_layout.classes: Add classes for styling the block layout. Use $event->getTarget() to get the SitePageBlockRepresentation. Use $event->getParams() and $event->setParams() to set classes to the "classes" key. Classes will apply to divs that wrap around block markup.
  • block_layout.inline_styles: Add inline styles for styling the block layout. Use $event->getTarget() to get the SitePageBlockRepresentation. Use $event->getParams() and $event->setParams() to set inline styles to the "inline_styles" key. Inline styles will apply to divs that wrap around block markup.
  • page_layout.classes: Add classes for styling the page layout. Use $event->getTarget() to get the SitePageRepresentation. Use $event->getParams() and $event->setParams() to set classes to the "classes" key. Classes will apply to a div that wraps around every block.
  • page_layout.inline_styles: Add inline styles for styling the page layout. Use $event->getTarget() to get the SitePageRepresentation. Use $event->getParams() and $event->setParams() to set inline styles to the "inline_styles" key. Inline styles will apply to a div that wraps around every block.

@jimsafley
Copy link
Member Author

jimsafley commented Nov 20, 2023

This PR adds page layout and block layout templates. Page builders can now select templates to use for displaying pages and blocks. Themes provide their own templates by adding them to their theme.ini file and providing a corresponding template file in their common directory..

For example, a page template labeled "My page template" with a corresponding template file in /view/common/page-template/my-template-name.phtml will have the following format in the INI file:

page_templates.my-template-name = "My page template"

And a HTML block template labeled "My HTML block template" with a corresponding template file in /view/common/block-template/my-template-name.phtml will have the following format in the INI file:

block_templates.html.my-template-name = "My HTML block template"

Note that in both INI examples my-template-name is the name of the corresponding .phtml file in either common/page-template or common/block-template. Note that the block template configuration includes the name of the block (in this case .html.). Because there could be more than one block type in common/block-template, it is best practice to prepend the block name onto the template name.

@zerocrates zerocrates merged commit 9ca0c8e into develop Nov 29, 2023
4 checks passed
@jimsafley jimsafley deleted the page-grid-layout-template branch November 29, 2023 19:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants