Since 2008, we’ve been building websites that not only meet but exceed our clients’ expectations. Our team stays ahead of the curve by adopting the latest WordPress innovations. This ensures our clients benefit from cutting-edge features and a platform built to last.

Our mission is your success. We accomplish this by creating custom solutions that truly fit each client’s unique needs. This includes developing new (or custom-built) plugins, enhancing themes, and tailoring designs.

Embracing Change: Block and Site Editor as the Foundation

We are always looking for ways to push the boundaries of what WordPress can do. That’s why we’ve fully embraced WordPress Block Themes that bring the Block Editor and Site Editor’s visual editing capabilities to the forefront.

The introduction of the Block Editor was a game-changer! It shifted away from the classic, text-based editor to a more intuitive, modular approach. Now, creating complex layouts with text, images, videos, and other media is as simple as stacking blocks together.

This shift has made WordPress more accessible, empowering everyone—from beginners to seasoned pros. Anyone can craft rich, dynamic content without writing a single line of code. The Block Editor isn’t just an upgrade; it’s become the new standard for building and maintaining websites.

WordPress didn’t stop there.

Building on the Block Editor’s success, the Site Editor takes things a step further. It extends visual editing capabilities to the entire website design. With the Site Editor, users can design and customize every aspect of their website. That includes headers, footers, templates, and individual page elements. All of this is done directly within WordPress through a cohesive visual interface.

This evolution has turned WordPress into a powerhouse of flexibility. Users can achieve professional-grade designs without third-party page builders or heavy custom coding. By embracing WordPress Block Themes that are fully compatible with both the Block and Site Editors, we’re unlocking the full potential of WordPress. This means we can continue to deliver visually stunning and highly functional websites that meet the modern demands of our clients.

WebDevStudios Block Theme

We have always maintained our own theme framework for our client work. The framework we’ve been using for years is called wd_s, which is a starter theme that we forked from Automattic’s _s.

It served us well for several years, building themes the PHP way. We watched as the WordPress Block Editor evolved and the Site Editor became a reality.

In late 2023, we realized that our ol’ standard theme framework wasn’t going to cut it anymore. We faced three choices: updating wd_s to support modern WordPress capabilities, creating our own WordPress Block Theme, or selecting an existing theme currently on the market.

Ultimately, we created our own WordPress Block Theme. At first, we drew inspiration from Brian Gardner’s Powder theme. But we quickly realized that, while a very solid theme in its own right, it wasn’t set up for what we needed in our developer toolkit to keep in line with how we work.

WDS BT stands for WebDevStudios Block Theme.

WDS BT can be found in our WDS BT GitHub repo. We also set the theme up on a demo site, which allows us to showcase it when we talk to our clients about WordPress, Block Themes, Block Patterns, and more.

WDS BT is a product of the hard work of our engineering team, spearheaded by JC Palmes, Engineering Manager. A big thanks goes to JC for all her hard work and dedication in making our new Block Theme come to life!

Stylish and Tailored for WordPress

WDS BT is a stylish block theme tailored for WordPress that features native blocks and compatibility with the Site Editor. With a contemporary aesthetic, an intuitive interface, and seamless integration with the WordPress Block Editor, WDS BT ensures a polished and adaptable framework across all devices.

It’s crucial to understand that WDS BT is crafted as a foundational theme rather than a parent theme. This difference affords users a flexible starting point for customization.

Standard Development Tools Included

We equipped it with essential tools like NPM, Node, Composer, and Sass. These tools enable us to:

• Register block styles.
• Override or customize core block styles.
• Create block variations.
• Use mixins for responsive media queries.
• Implement Stylelint for consistent SCSS styles.
• Automated Versioning process designed to increment the BUILD number automatically upon merges to the main branch.
• Built-in WDS Block Template Creation Script

Full Design System Baked In

We created a full design system integrated into the theme, a departure from what we did with wd_s. This ensures that all core blocks and default templates have consistent styles. Normally, theme frameworks are plain and without much styling built into them.

