{"id":101115,"date":"2019-03-28T02:38:53","date_gmt":"2019-03-28T02:38:53","guid":{"rendered":"https:\/\/jsforwp.dbemyj3z-liquidwebsites.com\/?p=101115"},"modified":"2019-03-31T05:13:52","modified_gmt":"2019-03-31T05:13:52","slug":"extending-wordpress-blocks","status":"publish","type":"post","link":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/","title":{"rendered":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks &#8211; Tutorial with Video"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">One of the cool features that WordPress offers developers is the ability to hook into types of blocks and modify them with filters.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"405\" src=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min.png\" alt=\"\" class=\"wp-image-101174\" srcset=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min.png 720w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min-300x169.png 300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min-400x225.png 400w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min-450x253.png 450w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min-600x338.png 600w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-28-at-12.20.47-AM-min-100x56.png 100w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Block Filters are a set of JavaScript and PHP hooks in WordPress we can use to modify existing block properties.<\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">This is possible due to a JavaScript hooks system included with WordPress that includes block filters along with several other types of filters available via JavaScript.  In this tutorial we will look at how to work with these filters to modify blocks with both JavaScript and PHP.<\/p>\n\n\n\n<p class=\"wp-block-coblocks-highlight\"><mark class=\"wp-block-coblocks-highlight__content\">This tutorial is an excerpt from my <a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Development Course<\/a> that goes in depth into how to extend blocks with JS Filters. <\/mark><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Watch the Video<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Like to watch videos?  Read no further \ud83d\ude42<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Extending Core WordPress Blocks - Gutenberg Course\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/6sL6J34SUlk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><figcaption>Free video explaining most of this article<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">You can also find <a href=\"https:\/\/github.com\/zgordon\/advanced-gutenberg-course\/tree\/master\/filters\">a repo with some filter examples from the course<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Extend Blocks with wp.hooks.addFilter()<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The primary JavaScript function we use to hook into blocks for extending them is wp.hooks.addFilter.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>addFilter() comes from the <a href=\"https:\/\/www.npmjs.com\/package\/@wordpress\/hooks\">WordPress Hooks library<\/a> that is very similar to the PHP Hooks library in WordPress. <\/p><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">You can checkout the talk below from one of the library creators, Adam Silverstein, if you want to learn more about the Hooks library and what it can do.<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"JavaScript Hooks in WordPress - Adam Silverstein - JavaScript for WordPress Conference 2018\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/uqoGG9l2BBs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Make wp-hooks a Dependency When Registering Your JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To use <code class=\"\" data-line=\"\">addFilter()<\/code>, make sure that you have <code class=\"\" data-line=\"\">wp-hooks<\/code> as a dependency when you register your JavaScript.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; gutter: true; highlight: [5]; title: ; notranslate\" title=\"\">\n\/\/ Register the bundled block JS file\nwp_register_script(\n  &#039;jsforwp-adv-gb-editor-js&#039;,\n  _get_plugin_url() . $editor_js_path,\n  &#x5B;&#039;wp-element&#039;, &#039;wp-i18n&#039;, &#039;wp-editor&#039;, &#039;wp-hooks&#039;],\n  filemtime( _get_plugin_directory() . $editor_js_path ),\n  true\n);\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">Calling addFilter() in Our JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Then, in our JavaScript, we can call <code class=\"\" data-line=\"\">addFilter()<\/code> like this:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; auto-links: false; gutter: true; title: ; notranslate\" title=\"\">\nconst { addFilter } = wp.hooks;\n\naddFilter(\n  &quot;filter.toHookInto&quot;,\n  &quot;custom\/filter-name&quot;,\n  customFilterFunction\n);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Notice that <code class=\"\" data-line=\"\">addFilter<\/code> comes with three parameters:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>The filter to hook into<\/li><li>A unique name for our specific filter<\/li><li>A custom callback function that does the filtering<\/li><\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Below is what a real world example of what <code class=\"\" data-line=\"\">addFilter()<\/code> would look like.  This particular example hooks into the registerBlockType filter:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nconst { addFilter } = wp.hooks;\n\naddFilter(\n  &quot;blocks.registerBlockType&quot;,\n  &quot;jsforwpadvgb\/extend-p-block&quot;,\n  extendParagraphBlock\n);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Our custom callback function will look different depending on what filter we are hooking into, but here is what a callback function would look like that modify the name of the paragraph block.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nfunction extendParagraphBlock( settings, name ) {\n\n  if( &quot;core\/paragraph&quot; === name ) {\n    settings.title = __( &quot;NEW Paragraph&quot;, &quot;jsforwpadvgb&quot; );\n  }\n\n  return settings; \n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">You can see here, just like PHP filters, <strong>we always need to return something from our filters (even if we don&#8217;t change anything)!<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Block Filters Do We Have?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">At this time we have a number of helpful block filters.  You can always <a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/designers-developers\/developers\/filters\/block-filters\/\">check the documentation<\/a> for a current listing of all block filters.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">blocks.registerBlockType<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">IMO one of the most important filters to learn about first is the one we saw in the example above: <code class=\"\" data-line=\"\">blocks.registerBlockType<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This filter let&#8217;s us hook into and override any of the original settings passed to a block.  This includes pretty much any default configuration you would want to change for a block, from it&#8217;s title and keywords to it&#8217;s attribute and edit and save settings.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a quick example though of how you could use the registerBlockSettings filter to change a few things in the Core Code Block:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nconst { __ } = wp.i18n;\nconst { addFilter } = wp.hooks;\n\naddFilter(\n  &quot;blocks.registerBlockType&quot;,\n  &quot;jsforwp-advgb\/extending-register-block-type&quot;,\n  extendWithRegisterBlockType\n);\n\nfunction extendWithRegisterBlockType(settings, name) {\n\n  \/\/ Check for block type\n  if (&quot;core\/code&quot; === name) {\n\n    \/\/ Change the block title\n    settings.title = __(&quot;Code Snippet&quot;, &quot;jsforwpadvblocks&quot;);\n\n    \/\/ Change the block description\n    settings.description = __(\n      &quot;Use for maximum codiness \ud83d\udc83&quot;,\n      &quot;jsforwpadvblocks&quot;\n    );\n\n    \/\/ Change block icon\n    settings.icon = &quot;admin-tools&quot;;\n\n    \/\/ Change supports\n    settings.supports = lodash.merge( {}, settings.supports, {\n      html: true,\n      anchor: true\n    });\n\n  }\n\n  return settings;\n\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Here is an important thing to remember about filters:<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Filters run on ALL blocks, so 99% of the time you want to include a conditional check in your filter callback functions<\/p><cite><br><\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">So, once we check that we have the code block, we can modify the title, description, icon, supports, and more if we wanted to.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">A note that this particular example uses loadash, so you would want to make sure that you have <code class=\"\" data-line=\"\">lodash<\/code> included as a dependency when you register or enqueue your JS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">More Block Filters<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a list of some of the other block filters that I like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>blocks.getSaveElement &#8211; Hooks into the save element<\/li><li>blocks.getSaveContent.extraProps &#8211; Let&#8217;s us add attributes to the save element<\/li><li>blocks.getBlockDefaultClassName &#8211; So we can override or add to the default class assigned to block markup on the frontend<\/li><li>blocks.getBlockAttributes &#8211; To work with a block&#8217;s attributes<\/li><li>blocks.unregisterBlockType &#8211; For removing blocks from appearing in the editor<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">There are more, and of course <a href=\"https:\/\/wordpress.org\/gutenberg\/handbook\/designers-developers\/developers\/filters\/block-filters\/\">check the documentation<\/a>, to see what might get added in the future.<\/p>\n\n\n\n<p class=\"wp-block-coblocks-highlight\"><mark class=\"wp-block-coblocks-highlight__content\">In my <a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Development Course<\/a> I go into depth on how to work with many of the filters mentioned here.<\/mark><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is a quick example of how you could extend the classes assigned to the Core Cover Block (note it uses the <a href=\"https:\/\/github.com\/JedWatson\/classnames\">classnames<\/a> library):<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; gutter: true; title: ; notranslate\" title=\"\">\nconst { addFilter } = wp.hooks;\n\nimport classnames from &quot;classnames&quot;;\n\naddFilter(\n  &quot;blocks.getBlockDefaultClassName&quot;,\n  &quot;jsforwpadvgb\/custom-cover-block-class-name&quot;,\n  customCoverClassName\n);\n\nfunction customCoverClassName( className, name ) {\n\n  if ( &quot;core\/cover&quot; === name ) {\n\n    \/\/ This will OVERRIDE the class\n    \/\/ return &quot;my-block-cover&quot;;\n\n    \/\/ This will ADD a class\n    return classnames( className, &quot;my-block-cover&quot; );\n\n  }\n\n  return className;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">Hopefully the above makes sense.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We call <code class=\"\" data-line=\"\">addFilter()<\/code><\/li><li>We create a callback function <code class=\"\" data-line=\"\">customCoverClassName()<\/code><\/li><li>It gives us two pieces of data to use: <code class=\"\" data-line=\"\">className<\/code> and the <code class=\"\" data-line=\"\">name<\/code> of the block<\/li><li>We do a conditional check for the cover block <\/li><li>Then <code class=\"\" data-line=\"\">return &quot;my-block-cover&quot;;<\/code> would replace the normal class used<\/li><li>Or <code class=\"\" data-line=\"\">return classnames( className, &quot;my-block-cover&quot; );<\/code> will add your own custom class to the block (usually what you want)<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Remember, any filter we hook into, needs us to return back what it is we are modifying (even if we don&#8217;t modify anything).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Note on Save Filters and When to Use PHP Filters<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It is important to know that when you modify the save setting for a block and you already have posts or pages with those blocks in use, <strong>modifying the save setting with JavaScript filters will break your existing blocks. <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"720\" height=\"405\" src=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1.png\" alt=\"Filtering Saved \nBlock Content\nMay\/Will Break \nExisting Blocks\n\" class=\"wp-image-101148\" srcset=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1.png 720w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1-300x169.png 300w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1-400x225.png 400w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1-450x253.png 450w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1-600x338.png 600w, https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Screen-Shot-2019-03-27-at-9.59.25-PM-min-1-100x56.png 100w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This happens because the database has your block saved as one thing.  Then the editor sees your new save setting and it doesn&#8217;t know what to do.  This will result in a message to the user that something is wrong with their block and it will want to convert the block to an HTML block with the content from the database.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">PHP render_block Filter<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To avoid this, we can use the PHP <code class=\"\" data-line=\"\">render_block<\/code> filter.  Filtering the block with PHP will cause the effect to take place when the block is rendered to the frontend and therefor does not interfere with the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here is an example of what it would look like to use PHP to filter the save setting for a block to wrap the block in extra markup:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: php; gutter: true; title: ; notranslate\" title=\"\">\nadd_filter( &#039;render_block&#039;, &#039;my_wrap_quote_block_fitler&#039;, 10, 3);\n\nfunction my_wrap_quote_block_fitler( $block_content, $block ) {\n    \n  if( &quot;core\/quote&quot; !== $block&#x5B;&#039;blockName&#039;] ) {\n    return $block_content;\n  }\n\n  $output = &#039;&lt;div class=&quot;MYCONTAINER&quot;&gt;&#039;;\n  $output .= $block_content;\n  $output .= &#039;&lt;\/div&gt;&#039;;\n\n  return $output;\n}\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">This works very similarly to the JS filter:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>We hook into <code class=\"\" data-line=\"\">render_block<\/code><\/li><li>Our callback function does a conditional check to make sure we only change the block we want (this takes a fail early approach)<\/li><li>We wrap the save element in our custom markup<\/li><li>We return the new block content<\/li><\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Although the save filters are cool in JavaScript, and I love doing more WordPress development in JavaScript, I do think it is smarter to use PHP filters when extending the save setting for blocks. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Dig Deeper into Extending Blocks and Working with Fitlers<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you would like to learn more about all of this, I suggest checking out my <a href=\"https:\/\/javascriptforwp.com\/product\/advanced-gutenberg-development\/\">Advanced Gutenberg Course<\/a>.  Or if this was a bit over your head, you might want to start of with my basic <a href=\"https:\/\/javascriptforwp.com\/product\/gutenberg-block-development-course\/\">WordPress Block Development Course<\/a> \ud83d\ude42<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hope you enjoyed this article!  Please reach out with questions and suggestions on how you are extending blocks in WordPress!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article we look at how to extend blocks with JavaScript and PHP Filters in WordPress.<\/p>\n","protected":false},"author":4,"featured_media":101151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","footnotes":""},"categories":[135,808],"tags":[],"class_list":["post-101115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-free-videos","category-tutorial"],"acf":[],"featured_image_urls":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-100x100.png",100,100,true]},"post_excerpt_stackable":"<p>In this article we look at how to extend blocks with JavaScript and PHP Filters in WordPress.<\/p>\n","category_list":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num":"4 comments","featured_image_urls_v2":{"full":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-150x150.png",150,150,true],"medium":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-300x169.png",300,169,true],"medium_large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-768x432.png",768,432,true],"large":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-1024x576.png",1024,576,true],"1536x1536":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"2048x2048":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"course_icon":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-150x150.png",150,150,true],"course_banner":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-500x300.png",500,300,true],"latest-full-width":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-grid-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x400.png",600,400,true],"latest-grid-thumb-masonry":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-450x253.png",450,253,true],"latest-woo-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x338.png",600,338,true],"latest-nav-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-800x280.png",800,280,true],"latest-mega-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-235x160.png",235,160,true],"latest-fixed-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-65x65.png",65,65,true],"latest-hero":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png",1280,720,false],"latest-hero-thumb":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-50x50.png",50,50,true],"latest-logo":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-400x225.png",400,225,true],"woocommerce_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-300x300.png",300,300,true],"woocommerce_single":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-600x338.png",600,338,true],"woocommerce_gallery_thumbnail":["https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5-100x100.png",100,100,true]},"post_excerpt_stackable_v2":"<p>In this article we look at how to extend blocks with JavaScript and PHP Filters in WordPress.<\/p>\n","category_list_v2":"<a href=\"https:\/\/javascriptforwp.com\/category\/free-videos\/\" rel=\"category tag\">Free Videos<\/a>, <a href=\"https:\/\/javascriptforwp.com\/category\/tutorial\/\" rel=\"category tag\">Tutorial<\/a>","author_info_v2":{"name":"Zac Gordon","url":"https:\/\/javascriptforwp.com\/author\/zgordon\/"},"comments_num_v2":"4 comments","yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress\" \/>\n<meta property=\"og:description\" content=\"In this article we look at how to extend blocks with JavaScript and PHP Filters in WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/\" \/>\n<meta property=\"og:site_name\" content=\"JavaScript for WordPress\" \/>\n<meta property=\"article:published_time\" content=\"2019-03-28T02:38:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-03-31T05:13:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Zac Gordon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/zgordon\" \/>\n<meta name=\"twitter:site\" content=\"@zgordon\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Zac Gordon\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/\"},\"author\":{\"name\":\"Zac Gordon\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\"},\"headline\":\"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks &#8211; Tutorial with Video\",\"datePublished\":\"2019-03-28T02:38:53+00:00\",\"dateModified\":\"2019-03-31T05:13:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/\"},\"wordCount\":1149,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Post-Featured-Images-5.png\",\"articleSection\":[\"Free Videos\",\"Tutorial\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/\",\"name\":\"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Post-Featured-Images-5.png\",\"datePublished\":\"2019-03-28T02:38:53+00:00\",\"dateModified\":\"2019-03-31T05:13:52+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#primaryimage\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Post-Featured-Images-5.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2019\\\/03\\\/Post-Featured-Images-5.png\",\"width\":1280,\"height\":720,\"caption\":\"Extend WordPress Blocks Tutorial with JavaScript and PHP Filters\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/extending-wordpress-blocks\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/javascriptforwp.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks &#8211; Tutorial with Video\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#website\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"name\":\"JavaScript for WordPress\",\"description\":\"Tutorials, Courses, Bootcamps and Conferences\",\"publisher\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/javascriptforwp.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#organization\",\"name\":\"JavaScript for WordPress Master Course\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"contentUrl\":\"https:\\\/\\\/javascriptforwp.com\\\/wp-content\\\/uploads\\\/2016\\\/03\\\/wapuu-square.png\",\"width\":200,\"height\":200,\"caption\":\"JavaScript for WordPress Master Course\"},\"image\":{\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/zgordon\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/javascriptforwp.com\\\/#\\\/schema\\\/person\\\/76dfb19fbd859b4a17428b8b17767b25\",\"name\":\"Zac Gordon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g\",\"caption\":\"Zac Gordon\"},\"description\":\"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.\",\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/zgordon\",\"https:\\\/\\\/x.com\\\/https:\\\/\\\/twitter.com\\\/zgordon\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress","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:\/\/javascriptforwp.com\/extending-wordpress-blocks\/","og_locale":"en_US","og_type":"article","og_title":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress","og_description":"In this article we look at how to extend blocks with JavaScript and PHP Filters in WordPress.","og_url":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/","og_site_name":"JavaScript for WordPress","article_published_time":"2019-03-28T02:38:53+00:00","article_modified_time":"2019-03-31T05:13:52+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png","type":"image\/png"}],"author":"Zac Gordon","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/zgordon","twitter_site":"@zgordon","twitter_misc":{"Written by":"Zac Gordon","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#article","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/"},"author":{"name":"Zac Gordon","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25"},"headline":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks &#8211; Tutorial with Video","datePublished":"2019-03-28T02:38:53+00:00","dateModified":"2019-03-31T05:13:52+00:00","mainEntityOfPage":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/"},"wordCount":1149,"commentCount":4,"publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"image":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png","articleSection":["Free Videos","Tutorial"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/","url":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/","name":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks - Tutorial with Video - JavaScript for WordPress","isPartOf":{"@id":"https:\/\/javascriptforwp.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#primaryimage"},"image":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#primaryimage"},"thumbnailUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png","datePublished":"2019-03-28T02:38:53+00:00","dateModified":"2019-03-31T05:13:52+00:00","breadcrumb":{"@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#primaryimage","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2019\/03\/Post-Featured-Images-5.png","width":1280,"height":720,"caption":"Extend WordPress Blocks Tutorial with JavaScript and PHP Filters"},{"@type":"BreadcrumbList","@id":"https:\/\/javascriptforwp.com\/extending-wordpress-blocks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascriptforwp.com\/"},{"@type":"ListItem","position":2,"name":"Extending WordPress Blocks with JavaScript (and PHP) Block Filter Hooks &#8211; Tutorial with Video"}]},{"@type":"WebSite","@id":"https:\/\/javascriptforwp.com\/#website","url":"https:\/\/javascriptforwp.com\/","name":"JavaScript for WordPress","description":"Tutorials, Courses, Bootcamps and Conferences","publisher":{"@id":"https:\/\/javascriptforwp.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/javascriptforwp.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/javascriptforwp.com\/#organization","name":"JavaScript for WordPress Master Course","url":"https:\/\/javascriptforwp.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/","url":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","contentUrl":"https:\/\/javascriptforwp.com\/wp-content\/uploads\/2016\/03\/wapuu-square.png","width":200,"height":200,"caption":"JavaScript for WordPress Master Course"},"image":{"@id":"https:\/\/javascriptforwp.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/zgordon"]},{"@type":"Person","@id":"https:\/\/javascriptforwp.com\/#\/schema\/person\/76dfb19fbd859b4a17428b8b17767b25","name":"Zac Gordon","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7935c73cce64694600738d5ed4a6e464d2ba445af9a7ba375708a815dc90b585?s=96&d=mm&r=g","caption":"Zac Gordon"},"description":"Zac Gordon is a professional educator, with a current focus on JavaScript development with and alongside WordPress. Zac has years of experience teaching at high schools, colleges, bootcamps and online learning sites like Treehouse, Udemy and Frontend Masters.","sameAs":["https:\/\/twitter.com\/zgordon","https:\/\/x.com\/https:\/\/twitter.com\/zgordon"]}]}},"_links":{"self":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/101115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/comments?post=101115"}],"version-history":[{"count":0,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/posts\/101115\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media\/101151"}],"wp:attachment":[{"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/media?parent=101115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/categories?post=101115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javascriptforwp.com\/wp-json\/wp\/v2\/tags?post=101115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}