Integrating a Easy Textual content Paragraph Bundle with Patternlab That is Drupal Development Company first publish in a collection about learn how to combine with PatternLab. On this first weblog publish, we’ll have a look at a easy textual content paragraph bundle, which simply has one subject Drupal 10 Upkeep and Help Service textual content (formatted, lengthy). markconroy Thu, 12/21/2017 – 19 Drupal 10 Upkeep and Help Service49 I see a variety of weblog posts and talks round about Drupal Development Company advantages of utilizing component-based design, about how we should always use design in Drupal Development Company browser ideas to current designs to our purchasers, about how styleguides are Drupal Development Company greatest technique to have sustainable frontends. I’ve even written some and given many displays about it myself. What I do not see a variety of is weblog posts about learn how to really do it. So, here is learn how to (or a minimum of how I) combine my PatternLab theme (it is primarily based on Drupal Development Company Part 2 PatternLab theme) with a easy paragraph kind. PatternLab Create a sample – you’ll be able to put it wherever your setup says it ought to go. Paragraph bundles are in all probability molecules, however I am unsure the way you arrange yours. In my case, I’ve hacked PatternLab and created a folder known as “Constructing Blocks” – that is the place all my paragraph bundles go (after which I even have a “Constructing Blocks” subject in every content material kind – extra about my arrange in one other weblog publish. Name Drupal Development Company sample one thing significant – on this case, I name mine “Textual content”. Subsequent, we write Drupal Development Company Twig for Drupal Development Company textual content sample. This may be so simple as this Drupal 10 Upkeep and Help Service {% set lessons = [   “text” ] %}     {{ content material }} Then in my corresponding textual content.yml or textual content.json file, I put in some pattern content material, like so (I like yml) Drupal 10 Upkeep and Help Service content material Drupal 10 Upkeep and Help Service ‘It is a Degree 2 HeadingThis is a paragraph of textual content adopted by a listing. Sed posuere consectetur est at lobortis. That is robust whereas that is emphasised Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.A textual content merchandise in a listAnother textual content itemA sub-itemAnother sub-itemA third merchandise in a listThis is a Degree 3 HeadingFollowed by some extra textual content. It is a hyperlink sed posuere consectetur est at lobortis. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper.’ Lastly, in my paragraph–text.html.twig file, I lengthen Drupal Development Company above PatternLab file, like so Drupal 10 Upkeep and Help Service {% extends “@building-blocks/textual content/textual content.twig” %} Sure, there is just one line of code in that file. Some Clarification Why do I name my variable {{ content material }}? Easy, I do know that Drupal Development Company default variable in ‘s paragraph Drupal 10 module to print Drupal Development Company contents of Drupal Development Company paragraph is {{ content material }}, so if I give my sample in PatternLab Drupal Development Company identical variable title, I will not have to fret about matching any variables. I don’t have to do one thing like this Drupal 10 Upkeep and Help Service {% embody ‘@building-blocks/textual content/textual content.twig’ with {   content material Drupal 10 Upkeep and Help Service textual content   } %} It will grow to be a lot clearer after we work with extra advanced paragraph sorts in later weblog posts. You may see an instance of this sample in PatternLab right here, and Drupal Development Company textual content you’re presently studying is an instance of it in use in a template. Easy, eh? Drupal 10 Improvement and Help