However, for WDS BT, we wanted a starter theme with standard, consistent, and default styling for all core blocks out of the box. These default styles will provide a foundation for customizing client projects moving forward.

Manage Design at Scale

A design system is like the blueprint for your digital product’s look and feel, providing a set of guidelines, standards, and specifications that help you manage design at scale. It’s a framework that brings together design principles, patterns, and best practices, enabling designers and developers to create a consistent user experience across your entire website or product. Organizations use design systems to keep their digital products consistent, efficient, and scalable—whether it’s a website, app, or software interface.

What Makes Up a Design System

1. Design Tokens: These are the basic building blocks—like color palettes, typography, and spacing—that define your product’s visual style.

2. UI Components: Consider these as reusable puzzle pieces, like buttons, input fields, modals, and navigation bars. They’re designed to work together, allowing you to build complex user interfaces efficiently.

3. Patterns and Templates: Design patterns are tried-and-true solutions for common usability challenges, while templates are pre-built layouts for specific pages or screens.

4. Guidelines and Documentation: This is the instruction manual that includes design principles, usage guidelines, coding standards, and examples. It ensures everyone involved in the project is on the same page and knows how to use the design system effectively.

5. Tools and Resources: These are the libraries, design files, code snippets, and other resources that make it easy to implement the design system in your projects.

Why a Design System Matters

• Consistency: It standardizes visual elements and interaction patterns, ensuring your product feels cohesive no matter where the user goes.

• Efficiency: A library of reusable components and patterns speeds up your design and development process, cutting down on repetitive work.

• Scalability: As your product grows, a design system makes it easier to add new features and content without losing that consistent look and feel.

• Collaboration: A design system creates a common language for designers, developers, and stakeholders, making collaboration smoother and more effective.

Design systems aren’t static. They’re living, breathing tools that evolve as your product, technology, and user needs change. Keeping a design system relevant requires ongoing maintenance and governance. This ensures it continues to serve its purpose as your product grows and adapts.

Block Themes and Modern WordPress Development

Block Themes are changing the game, bringing a more unified and visual approach to site-building in WordPress. They make it easier for everyone—from users to developers—to create and customize websites without the hassle.

A Block Theme uses Blocks for every part of your site, from navigation menus to headers, content, and footers. These themes are designed to take full advantage of the latest WordPress features, letting you tweak and customize your site’s key elements without ever needing to switch themes.

Unlike old-school themes that leaned heavily on PHP templates and custom theme options, Block Themes are built almost entirely with blocks. This means you can edit nearly every aspect of your site’s design and content right through the Block Editor, giving you a more intuitive and visual design experience.

Some Key Features of Block Themes

1. Site Editor: Block Themes are designed to support the Site Editor in WordPress, allowing users to customize all parts of their site directly in the editor. This includes headers, footers, post templates, and more without editing theme files or using custom code.
2. Block-Based Templates: Instead of PHP templates, Block Themes use block-based templates. These templates are made up of Blocks and can be edited visually through the site editor.
3. Theme.json Support: Block Themes utilize a theme.json file. This configuration file allows theme developers to define custom settings and style options that can be used throughout the theme, including colors, typography, layout controls, and Block settings.
4. Global Styles and Settings: Users can globally customize styles and settings across their entire site, including fonts, colors, and layout configurations, directly within the WordPress admin interface.
5. Accessibility and Responsiveness: Many Block Themes are designed with accessibility and responsiveness in mind, ensuring that sites are accessible to all users and work well on various devices and screen sizes.
6. Simplified Theme Development: For developers, creating a Block Theme can be more straightforward than creating traditional themes. It relies on Blocks and a theme.json configuration, reducing the need for complex PHP coding and allowing for more direct manipulation of the site’s appearance.

Block Editor

Here’s a breakdown of what makes the Block Editor so powerful:

1. Block-Based Editing: The Block Editor is all about Blocks. Every piece of content—text, images, or videos—is a block you can easily add, arrange, and style. This gives you total control over how your posts and pages look and feel.

