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.

Understanding the Benefits

Elementor, known for its drag-and-drop interface, has been a favorite among WordPress users for its ease of use and flexibility. However, with the introduction of the WordPress Block Editor, a new era of web design and development has emerged.

The Block Editor offers a more seamless integration with WordPress. It provides a user-friendly interface and a plethora of features that enhance your website’s functionality and design. Below are the benefits of moving from Elementor to the WordPress Block Editor.

The Advantages of WordPress Block Editor

1. Seamless Integration with WordPress

The Block Editor is built into WordPress, ensuring high compatibility and performance. This native integration leads to a smoother workflow and a more stable environment for your website, reducing the chances of plugin conflicts and compatibility issues.

2. Enhanced Performance

Websites built with the Block Editor tend to load faster than those created with Elementor. This performance boost is due to the cleaner code and the absence of the extra layer of abstraction that page builders add. Faster load times provide a better user experience and positively impact your SEO rankings.

3. Flexibility and Customization

With the Block Editor, you can access a wide array of blocks that can be easily customized to fit your website’s design and content needs. The possibilities are endless, from simple text and images to complex galleries and widgets. Moreover, the Block Editor continually updates new features and blocks, expanding your creative palette.

4. Cost Efficiency

Moving to the Block Editor can also be more cost-effective in the long run. Unlike Elementor’s premium version, the Block Editor comes free with WordPress, eliminating the need for additional expenses on page builder plugins.

Making the Switch: A Strategic Move

Transitioning from Elementor to the WordPress Block Editor might seem daunting at first. However, the long-term benefits far outweigh the initial effort required to switch. You will enjoy a more streamlined and efficient web development process and provide visitors with a faster, more engaging website experience.

Recognizing the challenges of transitioning from Elementor to the WordPress Block Editor, our team at WebDevStudios has developed a cutting-edge plugin to facilitate this process. This tool simplifies the transition, ensuring your content is migrated smoothly without losing fidelity.

We highly recommend watching this YouTube video to see this tool in action and get a sense of how easy and effective the transition can be. It provides a practical example of the tool’s capabilities and how it can serve as a cornerstone for your website’s transformation.

WebDevStudios: Your Partner in Transitioning from Elementor to the WordPress Block Editor

At WebDevStudios, we understand that change, while beneficial, can be challenging. That’s why we’re here to help you every step of the way.

Our team of WordPress experts specializes in making the transition from Elementor to Block Editor smooth and stress-free. We focus on ensuring that your website not only retains its aesthetic appeal and functionality but also benefits from the enhanced performance and flexibility offered by the Block Editor.

Our Services Include:

• Thorough Assessment: We begin by evaluating your current website to understand its structure, functionality, and the specific elements built with Elementor.
• Strategic Planning: Based on our assessment, we develop a customized plan to migrate your website to the Block Editor, ensuring minimal disruption to your online presence.
• Professional Implementation: Our experts handle the entire migration process, from setting up the necessary blocks to tweaking the design and functionality to match your original site—or even improve it.
• Training and Support: We don’t just stop at migration. Our team provides comprehensive training on using the Block Editor, empowering you and your team to manage and update your website effortlessly. Plus, we offer ongoing support to address any questions or challenges you might encounter.

Ready to Transform Your Website?

Moving from Elementor to the WordPress Block Editor is a strategic decision that can significantly enhance your website’s performance, user experience, and manageability. By choosing WebDevStudios as your partner in this transition, you’re not just upgrading your website; you’re setting the stage for future growth and success.

Don’t let the fear of change hold you back. Embrace the opportunities that the Block Editor offers and unlock your website’s full potential. Contact WebDevStudios today to start your journey toward a faster, more flexible, and more efficient website.

The post The Benefits of Moving from Elementor to the WordPress Block Editor appeared first on WebDevStudios.

WordPress is a popular content management system (CMS) that powers over 43% of websites today. One of the key reasons for its popularity is its flexibility and customizability. WordPress allows developers to create custom themes and plugins to tailor the website to their needs.

WordPress Styling

When developing a WordPress theme or plugin, one of the critical aspects is styling. It’s essential to ensure the website looks visually appealing, and the design is consistent throughout. This can be achieved through cascading style sheets (CSS), which dictate how the HTML elements are presented on the page.

However, styling a WordPress website can be complex, especially for those new to web development. Several different methods can be used to apply styles to various parts of the website, including the frontend, content editor, plugins, and admin areas.

