{"id":21966,"date":"2020-06-16T12:00:38","date_gmt":"2020-06-16T16:00:38","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=21966"},"modified":"2024-04-15T11:57:26","modified_gmt":"2024-04-15T15:57:26","slug":"wordpress-block-development","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/","title":{"rendered":"WordPress Block Development Made Easy"},"content":{"rendered":"

WordPress block development can be daunting. It’s already intimidating enough that you need to know ReactJS, you also need to install and configure tools like webpack, Babel, and ESLint.<\/p>\n

Here at WebDevStudios, we like to build things; and we love to do so conveniently and efficiently. That’s why we built a scaffolding tool that sets up everything you need to focus on building your block! Meet @webdevstudios\/create-block.<\/strong><\/a><\/p>\n

Requirements<\/h3>\n

You need to have the latest Node and NPM installed. I highly recommend that you use NVM<\/a> to easily manage and switch between Node versions.<\/p>\n

Getting started<\/h3>\n

\"\"<\/p>\n

Navigate to wp-content\/plugins<\/code> and run the command below. Grab yourself a cup of coffee or tea while waiting for the scaffolding process to finish.<\/p>\n

$ cd wp-content\/plugins
\n$ npm init @webdevstudios\/block [Namespace]\/[BlockName]<\/p><\/blockquote>\n

Where [Namespace]<\/code> and [BlockName]<\/code> can be anything you want.<\/p>\n

What’s inside?<\/h3>\n

Immediately, you can see the scaffolded plugin in your dashboard.<\/p>\n

\"\"<\/p>\n

The scaffolded plugin also has a demo block created for you.<\/p>\n

\"\"<\/p>\n

Inside the plugin files<\/h3>\n

\"\"<\/p>\n

I won’t go into details on each of the files and directories but to give you a general idea:<\/p>\n

build\/<\/code> is where the\u00a0compiled\u00a0<\/em><\/strong>assets are located. The JS and CSS files here are the ones enqueued (loaded) in your WordPress. Build\/compiled files are auto-generated and shouldn’t be edited directly.<\/p>\n

node_modules\/<\/code> is where the npm packages are installed.<\/p>\n

src\/<\/code> is where you’ll create all your files.<\/p>\n

vendor\/<\/code> is where the composer packages are installed.<\/p>\n

todo-block.php<\/code> is the main plugin file.<\/p>\n

If you are not familiar with composer.json<\/code>, package.json<\/code>, webpack.config.js<\/code>, and the other files, it’s alright. That’s the beauty of our scaffolding tool. All of these are pre-configured, and you don’t need to touch these files, unless necessary.<\/p>\n

Inside src\/<\/code> is the block\/<\/code> directory. This is where we will create our block(s). Inside block\/<\/code> you’ll see rich-text\/<\/code>, which is the demo block.<\/p>\n

Inside src\/block\/rich-text<\/code> are the following files:<\/p>\n

edit.js<\/code> describes the structure of your block in the context of the editor. This represents what the editor will render when the block is used. Read more here<\/a>.<\/p>\n

editor.scss<\/code> are the styles rendered in the editor. If you are not familiar with `.scss`, you can still treat it as CSS. `.scss` is CSS in steroids, hence the additional `s`. Kidding aside, it’s Sass<\/a>. I highly recommend that you start using it.<\/p>\n

index.js<\/code> is where your block is registered using `registerBlockType()`. Read here for more info<\/a>.<\/p>\n

save.js<\/code> defines the way in which the different attributes should be combined into the final markup, which is then serialized into post_content<\/em>. For most blocks, this is how the block appears in the frontend. Read more here<\/a>.<\/p>\n

style.scss<\/code> are styles rendered in both<\/em><\/strong> editor and the frontend.<\/p>\n

Included commands<\/h3>\n

npm start<\/code> – Make sure that you are running this command during development. Doing so will automatically build\/compile your assets as you develop.<\/p>\n

npm run build<\/code> – Build your files.<\/p>\n

npm run lint:css<\/code> – Run linting to your stylesheets.<\/p>\n

npm run lint:js<\/code> – Run linting to your JS files.<\/p>\n

npm run lint:php<\/code> – Run linting to your PHP files.<\/p>\n

Our scaffolding tool uses our WDS Block Starter<\/a>. If you have any questions, find any bugs, or want to contribute to our scaffolding too, feel free to go over to the GitHub repository<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

WordPress block development can be daunting. It’s already intimidating enough that you need to know ReactJS, you also need to install and configure tools like webpack, Babel, and ESLint. Here at WebDevStudios, we like to build things; and we love to do so conveniently and efficiently. That’s why we built a scaffolding tool that sets Read More WordPress Block Development Made Easy<\/span><\/a><\/p>\n","protected":false},"author":116,"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,954,142,159],"tags":[12745,12744],"coauthors":[10749],"class_list":["post-21966","post","type-post","status-publish","format-standard","hentry","category-development","category-javascript","category-wordpress","category-workflow-tools","tag-scaffolding","tag-wordpress-block"],"acf":{"blog_hero_image":{"ID":22426,"id":22426,"title":"wordpress block development","filename":"wordpress-block-development.jpg","filesize":347247,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","link":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/wordpress-block-development\/","alt":"","author":"6","description":"","caption":"","name":"wordpress-block-development","status":"inherit","uploaded_to":21966,"date":"2020-06-15 15:50:10","modified":"2020-06-15 15:50:10","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/webdevstudios.com\/wp-includes\/images\/media\/default.png","width":1920,"height":720,"sizes":{"thumbnail":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-150x150.jpg","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-300x113.jpg","medium-width":300,"medium-height":113,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-768x288.jpg","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1024x384.jpg","large-width":850,"large-height":319,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1536x576.jpg","1536x1536-width":1536,"1536x1536-height":576,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","2048x2048-width":1920,"2048x2048-height":720,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-436x511.jpg","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-436x241.jpg","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-235x300.jpg","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1350x440.jpg","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-590x720.jpg","services-screenshot-width":590,"services-screenshot-height":720,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1920x625.jpg","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-850x360.jpg","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-420x420.jpg","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-160x60.jpg","logo-train-width":160,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1920x191.jpg","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","full-width-width":1920,"full-width-height":720,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development-1300x488.jpg","fifty-fifty-media-width":1300,"fifty-fifty-media-height":488,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":113,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","gform-image-choice-md-width":400,"gform-image-choice-md-height":150,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/wordpress-block-development.jpg","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":225}}},"yoast_head":"\nWordPress Block Development Made Easy - WebDevStudios<\/title>\n<meta name=\"description\" content=\"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.\" \/>\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\/2020\/06\/16\/wordpress-block-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WordPress Block Development Made Easy\" \/>\n<meta property=\"og:description\" content=\"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/\" \/>\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=\"2020-06-16T16:00:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T15:57:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/06\/Maintainn-Blog-Social-Template-2020-06-15T094628.809.png\" \/>\n\t<meta property=\"og:image:width\" content=\"560\" \/>\n\t<meta property=\"og:image:height\" content=\"315\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Michael Joseph Panaga\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.\" \/>\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=\"Michael Joseph Panaga\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/\"},\"author\":{\"name\":\"Michael Joseph Panaga\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/483cb3b481eba973ace1c5108b454aca\"},\"headline\":\"WordPress Block Development Made Easy\",\"datePublished\":\"2020-06-16T16:00:38+00:00\",\"dateModified\":\"2024-04-15T15:57:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/\"},\"wordCount\":523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/example-command.gif\",\"keywords\":[\"scaffolding\",\"WordPress block\"],\"articleSection\":[\"Development\",\"JavaScript\",\"WordPress\",\"Workflow & Tools\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/\",\"name\":\"WordPress Block Development Made Easy - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/example-command.gif\",\"datePublished\":\"2020-06-16T16:00:38+00:00\",\"dateModified\":\"2024-04-15T15:57:26+00:00\",\"description\":\"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/example-command.gif\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2020\\\/03\\\/example-command.gif\",\"width\":3136,\"height\":562},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2020\\\/06\\\/16\\\/wordpress-block-development\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WordPress Block Development Made Easy\"}]},{\"@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\\\/483cb3b481eba973ace1c5108b454aca\",\"name\":\"Michael Joseph Panaga\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g091fd7d41e99ebf07ef4b35fcee6d770\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g\",\"caption\":\"Michael Joseph Panaga\"},\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/michael-panagawebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WordPress Block Development Made Easy - WebDevStudios","description":"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.","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\/2020\/06\/16\/wordpress-block-development\/","og_locale":"en_US","og_type":"article","og_title":"WordPress Block Development Made Easy","og_description":"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.","og_url":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2020-06-16T16:00:38+00:00","article_modified_time":"2024-04-15T15:57:26+00:00","og_image":[{"width":560,"height":315,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/06\/Maintainn-Blog-Social-Template-2020-06-15T094628.809.png","type":"image\/png"}],"author":"Michael Joseph Panaga","twitter_card":"summary_large_image","twitter_description":"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Michael Joseph Panaga","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/"},"author":{"name":"Michael Joseph Panaga","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/483cb3b481eba973ace1c5108b454aca"},"headline":"WordPress Block Development Made Easy","datePublished":"2020-06-16T16:00:38+00:00","dateModified":"2024-04-15T15:57:26+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/"},"wordCount":523,"commentCount":0,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/example-command.gif","keywords":["scaffolding","WordPress block"],"articleSection":["Development","JavaScript","WordPress","Workflow & Tools"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/","url":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/","name":"WordPress Block Development Made Easy - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/example-command.gif","datePublished":"2020-06-16T16:00:38+00:00","dateModified":"2024-04-15T15:57:26+00:00","description":"WordPress block development can be daunting. Read this blog post for a step-by-step guide on using this scaffolding tool to help.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/example-command.gif","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2020\/03\/example-command.gif","width":3136,"height":562},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2020\/06\/16\/wordpress-block-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"WordPress Block Development Made Easy"}]},{"@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\/483cb3b481eba973ace1c5108b454aca","name":"Michael Joseph Panaga","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g091fd7d41e99ebf07ef4b35fcee6d770","url":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3c73011c5045dbefd69a2866a0afa013af2d7d4bc3bdbd1d90ffa41912b568f2?s=96&d=mm&r=g","caption":"Michael Joseph Panaga"},"url":"https:\/\/webdevstudios.com\/author\/michael-panagawebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-5Ii","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/21966","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\/116"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=21966"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/21966\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=21966"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=21966"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=21966"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=21966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}