2. Wide Range of Blocks: Out of the box, the Block Editor comes loaded with various Blocks, from basic text and images to more complex elements like tables, columns, and embeds. This means you can build rich, dynamic layouts without touching a line of code.

3. Custom Blocks: For those who want to go a step further, developers can create custom Blocks that extend the editor’s capabilities even more. These Blocks can be tailored to fit specific site needs, bringing in custom functionality and designs that align perfectly with your vision.

4. Live Editing Experience: The Block Editor provides a true WYSIWYG (What You See Is What You Get) experience. As you build your content, you see exactly how it will appear to your visitors, making real-time adjustments and tweaks. This live preview helps you ensure everything looks just right before hitting publish.

5. Block Patterns and Templates: The Block Editor also supports Block Patterns and templates, as well as predesigned Block layouts you can drop into your content and customize. This is perfect for quickly building complex layouts without starting from scratch.

6. Accessibility and Usability: The Block Editor is designed with accessibility in mind, making it easy for users of all skill levels to jump in and start creating. It adheres to web accessibility standards, ensuring a smooth, user-friendly experience for everyone.

7. Site Editor: With the evolution of the Block Editor, the Site Editor now lets you use Blocks to edit not just posts and pages but also site-wide elements like headers, footers, and sidebars. This brings everything together, offering a more holistic, intuitive site-building experience.

The Block Editor represents a major leap forward in creating and managing content in WordPress. Furthermore, it’s designed to be visual, intuitive, and flexible, empowering both beginners and experienced developers to craft engaging web content and layouts with ease.

Patterns

In WordPress and the Block Editor (Gutenberg), “patterns” are like ready-made block layouts that you can drop into your posts and pages. These Patterns are essentially collections of Blocks that are already arranged in specific ways to create a certain design or functionality.

The beauty of Patterns is that they simplify the content creation process. Instead of building complex layouts from scratch, you can just insert a Pattern and customize it to fit your needs. It’s a fast, efficient way to get your desired design without all the heavy lifting.

The Lowdown on Patterns in WordPress

1. Predefined Layouts: Patterns offer ready-made designs that combine different Blocks into a cohesive layout. These can be as simple as a row of buttons or as complex as a full-featured contact section with text, images, and a form—all setup and ready to go.

2. Time-Saving: Patterns are a huge time-saver. Instead of adding and configuring each Block individually, you can drop in a complete Pattern and tweak it to fit your needs. It’s a fast track to creating visually appealing and functional layouts without the hassle.

3. Customization: While Patterns come with predefined layouts, they’re fully customizable. You can add, remove, or adjust any Block within a pattern to match your content and design preferences, giving you the flexibility to make it your own.

4. Consistency: Patterns help keep your design consistent across your site. Using the same Pattern for similar sections on different pages ensures a uniform look and feel, making your site feel cohesive and polished.

5. Theme and Plugin Integration: Patterns can come from your WordPress theme, plugins, or even the WordPress core itself. This means when you switch themes or install certain plugins, you might get access to new patterns specifically designed to enhance the theme’s or plugin’s functionality.

6. Community Contributions: WordPress developers and designers can, and have, create and share their own WordPress Patterns with the community. The WordPress Pattern Directory is a treasure trove where you can find and import patterns created by others, opening up even more design possibilities for your site.

7. Ease of Use: Inserting a Pattern into your post or page is a breeze. Just browse through the available patterns in the Block Editor’s Pattern Library. Preview what you like, and insert it with a click. It’s that simple.

Patterns in WordPress are all about making content creation more flexible and user-friendly. They give everyone—from beginners to pros—the tools to create professional-looking layouts without needing to be a tech wizard or a design guru. It’s all about democratizing web design, making it easier and more accessible for everyone to build beautiful, functional websites.

Full-Page Patterns (Layouts)