Continue reading, and we will explore WordPress styling techniques and the different methods available for adding styles to each area. We will cover everything from basic CSS rules to advanced techniques like hooks and filters.

By the end of this article, you will have a comprehensive understanding of applying styles to different parts of a WordPress website and be well on your way to creating a fully customized and visually stunning website. These are the places where styling is required, which we’ll cover in this blog post:

1. Block Editor Styles
2. Block-Specific Custom Styles
3. Using theme.json
4. Theme & Plugin Styles
5. Classic Editor Styles
6. Admin Styles

1. Block Editor Styles

Customizing the visual appearance of the Gutenberg block editor is an essential aspect of developing a WordPress website. Adding your own custom styles can make your content stand out and create a more engaging user experience.

Fortunately, adding styles to the block editor is a straightforward process. One way to do this is by utilizing the enqueue_block_editor_assets hook, which allows you to enqueue your stylesheet specifically for the block editor.

Enqueuing your stylesheet using this hook ensures that your styles are loaded only in the block editor and not on the front end of your website.

Here is an example of how to add it:

View the code on Gist.

If you want to update the frontend as well, change the code slightly, as shown below:

View the code on Gist.

Use this article from CSS-Tricks as a reference for targeting different blocks in your stylesheet if needed.

Opinionated Styles

When using the Gutenberg block editor, default styles are loaded on both the admin and frontend sides. However, certain opinionated styles need to be added manually. For instance, the default block quote won’t have a colored border on the left-hand side without enabling these styles.

To enable them, add add_theme_support( 'wp-block-styles' ) to your functions.php file like below.

function my_theme_setup() { 
  add_theme_support( 'wp-block-styles' ); 
} 
add_action( 'after_setup_theme', 'my_theme_setup' );

2. Block Specific Custom Styles

Customizing the visual appearance of blocks in the WordPress block editor is made possible by the register_block_style() function. This function allows developers to create custom block styles, expanding users’ options to style and customize their content.

The register_block_style() function accepts three parameters: the block name, the style name, and an array of arguments defining the style properties. With this function, you can easily create a custom style for any block, such as the core/button block.

Here’s an example of how to use register_block_style() to achieve this.

View the code on Gist.

In this example, we’re registering a new style for the core/button block called my-theme-button-style.

Once you’ve registered the block style, users can select it from the block editor’s style selector. The style will be applied to any core/button blocks that use the my-theme-button-style class.

Overall, register_block_style() is a powerful tool that allows you to create custom styles for blocks in the WordPress block editor, giving users more control over the appearance of their content.

3. Using theme.json

The theme.json file is a configuration file introduced in WordPress 5.8 that allows developers to customize a WordPress theme’s global styles and settings. It is a JSON file that defines a set of rules that determine how the theme should be displayed on the front end of the site.

With theme.json, you can customize a wide range of settings, including typography, colors, spacing, and layout. These settings can be applied globally to your theme, or you can specify different settings for specific blocks or block patterns.

Here are some of the key features and benefits of using theme.json:

1. Consistency: With theme.json, you can ensure that your theme’s styles and settings are consistent across all blocks and block patterns. This can help improve your site’s overall design and user experience.
2. Efficiency: By defining global styles and settings in a single theme.json file, you can simplify the process of customizing your theme and reduce the amount of code required to achieve a consistent design.
3. Accessibility: theme.json includes a range of accessibility-related settings, such as font size, line height, and color contrast. By using theme.json, you can ensure that your theme meets accessibility guidelines and is usable by as many people as possible.
4. Flexibility: theme.json allows you to define different styles and settings for other blocks or block patterns, giving you greater flexibility and control over the appearance of your site.

Here’s an example of what the theme.json file might look like this:

View the code on Gist.

In this example, we’re defining a set of global styles and settings for our theme. These include color, typography, spacing, and layout settings, as well as a custom setting called my-custom-setting.

We’re also specifying some block-specific styles and settings for the core/paragraph block. These override the global settings for this block, allowing us to customize its appearance separately from other blocks.

By using theme.json, you can create a consistent and accessible design for your WordPress site with less effort and more flexibility.

4. Theme & Plugin Styles

Themes and plugins have a similar way to enqueue styles by using the wp_enqueue_style() method.

The below example shows how to enqueue the styles in your theme:

View the code on Gist.

In the same way, we can also enqueue the styles in the plugin. The only difference is you have to use the plugins_url() method to point the path to the specific plugin’s stylesheet. See the example below:

View the code on Gist.

Please note that here the styles.css file will load on the front end. But if you want to add some custom styles for the plugin’s interface under Admin, please use admin_enqueue_scripts hook instead of wp_enqueue_scripts hook as in the example below:

add_action( 'admin_enqueue_scripts', 'my_plugin_enqueue' );

5. Classic Editor Styles

Developers can use the hook to add custom styles to the Classic TinyMCE Editor in WordPress. This allows users to see how their content will look on the front end while editing it from the admin panel.

Here is an example of how to implement add_editor_style() to add custom styles to the Classic TinyMCE Editor:

View the code on Gist.

6. Admin Styles

To brand the WordPress Admin Panel or to style a plugin’s user interface, developers can use the admin_enqueue_scripts hook to add custom styles.

This hook can also be used to load styles on specific pages within the WordPress Admin by adding conditions. Here is an example of how to do this:

View the code on Gist.

In this example, we only load the file when the user is on the edit.php page.

Conclusion

By leveraging WordPress styling techniques, you can create beautiful and highly customized websites that truly stand out. Whether you’re looking to brand your WordPress site or create a unique style for your plugin, there are many ways that you can use to achieve your goals. We hope this article has helped provide you with a better understanding of WordPress styling techniques and inspired you to create even more stunning WordPress websites in the future.

The post Exploring WordPress Styling Techniques appeared first on WebDevStudios.

However, as we’ve begun entering content, we realized that we can make improvements to the editing experience for the client. In this blog post, we outline how by optimizing the WordPress Block Editor experience, we make it easier for editors to perform their jobs.

Background

The set of websites contains one main site and many subsites. We created several custom post types to handle a variety of content, some of which exist on both the main site and the subsites.

All custom post types contain meta fields, created with Advanced Custom Fields, which are used to add custom content to the post. Additionally, we use the content from two post types from the main site on the subsites.

To build the blocks for this website, we used Advanced Custom Field (ACF) blocks. For a Headless WordPress website, ACF makes it easy to structure data the way we want on the frontend, with minimal extraneous information.

Because of the complexity of information and the challenges of building a headless site, we wanted to make sure the editing experience was as straightforward as possible. We identified five ways to make improvements, optimizing the WordPress Block Editor. It’s all detailed below.

Instructional Text

When creating the blocks, we made sure to clearly label each field and add instructions for editors. We included information like image dimension requirements, character or word length limits, and location specifications (sidebar, main content, etc.).

With these instructions, editors can easily jump in and edit the website. They don’t need to search for documentation or be trained. This detail is especially important with 20+ subsites, each with different editors in different locations.

Tabs in Blocks

Advanced Custom Fields provides several layout fields, allowing you to organize content. We leveraged the tab field to separate sections and let users enter specific content in each tab.

For example, if we build a block that contains event details and a sponsor, we can create two tabs. One is for the event information, such as venue, time, etc. The other tab is to input the event’s sponsor information, such as the sponsor’s name, logo, and link.

This sounds so simple and obvious, yet this makes it more convenient than usual for users to add content. Would you prefer a long form where you scroll up and down in the editor or a tabbed block?

Leveraging the power of tabs keeps the user interface and experience better, which allows for optimizing the Block Editor experience for the editor.

Dropdowns

To decrease the chance of human error, we identified places where a dropdown select menu should be used instead of a text field.

Using Advanced Custom Fields, we were able to create custom dropdowns generated from post types and meta fields. For example, we have a block on the subsites that needs to return the ID for an organization, which is a custom post type on the main site.

Initially, we created a Text field for that input, but realized that it opened the door for user error. We changed the Text field to a Select field and queried the organization post type on the main site to get the organization ID from the meta field.

This allowed us to create the options in the Select field with the organization name as the display and ID as the return value. Using a Select field in this way significantly reduces the likelihood of human error, and allows for a more bespoke user experience on the backend.

Readonly Fields

Another way we have addressed the possibility of human error is through ‘readonly’ fields. This is helpful when you want to keep data intact on fields like identifiers imported from an API that doesn’t require any manual editing. The user can view the field values and confirm that content has been entered, but cannot change them.

Frontend Previews

ACF blocks are great for creating complex blocks quickly, but the editor loses the Gutenberg experience of seeing a styled block as they’re building a page. Additionally, since we’re using ACF blocks in a Headless WordPress website, an editor can’t see a preview of the page and blocks they’re editing in the Gutenberg editor.

