{"id":25658,"date":"2023-05-16T12:00:59","date_gmt":"2023-05-16T16:00:59","guid":{"rendered":"https:\/\/webdevstudios.com\/?p=25658"},"modified":"2024-04-15T11:54:11","modified_gmt":"2024-04-15T15:54:11","slug":"query-loop-block","status":"publish","type":"post","link":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/","title":{"rendered":"Having Fun with Query Loop Block"},"content":{"rendered":"<p>The Query Loop block is a powerful tool that brings the WP Loop, a core WordPress function, to the block editor. Introduced in WordPress version 5.8 and continually updated and improved since then, the Query Loop block is a useful way to display a list of posts or other content in the block editor. In this article, we will explore the usefulness of the Query Loop block and how to extend its capabilities.<\/p>\n<p>To get started, we will create a plugin to store our code. The quickest way to create a plugin scaffold is by using the WP-CLI command <code>npx @wordpress\/create-block loop-patterns<\/code>, which will generate the necessary files for us.<\/p>\n<p>If you want more information on the <code>create-block<\/code> script, you can check out the <strong><a href=\"https:\/\/developer.wordpress.org\/block-editor\/tools\/create-block\/\">WordPress documentation<\/a><\/strong>.<\/p>\n<h2>Query Loop Variations<\/h2>\n<p>WordPress provides <span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"1\" data-reactroot=\"\">block variations<\/span> as a way for developers to create custom versions of core blocks. To get started, we will need to create some directories to store our code. We can do this by running a few commands in the terminal.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/2e05446c6a71e0a3953626aa2b0a3754.js\"><\/script><\/p>\n<p>We begin by creating a simple block variation called <code>simple-query<\/code>, and adding a CSS folder to store minimal styles. We don&#8217;t want to change the theme styles already declared in the <code>theme.json<\/code> file. To add our code, we will edit the <code>simple-query\/index.js<\/code> file.<\/p>\n<p>We will use the <code>registerBlockVariation()<\/code> function to register our block variation. If you are unfamiliar with block variations, you can learn more about them <strong><a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-variations\/\">here<\/a><\/strong>.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/b2b2a001b75e7cbf52b8e339fdc6577e.js\"><\/script><\/p>\n<p>This code defines a constant called <code>SIMPLE_QUERY<\/code>, which is set to the string <strong><code>'<\/code><\/strong><code>loop-patterns\/simple-query<\/code><strong><code>'<\/code><\/strong>. This constant represents the name of a block variation that is being registered.<\/p>\n<p>The <code>wp.domReady()<\/code> function is a WordPress function that is called when the DOM (Document Object Model) is fully loaded and ready for manipulation. Inside the <code>wp.domReady()<\/code> function, the <code>wp.blocks.registerBlockVariation()<\/code> function is called with two arguments: <code>'core\/query'<\/code> and an empty object <code>{}<\/code>.<\/p>\n<p>The <code>wp.blocks.registerBlockVariation()<\/code> function is used to register a block variation. The first argument is the name of the parent block (in this case, <code>'core\/query'<\/code>), and the second argument is an object that specifies the properties of the block variation being registered. In this case, the object is empty, so no additional properties are being set for the block variation.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/bda8bef3dc0c01c6aa69a0ddfa1523ac.js\"><\/script><\/p>\n<p>As previously mentioned, the <code>registerBlockVariation()<\/code> function takes two arguments: the first argument is the name of the parent block, and the second argument is an object that specifies the properties of the block variation being registered. Let&#8217;s review the properties of the object.<\/p>\n<ol>\n<li><code>name<\/code>: This property specifies the name of the block variation being registered. In this case, the value of the <code>name<\/code> property is the constant <code>SIMPLE_QUERY<\/code>, which represents the string <code>'loop-patterns\/simple-query'<\/code>.<\/li>\n<li><code>title<\/code>: This property specifies the title of the block variation. This title will be displayed to the user in the block editor. In this case, the value of the <code>title<\/code> property is <code>'Simple Query'<\/code>.<\/li>\n<li><code>description<\/code>: This property specifies a description of the block variation. This description will be displayed to the user in the block editor. In this case, the value of the <code>description<\/code> property is <code>'Displays a Simple Query'<\/code>.<\/li>\n<li><code>return<\/code>: This property is a function that specifies the conditions under which the block variation should be displayed to the user. In this case, the function returns <code>true<\/code> if the <code>namespace<\/code> variable is equal to <code>SIMPLE_QUERY<\/code> and the <code>query.postType<\/code> variable is equal to <code>'post'<\/code>. Otherwise, the function returns <code>false<\/code>.<\/li>\n<li><code>icon<\/code>: This property specifies the icon that should be displayed for the block variation in the block editor. In this case, the value of the <code>icon<\/code> property is <code>'edit-large'<\/code>, which represents a pencil icon.<\/li>\n<li><code>attributes<\/code>: This property is an object that specifies the attributes (i.e., data values) that the block variation should have. In this case, the object is empty, so no attributes are being set for the block variation.<\/li>\n<\/ol>\n<h2>Block Attributes<\/h2>\n<p>The next step will be adding our block attributes. Let\u2019s take a look at the Query Loop block attributes.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25774\" data-permalink=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/screenshot-2022-12-29-at-08-03-51\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg\" data-orig-size=\"762,549\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot 2022-12-29 at 08.03.51\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg\" class=\"size-full wp-image-25774 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg\" alt=\"\" width=\"762\" height=\"549\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg 762w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51-300x216.jpg 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51-83x60.jpg 83w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Based on the screenshots, we can add the following to the <span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"1\" data-reactroot=\"\">attributes<\/span> object in our script:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/04fca147db5a9c300a58093489034a05.js\"><\/script><\/p>\n<p>The <code>attributes<\/code> object in this code defines the query parameters that will be used to retrieve posts from the WordPress database.<\/p>\n<p>Here is what each attribute does:<\/p>\n<ul>\n<li><code>perPage<\/code>: The number of posts to be displayed on each page.<\/li>\n<li><code>pages<\/code>: The number of pages to be displayed.<\/li>\n<li><code>offset<\/code>: The number of posts to skip before starting to display posts.<\/li>\n<li><code>postType<\/code>: The type of post to be displayed (e.g., <code>post<\/code>, <code>page<\/code>, etc.).<\/li>\n<li><code>order<\/code>: The order in which the posts will be displayed (either <code>asc<\/code> for ascending or <code>desc<\/code> for descending).<\/li>\n<li><code>orderBy<\/code>: The criteria used to order the posts (e.g., <code>date<\/code>, <code>title<\/code>, etc.).<\/li>\n<li><code>author<\/code>: The ID of the author whose posts will be displayed.<\/li>\n<li><code>search<\/code>: A search term used to filter the posts that are displayed.<\/li>\n<li><code>exclude<\/code>: An array of post IDs to exclude from the query.<\/li>\n<li><code>sticky<\/code>: A value used to include or exclude sticky posts from the query.<\/li>\n<li><code>inherit<\/code>: A boolean value indicating whether the query should inherit the context of the current page.<\/li>\n<\/ul>\n<p>These attributes can be used to customize the behavior of the query and fine-tune which posts are displayed.<\/p>\n<p>Finally, we will build our template. We can use the <code>innerBlocks<\/code> property to build our template by creating nested blocks within the parent block.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/b678e60f39ecb3d24657078626db0d50.js\"><\/script><\/p>\n<p>In this case, the <code>innerBlocks<\/code> array has three nested blocks:<\/p>\n<ol>\n<li>The first nested block is an instance of the <code>core\/post-template<\/code> block, which is a template block that can be used to display a single post. The second element of the array is an empty object <code>{}<\/code>, which represents the attributes of the block. The third element of the array is another array, which represents the content of the block. In this case, the content of the <code>core\/post-template<\/code> block consists of two blocks: the <code>core\/post-title<\/code> block and the <code>core\/post-excerpt<\/code> block.<\/li>\n<li>The second nested block is an instance of the <code>core\/query-pagination<\/code> block, which is used to display pagination links for a list of posts.<\/li>\n<li>The third nested block is an instance of the <code>core\/query-no-results<\/code> block, which is displayed when a query returns no results.<\/li>\n<\/ol>\n<p>This is what our final code will look like::<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/d06763f19916cbd67159571ffeb41b34.js\"><\/script><\/p>\n<h2>Register Our Scripts<\/h2>\n<p>Now let&#8217;s test our simple query to make sure it is reading our code correctly. To do this, we need to change how we register our scripts in the **<code>loop-patterns.php<\/code>**file. Replace the existing content with the following:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/7d32e037bb63f2708cc74f644f7c966f.js\"><\/script><\/p>\n<p>To make sure you are calling the script correctly, add the following to the <span class=\"notion-enable-hover\" spellcheck=\"false\" data-token-index=\"1\" data-reactroot=\"\">src\/index.js<\/span> file:<\/p>\n<p>And make sure that you\u2019re calling the script correctly on <code>src\/index.js<\/code>. Add this:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/14c8cbe5ec333dec161f725495ce0115.js\"><\/script><\/p>\n<p>Let&#8217;s visit the block editor and check out our new block variation. See how it appears in the block editor and on the frontend of the site.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25660\" data-permalink=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/screenshot-2022-11-25-at-10-30-16\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16.jpg\" data-orig-size=\"1203,809\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot 2022-11-25 at 10.30.16\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-1024x689.jpg\" class=\"size-large wp-image-25660 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-1024x689.jpg\" alt=\"\" width=\"850\" height=\"572\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-1024x689.jpg 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-300x202.jpg 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-768x516.jpg 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16-89x60.jpg 89w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/11\/Screenshot-2022-11-25-at-10.30.16.jpg 1203w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/><\/p>\n<p>While our custom variation is simple, it&#8217;s a good starting point. Now that we have a better understanding of how to register a query loop variation let&#8217;s create a flip cards variation for the Query Loop block. To create a new <code>flip-cards<\/code> variation, we can follow the same steps we used to create the previous variation.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/ddc57876d706927dc3c9133606ab5598.js\"><\/script><\/p>\n<p>This code registers a new block variation for the <code>core\/query<\/code> block called<code>flip-cards<\/code>. The variation has a name, title, and description and is only active if the namespace is <code>FLIP_CARDS<\/code> and the <code>postType<\/code> attribute of the <code>query<\/code> object is <code>'post'<\/code>. The variation also has a set of attributes, including a <code>className<\/code>, <code>tagName<\/code>, and <code>query<\/code>object.<\/p>\n<p>The variation is scoped to the block inserter and does not contain any inner blocks.<\/p>\n<h2>Inner Blocks<\/h2>\n<p>For our inner blocks, let&#8217;s do the following:<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/3ba8f0c3d9f169baec6a99e2e423cbeb.js\"><\/script><\/p>\n<p>This code defines an array of inner blocks for the <code>flip-cards<\/code> variation of the <code>core\/query<\/code> block. The inner blocks include a <code>core\/post-template<\/code> block, which is locked and has a specific <code>className<\/code>. The <code>core\/post-template<\/code> block also contains a <code>core\/group<\/code> block, which in turn contains a <code>core\/columns<\/code> block. The <code>core\/columns<\/code> block contains two <code>core\/column<\/code> blocks, which each contain various blocks such as <code>core\/post-title<\/code>, <code>core\/post-date<\/code>, <code>core\/post-author<\/code>, and <code>core\/post-excerpt<\/code>.<\/p>\n<p>The structure of the inner blocks creates a layout with flip cards, where each card has a front and backside. The front side of the card contains a featured image, and the back side contains the post title, date, author, and excerpt. The blocks are nested inside each other to create the desired layout and functionality.<\/p>\n<p>If you&#8217;re having trouble understanding how to access the block&#8217;s attributes, a helpful resource is the <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/tree\/trunk\/packages\/block-library\/src\">block library<\/a> on <a href=\"https:\/\/github.com\/\">GitHub<\/a>. Alternatively, you can view the block&#8217;s attributes by clicking the <code>Code editor<\/code> option under the <code>Editor<\/code> toolbar, or by referring to the attributes we registered earlier.<\/p>\n<p><script src=\"https:\/\/gist.github.com\/elpuas\/eb9bedd8dc7bfbd8a6ad3f88d43ac2d7.js\"><\/script><\/p>\n<p>The same applies to all blocks, I found it very helpful when looking for the attributes.<\/p>\n<h2>Adding Styles<\/h2>\n<p>The finishing touch will be adding our styles, which are the following:<br \/>\n<script src=\"https:\/\/gist.github.com\/elpuas\/63539d28939430d7c4c9333774802f50.js\"><\/script><\/p>\n<p>With all the pieces in place, we can now see the results of our custom query loop variation. In the block editor and on the frontend of the site, we should see:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25771\" data-permalink=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/screenshot_2022-12-29_at_08-03-29\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29.jpg\" data-orig-size=\"1135,636\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_2022-12-29_at_08.03.29\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-1024x574.jpg\" class=\"size-large wp-image-25771 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-1024x574.jpg\" alt=\"\" width=\"850\" height=\"476\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-1024x574.jpg 1024w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-300x168.jpg 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-768x430.jpg 768w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29-107x60.jpg 107w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.29.jpg 1135w\" sizes=\"auto, (max-width: 850px) 100vw, 850px\" \/> <img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"25772\" data-permalink=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/screenshot_2022-12-29_at_08-03-51\/\" data-orig-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51.jpg\" data-orig-size=\"762,549\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"Screenshot_2022-12-29_at_08.03.51\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51.jpg\" class=\"size-large wp-image-25772 alignnone\" src=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51.jpg\" alt=\"\" width=\"762\" height=\"549\" srcset=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51.jpg 762w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51-300x216.jpg 300w, https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot_2022-12-29_at_08.03.51-83x60.jpg 83w\" sizes=\"auto, (max-width: 762px) 100vw, 762px\" \/><\/p>\n<p>I hope you&#8217;ve enjoyed this tutorial and have learned how to create custom query loop variations in the block editor. With these skills, you can give your content a unique look and feel and customize the Query Loop block to meet your needs. Thanks for following along, and I look forward to seeing what you create!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Query Loop block is a powerful tool that brings the WP Loop, a core WordPress function, to the block editor. Introduced in WordPress version 5.8 and continually updated and improved since then, the Query Loop block is a useful way to display a list of posts or other content in the block editor. In <a class=\"more-link\" href=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/\">Read More<span class=\"screen-reader-text\"> Having Fun with Query Loop Block<\/span><\/a><\/p>\n","protected":false},"author":123,"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":[954,150,142],"tags":[13371],"coauthors":[11315],"class_list":["post-25658","post","type-post","status-publish","format-standard","hentry","category-javascript","category-tutorial","category-wordpress","tag-query-loop-block"],"acf":{"blog_hero_image":{"ID":26224,"id":26224,"title":"WDS 8 Blog Featured Image (51)","filename":"WDS-8-Blog-Featured-Image-51.png","filesize":1862286,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","link":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/wds-8-blog-featured-image-51\/","alt":"","author":"6","description":"","caption":"","name":"wds-8-blog-featured-image-51","status":"inherit","uploaded_to":25658,"date":"2023-05-15 18:03:52","modified":"2023-05-15 18:03:52","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\/2023\/01\/WDS-8-Blog-Featured-Image-51-150x150.png","thumbnail-width":150,"thumbnail-height":150,"medium":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-300x113.png","medium-width":300,"medium-height":113,"medium_large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-768x288.png","medium_large-width":768,"medium_large-height":288,"large":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1024x384.png","large-width":850,"large-height":319,"1536x1536":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1536x576.png","1536x1536-width":1536,"1536x1536-height":576,"2048x2048":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","2048x2048-width":1920,"2048x2048-height":720,"featured-work-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-436x511.png","featured-work-lg-width":436,"featured-work-lg-height":511,"featured-work-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-436x241.png","featured-work-sm-width":436,"featured-work-sm-height":241,"book-cover":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-235x300.png","book-cover-width":235,"book-cover-height":300,"home-hero":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1350x440.png","home-hero-width":1350,"home-hero-height":440,"services-screenshot":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-590x720.png","services-screenshot-width":590,"services-screenshot-height":720,"single-blog-featured":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1920x625.png","single-blog-featured-width":1920,"single-blog-featured-height":625,"single-blog-inline":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-850x360.png","single-blog-inline-width":850,"single-blog-inline-height":360,"grid-image":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-420x420.png","grid-image-width":420,"grid-image-height":420,"logo-train":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-160x60.png","logo-train-width":160,"logo-train-height":60,"simple-header":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1920x191.png","simple-header-width":1920,"simple-header-height":191,"full-width":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","full-width-width":1920,"full-width-height":720,"fifty-fifty-media":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51-1300x488.png","fifty-fifty-media-width":1300,"fifty-fifty-media-height":488,"gform-image-choice-sm":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","gform-image-choice-sm-width":300,"gform-image-choice-sm-height":113,"gform-image-choice-md":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","gform-image-choice-md-width":400,"gform-image-choice-md-height":150,"gform-image-choice-lg":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/WDS-8-Blog-Featured-Image-51.png","gform-image-choice-lg-width":600,"gform-image-choice-lg-height":225}}},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Having Fun with Query Loop Block - WebDevStudios<\/title>\n<meta name=\"description\" content=\"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.\" \/>\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\/2023\/05\/16\/query-loop-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Having Fun with Query Loop Block\" \/>\n<meta property=\"og:description\" content=\"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/\" \/>\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=\"2023-05-16T16:00:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-15T15:54:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/Copy-of-Blog-Post-Template-99.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=\"Alfredo Navas\" \/>\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=\"Alfredo Navas\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/\"},\"author\":{\"name\":\"Alfredo Navas\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#\\\/schema\\\/person\\\/eca55dee6707566f25b6809de1aad363\"},\"headline\":\"Having Fun with Query Loop Block\",\"datePublished\":\"2023-05-16T16:00:59+00:00\",\"dateModified\":\"2024-04-15T15:54:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/\"},\"wordCount\":1455,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Screenshot-2022-12-29-at-08.03.51.jpg\",\"keywords\":[\"Query Loop Block\"],\"articleSection\":[\"JavaScript\",\"Tutorial\",\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/\",\"name\":\"Having Fun with Query Loop Block - WebDevStudios\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Screenshot-2022-12-29-at-08.03.51.jpg\",\"datePublished\":\"2023-05-16T16:00:59+00:00\",\"dateModified\":\"2024-04-15T15:54:11+00:00\",\"description\":\"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#primaryimage\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Screenshot-2022-12-29-at-08.03.51.jpg\",\"contentUrl\":\"https:\\\/\\\/webdevstudios.com\\\/wp-content\\\/uploads\\\/2022\\\/12\\\/Screenshot-2022-12-29-at-08.03.51.jpg\",\"width\":762,\"height\":549},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/webdevstudios.com\\\/2023\\\/05\\\/16\\\/query-loop-block\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/webdevstudios.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Having Fun with Query Loop Block\"}]},{\"@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\\\/eca55dee6707566f25b6809de1aad363\",\"name\":\"Alfredo Navas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g5badc9d3da04140f45472038555e298a\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g\",\"caption\":\"Alfredo Navas\"},\"description\":\"Alfredo is a Senior Frontend Engineer at WebDevStudios. He transforms design into code and makes sure that everything looks pretty, regardless of the media. He began his career as a designer and then jumped into code during a time when websites were only HTML tables and images. Later, he discovered WordPress and fell in love with it. Alfredo enjoys doing everything from design to development, themes, and custom plugins. He is the co-founder of the WordPress Costa Rica community, an organizer, speaker, and volunteer for WordCamps in various cities, such as Rome, Miami, Nashville, Managua, Mexico City, and his hometown San Jose. In his free time, he enjoys learning, cooking, drawing, surfing, skateboarding, and watching \u201cStar Wars\u201d and zombie movies with his kids Danny, Mia, and Filippo.\",\"url\":\"https:\\\/\\\/webdevstudios.com\\\/author\\\/alfredo-navaswebdevstudios-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Having Fun with Query Loop Block - WebDevStudios","description":"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.","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\/2023\/05\/16\/query-loop-block\/","og_locale":"en_US","og_type":"article","og_title":"Having Fun with Query Loop Block","og_description":"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.","og_url":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/","og_site_name":"WebDevStudios","article_publisher":"http:\/\/facebook.com\/webdevstudios","article_published_time":"2023-05-16T16:00:59+00:00","article_modified_time":"2024-04-15T15:54:11+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2023\/01\/Copy-of-Blog-Post-Template-99.png","type":"image\/png"}],"author":"Alfredo Navas","twitter_card":"summary_large_image","twitter_creator":"@webdevstudios","twitter_site":"@webdevstudios","twitter_misc":{"Written by":"Alfredo Navas","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#article","isPartOf":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/"},"author":{"name":"Alfredo Navas","@id":"https:\/\/webdevstudios.com\/#\/schema\/person\/eca55dee6707566f25b6809de1aad363"},"headline":"Having Fun with Query Loop Block","datePublished":"2023-05-16T16:00:59+00:00","dateModified":"2024-04-15T15:54:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/"},"wordCount":1455,"commentCount":2,"publisher":{"@id":"https:\/\/webdevstudios.com\/#organization"},"image":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg","keywords":["Query Loop Block"],"articleSection":["JavaScript","Tutorial","WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/","url":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/","name":"Having Fun with Query Loop Block - WebDevStudios","isPartOf":{"@id":"https:\/\/webdevstudios.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#primaryimage"},"image":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#primaryimage"},"thumbnailUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg","datePublished":"2023-05-16T16:00:59+00:00","dateModified":"2024-04-15T15:54:11+00:00","description":"WebDevStudios Senior Frontend Engineer Alfredo Navas covers the usefulness of the Query Loop block and how to extend its capabilities.","breadcrumb":{"@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#primaryimage","url":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg","contentUrl":"https:\/\/webdevstudios.com\/wp-content\/uploads\/2022\/12\/Screenshot-2022-12-29-at-08.03.51.jpg","width":762,"height":549},{"@type":"BreadcrumbList","@id":"https:\/\/webdevstudios.com\/2023\/05\/16\/query-loop-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webdevstudios.com\/"},{"@type":"ListItem","position":2,"name":"Having Fun with Query Loop Block"}]},{"@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\/eca55dee6707566f25b6809de1aad363","name":"Alfredo Navas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g5badc9d3da04140f45472038555e298a","url":"https:\/\/secure.gravatar.com\/avatar\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/55a069cd973b4a40fcdf00fb3b8f35e35bc076bccae81fbfcbe66e2d9e1b8fa2?s=96&d=mm&r=g","caption":"Alfredo Navas"},"description":"Alfredo is a Senior Frontend Engineer at WebDevStudios. He transforms design into code and makes sure that everything looks pretty, regardless of the media. He began his career as a designer and then jumped into code during a time when websites were only HTML tables and images. Later, he discovered WordPress and fell in love with it. Alfredo enjoys doing everything from design to development, themes, and custom plugins. He is the co-founder of the WordPress Costa Rica community, an organizer, speaker, and volunteer for WordCamps in various cities, such as Rome, Miami, Nashville, Managua, Mexico City, and his hometown San Jose. In his free time, he enjoys learning, cooking, drawing, surfing, skateboarding, and watching \u201cStar Wars\u201d and zombie movies with his kids Danny, Mia, and Filippo.","url":"https:\/\/webdevstudios.com\/author\/alfredo-navaswebdevstudios-com\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3WX6u-6FQ","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25658","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\/123"}],"replies":[{"embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/comments?post=25658"}],"version-history":[{"count":0,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/posts\/25658\/revisions"}],"wp:attachment":[{"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/media?parent=25658"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/categories?post=25658"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/tags?post=25658"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/webdevstudios.com\/wp-json\/wp\/v2\/coauthors?post=25658"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}