Full-page Patterns are like having a complete, ready-to-go page layout at your fingertips. Unlike smaller Patterns that might only cover a specific section (like a header, gallery, or testimonial), these are full-blown page templates. They come with everything you need—think hero sections, About sections, services, contact forms, and footers—all laid out for you in one cohesive design.

Full-Page Patterns Are a Game-Changer

1. Comprehensive Layouts: They offer a full layout solution for an entire page, combining multiple sections and content Blocks. This means you can skip the grunt work and quickly have a fully structured page up and running.

2. Variety of Uses: Whether you need a landing page, an About page, a contact page, or a portfolio, full-page Patterns have you covered. They give you a quick way to add and customize content for any purpose, so you’re not starting from scratch.

3. Customization: Although full-page Patterns have a predefined layout, they are fully customizable. You can tweak, add, or remove Blocks to fit your content and style. Make it your own while still saving time.

4. Theme Integration: Many WordPress themes include a selection of full-page Patterns, ensuring they blend seamlessly with your site’s design. This keeps your website looking consistent and polished without extra effort.

5. Time-Saving: Full-page Patterns give you a head start, providing a structured foundation that speeds up the page-building process. You can roll out complex layouts quickly without compromising on quality.

6. Inspiring: If you’re stuck on page design ideas, check out full-page Patterns for inspiration. They show practical examples of how to combine Blocks effectively, helping you create effective layouts.

Full-page Patterns make the WordPress Block Editor even more powerful. It is easier than ever to create professional, well-designed pages without needing a ton of design or development know-how. It’s all part of WordPress’ mission to make web design more accessible and efficient for everyone.

Global Settings & Styles (theme.json)

The theme.json file has also changed the game for WordPress themes. It offers a streamlined way to manage a theme’s appearance and behavior, especially in the Block Editor (Gutenberg).

Introduced in WordPress 5.8, this configuration file lets theme developers set up default styles, settings, and configurations. This provides more control over the design and functionality of a WordPress site without needing a ton of custom code.

Here’s what theme.json can do:

1. Define Global Styles: With theme.json, you can set global styles that apply across your entire site, from colors and typography (fonts, sizes, weights) to layout settings. This ensures your site maintains a consistent look, regardless of the content you add.

2. Configure Block Settings: Developers can define default settings and styles for specific Blocks. You can control how they look and behave right out of the box. You can even decide which Block options users see in the editor or hide certain settings altogether.

3. Control Color Palettes and Gradients: Want custom color palettes or gradients available in the Block Editor? theme.json lets you set these up, making it easy for users to apply your brand’s colors throughout the site.

4. Manage Typography Options: theme.json allows you to specify custom typography options, like font sizes, families, and line heights, which users can easily apply through the Block Editor.

5. Customize Layout and Spacing: From one file, you can control the site’s overall layout. Control content sizing, spacing, and Block supports, like padding and margin.

6. Enable or Disable Block Features: theme.json allows you to globally enable or disable Block features like custom backgrounds, color settings, or link colors.

7. Simplify Theme Development: theme.json simplifies the development process by centralizing much of the theme’s design and functionality settings. It reduces the need for extra CSS and PHP, making it easier to implement and maintain design standards.

8. Enhance Theme Consistency: The theme.json file ensures that your site’s look and feel remain consistent. It maintains this consistency even as users customize and add content with the Block Editor.

The introduction of theme.json is a big step forward in making theme development more efficient and user-friendly. It empowers theme developers to create flexible, consistent designs. At the same time, it gives users the tools to customize their sites without disrupting the design system.

Conclusion

At WebDevStudios, WordPress is more than just a platform—it’s the heartbeat of everything we do. We’re all about pushing boundaries. WebDevStudios believes in embracing innovations like Block Themes, Block and Site Editors, and robust design systems. We aim to build beautiful, functional, consistent, and scalable websites.

Our WDS BT WordPress Block Theme proves our dedication to crafting tailored solutions that meet each client’s unique needs. We maximize WordPress’ potential in every project. As WordPress evolves, we’re right there with it, ensuring that every site we build is ready for the future. By partnering together, let’s create a digital experience that lasts and impresses.

