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.

This functionality existed on the custom taxonomy recipe collection archive pages where editors could add individual recipes to the collection sections and drag and drop the recipes in the order they wanted them to appear. However, they were not able to add the same functionality to a page (in the WordPress sense).

We needed to give editors the ability to add a recipe collection section to a regular page. Adapting the existing functionality into a custom Gutenberg block gave our client the ability to create the pages they needed for their upcoming campaign.

Block Functionality Needs

On the campaign page our client was creating, they wanted to showcase a collection of recipes in any order they wanted. They wanted a Load More button in case there was more than one row of recipes. The user could choose to see them or not.

Our client also wanted a button that linked to the recipe collection term archive page. Since the functionality existed in another part of the site, I looked at how it was built to inform how to create the new Gutenberg block.

Custom Recipe Collection Block

Enter the custom recipe collection block. Creating a custom Gutenberg block meant our client could add the recipe collection section to any page, post, or custom post type, on any part of the site.

In the admin, editors are able to set the block’s title and description and use a dropdown to select their desired recipe collection term. When the recipe collection term is selected, the block title and description automatically populate with the term name and description. Both the block title and description can be manually overridden if the editor chooses.

Once the recipe collection is chosen, recipes are individually selected and added to the block. When recipes are added manually, only those recipes are displayed in this custom Gutenberg block.

The recipes may be dragged and dropped into the order they should appear. The order in which the recipes are arranged is the order in which they display in the collection block.

If no recipes are selected, then all recipes from the collection are listed and sorted by rating. The block also allows the user to toggle between displaying a button that links to the recipe collection archive.

Need a Custom Gutenberg Block on Your Website?

While this particular solution was developed for a CPG client, any company in any industry benefits from the specialized functions of a custom Gutenberg block. When you find yourself in need of one on your site, contact WebDevStudios.

The post We Built a Custom Gutenberg Block for a CPG Client appeared first on WebDevStudios.

This blog post covers the easy way to add admin notices when a post gets added or updated, focusing mainly on the Gutenberg notices.

Let’s start with this working example and customize it to your needs.

Hook into save action.

Here we are using the publish_post action to add our callback after every time a post gets saved. Add a did_action check to make sure this callback executes on the first time and doesn’t repeat.

Other plugins or customizations may also use this action hook, so it is recommended to perform this did_action check.

View the code on Gist.

Set the message on the callback.

Here is an example of a typical editorial workflow:

• Author submits a blog post
• Saved as Draft
• Editor approves and publishes

The background action is sending email notifications to the author when the post gets published. Let your callback process the data and return the message you want to show in the notice. To keep this data easily accessible, we are using post meta.

View the code on Gist.

Create a custom endpoint.

Register an endpoint using register_rest_route. We will be using the namespace and route during the AJAX call.

View the code on Gist.

AJAX call

Now that we have an error message on meta, we have to fetch it via an AJAX request. To keep this simple, the admin script is added directly along with the PHP code. You can make it a separate file and enqueue it.

We need ‘subscribe’ and ‘select’ from WP data module.

const { subscribe,select } = wp.data;

Subscribe allows you to listen to changes in the state. By subscribing to isSavingPost(), you can call the AJAX request.

We are sending the post ID to the custom REST endpoint and displaying the message via createNotice.

View the code on Gist.

Get the error and render it.

Now we have the error, custom endpoint, and the AJAX callback. Retrieve the message from post_meta and send it to the response.

View the code on Gist.

Here is the plugin with the complete code in the repo. I hope you find this quick tip useful. Follow our blog for more WordPress tutorials.

The post Adding Custom Notices for the Gutenberg Editor 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.

When WordPress saves Gutenberg blocks to the database, it smashes them together as a string of markup. When you query that via the REST-API or WPGraphQL? You get this big ugly blob of HTML:

The screenshot above isn’t that bad, but what happens when you have a 2,000 word blog post with images, block quotes and Twitter embeds? When working on a headless frontend, how are you going to create a layout to match your client’s design, when you’re stuck with a big string of HTML?

Maybe reach for regular expressions to pluck out the data? Try using CSS to drill down and style HTML tags? You could totally YOLO that blob of HTML right into a component with dangerouslySetInnerHTML…