That’s because the website doesn’t use a standard WordPress theme. Plus, the CSS, Javascript, and PHP aren’t pulled into the preview.

To solve this problem, we included a screenshot of the block as a tab, but our lead developer developed functionality that displays an iframe of the block from the frontend when the “Switch to Preview” button is toggled when editing the site. This lets editors preview the block with the content they’ve entered before saving the page.

Conclusion

Working on this complex site reminded our team that not only is frontend usability important, but the editor user experience is also equally important. If an editor can’t enter content correctly, it doesn’t matter what a website looks like or how it functions.

This brings us to the end of learning the ins and outs of optimizing the WordPress Block Editor experience. We’d love to know the steps you take to improve the editing experience for your WordPress websites. Please tell us in the comments below.

The post Optimizing the WordPress Block Editor Experience appeared first on WebDevStudios.

These plugins are sorted in the order of block patterns, blocks, block-based themes, or theme combinations. Ready to be a power user? These Gutenberg plugins will get you there.

Block Patterns

Can you imagine Gutenberg editor without block patterns? Whether it is creating a landing page or blog post, block patterns come in handy.

As a backend engineer, I prefer using block patterns created by designers rather than creating something on my own. You can find block patterns at the official repository or GutenbergHub’s directory.

Block Pattern Explorer

This plugin allows you to list block patterns registered from your theme or plugins. You can also browse the block patterns that come with WordPress core. As per the developer of this plugin, Nick Diego, this plugin is currently an experimental one.

Control Block Patterns

The control block patterns plugin allows you to manage block patterns and their categories. It also supports inserting custom code to header and footer like analytics scripts, custom CSS styles.

This plugin makes it easier to create custom block patterns from the Gutenberg editor, exporting and importing reusable blocks and block patterns.

Blocks to Improve Writing Experience

Editors Kit

As the name suggests Editors kit plugin offers an array of features that make the writing and editing experience better. You get rich text formatting including superscript, subscript, indent paragraphs, inserting special characters, etc.

Additionally, you can show or hide blocks based on the device screen sizes. With conditional logic, you get granular controls to block visibility.

If you are a developer or a techie who loves MarkDown, this plugin supports markdown, and also comes with a syntax highlighter You can define keyboard shortcuts and speed up your writing process.

There are other cool features like copy and pasting gradients for buttons and covers, block pattern library, theme support for developers and block navigators, etc. Since this plugin comes with many features, you can manage them via feature manager.

MathML Block

Are you tired of trying different plugins to insert math formulas? Try this MathML block.

It allows you to insert mathematical markup language easily. It is also compatible with the official AMP plugin.

Simple TOC

Readers love to see the table of contents while reading a long article. Let your readers know what is in it for them using this simple TOC block.

Blocks to Design Pages

An icon is worth a hundred words, use icons with this icon block. Web fonts API is now available in the Gutenberg plugin, you can change the typeface using the block settings.

Newsletter Glue

It is hard to create a blog post and add it to your email newsletters. Newsletter Glue solves this problem. Create content once, and use it as blog posts and also newsletter archives. Newsletter Glue comes with blocks including embed links, author bylines, social sharing, show or hides content blocks, and more!

Editor Plus

Editor Plus allows you to customize every block with easy-to-use controls for typography, shape divider, box-shadow, spacing, visibility, and more features. You can copy any block patterns from Gutenberg Hub with the help of this plugin.

Addons for Gutenberg

Actively maintained plugins are the best part of the WordPress ecosystem. This enables no-code design and development for people of all skill levels.

Here is the list of Gutenberg addons or suites that provide an array of blocks. They are not listed in any particular order, read more about each of the plugins, shortlist the ones you might need. Then install them on a dev site, try the blocks, and then implement them on the live site.

• PublishPress Blocks
• Caxton
• Coblocks
• Genesis blocks
• Getwid
• Kadence blocks
• Otter blocks
• Responsive Gutenberg Blocks Library
• Stackable
• The plus addons for Gutenberg
• Ultimate blocks
• Kioken blocks
• Aino blocks

Plugins to Enhance Gutenberg Block Editor

Block Manager

This is another feature that should come to WordPress core in the future. Block Manager by WebDevStudios Lead Engineer, Darren Cooney, allows you to enable or disable blocks.

QuickPost

