{"id":25369,"date":"2022-09-22T12:00:40","date_gmt":"2022-09-22T16:00:40","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=25369"},"modified":"2024-04-15T11:54:50","modified_gmt":"2024-04-15T15:54:50","slug":"optimizing-wordpress-block-editor","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/","title":{"rendered":"Optimizing the WordPress Block Editor Experience"},"content":{"rendered":"

Our website agency is currently working on a Headless WordPress<\/a> Multisite project using Next.js<\/a>. Development is almost completed for this WebDevStudios client.<\/p>\n

However, as we\u2019ve 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.<\/p>\n

Background<\/h2>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Instructional Text<\/h2>\n

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.).<\/p>\n

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

\"This<\/p>\n

Tabs in Blocks<\/h2>\n

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.<\/p>\n

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\u2019s name, logo, and link.<\/p>\n

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?<\/p>\n

\"This<\/p>\n

Leveraging the power of tabs keeps the user interface and experience better, which allows for optimizing the Block Editor experience for the editor.<\/p>\n

Dropdowns<\/h2>\n

To decrease the chance of human error, we identified places where a dropdown select menu should be used instead of a text field.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

Readonly Fields<\/h2>\n

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\u2019t require any manual editing. The user can view the field values and confirm that content has been entered, but cannot change them.<\/p>\n

Frontend Previews<\/h2>\n

ACF blocks are great for creating complex blocks quickly, but the editor loses the Gutenberg experience of seeing a styled block as they\u2019re building a page. Additionally, since we\u2019re using ACF blocks in a Headless WordPress website, an editor can\u2019t see a preview of the page and blocks they\u2019re editing in the Gutenberg editor.<\/p>\n

That’s because the website doesn\u2019t use a standard WordPress theme. Plus, the CSS, Javascript, and PHP aren\u2019t pulled into the preview.<\/p>\n

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 \u201cSwitch to Preview\u201d button is toggled when editing the site. This lets editors preview the block with the content they\u2019ve entered before saving the page.<\/p>\n

\n
https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/Screen-Recording-2022-08-26-at-4.42.27-PM.mp4<\/a><\/video><\/div>\n<\/div>\n

Conclusion<\/h2>\n

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\u2019t enter content correctly, it doesn\u2019t matter what a website looks like or how it functions.<\/p>\n

This brings us to the end of learning the ins and outs of optimizing the WordPress Block Editor experience.\u00a0We\u2019d love to know the steps you take to improve the editing experience for your WordPress websites. Please tell us in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"

