Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Blocks & Triangles: Front-end Architecture in the Gutenberg Era


Published on

As WordPress moves towards a future where “everything is a block,” we must adopt more scalable, modular approaches to CSS, JavaScript, and HTML templates.

In this talk, we will pair the concept of Gutenberg Blocks with a CSS methodology known as Inverted Triangle CSS (ITCSS) to create a workflow that emphasizes modularity, portability, and reuse. The result is a DRY code base capable of serving up shortcodes, widgets, and, of course, blocks wherever users need them.

As a practitioner of ITCSS for several years, I have managed its implementation in several custom WordPress themes as a freelancer and most recently in my role as a plugin developer contributing to the WP Business Reviews and GiveWP plugins. I am also proud to have pitched an implementation of ITCSS to the team behind the Underscores starter theme, where it is currently under consideration.

These experiences in custom theme and plugin development, as well as my ongoing involvement in WordPress community projects, will inform the overall approach to front-end architecture throughout this talk. While scalability and modularity have always been important concepts in WordPress, they are becoming even more significant on the road to WordPress 5.0.

Published in: Software
  • Be the first to comment

Blocks & Triangles: Front-end Architecture in the Gutenberg Era

  1. 1. What is front-end architecture?
  2. 2. –Micah Godbolt Front-end Architecture is a collection of tools and processes that aims to improve the quality of our front-end code while creating a more efficient and sustainable workflow.
  3. 3. What is the front-end architecture of a Gutenberg block?
  4. 4. A brief overview of CSS methodologies since Space Jam…
  5. 5. Fast-forward 14 years…
  6. 6. Nicole Sullivan’s OOCSS The media object is an image to the left, with descriptive content to the right.
  7. 7. BEM Block Element Modifier
  8. 8. block Standalone entity that is meaningful on its own.
  9. 9. blocks can contain other blocks A block must be capable of existing on its own, but that doesn’t mean it can’t exist within another block.
  10. 10. element A part of a block that has no standalone meaning and is semantically tied to its block.
  11. 11. modifier A flag on a block or element. Use them to change appearance or behavior.
  12. 12. What does unstructured CSS look like in HTML?
  13. 13. What does unstructured CSS look like in HTML?
  14. 14. What does BEM look like inside HTML?
  15. 15. What does BEM look like in SCSS/CSS? SCSS Compiled CSS
  16. 16. ITCSS Inverted Triangle CSS
  17. 17. Let’s Build! Give’s Donation Form Grid
  18. 18. Settings Global variables such as fonts, colors, and spacing units.
  19. 19. Tools Preprocessor mixins and functions.
  20. 20. Generic Ground-zero styles such as resets and box-sizing. Plugin devs, limit the scope of your generic styles!
  21. 21. Elements Unclassed HTML elements, a.k.a. type selectors. Theme developers only!
  22. 22. Objects Class-based selectors which define undecorated design patterns. Generally tell things where to go, not how to look.
  23. 23. Components Specific UI components capable of existing on their own. Generally tell things how to look, not where to go.
  24. 24. Utilities Helper classes with the ability to override anything which comes earlier. !important allowed here (ONLY)!
  25. 25. Now that all styles are defined in ITCSS, they can be imported to Gutenberg block style.css.
  26. 26. Resources • • Nicole Sullivan's Media Object • SMACSS • Atomic Design • CSS Guidelines • Overview of ITCSS • CSS Wizardry • Gutenberg Blocks Library