|
1 | 1 | ---
|
2 |
| -title: Pattern Builder Importer |
| 2 | +title: Pattern Builder Schema Importer Drupal Module |
3 | 3 | ---
|
4 | 4 |
|
5 |
| -## Pattern Builder Importer Drupal Module |
| 5 | +## Pattern Builder Schema Importer Drupal Module |
6 | 6 |
|
7 |
| -1. Why |
8 |
| - 1. With a library of patterns created in Pattern Builder, we need a method for creating each Drupal admin interface that allow users to enter the data needed for each template. |
9 |
| - 2. As a content admin, you may want to create a customizable content type(s) which include entity references to smaller content patterns, such as field collection bundles. These bundles will be built to match the defined components from the Styleguide. This would expose the ability to both create content and control the ordering, layout, and design from within the node editing interface, and would be fully revisionable. Additionally, editors would be able reference & include existing view blocks within the field groups. Editors could then apply data attributes such as layout and theme to these view blocks or field collections. |
| 7 | +### TL;DR |
10 | 8 |
|
11 |
| -2. What is it |
12 |
| - 1. TL;DR |
13 |
| - 1. It takes an external library (of JSON Schemas and Twig templates), and converts the schemas into fields in Drupal as paragraph bundles, and imports the twig templates and converts them to PHP to render the nodes. |
| 9 | +It converts an library of JSON Schemas into Drupal paragraph bundles, and the JSON schema properties are converted into Drupal fields. |
14 | 10 |
|
15 |
| - 2. Features |
16 |
| - 1. Includes support for multiple templates and schemas |
17 |
| - - You can list WebRH as the default library, then your own custom library |
18 |
| - - If templates have namespace collisions… |
19 |
| - 1. Check to see what twig.js does (does first or last win) |
20 | 11 |
|
21 |
| - 2. Automated Tests |
| 12 | +### Why |
22 | 13 |
|
23 |
| -3. How |
24 |
| - 1. Tech Setup |
25 |
| - 1. Install and enable module |
26 |
| - 2. Set up the import paths in settings.php in admin config page |
27 |
| - - Go to admin/config/content/patternbuilder |
28 |
| - - Schema directories |
29 |
| - 1. sites/all/libraries/{webrh}/dist/library/schemas |
| 14 | +1. With a library of patterns created in Pattern Builder, we need a method for creating each Drupal admin interface that allow users to enter the data needed for each template. |
30 | 15 |
|
31 |
| - - Template directories |
32 |
| - 1. sites/all/libraries/{webrh}/dist/library/templates |
| 16 | +1. As a content admin, you may want to create a customizable content type(s) which include entity references to smaller content patterns, such as field collection bundles. These bundles will be built to match the defined components from the Styleguide. This would expose the ability to both create content and control the ordering, layout, and design from within the node editing interface, and would be fully revisionable. Additionally, editors would be able reference & include existing view blocks within the field groups. Editors could then apply data attributes such as layout and theme to these view blocks or field collections. |
33 | 17 |
|
34 |
| - 3. Use Drush to run the pattern builder import command |
35 |
| - - If there are new patterns, first rsync webrh |
36 |
| - - SSL into sandbox |
37 |
| - - Run `drush pbi` |
38 | 18 |
|
39 |
| - 4. View the imported patterns now stored as paragraph bundles |
40 |
| - - Visit admin/structure/paragraphs |
| 19 | +### Where |
41 | 20 |
|
42 |
| - 5. Manage Fields on the (new) content type, |
43 |
| - - Add a paragraphs field, choose which patterns you want to make available for content editors |
44 |
| - - Set widget to “Embedded Patterns” |
| 21 | +1. Drupal: [https://www.drupal.org/project/patternbuilder](https://www.drupal.org/project/patternbuilder) |
| 22 | +1. GitHub: [https://github.com/PatternBuilder/pattern-builder-drupal](https://github.com/PatternBuilder/pattern-builder-drupal) |
45 | 23 |
|
46 |
| - 6. Manage Display: Set the display format on the paragraph field to "Patternbuilder rendered items" |
47 |
| - 7. Other Notes: |
48 |
| - - Don’t forget to load the webrh.css via a pre-process function or the style module |
49 |
| - - Optional: Modify the content type node--[type].tpl.php as needed to remove other regions etc |
50 |
| - - To use the test pattern, enabled “Red Hat webrh test” on the modules page: /admin/modules?filter=webrh_test&enabled=1&disabled=1&required=1&unavailable=1 -- it will take a while to import so you have to wait for the page to be done refreshing |
51 | 24 |
|
| 25 | +### How |
52 | 26 |
|
| 27 | +1. Tech Setup |
| 28 | + 1. Install and enable module |
| 29 | + 1. Set up the import paths |
| 30 | + - Visit **admin/config/content/patternbuilder** |
| 31 | + - Schema directories |
| 32 | + - Template directories |
53 | 33 |
|
54 |
| - 1. Drush Commands |
55 |
| - 1. Imports patterns from defined library |
56 |
| - - drush pbi : Import all schemas. |
57 |
| - - drush pbi --all : Force the import of all schemas even if specific schemas are defined. |
58 |
| - - drush pbi band card : Import only the "band" and "card" schemas. |
59 |
| - - drush pbi --type=layout : Import only the schemas for the "layout" pattern type. |
60 |
| - - drush pbi -image_box |
| 34 | + 1. Use Drush to run the pattern builder import command |
| 35 | + - If there are new patterns, first rsync webrh |
| 36 | + - SSL into sandbox |
| 37 | + - Run `drush pbi` |
61 | 38 |
|
62 |
| - 2. Remove imported patterns from Drupal |
63 |
| - - drush pbi-remove : Nothing is removed. This safeguards against accidental commands. |
64 |
| - - drush pbi-remove --all : Removes all schemas. |
65 |
| - - drush pbi-remove band card : Removes only the "band" and "card" schemas. |
66 |
| - - drush pbi-remove --type=layout : Removes only the schemas for the "layout" pattern type. |
| 39 | + 1. View the imported patterns now stored as paragraph bundles |
| 40 | + - Visit admin/structure/paragraphs |
67 | 41 |
|
68 |
| -1. Where |
69 |
| - 1. [https://www.drupal.org/project/patternbuilder](https://www.drupal.org/project/patternbuilder) |
70 |
| - 2. [https://github.com/PatternBuilder/pattern-builder-lib-php](https://github.com/PatternBuilder/pattern-builder-lib-php) |
| 42 | + 1. Manage Fields on the (new) content type, |
| 43 | + - Add a paragraphs field, choose which patterns you want to make available for content editors |
| 44 | + - Set widget to “Embedded Patterns” |
71 | 45 |
|
72 |
| -2. Supported Extensions |
| 46 | + 1. Manage Display: Set the display format on the paragraph field to "Patternbuilder rendered items" |
| 47 | + 1. Other Notes: |
| 48 | + - Don’t forget to load the webrh.css via a pre-process function or the style module |
| 49 | + - Optional: Modify the content type node--[type].tpl.php as needed to remove other regions etc |
| 50 | + - To use the test pattern, enabled “Red Hat webrh test” on the modules page: /admin/modules?filter=webrh_test&enabled=1&disabled=1&required=1&unavailable=1 -- it will take a while to import so you have to wait for the page to be done refreshing |
73 | 51 |
|
74 |
| -The following are optional Drupal modules that are supported natively by the Pattern Builder Importer. |
| 52 | + |
| 53 | +1. Drush Commands |
| 54 | + 1. Imports patterns from defined library |
| 55 | + - drush pbi : Import all schemas. |
| 56 | + - drush pbi --all : Force the import of all schemas even if specific schemas are defined. |
| 57 | + - drush pbi band card : Import only the "band" and "card" schemas. |
| 58 | + - drush pbi --type=layout : Import only the schemas for the "layout" pattern type. |
| 59 | + - drush pbi -image_box |
| 60 | + |
| 61 | + 1. Remove imported patterns from Drupal |
| 62 | + - drush pbi-remove : Nothing is removed. This safeguards against accidental commands. |
| 63 | + - drush pbi-remove --all : Removes all schemas. |
| 64 | + - drush pbi-remove band card : Removes only the "band" and "card" schemas. |
| 65 | + - drush pbi-remove --type=layout : Removes only the schemas for the "layout" pattern type. |
| 66 | + |
| 67 | + |
| 68 | +### JSON Schema Support |
| 69 | + |
| 70 | +The schema used by Pattern Builder is based on [JSON Schema](http://json-schema.org/) with customizations for the Drupal importer. |
| 71 | + |
| 72 | +1. Property Types: |
| 73 | + |
| 74 | + - Primitive types: "boolean", "integer", "number", "string", "text", "textarea". |
| 75 | + - Single level group of properties: "object". |
| 76 | + - Multiple values with the same object properties: "array". |
| 77 | + |
| 78 | +1. Hidden on the edit form |
| 79 | + |
| 80 | + - Schema: `"options: { "hidden": true }` |
| 81 | + - Drupal configuration: Field instance setting. |
| 82 | + |
| 83 | +1. Read-only on the edit form |
| 84 | + |
| 85 | + - Schema: `"readonly": true ` |
| 86 | + - Drupal configuration: Field instance setting. |
| 87 | + |
| 88 | +1. Non-imported properties: |
| 89 | + |
| 90 | + If a property does not need to be imported as a Drupal field, then it can be flagged to not import it with: |
| 91 | + |
| 92 | + - Schema: `"options: { "import": false }` |
| 93 | + - Drupal configuration: None |
| 94 | + |
| 95 | +1. Textarea |
| 96 | + |
| 97 | + Textareas are imported to a Drupal field type of "text_long". A schema property is consider to be a textarea if one of the following is true: |
| 98 | + |
| 99 | + - Schema: `"format": "textarea"` OR `"format": "html"` |
| 100 | + - Drupal configuration: Field type. |
| 101 | + |
| 102 | +1. WYSIWYG / Filtered text |
| 103 | + |
| 104 | + Filter text in Drupal provides the user with the Input Format selector. These commonly are configured to use a WYSIWYG editor. |
| 105 | + A schema property is determined to allow filtered text if the following is set: |
| 106 | + |
| 107 | + - Schema: `"format": "html"` |
| 108 | + - Drupal configuration: Field instance setting. |
| 109 | + |
| 110 | +1. Collapsible Field Groups and Field Collections |
| 111 | + |
| 112 | + The [field_group](https://www.drupal.org/project/field_group) module is required by the importer in order to provide basic single level grouping. The schema can control the collapsibility of a group of properties with the following: |
| 113 | + |
| 114 | + - Schema: |
| 115 | + |
| 116 | + ``` |
| 117 | + "options": { |
| 118 | + "collapsed": true, |
| 119 | + "disable_collapse": false |
| 120 | + } |
| 121 | + ``` |
| 122 | +
|
| 123 | + - Drupal configuration: Field group setting, Field Collecton Fieldset widget. |
| 124 | +
|
| 125 | +1. Form Grid Layout |
| 126 | +
|
| 127 | + This provides the ability to display grid style form elements. |
| 128 | +
|
| 129 | + - Global config: "admin/config/content/patternbuilder" |
| 130 | + - Row class: The class for the row container in the grid layout. |
| 131 | + - Column class prefix: The number of columns will be appended to the column class prefix. Example: "grid-columns-" results in "grid-columns-4". |
| 132 | +
|
| 133 | + - Schema: |
| 134 | +
|
| 135 | + ``` |
| 136 | + "options": { |
| 137 | + "grid_columns": 2 |
| 138 | + }, |
| 139 | + "items": { |
| 140 | + "format": "grid" |
| 141 | + } |
| 142 | + ``` |
| 143 | +
|
| 144 | + - Drupal configuration: Field instance setting. |
| 145 | +
|
| 146 | +1. Paragraphs preview display view mode |
| 147 | +
|
| 148 | + The importer can automatically setup up the "Paragraphs Editor Preview" view mode if the property is configured as "preview". The importer has some default formatters for some common fields (text, image). Refer to the patternbuilder_importer.api.php for hooks that allow setting custom formatters for the preview view mode. |
| 149 | +
|
| 150 | + - Schema: `"options: { "preview": true }` |
| 151 | + - Drupal configuration: Field display view mode settings. |
| 152 | +
|
| 153 | +
|
| 154 | +### Optional Drupal Extensions |
| 155 | +
|
| 156 | +The following are optional Drupal modules that are supported natively by the Pattern Builder Importer. If these modules are enabled on the site, then the magic happens automatically. |
75 | 157 |
|
76 | 158 | 1. Media ([https://www.drupal.org/project/media](https://www.drupal.org/project/media))
|
77 | 159 | 1. Supports: file, image, audio, video
|
78 | 160 | 2. Schema usage: "entity": "file|image|audio|video"
|
79 | 161 |
|
80 |
| -2. Media Internet - Submodule of Media ([https://www.drupal.org/project/media](https://www.drupal.org/project/media)) |
| 162 | +1. Media Internet - Submodule of Media ([https://www.drupal.org/project/media](https://www.drupal.org/project/media)) |
81 | 163 | 1. Supports: internet based files
|
82 |
| - 2. Schema usage: "entity": "file|image|audio|video" |
| 164 | + 1. Schema usage: "entity": "file|image|audio|video" |
83 | 165 |
|
84 |
| -3. Media YouTube ([https://www.drupal.org/project/media_youtube](https://www.drupal.org/project/media_youtube)) |
| 166 | +1. Media YouTube ([https://www.drupal.org/project/media_youtube](https://www.drupal.org/project/media_youtube)) |
85 | 167 | 1. Supports: YouTube videos
|
86 |
| - 2. Schema usage: "entity": "video" |
| 168 | + 1. Schema usage: "entity": "video" |
87 | 169 |
|
88 |
| -4. Link ([https://www.drupal.org/project/link](https://www.drupal.org/project/link)) |
| 170 | +1. Link ([https://www.drupal.org/project/link](https://www.drupal.org/project/link)) |
89 | 171 | 1. Supports: link fields
|
90 |
| - 2. Schema usage: "entity": "link" |
| 172 | + 1. Schema usage: "entity": "link" |
91 | 173 |
|
92 |
| -5. Field Collection ([https://www.drupal.org/project/field_collection](https://www.drupal.org/project/field_collection)) |
| 174 | +1. Field Collection ([https://www.drupal.org/project/field_collection](https://www.drupal.org/project/field_collection)) |
93 | 175 | 1. Supports: array of objects imported as a field collection.
|
94 |
| - 2. Schema usage: array<object> |
| 176 | + 1. Schema usage: "type": "array", "items": { Each item object definition } |
95 | 177 |
|
96 |
| -6. Field Collection Fieldset ([https://www.drupal.org/project/field_collection_fieldset](https://www.drupal.org/project/field_collection_fieldset)) |
| 178 | +1. Field Collection Fieldset ([https://www.drupal.org/project/field_collection_fieldset](https://www.drupal.org/project/field_collection_fieldset)) |
97 | 179 | 1. Supports: collapsible array of objects imported to a field collection.
|
98 |
| - 2. Schema usage: options.collapsed=true, options.disable_collapse=true |
| 180 | + 1. Schema usage: "options": {"collapsed": true/false, "disable_collapse": true/false} |
99 | 181 |
|
100 |
| -7. Field Multiple Extended ([https://www.drupal.org/project/field_multiple_extended](https://www.drupal.org/project/field_multiple_extended)) |
| 182 | +1. Field Multiple Extended ([https://www.drupal.org/project/field_multiple_extended](https://www.drupal.org/project/field_multiple_extended)) |
101 | 183 | 1. Supports: Set minimum and maximum items on a property.
|
102 |
| - 2. Schema usage: minItems: 2, maxItems: 10 |
| 184 | + 1. Schema usage: "type": "array", "minItems": 2, "maxItems": 10 |
| 185 | +
|
| 186 | +
|
| 187 | +### Future Plans |
103 | 188 |
|
104 |
| -1. Future Plans |
105 |
| - 1. Use standard Drupal 8 rendering engine |
106 |
| - 2. CMI (config mgmt), use schemas to manipulate YML files |
| 189 | +1. Use standard Drupal 8 rendering engine. |
| 190 | +1. CMI (config mgmt), use schemas to manipulate YML files. |
0 commit comments