Skip to content
Snippets Groups Projects
Commit 7e970fe5 authored by Justin Toupin's avatar Justin Toupin
Browse files

Minor coding standards fixes.

parent 27856d41
No related branches found
No related tags found
1 merge request!103Issue #3295875: Add a new dedicated permission for Layout paragraphs configurations
Showing
with 110 additions and 57 deletions
Layout Paragraphs
============================
Layout Paragraphs provides an intuitive drag-and-drop experience for building flexible layouts with [Paragraphs](https://www.drupal.org/project/paragraphs). The module was designed from the ground up with paragraphs in mind, and works seamlessly with existing paragraph reference fields.
Layout Paragraphs provides an intuitive drag-and-drop experience for building
flexible layouts with [Paragraphs](https://www.drupal.org/project/paragraphs).
The module was designed from the ground up with paragraphs in mind, and works
seamlessly with existing paragraph reference fields.
### Key Features
- Intuitive drag-and-drop interface.
- Works with existing paragraph reference fields.
- Flexible configuration – site admins choose which paragraphs to use as “layout sections,” and which layouts should be available for each.
- Flexible configuration – site admins choose which paragraphs to use as “layout
sections,” and which layouts should be available for each.
- Compatible with Drupal 9.
### How it Works
- Provides a new Field Widget and Field Formatter for paragraph reference fields.
- Provides a new Field Widget and Field Formatter for paragraph reference
fields.
- Leverages Drupal’s Layout API for building layouts.
- Uses the paragraphs behaviors API for storing layout data.
### Getting Started
- Make sure the [Paragraphs module](https://www.drupal.org/project/paragraphs) is installed.
- Download/Require
(`composer require drupal/layout_paragraphs`)
and install Layout Paragraphs.
- Create a new paragraph type (admin > structure > paragraph types) to use for layout sections. Your new paragraph type can have whatever fields you wish, although no fields are required for the module to work.
- Enable the “Layout Paragraphs” paragraph behavior for your layout section paragraph type, and select one or more layouts you wish to make available.
- Make sure your new layout section paragraph type is selected under “Reference Type” on the content type’s reference field edit screen by clicking “edit” for the respective field on the “Manage fields” tab.
- Choose “Layout Paragraphs” as the field widget type for the desired paragraph reference field under “Manage form display”.
- Choose “Layout Paragraphs” as the field formatter for the desired paragraph reference field under “Manage display”.
- Make sure the [Paragraphs module](https://www.drupal.org/project/paragraphs)
is installed.
- Download/Require (`composer require drupal/layout_paragraphs`) and install
Layout Paragraphs.
- Create a new paragraph type (admin > structure > paragraph types) to use for
layout sections. Your new paragraph type can have whatever fields you wish,
although no fields are required for the module to work.
- Enable the “Layout Paragraphs” paragraph behavior for your layout section
paragraph type, and select one or more layouts you wish to make available.
- Make sure your new layout section paragraph type is selected under “Reference
Type” on the content type’s reference field edit screen by clicking “edit” for
the respective field on the “Manage fields” tab.
- Choose “Layout Paragraphs” as the field widget type for the desired paragraph
reference field under “Manage form display”.
- Choose “Layout Paragraphs” as the field formatter for the desired paragraph
reference field under “Manage display”.
- That’s it. Start creating (or editing) content to see the module in action.
### Layout Paragraphs vs Layout Builder
Layout Paragraphs provides an effortless drag-and-drop editing experience for writers, editors, and marketers. It has been designed from the ground up to meet the needs of people who work with content. Unlike Layout Builder in Drupal core, Layout Paragraphs is not a site building tool. Rather, Layout Paragraphs is an authoring tool. (Also note that Layout Paragraphs is compatible with Layout Builder, meaning both can be installed and used on the same site.)
Layout Paragraphs provides an effortless drag-and-drop editing experience for
writers, editors, and marketers. It has been designed from the ground up to meet
the needs of people who work with content. Unlike Layout Builder in Drupal core,
Layout Paragraphs is not a site building tool. Rather, Layout Paragraphs is an
authoring tool. (Also note that Layout Paragraphs is compatible with Layout
Builder, meaning both can be installed and used on the same site.)
#### Key Differences between Layout Paragraphs and Layout Builder
- Layout Paragraphs works with Paragraphs, not Blocks.
- Layout Paragraphs is built on Drupal’s field system. Configuring Layout Paragraphs is as easy as configuring an entity reference field (aka Paragraphs field).
- Layout Paragraphs supports quickly toggling between different layouts within a given section, without having to delete the section.
- Layout Paragraphs is built on Drupal’s field system. Configuring Layout
Paragraphs is as easy as configuring an entity reference field (aka Paragraphs
field).
- Layout Paragraphs supports quickly toggling between different layouts within a
given section, without having to delete the section.
- Layout Paragraphs supports nested layouts.
- Layout Paragraphs provides a “What You See Is What You Get” authoring experience, especially when configured to use the “Layout Paragraphs Builder” field formatter.
- Because Layout Paragraphs works with entity reference fields, it is extremely flexible and offers a broad range of applications.
- Layout Paragraphs is by design much simpler than Layout Builder, focused entirely on the content entry – or authoring – experience.
- Layout Paragraphs does not support creating templates, site-wide defaults, or default layouts for content types. For these and other site-building needs, Layout Builder is a more appropriate solution.
- Layout Paragraphs provides a “What You See Is What You Get” authoring
experience, especially when configured to use the “Layout Paragraphs Builder”
field formatter.
- Because Layout Paragraphs works with entity reference fields, it is extremely
flexible and offers a broad range of applications.
- Layout Paragraphs is by design much simpler than Layout Builder, focused
entirely on the content entry – or authoring – experience.
- Layout Paragraphs does not support creating templates, site-wide defaults, or
default layouts for content types. For these and other site-building needs,
Layout Builder is a more appropriate solution.
### Maintainers
- Creator: [Justin Toupin (justin2pin)](https://www.drupal.org/u/justin2pin)
......@@ -48,7 +74,8 @@ Layout Paragraphs provides an effortless drag-and-drop editing experience for wr
### Developer Notes
Maintainers are currently refactoring Layout Paragraphs to better encapsulate structure and logic and provide simple APIs for interacting with other systems.
Maintainers are currently refactoring Layout Paragraphs to better encapsulate
structure and logic and provide simple APIs for interacting with other systems.
**Business logic is captured in three structural classes:**
......@@ -56,13 +83,18 @@ Maintainers are currently refactoring Layout Paragraphs to better encapsulate st
- \Drupal\layout_paragraphs\LayoutParagraphsSection
- \Drupal\layout_paragraphs\LayoutParagraphsComponent
**A Layout Paragraphs Renderer service** (LayoutParagraphsRendererService) provides a simple method for rendering a Layout Paragraph section.
**A Layout Paragraphs Renderer service** (LayoutParagraphsRendererService)
provides a simple method for rendering a Layout Paragraph section.
**The UI is provided through Plugins:**
- A Field Widget Plugin (LayoutParagraphsWidget) that provides the editing inteface.
- A Field Formatter Plugin (LayoutParagraphsFormatter) that renders the front end.
- A Paragraphs Behavior Plugin (LayoutParagraphsBehavior) that (a) renders the layout selection form, and (b) renders nested components within their respective regions for the front end.
- A Field Widget Plugin (LayoutParagraphsWidget) that provides the editing
interface.
- A Field Formatter Plugin (LayoutParagraphsFormatter) that renders the front
end.
- A Paragraphs Behavior Plugin (LayoutParagraphsBehavior) that (a) renders the
layout selection form, and (b) renders nested components within their
respective regions for the front end.
#### More on Structural Classes
......@@ -72,16 +104,29 @@ The Layout Paragraphs system is comprised of three primary parts:
- Layout Sections, which contain...
- Layout Components, which are wrappers/decorators for Drupal Paragraphs.
**A Layout** has a collection of Layout Sections and Layout Components. The main Layout class (LayoutParagraphsLayout) has methods for manipulating the layout in various ways, for example:
**A Layout** has a collection of Layout Sections and Layout Components. The main
Layout class (LayoutParagraphsLayout) has methods for manipulating the layout in
various ways, for example:
- Inserting a new component.
- Re-ordering sections and their respective, nested components.
Because a Layout is attached to a Paragraphs reference field, manipulating the layout (adding components, removing components, reordering components) will manipulate the reference field and the behavior settings for various paragraphs "under the hood". You can get the entity containing the field reference by using the "getEntity()" method on the Layout, or the reference field itself with "getFieldItemList()" (also on the Layout class).
Because a Layout is attached to a Paragraphs reference field, manipulating the
layout (adding components, removing components, reordering components) will
manipulate the reference field and the behavior settings for various paragraphs
"under the hood". You can get the entity containing the field reference by using
the "getEntity()" method on the Layout, or the reference field itself with
"getFieldItemList()" (also on the Layout class).
**A Layout Section** is a component (more below) with an applied Layout. A Layout Section has a collection of Layout Components, a layout plugin id, and layout configuration needed for rendering the layout.
**A Layout Section** is a component (more below) with an applied Layout. A
Layout Section has a collection of Layout Components, a layout plugin id, and
layout configuration needed for rendering the layout.
**Layout Components** wrap, or decorate, paragraph entities with additional properties and functionality specific to working with layouts (i.e. the component's region, the component's parent, etc.). Layout Components are the simplest element and smallest "building block" within the Layout Paragraphs system.
**Layout Components** wrap, or decorate, paragraph entities with additional
properties and functionality specific to working with layouts (i.e. the
component's region, the component's parent, etc.). Layout Components are the
simplest element and smallest "building block" within the Layout Paragraphs
system.
#### Example Code: Working with a Layout
......@@ -90,9 +135,9 @@ Because a Layout is attached to a Paragraphs reference field, manipulating the l
// and the paragraph reference field name.
$layout = new LayoutParagraphsLayout($node, $field_name);
// Insert a new component directly after the exisiting paragraph with the given uuid.
// This will add the new component into the same section and region as the paragraph
// with the given uuid.
// Insert a new component directly after the exisiting paragraph with the given
// uuid. This will add the new component into the same section and region as the
// paragraph with the given uuid.
$layout->insertAfterComponent($existing_paragraph_uuid, $the_new_paragraph);
// Call the save() method on the node to save the changes permanently.
......@@ -101,9 +146,14 @@ $layout->getEntity()->save();
#### Example Code: Rendering a Layout Paragraph
Note that rendering a Layout Section is already handled in the Layout Paragraphs Paragraph Behavior. Calling this service directly would only be necessary for cases where the developer wants to explicitly render the regions and components of a Layout Section, outside of the context of rendering the paragraph to which the layout is attached. In other words, you shouldn't need to do this in 99% of cases.
Note that rendering a Layout Section is already handled in the Layout Paragraphs
Paragraph Behavior. Calling this service directly would only be necessary for
cases where the developer wants to explicitly render the regions and components
of a Layout Section, outside of the context of rendering the paragraph to which
the layout is attached. In other words, you shouldn't need to do this in 99% of
cases.
See \Drupal\layout_paragraphs\Plugin\paragraphs\Behavior\LayoutParagraphsBehavior::view
See: \Drupal\layout_paragraphs\Plugin\paragraphs\Behavior\LayoutParagraphsBehavior::view
```php
$layout_service = \Drupal::service('layout_paragraphs');
......
width: '90%'
height: auto
autoresize: true
\ No newline at end of file
autoresize: true
show_paragraph_labels: 0
show_layout_labels: 0
paragraph_behaviors_label: 'Behaviors'
paragraph_behaviors_position: -99
\ No newline at end of file
paragraph_behaviors_position: -99
......@@ -90,7 +90,7 @@
z-index: 90;
}
.lpb-controls.is-layout {
background-color: #00659B;
background-color: #00659b;
border-radius: 6px 6px 0px 0px;
box-shadow: none;
color: #fff;
......@@ -255,7 +255,7 @@
cursor: pointer;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 6px;
background-color: #FFFFFF;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='.5' fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23130F13'/%3E%3C/svg%3E%0A");
background-size: cover;
margin: auto;
......@@ -263,7 +263,7 @@
transition: all .15s linear;
}
.lpb-btn--add:hover {
background-color: #E1E0E1;
background-color: #e1e0e1;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 6V11H18V13H13V18H11V12.999L6 13V11L11 10.999V6H13Z' fill='%23130F13'/%3E%3C/svg%3E%0A");
opacity: 1;
}
......@@ -336,7 +336,7 @@ div.lpb-enable__button {
a.lpb-enable-button {
align-items: center;
background-color: #00659B;
background-color: #00659b;
border: none;
border-radius: 3px;
color: white;
......@@ -408,7 +408,7 @@ a.lpb-enable-button::before {
}
.lp-builder:not(.is-dragging) .lpb-tooltip--focus:focus + .lpb-tooltiptext,
.lp-builder:not(.is-dragging) .lpb-tooltip--hover:hover + .lpb-tooltiptext,
.lpb-tooltiptext--visible{
.lpb-tooltiptext--visible {
opacity: 1;
}
.js-lpb-ui-message {
......
.lpb-component-list__group > * {
display: flex;
flex-wrap: wrap;
......@@ -18,4 +17,4 @@
.lpb-component-list__item img {
margin-right: 10px;
max-width: 24px;
}
\ No newline at end of file
}
......@@ -22,4 +22,4 @@
}
.layout-select .layout-select__item-icon svg {
display: block;
}
\ No newline at end of file
}
......@@ -7,4 +7,4 @@ package: 'Paragraphs'
configure: layout_paragraphs.label_settings
dependencies:
- paragraphs:paragraphs
- drupal:layout_discovery
\ No newline at end of file
- drupal:layout_discovery
......@@ -13,4 +13,4 @@ layout_paragraphs.modal_settings:
route_name: layout_paragraphs.modal_settings
title: 'Modal Settings'
base_route: layout_paragraphs.label_settings
weight: 200
\ No newline at end of file
weight: 200
......@@ -25,4 +25,4 @@ services:
arguments:
- '@entity_type.manager'
tags:
- { name: access_check, applies_to: _layout_paragraphs_builder_access }
\ No newline at end of file
- { name: access_check, applies_to: _layout_paragraphs_builder_access }
.js-lpb-reordering-disabled .js-lpb-component {
cursor: default;
}
\ No newline at end of file
}
......@@ -6,4 +6,4 @@ disable_reorder:
css/disable-reorder.css: {}
dependencies:
- core/jquery
- layout_paragraphs/builder
\ No newline at end of file
- layout_paragraphs/builder
......@@ -4,4 +4,4 @@ services:
arguments:
- '@entity_type.manager'
tags:
- { name: access_check, applies_to: _layout_paragraphs_builder_access }
\ No newline at end of file
- { name: access_check, applies_to: _layout_paragraphs_builder_access }
......@@ -54,4 +54,4 @@ class LayoutParagraphsEventCommand implements CommandInterface {
];
}
}
\ No newline at end of file
}
......@@ -685,6 +685,8 @@ class LayoutParagraphsBuilder extends RenderElement implements ContainerFactoryP
* The element container's id.
* @param \Drupal\Core\Render\Markup $element
* The UI element.
* @param string $key
* The Javascript object key to use for storing the element.
* @param string $method
* The javascript method to use to attach $element to its container.
*/
......
......@@ -28,6 +28,12 @@ class LayoutParagraphsLayoutTempstoreRepository {
/**
* Get a layout paragraphs layout from the tempstore.
*
* @param \Drupal\layout_paragraphs\LayoutParagraphsLayout $layout_paragraphs_layout
* A layout paragraphs layout instance.
*
* @return \Drupal\layout_paragraphs\LayoutParagraphsLayout
* The layout paragraphs layout instance from the tempstore.
*/
public function get(LayoutParagraphsLayout $layout_paragraphs_layout) {
$key = $this->getStorageKey($layout_paragraphs_layout);
......
......@@ -4,7 +4,6 @@ namespace Drupal\layout_paragraphs\Routing;
use Symfony\Component\Routing\Route;
use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\layout_paragraphs\LayoutParagraphsLayout;
use Drupal\Core\ParamConverter\ParamConverterInterface;
use Drupal\layout_paragraphs\LayoutParagraphsLayoutTempstoreRepository;
......@@ -26,7 +25,7 @@ class LayoutParagraphsTempstoreParamConverter implements ParamConverterInterface
/**
* The Entity Type Manager service.
*
* @param \Drupal\Core\Entity\EntityTypeManagerInterface;
* @var \Drupal\Core\Entity\EntityTypeManagerInterface
*/
protected $entityTypeManager;
......@@ -35,6 +34,8 @@ class LayoutParagraphsTempstoreParamConverter implements ParamConverterInterface
*
* @param \Drupal\layout_paragraphs\LayoutParagraphsLayoutTempstoreRepository $layout_paragraphs_layout_tempstore
* The layout tempstore repository.
* @param \Drupal\Core\Entity\EntityTypeManagerInterface $entity_type_manager
* The entity type manager service.
*/
public function __construct(LayoutParagraphsLayoutTempstoreRepository $layout_paragraphs_layout_tempstore, EntityTypeManagerInterface $entity_type_manager) {
$this->layoutParagraphsLayoutTempstore = $layout_paragraphs_layout_tempstore;
......
......@@ -5,4 +5,3 @@ package: Layout Paragraphs
type: module
dependencies:
- layout_paragraphs:layout_paragraphs
......@@ -3,10 +3,6 @@
namespace Drupal\Tests\layout_paragraphs\Functional;
use Drupal\Tests\BrowserTestBase;
use Drupal\field\Entity\FieldConfig;
use Drupal\Core\Session\AccountInterface;
use Drupal\field\Entity\FieldStorageConfig;
use Drupal\Tests\paragraphs\Functional\Classic\ParagraphsTestBase;
use Drupal\Tests\paragraphs\FunctionalJavascript\ParagraphsTestBaseTrait;
/**
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment