nuvoleweb/ui_patterns

[NOTE] Development has moved to https://drupal.org/project/ui_patterns

ui_patterns's Issues

Support new Drupal 8.3 layout_discovery core module and decommission layout_plugin

The layout_discovery module has been introduced into core as an experimental module. Panels and Panelizer have created new branches that drop support of layout_plugin in favor of layout_discovery.

Specifically the ui_patterns_layouts module.

Might be a good idea to open a new branch that does the same to help with testing?

Thanks,

•• matt

Integrate UI Patters with Layout Plugin module

Integrate patterns with views

Scope

The cope of this issue is to provide views integration so that patterns can be used to theme views rows and displays.

Tasks

• Investigate solution
• Build new module called ui_patterns_views
• Implement solution

Support mapping multiple values to a pattern field

Version 8.x-1.0-beta5

After looking at the Field Group docs, I had the idea of using ui_patterns and field groups for flexible layout options on an entity. Similar to how patterns can be used for layout plugins, but on a field group level. For example, take the following pattern

l_sidebar_after:
  label: "Layout: Sidebar After"
  description: Main content area followed by a sidebar.
  fields:
    primary:
      type: render_array
      label: Primary
      description: Primary Content
      preview: Primary content
    secondary:
      type: render_array
      label: Secondary
      description: Secondary Content
      preview: Secondary content

When used on a field group with more than 2 fields, assigning more than one entity field to a single pattern field (primary) has unexpected results. It appears to repeat the entire pattern multiple times with the first field assigned and does not display any subsequent fields.

Allow Twig namespaces in pattern definitions in order to override pattern template file

Scope

Allowing for template overrides when defining a pattern would make integration with third-party pattern libraries project, like PatternLab, very easy.

So ideally we would have:

blockquote:
  label: Blockquote
  use: @atoms/path/to/blockquote.html.twig   
...

Or:

blockquote:
  label: Blockquote
  template: my-custom-template-name
...

Tasks

• Implement the thing

Fatal Error When Defining Library For Pattern

I'm trying to define the following library in my pattern definition:

libraries:
- traditional:
css:
component:
//fonts.googleapis.com/css?family=Radley:400,400italic: { type: external }
//fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic: { type: external }

After doing so, when I attempt to load the pattern I get a fatal error:

Recoverable fatal error: Argument 1 passed to Drupal\ui_patterns\UiPatternsManager::processLibraries() must be of the type array, string given, called in /Users/brian/repos/real-world/drupal/modules/ui_patterns/src/UiPatternsManager.php on line 235 and defined in Drupal\ui_patterns\UiPatternsManager->processLibraries() (line 225 of /Users/brian/repos/real-world/drupal/modules/ui_patterns/src/UiPatternsManager.php)

If I instead add the library definition in my themes libraries.yml file and reference that in the pattern, things work fine. The main difference I see between my library and the examples in the documentation is that my assets are all external. No idea if that is related though.

I've attached the full pattern definition and the full error message.
library_error.txt
type-system-traditional.ui_patterns.yml.txt

Use generic .twig extension for a better integration with tools like PatternLab

As the constant TWIG_EXTENSION is used when generating the path in processUseProperty I can't specify a Pattern Lab based twig template whose extension is just .twig rather than .html.twig.

Is there a workaround for this? I'd like to be able to specify a namespaced template and have that template used.

Make patterns actual objects

Scope

Up until now patterns have been mere arrays but after the introduction of derivatives they can now be objects.

Tasks

• Make it happen.

Refactor pattern plugins to use derivatives

Scope

This issue aims to refactor the way we collect and handle patterns in order to have a more robust and powerful system based on plugin derivatives. Work will be heavily inspired by @drupol's work on #62

Tasks

• Refactor pattern plugins to use derivatives
• Write tests

Allow multiple pattern definitions

Instead of one central file, the pattern definitions could be in multiple files, possibly in pattern-specific folders along with other files related to the specific pattern, e.g. the Twig template, Sass/CSS files, JavaScript, images etc.

E.g.

blockquote/
  _blockquote.scss
  blockquote.html.twig
  blockquote.json
  blockquote.ui_patterns.yml

Support for Multi-value fields

Version 8.x-1.0-beta5

First off, thanks for working on this module. There are a lot of potential advantages to it over or in addition to the Components module.

When using ui_patterns_ds in conjunction with Display Suite field templates, each value in a multi-value field is wrapped in the pattern template. This makes it seemingly impossible to use collection type patterns such as an unordered list through the ui.

Is this the expected behavior?

Add a new pattern render element

Scope

In order to ease pattern rendering in custom code we should add a custom pattern element render which could function as below:

    $build['my_pattern'] = [
      '#type' => 'pattern',
      '#id' => 'hero',
      '#fields' => [
        'title' => 'Hero Title',
        'subtitle' => 'Hero subtitle',
        'image' => 'http://example.com/path/to/image',
      ],
    ];

Tasks

• Implement render element as described above

Next steps before stable releases: Variants, Subfields, Multiple fields, Tags and Hidden patterns

The following is a list of improvements we wish to include in the first stable release. We would like to hear your thoughts about it.

• Variants: possibility for a pattern to expose variants, so that the preview page will automatically display all possible pattern variations. Variants can be mapped to fields or other properties when using patterns to render views, field templates, layouts, etc.
• Subfields: patterns are often composed by subfields, for example in the case of carousel you want a carousel title and each carousel slide, should have an image, a title and a link. This can be achieved by using the type: property. Subfields can be patterns themselves so that mappers will be also enabled to map views or entity fields when suing patterns with views, layouts, etc.
• Multiple fields: we should define which field can accept multiple values so that, for ex., a carousel can render a multiple image field seamlessly, this is a tricky one.
• Tags: each pattern should be tagged so that not all patterns will be exposed all the time in all contexts, i.e. it does not make sense to have a button being exposed as a layout, and vice-versa.
• Hidden patterns: possibilities to declare a pattern as hidden so that it can be considered as a "service pattern" and it will be not rendered in preview pages or exposed to mappers.

All issues above can be summarized in the following example of a carousel definition, we can use this to drive our discussion:

carousel:
  label: carousel
  variants:
    large:
      label: Large
      description: This is a large carousel.
    small:
      label: Small
      description: This is a small carousel.
  tags:
    - partial
  fields:
    title:
      type: string
      label: Title
    slides:
      type: pattern:slide
      multiple: true

{# pattern-carousel.html.twig #}
<div class="carousel">
  <h3 class="title">{{ title }}</h3>
  <div class="slides">
    {% for slide in slides %}
      {{ pattern('slide', slide) }}
    {% endfor %}
  </div>
</div>

slide:
  label: Slide
  hidden: true
  fields:
    image:
      type: pattern:image
    title:
      type: string
      label: Subtitle
      preview: Slide title.
    sudtitle:
      type: string
      label: Subtitle
      preview: Slide subtitle.
    url:
      type: url
      label: URL
      preview: URL the slide links to.

{# pattern-slide.html.twig #}
<a href="{{ url }}" class="slide">
  {{ pattern('image', image) }}
  <h4>{{ title }}</h4>
  <p>{{ subtitle }}</p>
</a>

image:
  label: Image
  hidden: true
  fields:
    url:
      label: URL      
      type: string
    title:
      label: Title       
      type: string

{# pattern-image.html.twig #}
<img src="{{ src }}" title="{{ title }}">

Add tests for paragraphs and field groups

Scope

Patterns can be integrated with paragraphs and field groups but we need to test that.

Tasks

• Write tests.

Allow use of nested render arrays in preview content

E.g. in this case the pattern shila_image is rendered, but the render array in shila_image's image field is not rendered.

shila_card:
  label: Card
  description: A card component
  fields:
    image:
      type: render
      label: Image
      description: Card image. Optional.
      preview:
        type: pattern
        id: shila_image
        fields:
          image:
            '#type': image
            '#uri': http://lorempixel.com/300/200/nature/
            '#width': 300
            '#attributes': {}

Improve "use:" property processing

When adding the following to one of my THEME.ui_patterns.yml files:
use: "@organisms/widgets/quote/quote.html.twig"

I get the following error on my Drupal site.

( ! ) Fatal error: Call to undefined method Twig_Loader_Chain::getSourceContext() in 
/Users/gertjanmeire/Sites/pf.dev/modules/ui_patterns/src/UiPatternsManager.php on line 341

I'm trying to use Pattern Lab with Drupal 8 and wanted this module to be the bridge between these 2 systems, it worked great until I tried adding the "use" statement to use my Pattern Lab template instead of one defined through YML.

Improve documentation

Scope

The scope of this issue is to improve documentation.

Tasks

• Do that.

Fatal error when setting pattern as default field formatter

When configuring DS to use pattern as default field formatter some errors are thrown:

Warning: reset() expects parameter 1 to be array, null given in Drupal\ui_patterns_ds\Plugin\DsFieldTemplate\Pattern->getCurrentField() (line 149 of /home/rob/Sites/clients/integration/web/modules/contrib/ui_patterns/modules/ui_patterns_ds/src/Plugin/DsFieldTemplate/Pattern.php) #0 /home/rob/Sites/clients/integration/web/core/includes/bootstrap.inc(548): _drupal_error_handler_real(2, 'reset() expects...', '/home/rob/Sites...', 149, Array) #1 [internal function]: _drupal_error_handler(2, 'reset() expects...', '/home/rob/Sites...', 149, Array) #2 /home/rob/Sites/clients/integration/web/modules/contrib/ui_patterns/modules/ui_patterns_ds/src/Plugin/DsFieldTemplate/Pattern.php(149): reset(NULL) #3 /home/rob/Sites/clients/integration/web/modules/contrib/ui_patterns/modules/ui_patterns_ds/src/Plugin/DsFieldTemplate/Pattern.php(117): Drupal\ui_patterns_ds\Plugin\DsFieldTemplate\Pattern->getCurrentField() #4 /home/rob/Sites/clients/integration/web/modules/contrib/ui_patterns/modules/ui_patterns_ds/src/Plugin/DsFieldTemplate/Pattern.php(100): Drupal\ui_patterns_ds\Plugin\DsFieldTemplate\Pattern->getContext() #5 /home/rob/Sites/clients/integration/web/modules/contrib/ds/ds.module(770): Drupal\ui_patterns_ds\Plugin\DsFieldTemplate\Pattern->alterForm(Array) #6 /home/rob/Sites/clients/integration/web/modules/contrib/ds/ds.module(812): ds_field_template_settings_form(Array, Object(Drupal\Core\Form\FormState), Array) #7 [internal function]: ds_field_formatter_third_party_settings_form(Object(Drupal\text\Plugin\Field\FieldFormatter\TextDefaultFormatter), Object(Drupal\field\Entity\FieldConfig), 'default', Array, Object(Drupal\Core\Form\FormState)) #8 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Extension/ModuleHandler.php(391): call_user_func_array('ds_field_format...', Array) #9 /home/rob/Sites/clients/integration/web/core/modules/field_ui/src/Form/EntityViewDisplayEditForm.php(174): Drupal\Core\Extension\ModuleHandler->invoke('ds', 'field_formatter...', Array) #10 /home/rob/Sites/clients/integration/web/core/modules/field_ui/src/Form/EntityDisplayFormBase.php(409): Drupal\field_ui\Form\EntityViewDisplayEditForm->thirdPartySettingsForm(Object(Drupal\text\Plugin\Field\FieldFormatter\TextDefaultFormatter), Object(Drupal\field\Entity\FieldConfig), Array, Object(Drupal\Core\Form\FormState)) #11 /home/rob/Sites/clients/integration/web/core/modules/field_ui/src/Form/EntityViewDisplayEditForm.php(36): Drupal\field_ui\Form\EntityDisplayFormBase->buildFieldRow(Object(Drupal\field\Entity\FieldConfig), Array, Object(Drupal\Core\Form\FormState)) #12 /home/rob/Sites/clients/integration/web/core/modules/field_ui/src/Form/EntityDisplayFormBase.php(180): Drupal\field_ui\Form\EntityViewDisplayEditForm->buildFieldRow(Object(Drupal\field\Entity\FieldConfig), Array, Object(Drupal\Core\Form\FormState)) #13 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Entity/EntityForm.php(115): Drupal\field_ui\Form\EntityDisplayFormBase->form(Array, Object(Drupal\Core\Form\FormState)) #14 [internal function]: Drupal\Core\Entity\EntityForm->buildForm(Array, Object(Drupal\Core\Form\FormState)) #15 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Form/FormBuilder.php(514): call_user_func_array(Array, Array) #16 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Form/FormBuilder.php(271): Drupal\Core\Form\FormBuilder->retrieveForm('entity_view_dis...', Object(Drupal\Core\Form\FormState)) #17 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Controller/FormController.php(74): Drupal\Core\Form\FormBuilder->buildForm(Object(Drupal\field_ui\Form\EntityViewDisplayEditForm), Object(Drupal\Core\Form\FormState)) #18 [internal function]: Drupal\Core\Controller\FormController->getContentResult(Object(Symfony\Component\HttpFoundation\Request), Object(Drupal\Core\Routing\RouteMatch)) #19 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array(Array, Array) #20 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/Render/Renderer.php(574): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() #21 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(124): Drupal\Core\Render\Renderer->executeInRenderContext(Object(Drupal\Core\Render\RenderContext), Object(Closure)) #22 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) #23 [internal function]: Drupal\Core\EventSubscriber\EarlyRenderingControllerWrapperSubscriber->Drupal\Core\EventSubscriber\{closure}() #24 /home/rob/Sites/clients/integration/vendor/symfony/http-kernel/HttpKernel.php(144): call_user_func_array(Object(Closure), Array) #25 /home/rob/Sites/clients/integration/vendor/symfony/http-kernel/HttpKernel.php(64): Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object(Symfony\Component\HttpFoundation\Request), 1) #26 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/StackMiddleware/Session.php(57): Symfony\Component\HttpKernel\HttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #27 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(47): Drupal\Core\StackMiddleware\Session->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #28 /home/rob/Sites/clients/integration/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(99): Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #29 /home/rob/Sites/clients/integration/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(78): Drupal\page_cache\StackMiddleware\PageCache->pass(Object(Symfony\Component\HttpFoundation\Request), 1, true) #30 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(47): Drupal\page_cache\StackMiddleware\PageCache->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #31 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(50): Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #32 /home/rob/Sites/clients/integration/vendor/stack/builder/src/Stack/StackedHttpKernel.php(23): Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #33 /home/rob/Sites/clients/integration/web/core/lib/Drupal/Core/DrupalKernel.php(652): Stack\StackedHttpKernel->handle(Object(Symfony\Component\HttpFoundation\Request), 1, true) #34 /home/rob/Sites/clients/integration/web/index.php(19): Drupal\Core\DrupalKernel->handle(Object(Symfony\Component\HttpFoundation\Request)) #35 {main}.

I think this only happens when no patterns are available.

What can we do with Derivers?

Hi team:

I just wanted to jump in here with a question about creating custom derivers, but first, I want to say that the work I see here is really exciting. It's wonderful that this is already a real thing we can do with Drupal 8. I would love to organize a BOF at Drupalcon to overview it.

To the question: I've been trying to port the http://dgo.to/webcomponents module and I started that effort before I found this module. It already seems that the majority of what I thought was going to be difficult with that port has already been implemented with the ui_patterns module. The missing piece is encapsulated in this file:

http://cgit.drupalcode.org/webcomponents/tree/modules/webcomponents_polymer/webcomponents_polymer.module?h=7.x-1.x

This is a sub-module of the webcomponents module that implements what is essentially a discovery class for finding Polymer-based Web Components.

webcomponents_polymer_webcomponents() is an implementation of hook_webcomponents. It's job is to find all the component files within a special "polymer" directory that is intended to be placed in a theme. This directory is built by executing the proper bower require commands that the web component ecosystem uses like we use composer.

_webcomponents_polymer_process_component parse the DOM structure of the discovered components. The properties, ids, human-readable names and other data are extracted. Then the details are saved to a registry.

The YAML approach that ui_patterns module seems to have more capability and flexibility. The Yaml isn't dependent on the actual structure of the component. It sounds like a more solid / flexible approach for the long term. But the simple fact that you have to include an external file to a 3rd party library means we would have to extend these libraries to include a Drupal-specific registry file. That might be a deal breaker for being able to embrace an ecosystem that wasn't build with PHP or Drupal in mind.

That leads me back my question in the title: Can we have the benefits of this module AND create a deriver that is smart enough to extract component registry data directly from the components?

Integrate UI Patters with Field Group module

Recursion (max function nesting level)

Something about the UI Patterns module and it's handling of templates was giving me recursion errors. On a development server without xdebug enabled I couldn't even rebuild the cache. On my local with xdebug I was getting max function nesting errors at level 200.

Uninstalling the module removed the error.

Unfortunately I don't have time to debug the problem as I'm mid-project and instead I had to ditch the module. I thought I'd report it here in case anyone has the problem and can help debug.

Add theme hook suggestions

Scope

In order to allow complex pattern integration we should implement theme hook suggestions.

Tasks

• Implement suggestions for all sub-modules
• Add tests

Use TypedData API to define and validate pattern definitions

Scope

The title says it all, this will allow us a much more streamlined interaction with patterns and it will improve DX.

Linked to #76

Tasks

• Implement this.

Fix warning when saving view mode layouts

Scope

When using patterns as a display suite layout we get the following error after saving:

Notice: Undefined index: path in ds_field_ui_layouts_save() (line 329 of modules/contrib/ds/includes/field_ui.inc).
ds_field_ui_layouts_save(Array, Object)
call_user_func_array('ds_field_ui_layouts_save', Array) (Line: 111)

Tasks

• Fix that.

Twig Error Loader: Unable to find template in ui_patterns/template

I am using your bootstrap_patterns as a model to organize and create patterns. I have decided to create folders for each pattern so that their yaml, twig and scss files are all in their own seperate directory. My directories are located within the theme folder as follows.

mytheme/templates/overview
mytheme/templates/patterns/card/

After deleting one of my twig pattern files and clearing the cache, I am receiving the following error when visiting the /patterns url.

The website encountered an unexpected error. Please try again later.

Twig_Error_Loader: Template "modules/contrib/ui_patterns/templates/pattern-carousel.html.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "modules/contrib/ui_patterns/templates/pattern-carousel.html.twig" in the Drupal theme registry.) in "themes/tie/templates/overview/patterns-overview-page.html.twig" at line 36. in Twig_Loader_Chain->getCacheKey() (line 115 of vendor/twig/twig/lib/Twig/Loader/Chain.php).
Drupal\Core\Template\TwigEnvironment->getTemplateClass('modules/contrib/ui_patterns/templates/pattern-carousel.html.twig', NULL) (Line: 378)
Twig_Environment->loadTemplate('modules/contrib/ui_patterns/templates/pattern-carousel.html.twig') (Line: 64)
twig_render_template('modules/contrib/ui_patterns/templates/pattern-carousel.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('pattern_carousel', Array) (Line: 435)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 195)
Drupal\Core\Render\Renderer->render(Array) (Line: 474)
Drupal\Core\Template\TwigExtension->escapeFilter(Object, Array, 'html', NULL, 1) (Line: 113)
__TwigTemplate_030615096e424a48a1866283eaeb0c1d563659a57ea77b3a898e760dbe3a3bb5->doDisplay(Array, Array) (Line: 381)
Twig_Template->displayWithErrorHandling(Array, Array) (Line: 355)
Twig_Template->display(Array) (Line: 366)
Twig_Template->render(Array) (Line: 64)
twig_render_template('themes/tie/templates/overview/patterns-overview-page.html.twig', Array) (Line: 384)
Drupal\Core\Theme\ThemeManager->render('patterns_overview_page', Array) (Line: 435)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 195)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 574)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 144)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 62)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 99)
Drupal\page_cache\StackMiddleware\PageCache->pass(Object, 1, 1) (Line: 78)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 50)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 652)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)

Missing Module in File System after Drush dl commands

Here is the following error I am receiving after running drush dl mymodule

The following module is missing from the file system: [warning]
ui_patterns_test_theme bootstrap.inc:236
Unknown path for ui_patterns_test_theme module.

Allow preview values to be empty

Currently a pattern plugin with empty or undefined preview definition key throws an error and is not registered.

But there may be occasions you might not want to add any value for the preview (e.g. if you have an optional region in your pattern, or the variable is only used as a flag to pull other triggers).

Is it possible to losen this requirement, that preview values must not be set?

Improve pattern definition validation

Scope

At the moment pattern definition validation happens in patterns ui manager, we should change that by providing a proper validation service.

Tasks

• Improve validation

Allow settings for patterns

Are there already any plans for allowing settings on a pattern plugin? This might be quite useful e.g. if you have variables in your pattern template that only control whether CSS modifier classes are added or not.

Or do you propose to fill these variables in preprocess hooks?

Add Twig function to render patterns in templates

It would be nice to have a Twig function to easily render embedded patterns within a Twig template.

Example

{{ pattern('pattern_id', {'field1': 'value', 'field2': 'another value'}) }}

With this you do not have to remember the pattern template paths for includes/embeds within other Twig templates. And this would also ensure the following:

• preprocess hook implementations of specific patterns are called when being embedded
• Template overrides are respected

