Learn how to turn design system components into reusable blocks that content editors can place on a page via Layout Builder.

I'll start by going over what Layout Builder is and how it works. Then I'll use an open source design system, Patternfly Elements, to show how to take components from the design system and turn them in to reusable blocks that a content editor can drop on to their content page.

Learning Objectives

Create reusable blocks built from web components. Add blocks to the Layout Builder library and limit the block library by categories. Improve the Layout Builder UX by adding icons for the different block types.

Prerequisites

Knowledge of template editing and design systems.

Synopsis

Learn how to turn design system components into reusable blocks that content editors can place on a page via Layout Builder.