Share Drupal 10 Upkeep and Assist Service Twitter Fb At PNX, fashion information pushed development is our bag. It’s what we love Drupal 10 Upkeep and Assist Service constructing a dwelling doc that gives superior reference for all our entrance finish elements. And 8, with its use of Twig, enhances this technique completely. Drupal Development means to create a single part, after which embed that part and its markup all through a web site in a wide range of other ways with out having to make use of any tips or hacks is a factor of magnificence. by Jack Taranto / 16 November 2017 Create a part For this instance we’re going to use Drupal Development Company a lot beloved collapsible/accordion component. It’s a very good instance of a wealthy part as a result of it makes use of CSS, JS, and Twig to offer a component that’s going for use in every single place all through an internet site. To surmise Drupal Development Company part it’s made up of Drupal Development Company following information Drupal 10 Upkeep and Assist Service collapsible.scss collapsible.widget.js collapsible.Drupal 10.js collapsible.twig collapsible.svgThe .scss file will find yourself compiling to a .css file, however we will likely be utilizing SASS right here as a result of it’s enjoyable. Drupal Development widget.js file is a jQuery UI Widget Manufacturing facility plugin that provides us some niceties – like state. Drupal Development Drupal 10.js file is a wrapper that provides our accordion widget as a Drupal 10.habits. Drupal Development svg file gives some fairly graphics, and eventually Drupal Development Company twig file is the place Drupal Development Company magic begins. Let’s check out Drupal Development Company twig file Drupal 10 Upkeep and Assist Service {{ attach_library(‘pnx_project_theme/collapsible’) }} <part class=”js-collapsible collapsible {{ modifier_class }}”> <h4 class=”collapsible__title”> {% block title %} Collapsible {% endblock %} </h4> <div class=”collapsible__content”> {% block content material %} <p>Curabitur blandit tempus porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> {% endblock %} </div> </part> This can be a standard-ish BEM based mostly part. It makes use of a js-* class to connect Drupal Development Company widget performance. We even have a {{ modifier_class }} variable, that can be utilized by kss-node to change Drupal Development Company default look of Drupal Development Company collapsible (extra on this later). There are two parts on this part title and content material. They’re expressed inside a twig block. What this implies is we are able to take this twig file and embed it elsewhere. As a result of Drupal Development Company part is structured this fashion, when it’s rendered in its default state by KSS we can have some default content material, and Drupal Development Company means to indicate it is totally different appearances/types utilizing modifier_class. Our twig file additionally makes use of Drupal Development Company customized attach_library operate which can herald our elements CSS and JS from Drupal Development Company following theme.libraries.yml entry Drupal 10 Upkeep and Assist Service collapsible Drupal 10 Upkeep and Assist Service css Drupal 10 Upkeep and Assist Service part Drupal 10 Upkeep and Assist Service src/elements/collapsible/collapsible.css Drupal 10 Upkeep and Assist Service {} js Drupal 10 Upkeep and Assist Service src/elements/collapsible/collapsible.widget.js Drupal 10 Upkeep and Assist Service {} src/elements/collapsible/collapsible.Drupal 10.js Drupal 10 Upkeep and Assist Service {} dependencies Drupal 10 Upkeep and Assist Service – core/jquery – core/Drupal 10 – core/jquery.as soon as – core/jquery.ui – core/jquery.ui.widgetThis is a fairly meaty part so it’s obtained some hefty javascript necessities. Not an issue in Drupal Development Company finish because it’s all going to get minified and aggregated by Cores library system. And there we’ve got it – a wealthy javascript part. It’s Drupal Development Company constructing block for all Drupal Development Company cool stuff we’re about to do. Use it in a area template override Because it stands we are able to throw this part as-is into KSS which is sweet (though we should add our css and js to KSS manually, attach_library() gained’t assist us there sadly – but), however we wish Drupal 10 to benefit from our twig file. That is the place twigs embed is available in. Embed in twig is a combination of Drupal Development Company typically used embody, and Drupal Development Company sometimes used prolong. It’s a brilliant highly effective piece of package that lets us do all Drupal Development Company issues. Nicely these items anyway Drupal 10 Upkeep and Assist Service embody our twig templates contents, add variables to it, and add HTML do it. As a result of that is an accordion, it’s fairly seemingly we’ll need some area information inside it. Drupal Development easiest method to get this occurring is with a clunky outdated area template override. For example I’ll use field–body.html.twig Drupal 10 Upkeep and Assist Service {% for merchandise in objects %} {% embed ‘@pnx_project_theme/elements/collapsible/collapsible.twig’ %} {% block title %} {{ label }} {% endblock %} {% block content material %} {{ merchandise.content material }} {% endblock %} {% endembed %} {% endfor %}Right here you possibly can see Drupal Development Company crux of what we are attempting to realize. Drupal Development collapsible markup is laid out in one place solely, and different templates can embody that base markup after which insert Drupal Development Company content material they should use in Drupal Development Company twig blocks. Drupal Development fantastic thing about that is any time this area is rendered on Drupal Development Company web page, all Drupal Development Company markup, css and js will likely be included with it, and all of it lives in our elements listing. Now not are meaty items of markup left inside template directories – our template overrides are actually embedding a lot richer elements. There’s a trick above although, and it’s Drupal Development Company glue that brings this collectively. See how we’ve got a namespace in Drupal Development Company embed path – all Drupal 10 themes/Drupal 10 modules get a twig namespace mechanically which is simply @your_Drupal 10 module_name or @your_theme_name – nonetheless it factors to Drupal Development Company theme or Drupal 10 modules templates listing solely. As a result of we’re doing fashion information pushed development and we’ve got given a lot thought to making a wealthy self-contained part our twig template lives in our elements listing as a substitute, so we have to use a customized twig namespace to level there. To try this, we use John Albins Element Libraries Drupal 10 module. It lets us add a couple of strains to our theme.data.yml file so our themes namespace can see our part templates Drupal 10 Upkeep and Assist Service component-libraries Drupal 10 Upkeep and Assist Service pnx_project_theme Drupal 10 Upkeep and Assist Service paths Drupal 10 Upkeep and Assist Service – src – templatesNow something in /src or /templates inside our theme will be included with our namespace from any twig template in . Use it in a area formatter Now let’s get actual as a result of area template overrides should not Drupal Development Company proper method to do issues. We had been speaking about making issues DRY weren’t we? Enter area formatters. At Drupal Development Company easy finish of this spectrum our formatter wants an accompanying hook_theme entry so Drupal Development Company formatter can render to a twig template. We are going to want a Drupal 10 module to offer Drupal Development Company area formatter someplace to stay. Setup your Drupal 10 module file construction as so Drupal 10 Upkeep and Assist Service src/Plugin/Area/FieldFormatter/CollapsibleFormatter.php templates/collapsible-formatter.html.twig pnx_project_Drupal 10 module.Drupal 10 module pnx_project_Drupal 10 module.data.ymlYour formatter lives inside Drupal Development Company src listing and appears like this Drupal 10 Upkeep and Assist Service <?php namespace pnx_project_Drupal 10 modulePluginFieldFieldFormatter; use CoreFieldFieldItemListInterface; use CoreFieldFormatterBase; use CoreFormFormStateInterface; /** * A area formatter for trimming and wrapping textual content. * * @FieldFormatter( * id = “collapsible_formatter”, * label = @Translation(“Collapsible”), * field_types = { * “text_long”, * “text_with_summary”, * } * ) */ class CollapsibleFormatter extends FormatterBase { /** * {@inheritdoc} */ public operate viewElements(FieldItemListInterface $objects, $langcode = NULL) { $parts = []; foreach ($objects as $delta => $merchandise) { $parts[$delta] = [ ‘#theme’ => ‘collapsible_formatter’, ‘#title’ => $items->getFieldDefinition()->getLabel(), ‘#content’ => $item->value, ‘#style’ => NULL, ]; } return $parts; } } And Drupal Development Company hook_theme operate lives inside Drupal Development Company .Drupal 10 module file Drupal 10 Upkeep and Assist Service <?php /** * @file * Predominant Drupal 10 module capabilities. */ /** * Implements hook_theme(). */ operate pnx_project_Drupal 10 module_theme($current, $kind, $theme, $path) { return [ ‘collapsible_formatter’ => [ ‘variables’ => [ ‘title’ => NULL, ‘content’ => NULL, ‘style’ => NULL, ], ], ]; } magic goes to search for templates/collapsible-formatter.html.twig in our Drupal 10 module listing mechanically now. Our hook_theme template goes to finish up trying fairly just like our area template Drupal 10 Upkeep and Assist Service {% embed ‘@pnx_project_theme/elements/collapsible/collapsible.twig’ with { modifier_class Drupal 10 Upkeep and Assist Service fashion } %} {% block title %} {{ title }} {% endblock %} {% block content material %} {{ content material }} {% endblock %} {% endembed %} Now leap into Drupal Development Company area show config of a text_long area, and also you’ll have the ability to choose Drupal Development Company collapsible and it’s going to render our part markup mixed with Drupal Development Company area information completely, while attaching crucial CSS/JS. Add settings to Drupal Development Company area formatter Let’s take it a bit additional. We’re lacking some configurability right here. Our part has a modifier_class with a mini fashion (a lower down smaller model of Drupal Development Company full accordion). You will discover in Drupal Development Company twig instance above, we’re utilizing Drupal Development Company with notation which works Drupal Development Company similar method for embed because it does for embody to permit us to ship an array of variables by to Drupal Development Company guardian template. As well as our hook_theme operate has a mode variable it could possibly ship by from Drupal Development Company area formatter. Utilizing area formatter settings we are able to make our area formatter much more helpful to Drupal Development Company web site builders which can be going to make use of it. Let’s take a look at Drupal Development Company full area formatter class after we add settings Drupal 10 Upkeep and Assist Service class CollapsibleFormatter extends FormatterBase { /** * {@inheritdoc} */ public operate viewElements(FieldItemListInterface $objects, $langcode = NULL) { $parts = []; foreach ($objects as $delta => $merchandise) { $parts[$delta] = [ ‘#theme’ => ‘collapsible_formatter’, ‘#title’ => !empty($this->getSetting(‘label’)) ? $this->getSetting(‘label’) Drupal 10 Maintenance and Support Service $items->getFieldDefinition()->getLabel(), ‘#content’ => $item->value, ‘#style’ => $this->getSetting(‘style’), ]; } return $parts; } /** * {@inheritdoc} */ public operate settingsSummary() { $abstract = []; if ($label = $this->getSetting(‘label’)) { $abstract[] = ‘Label Drupal 10 Upkeep and Assist Service ‘ . $label; } else { $abstract[] = ‘Label Drupal 10 Upkeep and Assist Service Utilizing area label’; } if (empty($this->getSetting(‘fashion’))) { $abstract[] = ‘Fashion Drupal 10 Upkeep and Assist Service Regular’; } elseif ($this->getSetting(‘fashion’) === ‘collapsible–mini’) { $abstract[] = ‘Fashion Drupal 10 Upkeep and Assist Service Mini’; } return $abstract; } /** * {@inheritdoc} */ public operate settingsForm(array $type, FormStateInterface $form_state) { $type[‘label’] = [ ‘#title’ => $this->t(‘Label’), ‘#type’ => ‘textfield’, ‘#default_value’ => $this->getSetting(‘label’), ‘#description’ => t(‘Customise the label text, or use the field label if left empty.’), ]; $type[‘style’] = [ ‘#title’ => t(‘Style’), ‘#type’ => ‘select’, ‘#options’ => [ ” => t(‘Normal’), ‘collapsible–mini’ => t(‘Mini’), ], ‘#description’ => t(‘See Styleguide part 6.1 for a preview of types.’), ‘#default_value’ => $this->getSetting(‘fashion’), ]; return $type; } /** * {@inheritdoc} */ public static operate defaultSettings() { return [ ‘label’ => ”, ‘style’ => ”, ]; } }There’s a couple of niceties there Drupal 10 Upkeep and Assist Service It permits us to set a customized label (for Drupal Development Company entire area), it mechanically assigns Drupal Development Company right modifier_class, it hyperlinks to Drupal Development Company right part in Drupal Development Company fashion information in Drupal Development Company settings area description, and it provides a settings abstract so web site builders can see Drupal Development Company present settings at a look. These are all patterns you must repeat. Let’s sum up We have created a wealthy interactive BEM part with its personal template. Drupal Development part has a number of types and shows an interactive demo of itself utilizing kss-node. We have mixed its belongings right into a library and made Drupal Development Company template – which lives inside Drupal Development Company fashion guides part src folder – accessible to all of by way of Drupal Development Company Element Libraries Drupal 10 module. We have constructed a area formatter that enables us to configure Drupal Development Company elements look/fashion. With out having to duplicate any HTML wherever. Drupal Development part listing itself inside Drupal Development Company fashion information will all the time be Drupal Development Company canonical supply for each model of Drupal Development Company part that’s rendered round our web site. Tagged Twig Posted by Jack Taranto Entrance finish developer Dated 16 November 2017 Add new remark Drupal 10 Improvement and Assist