The post Embracing the Future: How WebDevStudios Is Leading with WordPress Block Themes appeared first on WebDevStudios.

In this blog post, we’ll cover the latest WordCamps we’ve attended and those we’re going to, as well as a new site launch, a podcast featuring our CEO, and articles highlighting our work. Keep reading because there’s a lot of thrilling news to share.

JewelStaite.net Launch

We are very proud to announce the launch of the WordPress website for actor and foodie Jewel Staite! JewelStaite.net was built with the WordPress Block Editor, using Block Patterns and our very own block theme—WDS BT.

Jewel announced the launch on her social media and released a sizzle reel to highlight her new branding, website redesign, and all of the lovely elements that make her website unique, bespoke, warm, and inviting. Watch the reel below, and go to JewelStaite.net to see the website for yourself.

Full Site Editing in the Real World

Is no one truly using Full Site Editing and block themes? Fränk Klein, engineer and the person behind WP Development Courses, answered this question by presenting seven websites built using block themes. One of the examples included was Felicia.day, which WebDevStudios (WDS) built for the actor, activist, and streamer.

See all seven websites Fränk presented in his article and better understand the importance of learning block theme development. Read “Full-Site Editing in The Real World: 7 Websites Built Using Block Themes” now.

The Inside Track

Another podcast episode of “Scaling Enterprise, WordPress and Open Source Software” has dropped. Hosted by WDS CEO Brad Williams and Human Made CEO Tom Willmot, this latest installment is part of “The Inside Track,” which explores the world of enterprise WordPress and how the platform scales to meet the needs of large organizations.

In this episode, Brad and Tom teamed up to interview Mario Peshev, CEO of DevriX. The group shared their extensive experiences running their own agencies and the importance of contributing to open-source technology. Listen to the entire podcast episode at Do the Woo.

WP Weekly Inclusion

Thanks to WP Weekly for highlighting one of our recent blog posts, “Making the Switch from Webflow to WordPress,” in its weekly newsletter. A project by Davinder Singh Kainth, a creative professional who loves creating online spaces powered by WordPress, the WP Weekly brings the best bits from the WordPress ecosystem in a short and concise newsletter that should not take more than 10 minutes of reading time. Learn more about WP Weekly at thewpweekly.com.

WordCamps

The WordCamp fun continues! We recently attended one in Minnesota and have another coming up this weekend in the Philippines. Plus, we can’t forget about WordCamp US happening next month. Keep reading for all the details.

WordCamp Minneapolis / St. Paul

WordCamp Minneapolis / St. Paul (WCMSP) was a blast! Two WDS teammates—Engineering Manager John Heimkes and Marketing Manager Laura Coronado—got to meet for the first time ever while also connecting with former staff members, including WCMSP speaker Gary Kovar, who presented a talk on how NASA’s website was built on WordPress.

WordCamp Cebu

WordCamp Cebu, happening this weekend (August 24th) in Cebu City, Philippines, offers opportunities to learn, connect, and grow. Engineering Manager JC Palmes is speaking at this WordPress event.

JC’s talk is titled “Embrace the Blocks: Why Block Themes Are a Developer’s Friend.” It will cover the world of Block Themes, explore the tools and concepts, and demonstrate why Block Themes are not just user-friendly but a powerful new addition to a developer’s toolkit.

Next Month: WordCamp US

WordCamp US is the premiere WordCamp event in North America. It will take place in Portland, Oregon, from September 17-20. The event features a Contributor Day and a Showcase Day.

Five members of the WDS team will be in attendance: CEO Brad Williams, Director of Accounts Jen Miller, Account Manager Laura Byrne, Senior Frontend Engineer Marty O’Connor, and Senior Frontend Engineer Alfredo Navas.

Interested in meeting with our team in person at WordCamp US to discuss your next big WordPress project? Use this link to book an appointment. Our team would love to chat about your website needs.

