Book Image

WordPress Styling with Blocks, Patterns, Templates, and Themes

By : Tammie Lister
Book Image

WordPress Styling with Blocks, Patterns, Templates, and Themes

By: Tammie Lister

Overview of this book

Experience a revolutionary WordPress styling transformation with WordPress Styling with Blocks, Patterns, Templates, and Themes by uncovering a wealth of features that redefine the future of WordPress. This guide introduces you to full-site editing and block design tools that enable you to shape the overall aesthetics and layout of your dream website with unprecedented ease. Get ready to harness the power of diverse cutting-edge features as you delve into this WordPress book, focusing on the Gutenberg editing experience. Guided by examples that demonstrate effortless customization entirely suited to your preferences, you’ll master the design tools, patterns, and full site editing capabilities to shape impactful websites that mirror your distinct vision and creativity. As you immerse yourself in the core of WordPress styling, you’ll understand the rationale and terminology underpinning each element and how to use it to its full potential. By the end of this book, you'll be equipped to build your dream website, reflecting your distinctive style.
Table of Contents (23 chapters)
1
Part 1: Styling and Design Tools
6
Part 2: Block Patterns
11
Part 3: Template Parts and Templates
14
Chapter 11: Discovering and Creating Templates
16
Part 4: Themes
17
Chapter 13: Understanding How Themes Have Changed

Adding a block style from a theme

For this walkthrough, we are going to be using an existing block style selected from the theme. In this task, we are going to use the theme Twenty Twenty-Four:

  1. Let’s start by adding a button block. You can then click to view the block’s predefined styles called Fill and Outline. Here in Figure 3.3, you can see what happens when you click on the Styles tab and have a block selected.
Figure 3.3 – Adding a button with default style

Figure 3.3 – Adding a button with default style

  1. Notice how it selects Fill first? This is handy to know the default style of the block. The other style is Outline.
  2. Let’s now change the block style. You can do that simply by clicking Outline, as shown in the following screenshot.
Figure 3.4 – Changing the block style

Figure 3.4 – Changing the block style

  1. How good is that? Without needing to apply lots of styling, we have an outline style. This is all predefined in the theme and so is dependent...