Tasks

• Add Twig extension service that provides the corresponding Twig function to create and return a pattern render array
• Add tests
• Add documentation

Refactor tests

Scope

At the moment tests run using a target site that sits inside the module, this creates many problems with recursive symlinking and makes impossible to have a clean Kernel test setup, we should refactor that.

Tasks

• Refactor tests
• Add first Kernel test
• Port TravisCI to new test structure
• Update docs

Add ui_patterns dependencies to configuration

If for example a ui_patterns_layouts layout is used, the configuration does not contain a dependency to the ui_patterns_layouts module. This can result in the display breaking if ui_patterns_layouts is uninstalled. A dependency would prohibit uninstalling the module.

Style patterns overview page

Add pattern plugin validation

Use Bootstrap as base theme for demo site

Provide Display Suite field template plugin

Scope

The current issue wants to cover the following use cases;

• I have a multiple image field with image title enabled and I want to format it as a carousel (see http://getbootstrap.com/javascript/#carousel), meaning: all field values should be used in the same pattern.
• I have a multiple link field and I want to use a button pattern for it so that I can print a list of buttons using the link's label and url, meaning: field columns should be mapped to pattern's fields and we should repeat the same pattern on each link value

Tasks

• Investigate possible solutions
• Provide solution in a separate module called ui_patterns_ds
• Implement it

Allow libraries to be defined on pattern definitions

So a component can define its own libraries. E.g.

button:
  label: Button
  description: A simple button.
  fields:
    title:
      type: text
      label: Label
      description: The button label
      preview: Submit
    url:
      type: text
      label: URL
      description: The button URL
      preview: http://example.com
  libraries:
    - dropdown:
        js:
          js/dropdown.js: {}
        dependencies:
          - bootstrap/theme

Sort patterns by label on the overview page

Currently patterns seem to be listed in a 'random' order. It would be nice to have them sorted by the pattern label in alphabetical order.

Collections

How to work with collections, like your carousel example? It works in preview but in DS View Modes it is not possible to match fields.

Add Field Source custom plugin

Scope

In

\Drupal\ui_patterns_field_group\Plugin\field_group\FieldGroupFormatter\PatternFormatter::settingsForm()

We used to get field labels by using $this->fieldManager as shown below:

    $field_options = [];
    if (isset($this->group->children)) {
      // When creating the field group the children are not set yet.
      $fields = $this->fieldManager->getFieldDefinitions($this->group->entity_type, $this->group->bundle);
      $fields = array_intersect_key($fields, array_flip($this->group->children));
      $field_options = array_map(function ($field) {
        if ($field instanceof FieldConfigInterface) {
          return $field->label();
        }

        return $field->getName();
      }, $fields);
    }

This would leave out fields exposes by Display Suites or similar modules.

Tasks

• Generalize destination handling so that we cover all cases.

[IMPORTANT] Rename pattern theme prefix from "pattern__" to "pattern_"

Scope

In order to allow hook suggestions to work correctly we have to rename theme prefix from pattern__ to pattern_.

Manual changes when upgrading

When upgrading from beta2 to beta3 you need to perform the following manual steps

1. Rename default template files pattern--MY-PATTERN.html.twig into pattern-MY-PATTERN.html.twig manually.
2. If you use the ui_patterns_layouts apply manually the following change in your configuration and re-import it:

 third_party_settings:
   ds:
     layout:
-      id: pattern__MY_PATTERN
+      id: pattern_MY_PATTERN

Tasks

• Rename default hook
• Fix suggestions
• Add tests

Add cache tags and contexts to patterns

Scope

For the moment we don't invalidate pattern cache assuming that the host element will take care of that, we should research about its implications and fix it, if necessary.

Tasks

• Research
• Implement it, if necessary
• Test

Support for finding templates in subfolders

When a pattern template is placed in a subfolder of a theme's templates folder, it is not found. Support for subfolders would be nice so that templates can be organized by type.

Allow multiple sources to be mapped to the same destination

Scope

We should provide a way for multiple sources to be rendered in the same pattern destination so that this can actually produce the desired result of having phone, fax, email, address and url all rendered in the metadata pattern field:

Tasks

• Implement this
• Write tests

Support preview views UI

I have use defaul theme bootstrap. I copy folder modules/contrib/ui_patterns/tests/ui_patterns_test_theme/templates/patterns/button to themes/bootstrap/templates/patterns/button and clear cache. Create simple view use pattern lab Button. Preview of view don't working. Click button Update preview don't show anything. When i check log message, i saw have message error

"A fatal error occurred: Template "modules/contrib/ui_patterns/templates/pattern-button.html.twig" is not defined (Drupal\Core\Template\Loader\ThemeRegistryLoader: Unable to find template "modules/contrib/ui_patterns/templates/pattern-button.html.twig" in the Drupal theme registry.) in "modules/contrib/ui_patterns/modules/ui_patterns_views/templates/pattern-views-row.html.twig" at line 16."

Add pattern layout hook suggestions

Scope

For the moment we do now provide any hook suggestion for layouts while we should provide something like:

    $suggestions[] = $hook . '__layout';
    $suggestions[] = $hook . '__layout__' . $entity_type;
    $suggestions[] = $hook . '__layout__' . $entity_type . '__' . $bundle;
    $suggestions[] = $hook . '__layout__' . $entity_type . '__' . $view_mode;
    $suggestions[] = $hook . '__layout__' . $entity_type . '__' . $bundle . '__' . $view_mode;
    $suggestions[] = $hook . '__layout__' . $entity_type . '__' . $entity_id;

Tasks

• Implement this.

Paragraphs

Hi,

I ask this question without any research but interested to know if I could use UI Pattern on a project using Paragraphs module.
So my question is can UI Patterns work with the Paragraphs module: https://www.drupal.org/project/paragraphs

All the best,
Guy

Make the Pattern discovery available as a service.

So we can decorate it easily and provide other mechanisms to detect patterns.

Add Pattern custom block

Scope

In order to render patterns as block in panel layouts, etc. we should provide a custom pattern block type.

Tasks

• As @bircher to finalize the description of this issue
• Implement the thing.

Add example theme

A submodule containing 1 basic, 1 advanced example would be usefull for people as starting point/test.