The post Company News – August appeared first on WebDevStudios.

The minimum requirements to create a custom theme and how some of the new blocks work for the page creation have also been tweaked. Before 6.0, we needed to have the Gutenberg plugin installed and a block-based theme. Now, we only need a block-based theme.

You can start downloading an empty starter. Begin with this GitHub repo. This starter theme was made by Carolina Nymark. She has really great material on FSE. Check out her other work.

Open your favorite IDE and open your theme files. If you use localWP, you can spin up a local WordPress install. Now, add your theme and activate it.

We are going to build a simple home page for our theme, with a minimum amount of code. Thanks to theme.json and the Full Site Editor, let’s look at what we are going to build. This is a basic mockup I made with Figma:

We have a Header, a Footer, and some common sections that we will turn into Template Parts and  Block Patterns, as well as our colors, font sizes, and font family—all of which we are going to add to our theme.json.

theme.json

The first step, once we got our blank theme up and running, is to set our global styles. Let’s add some colors and font styles.

If it’s your first time working with theme.json, I encourage you, before you continue, to check the official documentation and get a grasp of what you can do.

Our color palette will look like this:

So on our theme.json, we do the following: on the settings object, we have our colors object. Let’s add our primary color:

This results in the generation of the CSS variable in the body of the website: --wp--preset--color--black: #D63E4B;.  Follow the same pattern and add the rest of the colors ( Secondary: #48655E, Tertiary: #59BDB4, Black: #333333, and White: #FFFFFF ).

This will generate our color palette. Go to your dashboard and open your Full Site Editor. Open the styles toolbar and click on the colors tab. There is our theme color palette:

We can also disable the default and custom colors by adding this  "defaultPalette": false,"custom":false, to the colors object.  Setting up our font sizes and styles is similar to how we add our colors. We will update the typography object on our theme file.

As with the colors, WordPress programmatically will create --wp--preset--font-family--helvetica-arial: Helvetica Neue, Helvetica, Arial, sans-serif; will generate the CSS Variable on the body of our website, and on the Full Site Editor, our typography is registered.

Follow the same pattern and add these sizes: 14, 18, 20, 24, 28, and 40px. When ready, save your theme.json file and open your Full Site Editor. Open the styles bar, and you will get your font family and font sizes.

Let’s take a look what theme.json has created for us. On your website, open the inspector tool. On the Styles Panel, take a look on your body element properties.

Excellent! We now have CSS variables with our values, globally available,  fonts and colors, and there are more settings for gradients, duotones, line-heights, borders, etc.

For the sake of this article, we are going to keep it simple. Lets’s take a look at how we can apply these styles to our elements and blocks.

First, we go back to our theme.json file on our IDE. We will add some properties to the styles, some spacing to our blocks, our typography, and default font sizes.

If we go back to our inspector tools, we can see the body has now our properties. You can use theme.json to adjust the styles to elements and blocks. Don’t forget to check the documentation to better understand what you can do with it.

Styling Blocks

Applying these styles to our blocks can also be done using the FSE editor. Open the styles tab, and let’s add some global styles to our buttons.

Here, we can set the typography, colors, and layout that the buttons will use. Follow the example below. Once you’re ready, hit save. It will let you know you’re adding a custom style. Save again.

So now, our default button is styled and looking like this on the backend/frontend. Using the inspector tool on our website, we can check the generated styles and our CSS Variables:

You can apply these styles to your blocks also on your theme.json. Following the same pattern, open your IDE,  and on the styles object:

Now that we get to know better theme.json ,  we can now focus on our Block Patterns.

Block Patterns

Our Hero, the Latest Post section, and our Call To Action section can be patterns. So, first of all, what are patterns?

Block Patterns are predefined block layouts available from the patterns tab of the block inserter. Once inserted into content, the blocks are ready for additional or modified content and configuration.

This feature in WordPress is super handy and it also has its own library. So, you can grab and use it, similar to how you add a theme or a plugin.