…but the reality is, losing control over the decision making process for handling data makes for a poor developer experience.

There’s already a standard way to work with APIs that have structured data. To quote the MDN:

JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax. It is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).

After reading that definition, you might be asking, “If JSON is a standard way to transmit structured data, why isn’t WordPress doing this with Gutenberg blocks?”

That’s the million dollar question.

WPGraphQL Gutenberg to the Rescue

You’re in luck because the WPGraphQL Gutenberg plugin from Peter Pristas converts Gutenberg blocks to JSON!

Using WPGraphQL, you can query for blocksJSON on a page or post and receive a big ugly blob of JSON instead!

Thanks to both the JSON.parse() and .map() methods, you can convert the JSON response from WPGraphQL into an array of objects, and then .map() over it (kind of like the WordPress Loop). This is standard practice when working with JSON in JavaScript.

The following code snippet parses the JSON response, starts a loop, plucks out the ‘core/paragraph’ block, then passes in the data as props:

Thanks to the structure JSON provides, you now have full control over content coming from Gutenberg. Now that’s a good developer experience!

The post Quick Tip: Gutenberg Blocks as JSON appeared first on WebDevStudios.

Yes, we are full of puns at WDS, but we’re also full of passion for open-source technology, as we dedicate our entire workday to contributing to the WordPress core and community. And, it’s being noticed! Popular WordPress publication, “WP Tavern,” recently featured two projects developed by WDS team members during 5FTF.

First, Support Engineer, Michael Beckwith, has dedicated some of his 5FTF time to developing Blogroll Block, a super-cool plugin that harkens back to the days of the camaraderie that once existed among independent bloggers. Then, Lead Engineer, Darren Cooney, garnered attention for his plugin, Gutenberg Block Manager, a nifty tool that allows for fine-grained block management.

Many other of WDS’ Five for the Future contributions do not acquire such fame, but that’s not why we do what we do anyway. At WebDevStudios, our mission is your success. That means the success of our clients, our staff, and of the world of WordPress. That’s why we commit the last Friday of every month to 5FTF. Nonetheless, we enjoy sharing what we’re up to! See a sample of last month’s contributions below. Keep up with our 5FTF Friday in realtime by following the hashtag #5FTF and our profile on Twitter. See ya tomorrow.

Its one of my favorite day again. #5ftf @webdevstudios Ill be working on our https://t.co/hDge8AD0hI. Its amazing to see how much we can do with #WordPress

— Michael Joseph Panaga (@_micmico) February 26, 2021

For today’s #5FTF @webdevstudios I’m trying to finish up a @daringfireball-style linked list block. Hoping to ship to @_smolblog later today…

— Evan Hildreth (@oddevan) February 26, 2021

It's #5ftf time again at @webdevstudios! Today I'll be working on improving wd_s, our #WordPress starter theme.

— Amor Kumar (@itsAmorEh) February 26, 2021

This #5ftf @webdevstudios I'm dusting off my coding skills and starting on a free theme for WordPress.

— Jennifer Cooley (@Jhynnifer) February 26, 2021

Specials thanks to @webdevstudios for sponsoring todays #5ftf allowing us to get back to the community that gives so much to us.

— Scott Anderson (@thriftydev) February 26, 2021

Today for #5FTF @webdevstudios, I worked with @salcode and @martinjdolan to venture deeper into React testing. It's been a blast and now we all need some lunch to absorb what we've learned.

— Mike England (@mikelikethebike) February 26, 2021

Today is for #5FTF @webdevstudios@MrAsharIrfan and I are working on WP Search with Algolia, in preparation for an upcoming release.https://t.co/yv0h3Ta8dy

— Richard Ⓐber (@richaber) February 26, 2021

#5FTF lunch #selfie @webdevstudios done with my talk questionnaire and will now be working on my #WordPress animated menu plugin. pic.twitter.com/xor8cCQd0U

— JC Palmes (@jpalmes) February 26, 2021

Drat, but awesome all at once. I was going to contribute some #5FTF time today to fixing up what this WordPress trac issue already handled https://t.co/ZIEfcJhSOz