You have to toggle the fullscreen editing mode, to see the add new post link. The QuickPost plugin by Aurooba Ahmed allows you to add new items in the fullscreen editing mode. If you want to duplicate a post, click on the kebab menu, click on the duplicate post. This plugin works with custom post types too.

Theme and Plugin Combinations

Not sure about what theme to use and which blocks work with them well? Try these combinations, most of them are from the respective theme authors.

Gone are the days with multi-purpose themes which make you install a bunch of plugins. Now you are free to choose the starter theme and plugins that you need.

wd_s

At WebDevStudios we use our own starter theme, which provides the best developer experience to our backend and frontend engineers.

Bring Your Own Blocks

Our Frontend Engineer Amor Kumar has been building a brilliant solution to prevent the design system collapse by abuse of block controls.

His headless theme comes with a dockerized container that is easy to set up and get started.

The low-code or no-code themes and block combinations are listed below

ACF Blocks

If you are an Advanced Custom Fields (ACF) user, you can take advantage of their ACF blocks. This requires the ACF pro plugin to be installed and active.

With 20+ blocks in their suite, you can build pages on the fly.

Aino

Aino comes with FSE support and Aino blocks. With the Aino blocks, you can build pages that every website needs.

GeneratePress and GenerateBlocks

This is another popular solution to build sites faster. GeneratePress comes with its own blocks to allow more granular control of the container, grids, headings, and buttons.

One noteworthy feature is that GenerateBlocks doesn’t add too many blocks. It gives extra features instead of extra blocks with their Pro plan. With the features like global styles, effects, backgrounds, custom attributes, container links, and template library.

On a side note, GeneratePress has another plugin called WP Show Posts which is almost the short code-based version of the query loop Gutenberg block. Give it a try.

Kadence and Kadence Blocks

Kadence theme is one of the popular themes that allows you to control and customize your website without coding. Kadence theme and their blocks come with controls for visibility, responsiveness, spacing, typography, colors, and background. With the Pro version, you can get premium templates, animations, custom fonts, and icons.

FrostWP

FrostWP is coming from WP Engine’s family and is an open-source theme. It is packed with standard features, block patterns, and sample sites that you can import.

The global styles and FSE feature adds FrostWP to the popular themes of recent times. It also adheres to accessibility standards.

Blocksy and Stackable

Blocksy is a good choice if you want to control most of your site from the customizer. It allows you to customize colors, typography on every area of the site including header, footer, archives, and single items.

Recently Blocksy team started using Stackable blocks to build their demo sites. You can import the starter sites using their free Blocksy Companion plugin.

Twentig

A better way to customize the default WordPress themes is to use Twentig plugin. This adds more customization options to Gutenberg blocks. You can choose from pre-built starter sites to speed up your development process.

Conclusion

The possibilities are endless with the Gutenberg block editor. Every day, new blocks and themes are added to the WordPress repository.

What is your favorite one from this list? Please leave a comment below.

Learn More from Lax at Atarim Web Agency Summit 2022

Catch Lax at Atarim Agency Summit 2022, April 26-29, 2022. He will present a talk on “Build Something That Scales: Why You Should Use CI/CD.” Registration is free.

The post Gutenberg Plugins That Make You a Power User appeared first on WebDevStudios.

But the compatibility landscape of WordPress 5.0 and beyond is much different. The new WordPress block editor Gutenberg is built upon React, and the development pace of React, Gutenberg, and all things JavaScript, in general, is extremely fast. I’m hoping this can serve as a reference or forewarning to those trying to keep up.

Gutenberg Versions

When you’re trying to build a Gutenberg block that is compatible back to WordPress 5.0, navigating this landscape is tricky. Since the Gutenberg editor is developed as a separate project, they have their own versions that get bundled with the major WordPress releases. Trying to find this historical information can be difficult.

After some research and discussion, Senior Backend Engineer, Sal Ferrarello, and Frontend Engineer, Mike England, started a compatibility matrix, which can be found on GitHub. But that didn’t answer all of the questions and solve all of the issues. The official Gutenberg Handbook itself is based on the latest Gutenberg code, which is ahead of the current version of WordPress. Sal opened an issue highlighting that the blocks API documentation is based off of the master branch of Gutenberg.

Block API Reference

Sadly, Sal’s documentation version issue wound up being closed citing:

We’re fixing bugs more than we’re introducing new APIs at this point.

But shortly after the version matrix was created and the version issue filed, a new page showed up in the block editor handbook highlighting the version information:

Versions in WordPress

Still, this “official” table can be a bit confusing. When you look at it, there is a range of Gutenberg versions included in a particular WordPress release:

This is because bug fixes are back-ported into the WordPress release bundle. If you’re using it for an API reference standpoint, always go with the smaller release number.

React Versions

There are several things to think about if you want to provide backwards compatibility to WordPress 5.0. One consideration is the React version included in WordPress.

If you want to create Functional Components instead of Class Components in your Gutenberg block, that requires React version 16.8. WordPress 5.2 is when React 16.8 was included. The easiest way I found to determine which versions of WordPress include which versions of React is to go to the source.

You can find the package.json for WordPress 5.2 here. This includes React 16.8.4. You can replace “5.2” with the version you’d like to investigate.

If you’ve written functional components for distribution in the WordPress.org plugin repository, don’t forget to add the “Requires at least” field to your plugin header:

/**
 * Plugin Name:       My Plugin
 * Requires at least: 5.2
 */

That way, people will not be able to upgrade/install your plugin automatically, unless they’re on WordPress 5.2 or newer.

Block Compatibility

My best advice is to tread lightly and go slowly. React and Gutenberg aren’t great at reporting where your errors are through the browser console. To start, I install the WP-Downgrade plugin so I can easily go back and forth between past and present versions.

If you’ve got something working, test it out and commit your changes. Then, test it for backwards compatibility. When you’re dealing with more than one compatibility error at a time, it’s difficult to hone in on what is going wrong. WordPress might not even load your Guten-block code if there are errors; and it also may not print a message in the console.

The most common issue I’ve encountered is with importing WordPress components. Sometimes things work by importing from a package. Sometimes they’ll only work by destructuring from the global wp object.

WordPress Gutenberg import versus Destructuring Global wp

You may have to experiment with both to see what works for maximum version compatibility.

Example: ServerSideRender

@wordpress/server-side-render

The documentation says once you include it in your package.json you can either import it:

import ServerSideRender from '@wordpress/server-side-render';

Or destructure it from the wp global:

const { serverSideRender: ServerSideRender } = wp;

But neither of those work in WordPress 5.0 (Gutenberg 4.6.1) because @wordpress/server-side-render wasn’t a package yet. It also isn’t at wp.serverSideRender at that time, it’s at wp.components.ServerSideRender.

If you want it to work in WordPress 5.0, you’ll need to destructure it from the wp global like this:

const { ServerSideRender } = wp.components;

In new versions of WordPress, you’ll get this warning message in the console:

wp.components.ServerSideRender is deprecated. Please use wp.serverSideRender instead.

The user may never see that, and it sure beats them seeing this in the editor:

Deprecation Hunting

Other popular components that have moved since WordPress 5.0 are BlockControls and InspectorControls. I’ve got them working in 5.0 with the following browser warnings:

wp.editor.BlockControls is deprecated. Please use wp.blockEditor.BlockControls instead.

wp.editor.InspectorControls is deprecated. Please use wp.blockEditor.InspectorControls instead.

But how did I find them? Going to the source is always best. Clone the Gutenberg project and check out the tag for the most recent version of WordPress:

git clone git@github.com:WordPress/gutenberg.git
cd gutenberg
git checkout v8.6.0

You can browse the tags on GitHub or list them with git tag. After checking out the tagged version, start looking for the component that’s not working. For InspectorControls I used grep to find it:

$ grep -r InspectorControls .
...
packages/editor/src/components/deprecated.js: 'InspectorControls'
...

There’s a lot of output when searching, but the path of the deprecated.js file gave me a clue: packages/editor. It used to be in wp.editor and is now in wp.blockEditor (which has the path packages/block-editor). Again, the documentation isn’t great, so you have to do some sleuthing and gather context clues.

Good luck out there, and always keep compatibility in mind!

The post WordPress Blocks Backwards Compatibility appeared first on WebDevStudios.

1. Easier Editing — Already available in WordPress, with ongoing improvements
2. Customization — Full-site editing (FSE), block patterns, block directory, block-based themes
3. Collaboration — A more intuitive way to co-author content
4. Multilingual — Core implementation for multilingual sites

Three years later, Gutenberg shipped in WordPress 5.0, Bebo, during WordCamp US (remember the outcry?); and ever since, Gutenberg development has been happening at a breakneck pace. If you don’t believe me, check out the special page they built to help folks keep up. A few weeks ago, we saw the release of WordPress 5.5, Eckstine, which is a release that puts the finishing touches on Phase 1, including easier editing and a state of stability.