To build the Hero, we are going to use the cover block. With an inner group block, add a Heading (H1) a Paragraph, and a Button. Remember, we already set up all our styles via theme.json. All the settings can be added using the Full Site Editor. It should look similar to this:

Our pattern looks like the one on our mockup. There is no way we can add the patterns via the editor, similar to how we add template parts or reusable blocks.

You can use a plugin There are a few on the plugin repo  or you can create your own programmatically.

Once your block is ready, select the block. Open the sidebar options on the block options and select copy. This will copy the block markup. Go back to your IDE and open your  theme. Create a directory, name it patterns, add a new file hero.php and paste the markup.

Notice that we not only need to add the markup, but we also need to declare our pattern to let WordPress know what to do with this file. Similar to how we declare our templates, we declare the title, the slug, and categories. You can get more details on the official documentation. Click the Block Inserter, and there is our Hero Pattern:

Awesome! There is also one other pretty neat feature on theme.json. You can also declare patterns from the block pattern library. The patterns field is an array of pattern slugs and you can get the pattern slug from the URL in a single pattern view at the Pattern Directory. For example:

Sweet. Now, that we know how to create patterns, it is time to create the Latest Posts pattern. We are going to use the query loop block to show our three latest posts, with post image, post title, and the excerpt.

To get more on this super handy block, what do we do? Head to the official documentation.

Go ahead and do it yourself with what you learn in our previous example, but here is the gist in case you need it. I’m pretty sure you won’t. Our Latest Posts pattern looks like this:

Go ahead and create the final pattern. Again, you can build it yourself with what you learn so far. In case you need it, here is the gist for our final pattern.

Creating a Template

Now that we have our patterns, the next step will be to glue them to our templates. Open your Full Site Editor. Under templates, we have the index from our theme files.

We are going to create a new template by clicking on the Add New button. It will display a list of options that follows the WordPress Template Hierarchy. Select Front Page.

The first thing we are going to do is add our Template Parts, our Heading, and Footer. We have these parts already on our theme files, and most importantly, the Post Content Block.

Following our mockup design, click on the Block Inserter. On Patterns, add our own. It will look like this:

Now, we need to add some content to our homepage for the Subject of the page. Open a page and add your content. Copy what we have on the mockup.

Once that is ready, save it. Go to the dashboard, click on Settings >  Reading > then select your new page as Homepage. Save it and open your website.

We are getting closer… really close. I will say, we need to add a few styles here and there, but we manage to get really close to the mockup without a single line of CSS.

With the help of theme.json we add global styles, colors, fonts. And with the help of the Full Site Editor and the Block Patterns, we create our template and some patterns that we can use across our site—not only when templating, but also when creating posts and pages.

So far, we have just created the Front Page template, but is up to you to create the rest of the templates needed for your theme.

Exporting My Theme

Yes, you can build themes locally with the help of the Full Site Editor and also export it and ship it. Since we are creating a theme, before exporting, we still need to enqueue some custom styles that we need for our theme.

From here, there are many options. You can add wp-scripts or any task runner to your theme. For now, I will only enqueue a basic stylesheet.

Back to your IDE. Create a new directory for our styles. Name it css. Create a CSS file (named as you like) and paste these styles. To enqueue styles on a block-based theme, use the traditional way and add it to your theme’s functions.php file.

Now, here is our theme with the styles. Pretty good.

Great! We just completed our task, created our landing page, and it is also responsive by default. Now, let’s export our theme.

On the Full Site Editor, click on the three dots on the top bar to open the settings bar. Click on the option to export your site:

This will generate a .zip file ready to ship. Go ahead and add your theme and try it out. Here is the repo of the generated theme.

This is just a basic example of what you can do with the new Full Site Editor. I’m really excited about this new way of building themes. There are a lot of documentation, tutorials, and humans that are doing really great things with WordPress.

Thank you for taking the time to read this article. See you next time!

The post Let’s Create an FSE Theme appeared first on WebDevStudios.