Modernizing Drupal 10 Theme Development

Modernizing Drupal 10 Theme Development

by Luca Lusso
Released August 2023
Publisher(s): Packt Publishing
ISBN: 9781803238098

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

A comprehensive guide to creating Drupal themes from scratch, from design to fully styled websites with custom Twig templates and headless architecture

Key Features

  • Explore real-world examples with proven methodologies to gain a deeper insight into the Drupal theme layer
  • Learn how to translate a graphic design into a maintainable and robust Drupal theme
  • Improve performance and accessibility with a decoupled frontend to consume data exposed by Drupal’s APIs
  • Purchase of the print or Kindle book includes a free PDF eBook

Book Description

Working with themes in Drupal can be challenging, given the number of layers and APIs involved. Modernizing Drupal 10 Theme Development helps you explore the new Drupal 10’s theme layer in depth.

With a fully implemented Drupal website on the one hand and a set of Storybook components on the other, you’ll begin by learning to create a theme from scratch to match the desired final layout. Once you’ve set up a local environment, you’ll get familiarized with design systems and learn how to map them to the structures of a Drupal website. Next, you’ll bootstrap your new theme and optimize Drupal’s productivity using tools such as webpack, Tailwind CSS, and Browsersync. As you advance, you’ll delve into all the theme layers in a step-by-step way, starting from how Drupal builds an HTML page to where the template files are and how to add custom CSS and JavaScript. You’ll also discover how to leverage all the Drupal APIs to implement robust and maintainable themes without reinventing the wheel, but by following best practices and methodologies. Toward the end, you’ll find out how to build a fully decoupled website using json:api and Next.js.

By the end of this book, you’ll be able to confidently build custom Drupal themes to deliver state-of-the-art websites and keep ahead of the competition in the modern frontend world.

What you will learn

  • Map design systems made by Storybook components to Drupal structures
  • Understand and use render arrays and Twig templates
  • Get familiarized with the new Single Directory Component feature introduced in Drupal 10.1
  • Define, import, and use CSS and JavaScript libraries
  • Discover how to style content created with fields and paragraphs
  • Define, place, customize, and style blocks
  • Explore advanced topics like extending Twig, making a theme configurable, and boosting performance and accessibility
  • Find out how to build a decoupled website using json:api and Next.js

Who this book is for

If you are a Drupal backend developer or frontend developer who wants to create Drupal themes that follow industry best practices and are fast and maintainable, this book is for you. Basic knowledge of HTML, CSS, and JavaScript and working knowledge of a CMS are needed to grasp the concepts present in this book.