WordPress 5.6, (led by an all-women release squad), will primarily focus on Phase 2—customization. Some of the release goals include rolling out beta Gutenberg customization features into core, such as widgets, menus, and the customizer, adding support for PHP8, and shipping a beta version of the FSE experience in December 2020.

WebDevStudios & Gutenberg Get Off to a Rocky Start

The Block Editor has come a very long way in the face of incredible adversity, and the crowning achievement is that it’s reached a sane level of speed and stability. Here at WebDevStudios (WDS), we respect and applaud the engineering efforts by a community of countless volunteers, as well as engineers from Automattic.

I say “sane” because in 2017 and 2018, we tried to build a library of Gutenberg blocks in anticipation of leveraging the new block editor on client projects… and trying to keep up with Gutenberg development was insane. In the early days, our very talented engineers were frustrated because with every new release, they had to add more and more code to each respective block’s deprecated.php.

The rapid development cycles in the early days of Phase 1 required our engineers to constantly figure out “the new way” of building the same block. This was especially hard because documentation was (and still often is) only found in the firehose of Make blog posts, or worse, hidden away in closed PR on Github.

The insanity went on for about a year, and it was like trying to plug holes on the Titanic. Plug one hole here, and two more appear over there, until finally the WDS Blocks project was fully vertical, and there was no stopping WDS Blocks from sinking to the bottom of the Atlantic.

Exasperated and shivering cold, we said goodbye to Rose Gutenberg and postponed the WDS Blocks project until further notice. Internally, we decided to leverage both the Classic Editor and Advanced Custom Fields (ACF) plugins for building websites until development on the Gutenberg project had reached a more stable state.

Advanced Custom Fields to the Rescue

Let me start by saying, Elliot Condon and his team at Advanced Custom Fields have done an incredible job at adapting to the pace of Gutenberg development. ACF has brought a ton of business value to our company and projects over the years because we can build complex websites in 12 weeks instead of 12 months.

Initially, our frontend engineers loved that they could get right to work building things. There was no need to wait for backend engineers to create dozens of custom fields and data relationships. Backend engineers loved that they were free from “themes stuff” so they could focus on API integrations, custom plugins, and data migrations. Sales loved that we could build complex things fast.

Our “block” workflow was based on the Flexible Content field experience baked into our starter theme, wd_s, and eventually we adopted ACF’s new Blocks feature. The ACF Blocks API is wonderfully simple, yet undeniably powerful… and many of us felt like this API should have been how Gutenberg blocks are registered with WordPress. For the last several years, we have been shipping websites using the Classic Editor and Advanced Custom Fields, and until recently, our clients and engineers have been very happy with the results.

Trouble on the Horizon

Development on Gutenberg continued to march on, as did JavaScript’s popularity. In 2019, I was having my regular one-on-ones with the engineers and more and more the word “JavaScript” was coming up. To summarize:

• Engineers were starting to tire of building traditional WordPress themes and needed some new puzzles to solve.
• The meteoric rises of React, as well as Gatsby and Next.js, were hard to ignore, and the buzz surrounding these technologies felt very much like the buzz around WordPress 10 years ago.
• Some Engineers who spent their off-hours pursuing careers in JavaScript, said their goodbyes and left to go work in that space.

These three events started to plant seeds of doubt. Engineers need new puzzles to solve, and building site-after-site with ACF, while fast and efficient, had begun to lose its luster. It was also hard to ignore all the cool things other engineers were building with Gatsby and Next.js and sharing on Twitter. Potential clients were starting to inquire about using WordPress as a headless CMS. Finally, seeing your friends leave to go work with these new and exciting technologies cannot be understated; the gravimetric pull is real and it is powerful.

It’s my job to worry about these things and find a balance between engineer happiness, business value, and client success. Should WDS shove our collective heads in the sand and hope all the changes on the horizon go away? Or make a major change in our approach to building websites?

Goal: Be The Best Damn Gutenberg Shop Out There

By the fall of 2019, our COO, Lisa Sabin-Wilson, and I had been working on upcoming engineering goals for 2020. One of them was to research what it might look like to become a Gutenberg-first WordPress agency by the end of 2020. After all, JavaScript was here, Gutenberg was approaching stability, and full-site editing was around the corner.

Here’s what I came up with:

1. Education—Level up the entire team with JavaScript, React, and Gutenberg training.
2. Tool-Chain—Replace ACF Blocks with either native or custom Gutenberg blocks. Move our ACF Block library out of wd_s and into a plugin. Rebuild wd_s from scratch with modern tech. Leverage Block Patterns.
3. Execution—Start building projects with our new education and tool-chain.

After a few weeks of discussions among leadership and coordination with the PMO department, I had a plan ready. By the end of January 2020, I announced Phase 1 of our plan to become, “The best damn Gutenberg shop out there.” The plan would happen in three phases:

Phase 1: Education (February 2020-August 2020)

The education phase would be split into three milestones:

Milestone 1: Training. Our engineers were to take JavaScript-focused continuing education courses from Tyler McGinnis, Wes Bos, and Zac Gordon during downtime.

Milestone 2: Build. After an engineer turned in course completion certificates, they had to put their knowledge to work by building a custom Gutenberg block and demo it.

Milestone 3: Contribute. When an engineer felt comfortable building custom blocks, they were asked to help with Phase 2 (below), blog about what they’ve learned, contribute to Gutenberg itself, or host demos and WDS Lunch & Learns.

I knew that sometime in the middle of 2020, Gutenberg’s Phase 2 would begin, so this gave the engineers about six months to train.

Phase 2: Tool-Chain (August 2020-October 2020)

Gutenberg-first means using native blocks. Building custom blocks in Gutenberg means a fundamental shift in not only how we sell a project, but how we engineer it. Instead of creating complex blocks in a matter of hours with ACF, we would now need several days or even weeks. With Phase 1 now complete, our engineers are armed with the knowledge necessary to pull off Phase 2.

I met with our Technical Strategist, Corey Collins, and did an audit of our library of ACF Blocks, and we realized that we could use core Gutenberg blocks to replicate most of them. We would only need to create two custom blocks: a Carousel block and an Accordion block.

We also talked about the WDS ACF Blocks library plugin he created back in March, and finally we met with our engineering team to discuss the pros and cons of our starter theme wd_s. Armed with this information and feedback, I put together a series of five two-week sprints.

Sprint 1: Both Darren Cooney, Lead Engineer, and Rebekah Van Epps, Senior Backend Engineer, volunteered to team up and work on building those two blocks. I would help by “blowing up” our WDS Blocks repo, so we could continue to develop those blocks publicly. The 2.0 milestone was created, and Darren and Rebekah finished up those blocks on September 4th and we shipped the 2.0.0 release today!

Sprint 2: This sprint has just started and involves extracting our library of ACF Blocks out of wd_s and into a plugin. Remember the business value I mentioned with ACF, when a client needs super-complex block functionality that would take weeks to build? We can install this plugin and leverage Advanced Custom Fields without destroying a client’s budget.

Sprint 3: This sprint means rebuilding wd_s from scratch. Our starter theme is used on every single project, and as a group, we decided that somewhere along the way, it had become a bit bloated. Engineers mentioned they spent a lot of time “tearing things down” before they could get started. The goal is to thin out wd_s and leverage third-party tech so we don’t have to maintain it. For example, use @wordpress/scripts instead of maintaining our own build scripts. Instead of trying to maintain our own library of utility classes, let’s use TailwindCSS.

We’ll also house Block Patterns in wd_s, which is an amazing feature that our clients have been asking about for years. Meanwhile, we’ll be keeping a very close eye on FSE and have already started to experiment with a block-based theme.

Sprint 4: Sprint 4 is all about QA/UAT and refinements. Before we start shipping client websites, let’s be absolutely sure they’re not going to break after the next release of WordPress or Gutenberg, which something other agencies in this space cannot claim!

Sprint 5: Finally, we get to documentation and training. We’re going to update our JavaScript coding standards, demo the tool-chain company-wide, update our process documentation—everything from the sales phase all the way through the support and maintenance phase.

Armed with the knowledge and experience gained through Phases 1 and 2, WDS will be ready to start building Gutenberg-first experiences for our clients that will be battle tested and stable.

Time Marches On

WDS was not the first to enter the Gutenberg space. That was a calculated decision not to build client websites on unstable software. It took some painful self-reflection and circumstances (like engineer happiness and client demands) for us to act. However, through pain comes growth.

These events are now woven into our storied history as a WordPress agency, which is on a quest to be… the best damn Gutenberg shop out there.

The post Gutenberg First appeared first on WebDevStudios.