— Captain Macho Pirate Mick Rackam (@tw2113) February 26, 2021

Working on WP-Strava today for #5ftf Getting it listed as a block-supported plugin https://t.co/qpegA4STPO as well as adding a user requested feature Big Thanks to @webdevstudios for the time today!

— Justin Fœll (@justinfoell) February 26, 2021

And, as of late, requirement for writing tests has started on paper (for this #5ftf) pic.twitter.com/wCaxoH0dKV

— Tom McFarlin (@tommcfarlin) February 26, 2021

Thanks to #5ftf @webdevstudios I was able to update my Chillhop Radio app to 2.0.0! The app is a total overhaul to stream the live Youtube stream and includes a new icon!https://t.co/QzN774FWwn pic.twitter.com/GSOrdil0BE

— Aubrey Portwood (@aubreypwd) February 26, 2021

Enjoying another awesome #5ftf @webdevstudios. On a testing/pair-programming adventure with @salcode and @mikelikethebike and it has been a blast! pic.twitter.com/c1T0UfN8fj

— Marty O’Connor (@martinjdolan) February 26, 2021

Big thanks to @webdevstudios for the #5ftf time today. I spent my time adding the next/image component into our Next.js WordPress Starter!#nextjs #WordPress https://t.co/3AcS5nK51H

— Greg Rickaby (@GregRickaby) February 26, 2021

Spent my #5ftf day @webdevstudios adding a block category switcher to the Block Manager plugin. https://t.co/ZRCAJdi0CK

— Darren Cooney (@KaptonKaos) February 26, 2021

On my favorite day of the month #5ftf, today I start to look around the Full Site Editing in #WordPress, create a theme, also add wp scripts, Thank you @webdevstudios the time to do it.
Here is my WIP repo: https://t.co/7Rh7JXPrpy if you want to play around.

— Alfredo Navas (@3LPU4S) February 26, 2021

Thank you to @webdevstudios for the time today to contribute resources to the community. With the help of @martinjdolan and @mikelikethebike, I'm starting to understand ReactJS tests and created this repo with examples https://t.co/HORPqe1ceW #5ftf

— Sal Ferrarello (@salcode) February 26, 2021

Grateful for another #5ftf day @webdevstudios / @maintainn so I can catch up on some things for the Contributor Working Group and Learn WordPress #WPContributors

— Christina Workman – WP Contributor (@AmethystAnswers) February 26, 2021

The post Marching Our Way to Five for the Future appeared first on WebDevStudios.

1. Speed Up Your Development with Visual Studio Code

WDS Frontend Engineer, Oliver Harrison, reports that nearly 51% of developers claim to use Visual Studio Code as their primary  development environment. In this article, he offers some pieces of advice aimed to surprise you with a new keyboard shortcut or an extension you hadn’t heard about. Read his blog post to learn more.

2. Building the Next.js 9.4 WordPress Example

At the beginning of 2020, Greg Rickaby, Director of Engineering, set out to make WDS the “best damn Gutenberg shop out there” by rolling out a company-wide React and Gutenberg training program. It soon paid off when a client project came in that required Headless WordPress with a Next.js frontend. He writes about his experience here.

3. WordPress Block Development Made Easy

“WordPress block development can be daunting,” writes Backend Engineer, Michael Panaga, as he introduces the world to WDS’ scaffolding tool @webdevstudios/create-block, which makes block development easier. You’ll have to read his blog post to find out how.

4. How to Build Design Systems for WordPress

It’s another blog post written by Oliver! In this piece, Oliver covers the basics of a design system and touches on design systems specifically for WordPress. Read it here.

5. How to Enable Frontend Editing with Gutenberg Blocks (Part 1)

Senior Backend Engineer, Rebekah Van Epps, removes the mystery from frontend editing with Gutenberg in her two-part series. While Part 1 proved to be more popular, we highly recommend reading both for a thorough education. Read Part 1 here, and Part 2 here.

The WebDevStudios blog wouldn’t be the body of WordPress information that it is without the contributions of our team. Looking for a sure-fire way to make your corporate blog robust and engaging? Read this article on insourcing content.

The post Top Blog Posts from 2020 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.