Table of contents

  1. Modernizing Drupal 10 Theme Development
  2. Contributors
  3. About the author
  4. About the reviewers
  5. Preface
    1. Who this book is for
    2. What this book covers
    3. To get the most out of this book
    4. Download the example code files
    5. Conventions used
    6. Get in touch
    7. Share Your Thoughts
    8. Download a free PDF copy of this book
  6. Part 1 – Styling Drupal
  7. Chapter 1: Setting up a Local Environment
    1. Technical requirements
      1. Git
      2. Docker
      3. DDEV
      4. Visual Studio Code
    2. Installing the demo site
      1. Cloning and building
      2. Composer
      3. Configuration management
      4. Drush
      5. Default Content
      6. Yarn
    3. Exploring the demo site
      1. Fields
      2. Paragraph types
      3. Content types
      4. Vocabulary
      5. Blocks
      6. Views
      7. Menus
    4. Disabling production optimization
    5. Summary
  8. Chapter 2: Setting a New Theme and Build Process
    1. Where to start
      1. Core
      2. Contributed open source themes
      3. Commercial
      4. Custom
    2. Using a starterkit
      1. Keeping things updated
      2. Clearing the cache
    3. Which tools to use
      1. Tailwind CSS
      2. PostCSS
      3. webpack
      4. Browsersync
      5. BackstopJS
    4. Ensuring coding standards
      1. Stylelint
      2. ESLint
      3. PHPCS
    5. Setting up a build process
    6. Summary
  9. Chapter 3: How Drupal Renders an HTML Page
    1. What is a template?
      1. WebProfiler
      2. Twig
      3. Custom modules
    2. What is a render array?
      1. The dump() function
      2. Cache
      3. Controllers and blocks
      4. Regions
      5. Controller actions
      6. Blocks
    3. How to inject CSS and JavaScript into a template
      1. Libraries
      2. Attaching the library to a render array
      3. Custom CSS
      4. Custom JavaScript
    4. Alternate ways to render a controller action output
    5. Summary
  10. Chapter 4: Mapping the Design to Drupal Components
    1. What is a design system?
      1. Design tokens
      2. Atomic design
      3. Storybook
    2. Splitting mockups into components
      1. The home page
      2. The trips page
      3. The Trip page
      4. The level page
      5. The Search page
      6. The login page
      7. The Contact Us page
      8. Forecast page
    3. Mapping components to Drupal structures
      1. Menu
      2. MenuItem
      3. Block and Region
      4. Social
      5. MenuBlock
      6. Footer
      7. Picture and PictureWithCaption
      8. Slide, Slider, Grid, and Card
      9. Term and Details
      10. Body
      11. Map
      12. Table
      13. Trip
      14. Quote
      15. Weather and Forecast
      16. Banner
      17. Level
      18. Search result
      19. User Login
    4. Summary
  11. Chapter 5: Styling the Header and the Footer
    1. Regions and blocks
      1. Passing PHP variables by reference
      2. Retrieving the currently active theme
      3. Rendering an array for (very) simple markup
      4. Twig’s autoescape feature
    2. How to override a template
      1. Defining theme regions
      2. Custom page.html.twig
      3. Overriding custom templates
      4. Including templates
      5. Finding templates
    3. Template suggestions
      1. Providing a new suggestion
      2. Blocks
    4. Styling menus
    5. Template preprocess
      1. Xdebug
    6. Summary
  12. Chapter 6: Styling the Content
    1. Entity, fields, bundles, and display modes
      1. Bundles
      2. Display modes
    2. Media and image styles
      1. Image styles
    3. Taxonomy terms
    4. How to structure content
      1. Using fields
      2. Using paragraphs
    5. Defining a new field formatter
      1. Plugins
    6. Customizing the WYSIWYG editor
      1. Text formats
    7. Alternative ways to manage content
    8. Summary
  13. Chapter 7: Styling Forms
    1. Understanding forms
      1. Render elements
      2. Theme wrappers
      3. Process, pre-, and post-render
      4. Altering existing forms
    2. Styling forms
      1. Styling generic forms
      2. Styling specific form
    3. Summary
  14. Chapter 8: Styling Views
    1. View templates
      1. Using a row plugin
      2. Using fields
    2. Exposed filters
    3. Pagers
    4. Summary
  15. Chapter 9: Styling Blocks
    1. Technical requirements
    2. Editorial blocks
      1. Adding a new block suggestion
      2. Injecting the block content into the template
      3. Extracting field values from the entity
      4. Extracting field values using a preprocess function
      5. Extracting field values using a bundle class
    3. Programmatic blocks
    4. Titles and breadcrumbs
      1. Title
      2. Breadcrumb
      3. Summary
  16. Chapter 10: Styling the Maintenance, Taxonomy, Search Results, and 403/404 Pages
    1. Styling the maintenance page
    2. Styling the taxonomy page
      1. Styling taxonomy term fields
    3. Styling the search results page
      1. Extending Twig templates
    4. Styling the error pages
    5. Summary
  17. Part 2 – Advanced Topics
  18. Chapter 11: Single Directory Components
    1. Technical requirements
    2. The new kid on the block
      1. Why SDC?
    3. How to create a component with SDC
      1. Metadata
      2. Twig
      3. CSS
      4. JavaScript
      5. Using the component
      6. Libraries
      7. Slots
    4. Overriding CSS and JavaScript
    5. Overriding a component
    6. Component metadata
    7. Integration with Storybook
    8. Conclusions
    9. Summary
  19. Chapter 12: Creating Custom Twig Functions and Filters
    1. Technical requirements
    2. Creating a custom Twig function
      1. Defining a Twig function for a render array
      2. Using a custom Twig function
      3. Useful core and contrib Twig functions
    3. Creating a custom Twig filter
      1. Useful core and contrib filters
    4. Summary
  20. Chapter 13: Making a Theme Configurable
    1. Technical requirements
    2. Creating a theme settings form
      1. Configuration management
    3. Using theme settings in Twig and JavaScript
      1. The Twig function
      2. Using themes settings in JavaScript
    4. Sub-theming
      1. Overriding the logo
      2. Overriding configurations
      3. Overriding libraries
      4. Overriding functions
      5. Overriding regions
    5. Summary
  21. Chapter 14: Improving Performance and Accessibility
    1. Technical requirements
    2. Performance
      1. Google Lighthouse
      2. Core Web Vitals
      3. Converting images in WebP format
      4. Responsive images
      5. Lazy loading images
      6. Critical CSS
    3. Accessibility
      1. ARIA attributes
      2. Announcing changes
      3. Accessible methods for hiding content
      4. Keyboard navigation
    4. Summary
  22. Part 3 – Decoupled Architectures
  23. Chapter 15: Building a Decoupled Frontend
    1. Technical requirements
    2. Setting up the environment to build a decoupled site
      1. RESTful Web Services
      2. JSON:API
      3. Differences between RESTful Web Services and JSON:API
      4. Authenticated requests
    3. Introduction to Next.js
      1. Next.js
      2. CORS
      3. Next for Drupal
    4. Summary
  24. Index
    1. Why subscribe?
  25. Other Books You May Enjoy
    1. Packt is searching for authors like you
    2. Share Your Thoughts
    3. Download a free PDF copy of this book

Product information

  • Title: Modernizing Drupal 10 Theme Development
  • Author(s): Luca Lusso
  • Release date: August 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781803238098