Our website agency is currently working on a Headless WordPress Multisite project using Next.js. Development is almost completed for this WebDevStudios client. However, as we\u2019ve 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 Read More Optimizing the WordPress Block Editor Experience<\/span><\/a><\/p>\n","protected":false},"author":143,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"footnotes":""},"categories":[140,13208,13213,142,224],"tags":[8362,13174,334,5037],"coauthors":[13290,13262,13331],"class_list":["post-25369","post","type-post","status-publish","format-standard","hentry","category-development","category-headless-cms","category-next-js","category-wordpress","category-wordpress-multisite","tag-advanced-custom-fields","tag-block-editor","tag-custom-post-types","tag-gutenberg"],"acf":{"blog_hero_image":{"ID":25465,"id":25465,"title":"WDS 8 Blog Featured Image (17)","filename":"WDS-8-Blog-Featured-Image-17.png","filesize":2158279,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","link":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/wds-8-blog-featured-image-17-2\/","alt":"","author":"6","description":"","caption":"","name":"wds-8-blog-featured-image-17-2","status":"inherit","uploaded_to":25369,"date":"2022-09-21 23:03:02","modified":"2022-09-21 23:03:02","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":1920,"height":720,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-300x113.png","medium-width":300,"medium-height":113,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-768x288.png","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1024x384.png","large-width":850,"large-height":319,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1536x576.png","1536x1536-width":1536,"1536x1536-height":576,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","2048x2048-width":1920,"2048x2048-height":720,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-436x511.png","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-436x241.png","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-235x300.png","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1350x440.png","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-590x720.png","services-screenshot-width":590,"services-screenshot-height":720,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1920x625.png","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-850x360.png","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-420x420.png","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-160x60.png","logo-train-width":160,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1920x191.png","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","full-width-width":1920,"full-width-height":720,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17-1300x488.png","fifty-fifty-media-width":1300,"fifty-fifty-media-height":488,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":113,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":150,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/WDS-8-Blog-Featured-Image-17.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":225}}},"yoast_head":"\nOptimizing the WordPress Block Editor Experience - WebDevStudios<\/title>\n<meta name=\"description\" content=\"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing the WordPress Block Editor Experience\" \/>\n<meta property=\"og:description\" content=\"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"WebDevStudios\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/webdevstudios\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-22T16:00:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T15:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/Copy-of-Blog-Post-Template-30.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Lindsey Bell, Lax Mariappan, Ximena Kilroe\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:site\" content=\"@webdevstudios\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Lindsey Bell, Lax Mariappan, Ximena Kilroe\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/\"},\"author\":{\"name\":\"Lindsey Bell\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/e8453104a8cedc667dbb0d5f1ef27e1d\"},\"headline\":\"Optimizing the WordPress Block Editor Experience\",\"datePublished\":\"2022-09-22T16:00:40+00:00\",\"dateModified\":\"2024-04-15T15:54:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/\"},\"wordCount\":920,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/instructionaltext.png\",\"keywords\":[\"Advanced Custom Fields\",\"Block Editor\",\"custom post-types\",\"Gutenberg\"],\"articleSection\":[\"Development\",\"Headless CMS\",\"Next.js\",\"WordPress\",\"WordPress Multisite\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/\",\"name\":\"Optimizing the WordPress Block Editor Experience - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/instructionaltext.png\",\"datePublished\":\"2022-09-22T16:00:40+00:00\",\"dateModified\":\"2024-04-15T15:54:50+00:00\",\"description\":\"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/instructionaltext.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/instructionaltext.png\",\"width\":986,\"height\":705},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2022\\\/09\\\/22\\\/optimizing-wordpress-block-editor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Optimizing the WordPress Block Editor Experience\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"name\":\"WebDevStudios\",\"description\":\"WordPress Design and Development Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/webdevstudios.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\",\"name\":\"WebDevStudios\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2019\\\/07\\\/wds-amp-logo.png\",\"width\":173,\"height\":60,\"caption\":\"WebDevStudios\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/webdevstudios\",\"https:\\\/\\\/x.com\\\/webdevstudios\",\"http:\\\/\\\/instagram.com\\\/webdevstudios\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/webdevstudios-llc-\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/e8453104a8cedc667dbb0d5f1ef27e1d\",\"name\":\"Lindsey Bell\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=gd193b12b628dc6a1f816651df135b922\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=g\",\"caption\":\"Lindsey Bell\"},\"description\":\"Lindsey is a Lead Engineer at WebDevStudios. Her role is to develop static designs into accessible and easy-to-use websites. Lindsey has been developing websites for many years; previously, for a small design firm in Philadelphia. She taught herself HTML and CSS using Geocities in the early 2000s and later went to the Art Institute of Philadelphia to study formally. She lives in South Philadelphia with her wife, their two dogs, cat, and bird. She enjoys cooking and trying new restaurants, UConn basketball, flying her drone, and traveling.\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/lindsey-bellwebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimizing the WordPress Block Editor Experience - WebDevStudios","description":"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/","og_locale":"en_US","og_type":"article","og_title":"Optimizing the WordPress Block Editor Experience","og_description":"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.","og_url":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2022-09-22T16:00:40+00:00","article_modified_time":"2024-04-15T15:54:50+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/09\/Copy-of-Blog-Post-Template-30.png","type":"image\/png"}],"author":"Lindsey Bell, Lax Mariappan, Ximena Kilroe","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Lindsey Bell, Lax Mariappan, Ximena Kilroe","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/"},"author":{"name":"Lindsey Bell","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/e8453104a8cedc667dbb0d5f1ef27e1d"},"headline":"Optimizing the WordPress Block Editor Experience","datePublished":"2022-09-22T16:00:40+00:00","dateModified":"2024-04-15T15:54:50+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/"},"wordCount":920,"commentCount":0,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/instructionaltext.png","keywords":["Advanced Custom Fields","Block Editor","custom post-types","Gutenberg"],"articleSection":["Development","Headless CMS","Next.js","WordPress","WordPress Multisite"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/","url":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/","name":"Optimizing the WordPress Block Editor Experience - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/instructionaltext.png","datePublished":"2022-09-22T16:00:40+00:00","dateModified":"2024-04-15T15:54:50+00:00","description":"Don't discount the importance of the editor user experience. Read this article to learn how optimizing the WordPress Block Editor helps.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/instructionaltext.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/08\/instructionaltext.png","width":986,"height":705},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2022\/09\/22\/optimizing-wordpress-block-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Optimizing the WordPress Block Editor Experience"}]},{"@type":"WebSite","@id":"https:\/\/webdevstudios.com\/#website","url":"https:\/\/webdevstudios.com\/","name":"WebDevStudios","description":"WordPress Design and Development Agency","publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webdevstudios.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webdevstudios.com\/#organization","name":"WebDevStudios","url":"https:\/\/webdevstudios.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2019\/07\/wds-amp-logo.png","width":173,"height":60,"caption":"WebDevStudios"},"image":{"@id":"https:\/\/webdevstudios.com\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/webdevstudios","https:\/\/x.com\/webdevstudios","http:\/\/instagram.com\/webdevstudios","https:\/\/www.linkedin.com\/company\/webdevstudios-llc-\/"]},{"@type":"Person","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/e8453104a8cedc667dbb0d5f1ef27e1d","name":"Lindsey Bell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=gd193b12b628dc6a1f816651df135b922","url":"https:\/\/secure.gravatar.com\/avatar\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/868938f9683cd794e19a1b8f5d7e3c1dd29b8508b043813dd2f87813b0ae8856?s=96&d=mm&r=g","caption":"Lindsey Bell"},"description":"Lindsey is a Lead Engineer at WebDevStudios. Her role is to develop static designs into accessible and easy-to-use websites. Lindsey has been developing websites for many years; previously, for a small design firm in Philadelphia. She taught herself HTML and CSS using Geocities in the early 2000s and later went to the Art Institute of Philadelphia to study formally. She lives in South Philadelphia with her wife, their two dogs, cat, and bird. She enjoys cooking and trying new restaurants, UConn basketball, flying her drone, and traveling.","url":"https:\/\/webdevstudios.com\/author\/lindsey-bellwebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-6Bb","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/users\/143"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=25369"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25369\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=25369"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=25369"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=25369"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=25369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}