{"id":31316,"date":"2023-12-06T15:58:22","date_gmt":"2023-12-06T21:58:22","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=31316"},"modified":"2023-12-07T09:28:51","modified_gmt":"2023-12-07T15:28:51","slug":"create-a-slider-block","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/","title":{"rendered":"Create a Slider Block for WordPress with SwiperJS"},"content":{"rendered":"\n<p>Carousels, slideshows, sliders, whatever you call them, are controversial and complex pieces of our web interactions. More often than not, they\u2019re a means to shove a bunch of ideas into a single part of the user interface. Usually, clients follow the herd mentality and request they have one, or it becomes a means for multiple stakeholders to compromise on what takes precedence in information architecture.<\/p>\n\n\n\n<p>We all know they could be better for overall site performance and offer many user experience obstacles. So, why would you want to build one? \ud83d\ude43<\/p>\n\n\n\n<p>I\u2019m making some compelling counter-arguments, but there is still a time and place when you will need one, and we\u2019ll cover all the steps to create your own. <\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-54551700 wp-block-group-is-layout-constrained\" style=\"border-radius:8px;margin-bottom:30px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:10px;padding-left:var(--wp--preset--spacing--40)\">\n<p class=\"has-large-font-size\"><strong>Table of Content<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-top:12px;margin-right:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30);margin-left:var(--wp--preset--spacing--30)\">\n<li><a href=\"#prerequisites\">Prerequisites<\/a><\/li>\n\n\n\n<li><a href=\"#why-swiperjs\">Why SwiperJS?<\/a><\/li>\n\n\n\n<li><a href=\"#setting-up\">Setting Up<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#generate-our-plugin\">Generate Our Plugin and Block Files<\/a><\/li>\n\n\n\n<li><a href=\"#activate-plugin\">Activate Plugin and Test Our Initial Progress<\/a><\/li>\n\n\n\n<li><a href=\"#install-dependencies\">Install Our Dependencies<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#concluding-initial-plugin-setup\">Verifying Our Initial Plugin Setup<\/a><\/li>\n\n\n\n<li><a href=\"#planning-block-customizations\">Planning Our Block Customizations<\/a><\/li>\n\n\n\n<li><a href=\"#extending-slider-block\">Extending the Slider Block<\/a>\n<ul class=\"wp-block-list\">\n<li><a href=\"#import-swiperjs-default-object\">Import SwiperJS and Create a Default Object<\/a><\/li>\n\n\n\n<li><a href=\"#import-swiperjs-css\">Import SwiperJS CSS Styling<\/a><\/li>\n\n\n\n<li><a href=\"#create-constant-file\">Create a New&nbsp;<code>constants.js<\/code>&nbsp;File<\/a><\/li>\n\n\n\n<li><a href=\"#edit-function\">Define the Slider&nbsp;<code>Edit<\/code>&nbsp;Function<\/a><\/li>\n\n\n\n<li><a href=\"#slider-component-userefeffect\">Custom Slider Component with&nbsp;<code>useRefEffect<\/code><\/a><\/li>\n\n\n\n<li><a href=\"#define-save-function\">Define the Slider&nbsp;<code>save<\/code>&nbsp;Function<\/a><\/li>\n\n\n\n<li><a href=\"#render-logic\">Define the <code>render.php<\/code>Display Logic<\/a><\/li>\n\n\n\n<li><a href=\"#update-view-js\">Update&nbsp;<code>view.js<\/code>&nbsp;Front End JavaScript<\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><a href=\"#final-build-and-next-steps\">Final Build &amp; Next Steps<\/a><\/li>\n<\/ul>\n<\/div>\n\n\n\n<p>As of writing this, no slider block is currently available in WordPress core&#8217;s library. There are several existing slider block plugins, but we want to have control over and learn the intricacies of our own. This way, we can focus on keeping our code lean and agile and extend it to our needs.<\/p>\n\n\n\n<p>I&#8217;m not going to lie, there are a lot of steps to get things like this working, but you&#8217;ll learn a lot along the way, like:<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-bottom:30px\">\n<li>Working with and extending the <code>@wordpress\/scripts<\/code> package.<\/li>\n\n\n\n<li>Pulling in 3rd-party dependencies and integrating them to behave smoothly within the WordPress editor.<\/li>\n\n\n\n<li>Use <code>@wordpress\/components<\/code> to allow your clients to modify the properties of the slider.<\/li>\n\n\n\n<li>And much more.<\/li>\n<\/ul>\n\n\n\n<p>Here is a demonstration of what we\u2019ll be creating.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d103219e3f5&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d103219e3f5\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"748\" height=\"454\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider.gif\" alt=\"\" class=\"wp-image-31343\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">Final Slider block as captured in the Frost theme<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"prerequisites\">Prerequisites<\/h2>\n\n\n\n<p>Beyond some working knowledge of HTML, CSS, PHP, and JavaScript. You&#8217;ll also need familiarity with the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node and npm:<\/strong> You should have <a href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\">Node.js and npm installed<\/a> on your machine. I recommend using <a href=\"https:\/\/github.com\/nvm-sh\/nvm\">nvm<\/a> (node version manager), which allows you to install and manage different versions of Node easily.<\/li>\n\n\n\n<li><strong>Block development:<\/strong> Preferably, you\u2019ve at least <a href=\"https:\/\/developer.wordpress.org\/block-editor\/\">built your first block<\/a> and are familiar with the key concepts and files that make up block registration and rendering (editor and front end).<\/li>\n\n\n\n<li><strong>Build tools:<\/strong> Preferably, you\u2019re already familiar with <code>@wordpress\/create-block<\/code> and <code>@wordpress\/scripts<\/code> , and you\u2019re comfortable running commands from a Command Line Interface (CLI).<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-swiperjs\">Why SwiperJS?<\/h2>\n\n\n\n<p>There are many slider libraries out there that are drop-in solutions. We want one with a history of stability, extendability, and modularity. This way, we can pull in bits and pieces of things we need and leave out what we do not want. SwiperJS has been around for a while and is very modular.<\/p>\n\n\n\n<p>Check out the <a href=\"https:\/\/swiperjs.com\/demos\" target=\"_blank\" rel=\"noreferrer noopener\">SwiperJS Demos page<\/a> to see all possible variations you can create.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"setting-up\">Setting Up<\/h2>\n\n\n\n<p>First, we need to create a block and a WordPress plugin to organize our custom functionality and the <code>@wordpress\/create-block<\/code> tool is super handy for this.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"generate-our-plugin\">Generate Our Plugin and Block Files<\/h3>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Create our WordPress plugin and first block with <code>@wordpress\/create-block<\/code><\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>npx @wordpress\/create-block@latest slider --namespace wpe --variant dynamic &amp;&amp; <span class=\"hljs-built_in\">cd<\/span> slider\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Let&#8217;s break down what happened for those new to the <code>@wordpress\/create-block<\/code> package. Behind the scenes, <code>@wordpress\/create-block<\/code> does a lot of things for us, including establishing our NPM developer dependencies, which include the helpful <code>@wordpress\/scripts<\/code> package, and creating a Slider block plugin with the following organization:<\/p>\n\n\n\n<ul class=\"wp-block-list\" style=\"margin-bottom:30px\">\n<li><code>slider.php<\/code> &#8211; The main plugin file, which registers a slider block.<\/li>\n\n\n\n<li><code>src\/<\/code> &#8211; This is where the <code>@wordpress\/create-block<\/code> package places our block\u2019s files.<\/li>\n\n\n\n<li><code>build\/<\/code> &#8211; This is where the <code>@wordpress\/scripts<\/code> package will compile and create our block build for us. We should not have to modify anything in the directory, as it is overwritten each time with compiled assets.<\/li>\n<\/ul>\n\n\n\n<p>The valuable <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-scripts\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>@wordpress\/scripts<\/code> package<\/a> is worth exploring if you\u2019re new to its capabilities. For now, know that it is a series of reusable webpack-driven scripts that can watch and compile our final block assets for us.<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-639b5052 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Final directory structure after running <code>@wordpress\/create-block<\/code>.<\/p>\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">build<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">block<\/span><span class=\"hljs-selector-class\">.json<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">index<\/span><span class=\"hljs-selector-class\">.asset<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">index<\/span><span class=\"hljs-selector-class\">.css<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">index<\/span><span class=\"hljs-selector-class\">.js<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">render<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">style-index<\/span><span class=\"hljs-selector-class\">.css<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">view<\/span><span class=\"hljs-selector-class\">.asset<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2502\u00a0\u00a0 \u2514\u2500\u2500 <span class=\"hljs-selector-tag\">view<\/span><span class=\"hljs-selector-class\">.js<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">package<\/span><span class=\"hljs-selector-class\">.json<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">readme<\/span><span class=\"hljs-selector-class\">.txt<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u251c\u2500\u2500 <span class=\"hljs-selector-tag\">slider<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\u2514\u2500\u2500 <span class=\"hljs-selector-tag\">src<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">block<\/span><span class=\"hljs-selector-class\">.json<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">edit<\/span><span class=\"hljs-selector-class\">.js<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">editor<\/span><span class=\"hljs-selector-class\">.scss<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">index<\/span><span class=\"hljs-selector-class\">.js<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">render<\/span><span class=\"hljs-selector-class\">.php<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">style<\/span><span class=\"hljs-selector-class\">.scss<\/span>\n<\/span><\/span><span class='shcb-loc'><span>    \u2514\u2500\u2500 <span class=\"hljs-selector-tag\">view<\/span><span class=\"hljs-selector-class\">.js<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<div class=\"wp-block-group has-base-color has-text-color has-background has-link-color wp-elements-1e5642acd0c4764eac9bf4f34d78460d has-global-padding is-layout-constrained wp-container-core-group-is-layout-9b866ece wp-block-group-is-layout-constrained\" style=\"border-radius:12px;background-color:#267048;margin-bottom:var(--wp--preset--spacing--30);padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)\">\n<div class=\"wp-block-group alignwide is-content-justification-left is-layout-flex wp-container-core-group-is-layout-75880670 wp-block-group-is-layout-flex\" style=\"padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container\" style=\"width:140px\"><svg fill=\"none\" viewBox=\"0 0 140 54\" aria-label=\"Local logo\"><path fill=\"currentColor\" d=\"M102.778 36.922c2.222 0 4.291-.852 6.026-2.465.091-.061.183-.183.274-.275.244-.273.213-.578.031-.882 0 0-.579-.944-.731-1.157-.152-.213-.274-.304-.456-.334-.213-.03-.427.09-.67.304-1.4 1.187-2.861 1.796-4.352 1.796-4.018 0-5.844-3.805-5.844-7.335 0-3.5 1.796-7.03 5.844-7.03 1.369 0 2.8.517 4.139 1.521.335.244.7.213.883-.091l.76-1.278c.244-.427.183-.7-.091-.974-.061-.061-.152-.152-.243-.213a8.77 8.77 0 0 0-5.57-1.948c-2.283 0-4.291.822-5.874 2.404-1.887 1.887-2.891 4.626-2.891 7.7 0 2.952.852 5.478 2.343 7.274 1.522 1.857 3.774 2.983 6.422 2.983ZM83.026 16.287c-5.083 0-8.887 4.352-8.887 10.135 0 5.934 3.804 10.408 8.887 10.408 5.052 0 8.856-4.474 8.856-10.408 0-5.753-3.804-10.135-8.856-10.135Zm0 17.47c-3.257 0-5.6-3.105-5.6-7.335 0-4.14 2.313-7.061 5.6-7.061 3.287 0 5.6 2.921 5.6 7.06 0 4.353-2.313 7.336-5.6 7.336ZM72.86 33.604h-7.212V17.23a.61.61 0 0 0-.609-.608h-1.978a.61.61 0 0 0-.609.608v18.718a.61.61 0 0 0 .609.608h9.8a.61.61 0 0 0 .608-.608v-1.735a.61.61 0 0 0-.608-.609ZM139.148 33.604h-7.213V17.23a.61.61 0 0 0-.609-.608h-1.978a.61.61 0 0 0-.609.608v18.718a.61.61 0 0 0 .609.608h9.8a.61.61 0 0 0 .608-.608v-1.735a.61.61 0 0 0-.608-.609ZM126.243 35.765l-6.087-18.687c-.091-.243-.304-.426-.578-.426h-2.039c-.244 0-.426.152-.517.365l-6.179 18.748a.6.6 0 0 0 .579.791h1.978c.274 0 .487-.182.578-.426l1.644-5.143h5.904l1.674 5.143c.091.244.304.426.578.426h1.857c.456 0 .73-.395.608-.79Zm-9.891-7.608 1.826-5.722c.152-.457.304-1.066.426-1.583.122.548.274 1.126.426 1.583l1.826 5.722h-4.504ZM25.326 11.052V2.247c0-.605-.394-1.15-.939-1.392-.544-.242-1.21-.09-1.633.333L3.147 20.795C1.059 22.883.06 24.91.03 27.028c0 2.118.969 4.115 3.026 6.172l19.698 19.698a1.42 1.42 0 0 0 1.059.454c.181 0 .393-.03.575-.182.574-.242.938-.786.938-1.391v-8.896c0-.393-.182-.787-.454-1.06L10.015 26.969 24.872 12.11a1.42 1.42 0 0 0 .454-1.059ZM22.3 43.55v4.629L7.958 33.836c-.06-.09-.121-.182-.212-.272-.454-.454-1.816-1.816.212-4.357L22.3 43.549Zm0-33.072L6.596 26.181c-1.21 1.21-2.027 2.48-2.45 3.721-.757-.998-1.12-1.936-1.12-2.844.03-1.27.756-2.632 2.239-4.115L22.3 5.908v4.57Z\"><\/path><path fill=\"currentColor\" d=\"M14.221 26.998v.12c0 .636.514 1.15 1.15 1.15h22.481a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15H15.371a1.15 1.15 0 0 0-1.15 1.15ZM18.548 22.61v.122c0 .635.514 1.15 1.15 1.15h13.797a1.15 1.15 0 0 0 1.15-1.15v-.122a1.15 1.15 0 0 0-1.15-1.15H19.698a1.15 1.15 0 0 0-1.15 1.15ZM29.229 19.464a1.15 1.15 0 0 0 1.15-1.15v-.121a1.15 1.15 0 0 0-1.15-1.15h-5.477a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.515 1.15 1.15 1.15h5.477ZM23.752 37.164h5.477a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15h-5.477a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.515 1.15 1.15 1.15ZM19.698 32.716h13.797a1.15 1.15 0 0 0 1.15-1.15v-.12a1.15 1.15 0 0 0-1.15-1.15H19.698a1.15 1.15 0 0 0-1.15 1.15v.12c0 .636.514 1.15 1.15 1.15Z\"><\/path><path fill=\"currentColor\" d=\"M50.379 20.916 30.68 1.218a1.486 1.486 0 0 0-1.634-.332 1.509 1.509 0 0 0-.938 1.391v8.926c0 .394.182.787.454 1.06l14.856 14.856-14.856 14.856a1.42 1.42 0 0 0-.454 1.06v8.804c0 .605.363 1.15.938 1.392.182.09.393.121.575.121.393 0 .756-.151 1.059-.424l19.607-19.606c2.088-2.088 3.086-4.115 3.116-6.234 0-2.117-.968-4.114-3.025-6.172ZM31.135 10.538v-4.63L45.477 20.25c.06.091.12.182.212.273.453.454 1.815 1.815-.212 4.357L31.135 10.538Zm17.004 20.605L31.105 48.178v-4.539l15.703-15.734c1.21-1.21 2.028-2.48 2.451-3.721.757.998 1.12 1.936 1.12 2.844-.03 1.27-.757 2.632-2.24 4.115Z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size wp-container-content-9cfa9a5a\" style=\"line-height:1.5\">The #1 local WordPress <br>development tool<\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-nowrap is-layout-flex wp-container-core-buttons-is-layout-b35f32a3 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button is-style-outline-base\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/wpeng.in\/local-builders\/\" style=\"border-radius:99px;padding-top:10px;padding-right:24px;padding-bottom:10px;padding-left:24px\" target=\"_blank\" rel=\"noreferrer noopener\">Download Free \u2192<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"activate-plugin\">Activate Plugin and Test Our Initial Progress<\/h3>\n\n\n\n<p>We&#8217;ve finished our first round of setting up and scaffolding our plugin.&nbsp; Let&#8217;s activate the Slider plugin in a WordPress development environment to ensure we can insert the Slider block in the editor.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d10321a07e0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d10321a07e0\" class=\"wp-block-image size-large is-style-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"655\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-block-scaffolded-1024x655.png\" alt=\"Slider block plugin and block scaffolded and inserted in the WordPress editor\" class=\"wp-image-31346\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-block-scaffolded-1024x655.png 1024w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-block-scaffolded-300x192.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-block-scaffolded-768x491.png 768w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-block-scaffolded.png 1241w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<p>It is always good to check your progress! Of course, there is not much to see, and we have a simple block with a blue background right now. This is what <code>@wordpress\/create-block<\/code> typically gives us to start.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"install-dependencies\">Install Our Dependencies<\/h3>\n\n\n\n<p>We want to install our project dependencies, including <code>swiper<\/code> (for SwiperJS, of course), <code>postcss-import<\/code>, and <code>postcss-preset-env<\/code>, which allows us to import SwiperJS&#8217;s CSS when it is time.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Our one-liner for installing our dependencies and developer dependencies.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"Bash\" data-shcb-language-slug=\"bash\"><span><code class=\"hljs language-bash shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>npm install --save swiper &amp;&amp; npm install --save-dev postcss-import postcss-preset-env\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">Bash<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">bash<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"configure-postcss\">Configure PostCSS<\/h4>\n\n\n\n<p>By default, when we created our WordPress plugin and the initial block with the <code>@wordpress\/create-block<\/code> package it installed <code>@wordpress\/scripts<\/code> as a <code>devDependency<\/code>. The <code>@wordpress\/scripts<\/code> package comes with a pre-configured webpack setup, which includes PostCSS. We need to extend the existing PostCSS configuration to recognize and handle the CSS <code>@import<\/code> statements that we&#8217;ll use to roll up all of SwiperJS&#8217;s CSS with any of our own.<\/p>\n\n\n\n<p>Be sure to create a new <code>postcss.config.js<\/code> file in the root of your plugin and place the following code within.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Our <code>postcss.config.js<\/code> file configures PostCSS to allow importing of Swiper&#8217;s CSS modules.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-built_in\">module<\/span>.exports = <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">const<\/span> config = {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">plugins<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-string\">'postcss-import'<\/span>: {},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-string\">'postcss-preset-env'<\/span>: {},\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t};\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> config;\n<\/span><\/span><span class='shcb-loc'><span>};\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>This will come in handy later when we update the <code>src\/styles.scss<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"concluding-initial-plugin-setup\">Verifying Our Initial Plugin Setup<\/h2>\n\n\n\n<p>We should now have our WordPress plugin, a Slider block, and our dependencies installed. Great!<\/p>\n\n\n\n<p>We&#8217;ll focus on extending our Slider block for the remainder of this tutorial. Be sure to start watching your block for changes and compiling them automatically in the background. You can do this by running <code>npm start<\/code>, which tells <code>@wordpress\/scripts<\/code> to watch our block for changes and compile them if anything is changed (to the <code>build\/<\/code> directory).<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-2f7aae84 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:4px;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color has-heliotrope-color\" style=\"color:#7a1ba6;width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M10.5 4v4h3V4H15v4h1.5a1 1 0 011 1v4l-3 4v2a1 1 0 01-1 1h-3a1 1 0 01-1-1v-2l-3-4V9a1 1 0 011-1H9V4h1.5zm.5 12.5v2h2v-2l3-4v-3H8v3l3 4z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size\">Check out the final codebase <a href=\"https:\/\/github.com\/colorful-tones\/slider-block\" target=\"_blank\" rel=\"noreferrer noopener\">Slider Blo<\/a><a href=\"https:\/\/wpeng.in\/6f8dce\/\" target=\"_blank\" rel=\"noreferrer noopener\">ck GitHub repo<\/a>. Feel free to <a href=\"https:\/\/github.com\/colorful-tones\/slider-block\/releases\" target=\"_blank\" rel=\"noreferrer noopener\">download the final pl<\/a><a href=\"https:\/\/wpeng.in\/57f827\/\" target=\"_blank\" rel=\"noreferrer noopener\">ugin<\/a> or fork the repo and make it all your own.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"planning-block-customizations\">Planning Our Block Customizations<\/h2>\n\n\n\n<p>When you&#8217;re getting ready to create a custom block, planning what you&#8217;ll need and what already exists that you can leverage is ideal.<\/p>\n\n\n\n<p>We want to allow users to add a Slider block to the editor and automatically have it populated with example slides. We will utilize WordPress&#8217;s existing <a href=\"https:\/\/wordpress.org\/documentation\/article\/cover-block\/\" target=\"_blank\" rel=\"noreferrer noopener\">Cover block<\/a> to represent our slides. This gives us existing affordances like image attachment, overlay colors, and nesting of additional blocks (Columns, Buttons, Headings, and many more).<\/p>\n\n\n\n<p>With this in mind, we&#8217;ll update our slider block&#8217;s <code>block.json<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"extending-slider-block\">Extending the Slider Block<\/h2>\n\n\n\n<p>We&#8217;ll open the Slider block&#8217;s <code>block.json<\/code> file and update the overall block&#8217;s definitions.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">The Slider block&#8217;s<code>src\/block.json<\/code> file is where we extend definitions for the overall block.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"$schema\"<\/span>: <span class=\"hljs-string\">\"https:\/\/schemas.wp.org\/trunk\/block.json\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"apiVersion\"<\/span>: <span class=\"hljs-number\">3<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"name\"<\/span>: <span class=\"hljs-string\">\"wpe\/slider\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"title\"<\/span>: <span class=\"hljs-string\">\"Slider\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"category\"<\/span>: <span class=\"hljs-string\">\"widgets\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"description\"<\/span>: <span class=\"hljs-string\">\"Display your images in a horizontal carousel.\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"icon\"<\/span>: <span class=\"hljs-string\">\"slides\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"keywords\"<\/span>: &#91;<span class=\"hljs-string\">\"carousel\"<\/span>, <span class=\"hljs-string\">\"slideshow\"<\/span>],\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"attributes\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"autoplay\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"boolean\"<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"default\"<\/span>: <span class=\"hljs-literal\">true<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"navigation\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"boolean\"<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"default\"<\/span>: <span class=\"hljs-literal\">true<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"pagination\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"type\"<\/span>: <span class=\"hljs-string\">\"boolean\"<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"default\"<\/span>: <span class=\"hljs-literal\">true<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t}\n<\/span><\/mark><mark class='shcb-loc'><span>\t},\n<\/span><\/mark><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"example\"<\/span>: {},\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"supports\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"html\"<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"align\"<\/span>: &#91;<span class=\"hljs-string\">\"wide\"<\/span>, <span class=\"hljs-string\">\"full\"<\/span>],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"className\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"color\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"background\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"gradients\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"link\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"text\"<\/span>: <span class=\"hljs-literal\">true<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">\"spacing\"<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"padding\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">\"margin\"<\/span>: &#91;<span class=\"hljs-string\">\"top\"<\/span>, <span class=\"hljs-string\">\"bottom\"<\/span>]\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t}\n<\/span><\/mark><mark class='shcb-loc'><span>\t},\n<\/span><\/mark><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"textdomain\"<\/span>: <span class=\"hljs-string\">\"wpe\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"version\"<\/span>: <span class=\"hljs-string\">\"0.1.0\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"editorScript\"<\/span>: <span class=\"hljs-string\">\"file:.\/index.js\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"editorStyle\"<\/span>: <span class=\"hljs-string\">\"file:.\/index.css\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"render\"<\/span>: <span class=\"hljs-string\">\"file:.\/render.php\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"style\"<\/span>: <span class=\"hljs-string\">\"file:.\/style-index.css\"<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">\"viewScript\"<\/span>: <span class=\"hljs-string\">\"file:.\/view.js\"<\/span>\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>We&#8217;re defining some new <code>attributes<\/code> for the Slider block, which we&#8217;ll use to allow users to choose whether they want certain features assigned to each Slider block. In our case, we&#8217;ll let them toggle whether the slider should autoplay and have navigation or pagination. Check out <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-attributes\/\" target=\"_blank\" rel=\"noreferrer noopener\">this Block API Reference<\/a> if you want to dig deeper into how attributes work.<\/p>\n\n\n\n<p>We also want our Slider block to opt into certain features that WordPress offers blocks, like alignment, colors, and spacing. This is why we&#8217;re defining <code>supports<\/code> in our <code>block.json<\/code>. Be sure to check out the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-supports\/\" target=\"_blank\" rel=\"noreferrer noopener\">complete list of Block Supports<\/a> and consider extending what is here to offer additional features.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"import-swiperjs-default-object\">Import SwiperJS and Create a Default Object<\/h3>\n\n\n\n<p>We&#8217;re going to try to keep things organized (why not). Let&#8217;s import all of our SwiperJS dependencies and create a simple default SwiperJS object that we can utilize in both our editor (back-end) and front-end views.<\/p>\n\n\n\n<p>Create a new <code>src\/swiper-init.js<\/code> file.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">We&#8217;re importing all of our Swiper JavaScript core and module dependencies and setting up a default object, which we can later use in multiple contexts.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Swiper dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@see <\/span>https:\/\/swiperjs.com\/get-started<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Swiper } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'swiper'<\/span>;\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Autoplay, Keyboard, Navigation, Pagination } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'swiper\/modules'<\/span>;\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Initialize the slider.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @param {Element} container HTMLElement.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @param {Object}  options   Slider parameters.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @return {Object} Returns initialized slider instance.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @see https:\/\/swiperjs.com\/swiper-api#parameters<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">SwiperInit<\/span>(<span class=\"hljs-params\"> container, options = {} <\/span>) <\/span>{\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">const<\/span> parameters = {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">autoplay<\/span>: options?.autoplay ?? <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">centeredSlides<\/span>: options?.centerSlides ?? <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">createElements<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">grabCursor<\/span>: options?.grabCursor ?? <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">initialSlide<\/span>: <span class=\"hljs-number\">0<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">keyboard<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">modules<\/span>: &#91; Autoplay, Keyboard, Navigation, Pagination ],\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">navigation<\/span>: options?.navigation ?? <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">pagination<\/span>: options?.pagination ?? <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">simulateTouch<\/span>: options?.simulateTouch ?? <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-keyword\">new<\/span> Swiper( container, parameters );\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>We&#8217;re importing Swiper and some key Swiper modules at the top of the <code>swiper-init.js<\/code> file, and then we&#8217;re exporting our <code>SwiperInit()<\/code> function, which contains some defaults for us to return a <code>new Swiper()<\/code> instance.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"import-swiperjs-css\">Import SwiperJS CSS Styling<\/h3>\n\n\n\n<p>We&#8217;ll want to pull in SwiperJS&#8217;s CSS as well, which is critical to allowing the slider to slide.<\/p>\n\n\n\n<p>Open up the existing <code>src\/style.scss<\/code> and replace it with the following.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">We&#8217;re importing our Swiper CSS dependencies and applying some of our own styles in <code>src\/style.scss<\/code><\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-code-table shcb-line-numbers\"><mark class='shcb-loc'><span><span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"swiper\/css\"<\/span>;\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"swiper\/css\/a11y\"<\/span>;\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"swiper\/css\/autoplay\"<\/span>;\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"swiper\/css\/navigation\"<\/span>;\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"swiper\/css\/pagination\"<\/span>;\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-selector-class\">.wp-block-wpe-slider<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-theme-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--wp--preset--color--accent, var(--wp--preset--color--primary));\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-navigation-size<\/span>: <span class=\"hljs-number\">48px<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-navigation-color<\/span>: <span class=\"hljs-built_in\">var<\/span>(--swiper-theme-color);\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-horizontal-gap<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-vertical-gap<\/span>: <span class=\"hljs-number\">0.25rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-size<\/span>: <span class=\"hljs-number\">0.75rem<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-opacity<\/span>: <span class=\"hljs-number\">1<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-inactive-color<\/span>: black;\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attribute\">--swiper-pagination-bullet-inactive-opacity<\/span>: .<span class=\"hljs-number\">2<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>Remember, we set up a custom <code>postcss.config.js<\/code> file earlier? This was critical to allow the <code>@wordpress\/scripts<\/code> dependency, which we&#8217;re using to watch and build our final blocks, to be able to recognize and inspect dependencies from our install <code>node_modules<\/code> directory. This allows us to pull our CSS dependencies from our install <code>swiper<\/code> dependency.<\/p>\n\n\n\n<p>Of course, this file is watched and pulled in as a dependency through the <code>src\/index.js<\/code> file. Open it up, and you&#8217;ll see the existing <code>import '.\/style.scss';<\/code> near the top. Ultimately, this file is compiled and written to the final <code>build\/style-index.css<\/code> and defined as a dependency in the Slider&#8217;s <code>block.json<\/code> file (via the <code>\"style\"<\/code>). This tells WordPress to load the CSS in both the editor and the front end.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-constant-file\">Create a New <code>constants.js<\/code> File<\/h3>\n\n\n\n<p>I prefer to keep some key variables in a separate <code>constants.js<\/code> file. This allows fellow developers to quickly open it up and change key parameters for our final slider (if they choose to \ud83d\ude09).<\/p>\n\n\n\n<p>Let&#8217;s create a new <code>constants.js<\/code> file and place the following code.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">We&#8217;re defining key variables in a new <code>src\/constants.js<\/code> file. We&#8217;ll reference these later in the <code>src\/slider.js<\/code> file.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * These are the block we'll allow to be inserted<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * as a slide.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> ALLOWED_BLOCKS = &#91; <span class=\"hljs-string\">'core\/cover'<\/span> ];\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * This is the default block we'll use for our slide.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> DEFAULT_BLOCK = <span class=\"hljs-string\">'core\/cover'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * These are the attributes we assign for our DEFAULT_BLOCK.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> DEFAULT_BLOCK_ATTRIBUTES = {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">align<\/span>: <span class=\"hljs-string\">'center'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">className<\/span>: <span class=\"hljs-string\">'swiper-slide'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">contentPosition<\/span>: <span class=\"hljs-string\">'bottom left'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">customOverlayColor<\/span>: <span class=\"hljs-string\">'#000000'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">dimRatio<\/span>: <span class=\"hljs-number\">20<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">layout<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">'constrained'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t},\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">style<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">color<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">elements<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">heading<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">color<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">link<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">color<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">spacing<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">padding<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">top<\/span>: <span class=\"hljs-string\">'var:preset|spacing|large'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">bottom<\/span>: <span class=\"hljs-string\">'var:preset|spacing|large'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">left<\/span>: <span class=\"hljs-string\">'var:preset|spacing|large'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">right<\/span>: <span class=\"hljs-string\">'var:preset|spacing|large'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t},\n<\/span><\/span><span class='shcb-loc'><span>};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * These are the default inner blocks we'll use<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * when our DEFAULT_BLOCK is inserted.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> DEFAULT_INNERBLOCK = <span class=\"hljs-string\">'core\/paragraph'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * These are the attributes we assign for our default<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * inner blocks.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> DEFAULT_INNERBLOCK_ATTRIBUTES = {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">fontSize<\/span>: <span class=\"hljs-string\">'large'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">style<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-attr\">color<\/span>: {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">text<\/span>: <span class=\"hljs-string\">'#ffffff'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t},\n<\/span><\/span><span class='shcb-loc'><span>};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Some default Unsplash images...<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * (feel free to replace)<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> PLACEHOLDER_IMG_1 = <span class=\"hljs-string\">'https:\/\/source.unsplash.com\/kdl8xDDD6iA'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> PLACEHOLDER_IMG_2 = <span class=\"hljs-string\">'https:\/\/source.unsplash.com\/cRUZICCU_Xg'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> PLACEHOLDER_IMG_3 = <span class=\"hljs-string\">'https:\/\/source.unsplash.com\/lUF3cqG6n7s'<\/span>;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>We&#8217;ll reference these in our <code>Slider<\/code> function-based component.<\/p>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-2f7aae84 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:4px;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color has-heliotrope-color\" style=\"color:#7a1ba6;width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m21.5 9.1-6.6-6.6-4.2 5.6c-1.2-.1-2.4.1-3.6.7-.1 0-.1.1-.2.1-.5.3-.9.6-1.2.9l3.7 3.7-5.7 5.7v1.1h1.1l5.7-5.7 3.7 3.7c.4-.4.7-.8.9-1.2.1-.1.1-.2.2-.3.6-1.1.8-2.4.6-3.6l5.6-4.1zm-7.3 3.5.1.9c.1.9 0 1.8-.4 2.6l-6-6c.8-.4 1.7-.5 2.6-.4l.9.1L15 4.9 19.1 9l-4.9 3.6z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size\">Are you new to WordPress block development? Perhaps, you&#8217;re a seasoned developer and need to brush up on key concepts. Check out <a href=\"https:\/\/developer.wordpress.org\/block-editor\/getting-started\/create-block\/block-anatomy\/\" target=\"_blank\" rel=\"noreferrer noopener\">Anatomy of a Block<\/a>.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"edit-function\">Define the Slider <code>Edit<\/code> Function<\/h3>\n\n\n\n<p>The <code>edit.js<\/code> file is where we establish all the state and logic for everything the user will see and interact with in the editor.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Add Imports<\/h4>\n\n\n\n<p>First, let&#8217;s start by adding all of our <code>@import<\/code> statements at the top. These include all of our WordPress dependencies, followed by our <code>Slider<\/code> component (we&#8217;ll create this next) and our <code>editor.scss<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">At the beginning of our <code>src\/edit.js<\/code> file where we start importing all of our dependencies.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * WordPress dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\tuseBlockProps,\n<\/span><\/span><span class='shcb-loc'><span>\tuseBlockEditContext,\n<\/span><\/span><span class='shcb-loc'><span>\tInspectorControls,\n<\/span><\/span><span class='shcb-loc'><span>} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/block-editor'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { PanelBody, PanelRow, ToggleControl } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/components'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { __ } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/i18n'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Internal Dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { Slider } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/slider'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/\/ Editor styling.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/editor.scss'<\/span>;\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Define the Main <code>Edit<\/code> Function<\/h4>\n\n\n\n<p>We&#8217;re going to define our primary <code>Edit<\/code> function next, which you can place right after all your imports in the <code>edit.js<\/code> file.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">We&#8217;re defining our main <code>Edit<\/code> function, which references some components we still need to create but will soon.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * The edit function describes the structure of your block in the context of the<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * editor. This represents what the editor will render when the block is used.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@see <\/span>https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-edit-save\/#edit<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@param <span class=\"hljs-type\">{Object}<\/span>   <\/span>props               Properties passed to the function.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"> * <span class=\"hljs-doctag\">@param <span class=\"hljs-type\">{Object}<\/span>   <\/span>props.attributes    Available block attributes.<\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"> * <span class=\"hljs-doctag\">@param <span class=\"hljs-type\">{Function}<\/span> <\/span>props.setAttributes Function that updates individual attributes.<\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"> *<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"> * <span class=\"hljs-doctag\">@return <span class=\"hljs-type\">{Element}<\/span> <\/span>Element to render.<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"> *\/<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Edit<\/span>(<span class=\"hljs-params\"> { attributes, setAttributes } <\/span>) <\/span>{<\/span><\/span><\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\">\t<span class=\"hljs-keyword\">const<\/span> { autoplay, navigation, pagination } = attributes;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\">\t<span class=\"hljs-keyword\">const<\/span> { clientId } = useBlockEditContext();<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\">\t<span class=\"hljs-keyword\">const<\/span> blockProps = useBlockProps();<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\">\t<span class=\"hljs-keyword\">return<\/span> (<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\">\t\t<span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> { <span class=\"hljs-attr\">...blockProps<\/span> }&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Slider<\/span> <span class=\"hljs-attr\">attributes<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">attributes<\/span> } <span class=\"hljs-attr\">clientId<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">clientId<\/span> } \/&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">InspectorControls<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PanelBody<\/span> <span class=\"hljs-attr\">title<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">__<\/span>( '<span class=\"hljs-attr\">Settings<\/span>', '<span class=\"hljs-attr\">wpe<\/span>' ) }&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ToggleControl<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">__<\/span>( '<span class=\"hljs-attr\">Autoplay<\/span>', '<span class=\"hljs-attr\">wpe<\/span>' ) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">checked<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">autoplay<\/span> }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{<\/span> ( <span class=\"hljs-attr\">value<\/span> ) =&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\tsetAttributes( { autoplay: value } )<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\thelp={ __(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\t'\u201cAutoplay\u201d will automatically advance the slides. Note: this is intentionally disabled in the editor, but will affect the front end.'<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\/&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ToggleControl<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">__<\/span>( '<span class=\"hljs-attr\">Navigation<\/span>', '<span class=\"hljs-attr\">wpe<\/span>' ) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">checked<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">navigation<\/span> }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{<\/span> ( <span class=\"hljs-attr\">value<\/span> ) =&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\tsetAttributes( { navigation: value } )<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\thelp={ __(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\t'\u201cNavigation\u201d will display arrows so user can navigate forward\/backward.'<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\/&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ToggleControl<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">label<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">__<\/span>( '<span class=\"hljs-attr\">Pagination<\/span>', '<span class=\"hljs-attr\">wpe<\/span>' ) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">checked<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">pagination<\/span> }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t<span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{<\/span> ( <span class=\"hljs-attr\">value<\/span> ) =&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\tsetAttributes( { pagination: value } )<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\thelp={ __(<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t\t'\u201cPagination\u201d will display dots along the bottom for user to click through slides.'<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\t) }<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t\t\/&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">PanelRow<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">PanelBody<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">InspectorControls<\/span>&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t<span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t);<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-doctag\"><span class=\"hljs-function\"><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">}<\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>A lot is happening here; we&#8217;ll step through it piece by piece.<\/p>\n\n\n\n<p>In our <code>Edit<\/code> function, we&#8217;re passing down our block&#8217;s attributes for navigation, pagination, and autoplay (line 14). The <code>Edit<\/code> function has a built-in function <code>setAttributes<\/code>, which allows us to update attribute values conveniently.<\/p>\n\n\n\n<p>We&#8217;re using WordPress&#8217;s handy <code>PanelBody<\/code>, <code>PanelRow<\/code>, and <code>ToggleControl<\/code> components (near the bottom) to allow users to toggle these features on and off in the editor. Again, we imported these in the previous code snippet placed at the top of the file.<\/p>\n\n\n\n<p>The <code>Slider<\/code> component will represent the actual markup for our SwiperJS-driven slider. Let&#8217;s get that set up next.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"slider-component-userefeffect\">Custom Slider Component with <code>useRefEffect<\/code><\/h3>\n\n\n\n<p>We&#8217;re calling the <code>Slider<\/code> component within our <code>Edit<\/code> function, which we still need to create. Create a new file called <code>slider.js<\/code> and place the following code.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Our <code>Slider<\/code> component uses memoization to cache our <code>sliderRef<\/code>, which we use to instantiate Swiper.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * WordPress dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\tstore <span class=\"hljs-keyword\">as<\/span> blockEditorStore,\n<\/span><\/span><span class='shcb-loc'><span>\tButtonBlockAppender,\n<\/span><\/span><span class='shcb-loc'><span>\tuseInnerBlocksProps,\n<\/span><\/span><span class='shcb-loc'><span>} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/block-editor'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { useRefEffect } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/compose'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { select, subscribe } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/data'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { memo } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/element'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { __ } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/i18n'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Internal Dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { SwiperInit } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/swiper-init'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\tALLOWED_BLOCKS,\n<\/span><\/span><span class='shcb-loc'><span>\tDEFAULT_BLOCK,\n<\/span><\/span><span class='shcb-loc'><span>\tDEFAULT_BLOCK_ATTRIBUTES,\n<\/span><\/span><span class='shcb-loc'><span>\tDEFAULT_INNERBLOCK,\n<\/span><\/span><span class='shcb-loc'><span>\tDEFAULT_INNERBLOCK_ATTRIBUTES,\n<\/span><\/span><span class='shcb-loc'><span>\tPLACEHOLDER_IMG_1,\n<\/span><\/span><span class='shcb-loc'><span>\tPLACEHOLDER_IMG_2,\n<\/span><\/span><span class='shcb-loc'><span>\tPLACEHOLDER_IMG_3,\n<\/span><\/span><span class='shcb-loc'><span>} <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/constants'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Slider component.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">const<\/span> Slider = memo( <span class=\"hljs-function\">(<span class=\"hljs-params\"> { clientId, attributes } <\/span>) =&gt;<\/span> {\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-keyword\">const<\/span> sliderRef = useRefEffect( <span class=\"hljs-function\">(<span class=\"hljs-params\"> element <\/span>) =&gt;<\/span> {\n<\/span><\/mark><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">const<\/span> options = {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t...attributes,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t...{\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">autoplay<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">grabCursor<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">simulateTouch<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t},\n<\/span><\/span><span class='shcb-loc'><span>\t\t};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-comment\">\/\/ Initialize slider.<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">let<\/span> slider = SwiperInit( element, options );\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-comment\">\/\/ Store the current slide order to detect changes, such as adding, removing, or reordering slides.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">let<\/span> slideOrder = select( blockEditorStore ).getBlockOrder( clientId );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-comment\">\/\/ Subscribe slider update events like adding, removing, or reordering slides.<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">const<\/span> unsubscribeSliderUpdateListener = subscribe( <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n<\/span><\/mark><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-keyword\">const<\/span> currentSlidesOrder =\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\tselect( blockEditorStore ).getBlockOrder( clientId );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-comment\">\/\/ Check if the slider has been changed.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-keyword\">if<\/span> ( currentSlidesOrder.toString() !== slideOrder.toString() ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-keyword\">const<\/span> selectedBlock =\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tselect( blockEditorStore ).getSelectedBlock();\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-keyword\">const<\/span> slideAdded =\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tcurrentSlidesOrder.length &gt; slideOrder.length;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-keyword\">const<\/span> slideRemoved =\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tcurrentSlidesOrder.length &lt; slideOrder.length;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-keyword\">const<\/span> slideMoved =\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tcurrentSlidesOrder.length === slideOrder.length;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-keyword\">const<\/span> activeIndex = slider.activeIndex;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-comment\">\/\/ Store the current slide order before destroying the slider instance.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\tslideOrder = currentSlidesOrder;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\tslider.destroy();\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-built_in\">window<\/span>.requestAnimationFrame( <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-comment\">\/\/ Initialize slider.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tslider = SwiperInit( element, options );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-comment\">\/\/ Determine where the slider should go.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-keyword\">let<\/span> slideToIndex = activeIndex;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-keyword\">if<\/span> ( slideAdded ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\tslideToIndex = slideOrder.length;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t} <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> ( slideRemoved ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\tslideToIndex = activeIndex - <span class=\"hljs-number\">1<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t} <span class=\"hljs-keyword\">else<\/span> <span class=\"hljs-keyword\">if<\/span> ( slideMoved ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\tslideToIndex = slideOrder.findIndex(\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\t\t<span class=\"hljs-function\">(<span class=\"hljs-params\"> clientId <\/span>) =&gt;<\/span> clientId === selectedBlock.clientId <span class=\"hljs-comment\">\/\/ eslint-disable-line no-shadow<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\t);\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-keyword\">if<\/span> ( slideToIndex &lt; <span class=\"hljs-number\">0<\/span> ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t\tslideToIndex = <span class=\"hljs-number\">0<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t\tslider.slideTo( slideToIndex, <span class=\"hljs-number\">0<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t\t} );\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\t\t} );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-function\"><span class=\"hljs-params\">()<\/span> =&gt;<\/span> {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\tunsubscribeSliderUpdateListener();\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\tslider.destroy();\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t};\n<\/span><\/mark><span class='shcb-loc'><span>\t} );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/\/ Our nested innerblocks that will be inserted by default.<\/span>\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-keyword\">const<\/span> innerBlocksProps = useInnerBlocksProps(\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t{ <span class=\"hljs-attr\">className<\/span>: <span class=\"hljs-string\">'swiper-wrapper'<\/span> },\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t{\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">allowedBlocks<\/span>: ALLOWED_BLOCKS,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">defaultBlock<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">name<\/span>: DEFAULT_BLOCK,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t<span class=\"hljs-attr\">attributes<\/span>: {\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t<span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${ PLACEHOLDER_IMG_3 }<\/span>`<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t...DEFAULT_BLOCK_ATTRIBUTES,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">directInsert<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">orientation<\/span>: <span class=\"hljs-string\">'horizontal'<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">template<\/span>: &#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\tDEFAULT_BLOCK,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t{\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t<span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${ PLACEHOLDER_IMG_1 }<\/span>`<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t...DEFAULT_BLOCK_ATTRIBUTES,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\tDEFAULT_INNERBLOCK,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t{\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t\t<span class=\"hljs-attr\">placeholder<\/span>: __( <span class=\"hljs-string\">'Slide title\u2026'<\/span>, <span class=\"hljs-string\">'wpe'<\/span> ),\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t\t...DEFAULT_INNERBLOCK_ATTRIBUTES,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\tDEFAULT_BLOCK,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t{\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t<span class=\"hljs-attr\">url<\/span>: <span class=\"hljs-string\">`<span class=\"hljs-subst\">${ PLACEHOLDER_IMG_2 }<\/span>`<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t...DEFAULT_BLOCK_ATTRIBUTES,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t&#91;\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\tDEFAULT_INNERBLOCK,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t{\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t\t<span class=\"hljs-attr\">placeholder<\/span>: __( <span class=\"hljs-string\">'Slide title\u2026'<\/span>, <span class=\"hljs-string\">'wpe'<\/span> ),\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t\t...DEFAULT_INNERBLOCK_ATTRIBUTES,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t\t},\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t],\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">renderAppender<\/span>: <span class=\"hljs-literal\">false<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t\t<span class=\"hljs-attr\">templateInsertUpdatesSelection<\/span>: <span class=\"hljs-literal\">true<\/span>,\n<\/span><\/mark><mark class='shcb-loc'><span>\t\t}\n<\/span><\/mark><mark class='shcb-loc'><span>\t);\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> (\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"xml\"><span class=\"hljs-tag\">&lt;&gt;<\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"xml\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"swiper\"<\/span> <span class=\"hljs-attr\">ref<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">sliderRef<\/span> }&gt;<\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> { <span class=\"hljs-attr\">...innerBlocksProps<\/span> } \/&gt;<\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span><\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><\/span><\/span><\/span><\/span>\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ButtonBlockAppender<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">\"slider-appender has-icon\"<\/span><\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\t<span class=\"hljs-attr\">rootClientId<\/span>=<span class=\"hljs-string\">{<\/span> <span class=\"hljs-attr\">clientId<\/span> }<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t\t\/&gt;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t\t<span class=\"hljs-tag\">&lt;\/&gt;<\/span><\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">\t);<\/span><\/span><\/span><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"xml\"><span class=\"hljs-tag\"><span class=\"hljs-tag\"><span class=\"hljs-tag\">} );<\/span><\/span><\/span><\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>This is a rather large and complex component that encompasses a lot of functionality. So, let&#8217;s break it down.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Line 5<\/strong> \u2013 We&#8217;re utilizing the <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-compose\/#userefeffect\"><code>useRefEffect<\/code>  dependency<\/a> from the <code>@wordpress\/compose<\/code> package. This is similar to React&#8217;s <code>useEffect<\/code>, but it allows for a callback when a dependency changes.<\/li>\n\n\n\n<li><strong>Line 44<\/strong> \u2013 We grab our SwiperJS default object and initialize our slider.<\/li>\n\n\n\n<li><strong>Line 21-66<\/strong> \u2013 We&#8217;re utilizing <a href=\"https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/packages\/packages-data\/\" target=\"_blank\" rel=\"noreferrer noopener\"><code>@wordpress\/data<\/code> package&#8217;s<\/a> <code>subscribe()<\/code> listener function to watch for state changes and merge the state with our newly instantiated SwiperJS element. This allows us to tell SwiperJS when new slides are shifted around.<\/li>\n\n\n\n<li><strong>Line 95-98<\/strong> \u2013 We&#8217;re performing some cleanup for our SwiperJS instance. <\/li>\n\n\n\n<li><strong>Line 102-152<\/strong> \u2013 This is where we pass in all of our inner block definitions, which will automatically populate the slider when it is inserted with some core blocks.<\/li>\n\n\n\n<li>Finally, we return our components. We have two main components we&#8217;re adding here:\n<ul class=\"wp-block-list\">\n<li>Our Swiper element, which we assign our <code>ref<\/code> to and pass down the <code>innerBlockProps<\/code> with our block <code>template<\/code>.<\/li>\n\n\n\n<li><code>ButtonBlockAppender<\/code> \u2013 This is another useful component of the <code>@wordpress\/block-editor<\/code> package, which allows us to append a button for users to click and add a slide along the bottom of the Slider. <\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69d10321a32ce&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69d10321a32ce\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"823\" height=\"709\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-wire.png\" alt=\"Slider block with ButtonBlockAppender highlighted\" class=\"wp-image-31351\" style=\"border-radius:8px\" srcset=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-wire.png 823w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-wire-300x258.png 300w, https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/slider-wire-768x662.png 768w\" sizes=\"auto, (max-width: 823px) 100vw, 823px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-2f7aae84 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:4px;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color has-heliotrope-color\" style=\"color:#7a1ba6;width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"m21.5 9.1-6.6-6.6-4.2 5.6c-1.2-.1-2.4.1-3.6.7-.1 0-.1.1-.2.1-.5.3-.9.6-1.2.9l3.7 3.7-5.7 5.7v1.1h1.1l5.7-5.7 3.7 3.7c.4-.4.7-.8.9-1.2.1-.1.1-.2.2-.3.6-1.1.8-2.4.6-3.6l5.6-4.1zm-7.3 3.5.1.9c.1.9 0 1.8-.4 2.6l-6-6c.8-.4 1.7-.5 2.6-.4l.9.1L15 4.9 19.1 9l-4.9 3.6z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size\">Creating block <code>template<\/code> arrays can be tricky. It is usually best to block it all out in the editor, switch to code view, copy and paste the necessary code markup, and utilize the handy&nbsp;<a href=\"https:\/\/happyprime.github.io\/wphtml-converter\/\" target=\"_blank\" rel=\"noreferrer noopener\">WPHTML Converter<\/a>&nbsp;to convert your markup into JavaScript or PHP.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"define-save-function\">Define the Slider <code>save<\/code> Function<\/h3>\n\n\n\n<p>We need to establish our saving logic for our overall slider block. Remember, we have set the <code>Edit<\/code> logic, but we still need to ensure our block&#8217;s final markup and properties are saved in the <code>post_content<\/code> for retrieval and further editing.<\/p>\n\n\n\n<p>We can accomplish this by adding <code>save.js<\/code> to our slider block and adding the following code.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">We need to add our <code>save<\/code> function to save our final slider block markup to <code>post_content<\/code>. Create a new file: <code>src\/save.js<\/code><\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * WordPress dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { InnerBlocks } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/block-editor'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * The save function defines the way in which the different attributes should<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * be combined into the final markup, which is then serialized by the block<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * editor into `post_content`.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @see https:\/\/developer.wordpress.org\/block-editor\/developers\/block-api\/block-edit-save\/#save<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @return {Element} Element to render.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Save<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-keyword\">return<\/span> <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">InnerBlocks.Content<\/span> \/&gt;<\/span><\/span>;\n<\/span><\/mark><span class='shcb-loc'><span>}\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>We&#8217;re leveraging WordPress&#8217;s <code>InnerBlocks<\/code> component to return our saved slider content. Then we have to make sure we import our saving file within our block&#8217;s entry point: <code>src\/index.js<\/code><\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Modify the existing <code>src\/index.js<\/code> to <code>import<\/code> our <code>save<\/code> function and return it within the <code>registerBlockType()<\/code> handler.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Registers a new block provided a unique name and an object defining its behavior.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@see <\/span>https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { registerBlockType } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'@wordpress\/blocks'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * All files containing `style` keyword are bundled together. The code used<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * gets applied both to the front of your site and to the editor.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @see https:\/\/www.npmjs.com\/package\/@wordpress\/scripts#using-css<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-string\">'.\/style.scss'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Internal dependencies<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> Edit <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/edit'<\/span>;\n<\/span><\/span><mark class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> save <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/save'<\/span>;\n<\/span><\/mark><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> metadata <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/block.json'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Every block starts by registering a new block type definition.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * @see https:\/\/developer.wordpress.org\/block-editor\/reference-guides\/block-api\/block-registration\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>registerBlockType( metadata.name, {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\t * <span class=\"hljs-doctag\">@see <\/span>.\/edit.js<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\t *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-attr\">edit<\/span>: Edit,\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\">\t * <span class=\"hljs-doctag\">@see <\/span>.\/save.js<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span><span class=\"hljs-comment\">\t *\/<\/span>\n<\/span><\/mark><mark class='shcb-loc'><span>\tsave,\n<\/span><\/mark><span class='shcb-loc'><span>} );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"render-logic\">Define the <code>render.php<\/code> Display Logic<\/h3>\n\n\n\n<p>We must establish our final display logic for the block, which visitors will see for the end product. This is all handled within the block\u2019s <code>render.php<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">The <code>src\/render.php<\/code> file is where we handle our final display logic.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-meta\">&lt;?php<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Slider block<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@var<\/span> array     $attributes Block attributes.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@var<\/span> string    $content    Block default content.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * <span class=\"hljs-doctag\">@var<\/span> \\WP_Block $block      Block instance.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>$autoplay   = <span class=\"hljs-keyword\">empty<\/span>( $attributes&#91;<span class=\"hljs-string\">'autoplay'<\/span>] ) ? <span class=\"hljs-keyword\">false<\/span> : $attributes&#91;<span class=\"hljs-string\">'autoplay'<\/span>];\n<\/span><\/span><span class='shcb-loc'><span>$navigation = <span class=\"hljs-keyword\">empty<\/span>( $attributes&#91;<span class=\"hljs-string\">'navigation'<\/span>] ) ? <span class=\"hljs-keyword\">false<\/span> : $attributes&#91;<span class=\"hljs-string\">'navigation'<\/span>];\n<\/span><\/span><span class='shcb-loc'><span>$pagination = <span class=\"hljs-keyword\">empty<\/span>( $attributes&#91;<span class=\"hljs-string\">'pagination'<\/span>] ) ? <span class=\"hljs-keyword\">false<\/span> : $attributes&#91;<span class=\"hljs-string\">'pagination'<\/span>];\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>$swiper_attr = <span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">'autoplay'<\/span>   =&gt; $autoplay,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">'navigation'<\/span> =&gt; $navigation,\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-string\">'pagination'<\/span> =&gt; $pagination,\n<\/span><\/span><span class='shcb-loc'><span>);\n<\/span><\/span><span class='shcb-loc'><span>$swiper_attr = htmlspecialchars( wp_json_encode( $swiper_attr ) );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>$wrapper_attributes = get_block_wrapper_attributes(\n<\/span><\/mark><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">array<\/span>(\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-string\">'class'<\/span> =&gt; <span class=\"hljs-string\">'swiper'<\/span>,\n<\/span><\/span><span class='shcb-loc'><span>\t)\n<\/span><\/span><span class='shcb-loc'><span>);\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-meta\">?&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><mark class='shcb-loc'><span>&lt;div <span class=\"hljs-meta\">&lt;?php<\/span> <span class=\"hljs-keyword\">echo<\/span> wp_kses_data( $wrapper_attributes ) . <span class=\"hljs-string\">'data-swiper=\"'<\/span> . esc_attr( $swiper_attr ) . <span class=\"hljs-string\">'\"'<\/span>; <span class=\"hljs-meta\">?&gt;<\/span>&gt;\n<\/span><\/mark><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t&lt;div <span class=\"hljs-class\"><span class=\"hljs-keyword\">class<\/span>=\"<span class=\"hljs-title\">swiper<\/span>-<span class=\"hljs-title\">wrapper<\/span>\"&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-class\">\t\t&lt;?<span class=\"hljs-title\">php<\/span> <span class=\"hljs-title\">echo<\/span> $<span class=\"hljs-title\">content<\/span>; \/\/ <span class=\"hljs-title\">phpcs<\/span>:<span class=\"hljs-title\">ignore<\/span> <span class=\"hljs-title\">WordPress<\/span>.<span class=\"hljs-title\">Security<\/span>.<span class=\"hljs-title\">EscapeOutput<\/span>.<span class=\"hljs-title\">OutputNotEscaped<\/span> ?&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-class\">\t&lt;\/<span class=\"hljs-title\">div<\/span>&gt;<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-class\"><\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-class\">&lt;\/<span class=\"hljs-title\">div<\/span>&gt;&lt;!-- .<span class=\"hljs-title\">swiper<\/span> --&gt;<\/span>\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<p>In the code above, we&#8217;re checking for our <code>$autoplay<\/code>, <code>$navigation<\/code>, <code>$pagination<\/code> settings and assigning them as data attributes to our final <code>&lt;div&gt;<\/code> . It is crucial to merge these properties with <code><a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/get_block_wrapper_attributes\/\" target=\"_blank\" rel=\"noreferrer noopener\">get_block_wrapper_attributes()<\/a><\/code>, which allows us to pass through the items we added to our slider <code>block.json<\/code> <code>\"supports\"<\/code> definition. If a user wants to alter the alignment or colors of the block, then this is how WordPress will be aware of these final attributes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"update-view-js\">Update <code>view.js<\/code> Front End JavaScript<\/h3>\n\n\n\n<p>We will import our handy <code>.\/swiper-init<\/code> again and reuse this within our front-end instantiation code. Open up the <code>src\/view.js<\/code> file and replace it with the following code.<\/p>\n\n\n\n<div class=\"wp-block-group alignwide has-polar-background-color has-background is-layout-flow wp-block-group-is-layout-flow\" style=\"border-top-left-radius:8px;border-top-right-radius:8px;margin-bottom:30px;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0\">\n<p class=\"has-text-align-center has-small-font-size\" style=\"margin-top:0;margin-bottom:0;padding-top:0.5rem;padding-right:var(--wp--preset--spacing--30);padding-bottom:0.5rem;padding-left:var(--wp--preset--spacing--30)\">Within the <code>src\/view.js<\/code> is where the front-end JavaScript for our block is established and enqueued within WordPress&#8217;s dependency queue.<\/p>\n\n\n<pre class=\"wp-block-code alignwide\" style=\"margin-top:0;margin-bottom:0\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-code-table shcb-line-numbers\"><span class='shcb-loc'><span><span class=\"hljs-comment\">\/**<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> * Shared Swiper config.<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-comment\"> *\/<\/span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-keyword\">import<\/span> { SwiperInit } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/swiper-init'<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span><span class=\"hljs-built_in\">document<\/span>.addEventListener( <span class=\"hljs-string\">'DOMContentLoaded'<\/span>, () =&gt; {\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">const<\/span> containers = <span class=\"hljs-built_in\">document<\/span>.querySelectorAll( <span class=\"hljs-string\">'.swiper'<\/span> );\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/\/ Return early, and often.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-keyword\">if<\/span> ( ! containers.length ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">return<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t<span class=\"hljs-comment\">\/\/ Loop through all sliders and assign Swiper object.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\tcontainers.forEach( <span class=\"hljs-function\">(<span class=\"hljs-params\"> element <\/span>) =&gt;<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-comment\">\/\/ We could pass in some unique options here.<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">let<\/span> options = {};\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-keyword\">try<\/span> {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\toptions = <span class=\"hljs-built_in\">JSON<\/span>.parse( element.dataset.swiper );\n<\/span><\/span><span class='shcb-loc'><span>\t\t} <span class=\"hljs-keyword\">catch<\/span> ( e ) {\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-comment\">\/\/ eslint-disable-next-line no-console<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-built_in\">console<\/span>.error( e );\n<\/span><\/span><span class='shcb-loc'><span>\t\t\t<span class=\"hljs-keyword\">return<\/span>;\n<\/span><\/span><span class='shcb-loc'><span>\t\t}\n<\/span><\/span><span class='shcb-loc'><span>\n<\/span><\/span><span class='shcb-loc'><span>\t\t<span class=\"hljs-comment\">\/\/ Slider \ud83d\ude80<\/span>\n<\/span><\/span><span class='shcb-loc'><span>\t\tSwiperInit( element, options );\n<\/span><\/span><span class='shcb-loc'><span>\t} );\n<\/span><\/span><span class='shcb-loc'><span>} );\n<\/span><\/span><\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"final-build-and-next-steps\">Final Build &amp; Next Steps<\/h2>\n\n\n\n<p>If you had <code>npm start<\/code> running in the background the whole time then you should be in an excellent place to test things out. Otherwise, feel free to run <code>npm run build<\/code> to create a final build of your blocks, open up a new post, add a slider block, and test everything out.<\/p>\n\n\n\n<p>Remember that SwiperJS has a lot of bells and whistles, and we&#8217;ve created an opinionated version of a slider. You could keep going further and consider extending things, like:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pull in some more <a href=\"https:\/\/swiperjs.com\/swiper-api#modules\" target=\"_blank\" rel=\"noreferrer noopener\">SwiperJS modules<\/a>, like doing a <a href=\"https:\/\/swiperjs.com\/demos#grid\" target=\"_blank\" rel=\"noreferrer noopener\">Grid slider<\/a>, or a <a href=\"https:\/\/swiperjs.com\/demos#vertical\" target=\"_blank\" rel=\"noreferrer noopener\">Vertical slider<\/a>.<\/li>\n\n\n\n<li>Consider pulling in the <a href=\"https:\/\/swiperjs.com\/swiper-api#accessibility-a11y\" target=\"_blank\" rel=\"noreferrer noopener\">Accessibility (a11y) module<\/a> and be sure to announce slide progression to screen readers.<\/li>\n\n\n\n<li>Consider utilizing <a href=\"https:\/\/wpengine.com\/builders\/what-are-block-variations\/\">Block Variations or Block Styles<\/a> to offer users different variations of your slider block.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-polar-background-color has-background has-global-padding is-layout-constrained wp-container-core-group-is-layout-2f7aae84 wp-block-group-is-layout-constrained\" style=\"border-top-left-radius:4px;padding-top:15px;padding-right:30px;padding-bottom:15px;padding-left:30px\">\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-6c531013 wp-block-group-is-layout-flex\">\n<div class=\"wp-block-outermost-icon-block\"><div class=\"icon-container has-icon-color has-heliotrope-color\" style=\"color:#7a1ba6;width:48px\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M10.5 4v4h3V4H15v4h1.5a1 1 0 011 1v4l-3 4v2a1 1 0 01-1 1h-3a1 1 0 01-1-1v-2l-3-4V9a1 1 0 011-1H9V4h1.5zm.5 12.5v2h2v-2l3-4v-3H8v3l3 4z\"><\/path><\/svg><\/div><\/div>\n\n\n\n<p class=\"has-small-font-size\">Check out the final codebase <a href=\"https:\/\/github.com\/colorful-tones\/slider-block\" target=\"_blank\" rel=\"noreferrer noopener\">Slider Blo<\/a><a href=\"https:\/\/wpeng.in\/6f8dce\/\" target=\"_blank\" rel=\"noreferrer noopener\">ck GitHub repo<\/a>. Feel free to <a href=\"https:\/\/github.com\/colorful-tones\/slider-block\/releases\" target=\"_blank\" rel=\"noreferrer noopener\">download the final pl<\/a><a href=\"https:\/\/wpeng.in\/57f827\/\" target=\"_blank\" rel=\"noreferrer noopener\">ugin<\/a> or fork the repo and make it all your own.<\/p>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>I hope you found this tutorial helpful and easy to follow. It was quite the journey, and we covered a lot of ground. Please let me know if you hit any hurdles along the way or if you went even further with your Slider block.<\/p>\n\n\n\n<p>Don\u2019t be shy; reach out on&nbsp;<a href=\"https:\/\/twitter.com\/dcook\" target=\"_blank\" rel=\"noreferrer noopener\">Twitter<\/a>&nbsp;if you want to share or have any questions.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn to create a slider block with rotating images with SwiperJS.<\/p>\n","protected":false},"author":11,"featured_media":31345,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31316","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Create a Slider Block for WordPress with SwiperJS - Builders<\/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:\/\/wpengine.com\/builders\/create-a-slider-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Slider Block for WordPress with SwiperJS - Builders\" \/>\n<meta property=\"og:description\" content=\"Learn to create a slider block with rotating images with SwiperJS.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/create-a-slider-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-06T21:58:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-07T15:28:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/img-linkedin-postimages.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Damon Cook\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/swiper-slider.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@dcook\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Damon Cook\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/\"},\"author\":{\"name\":\"Damon Cook\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/9d8d20c8a321b90faceae588fcf6d30d\"},\"headline\":\"Create a Slider Block for WordPress with SwiperJS\",\"datePublished\":\"2023-12-06T21:58:22+00:00\",\"dateModified\":\"2023-12-07T15:28:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/\"},\"wordCount\":2625,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/create-slider-block.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/\",\"name\":\"Create a Slider Block for WordPress with SwiperJS - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/create-slider-block.jpg\",\"datePublished\":\"2023-12-06T21:58:22+00:00\",\"dateModified\":\"2023-12-07T15:28:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/create-slider-block.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2023\\\/12\\\/create-slider-block.jpg\",\"width\":1920,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/create-a-slider-block\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Slider Block for WordPress with SwiperJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/9d8d20c8a321b90faceae588fcf6d30d\",\"name\":\"Damon Cook\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g\",\"caption\":\"Damon Cook\"},\"description\":\"Damon Cook is a Developer Advocate at WP Engine. Previously, he navigated the WordPress agency land for a decade. He is a purveyor and discoverer of musical frisson. He can be found in the realms of WordPress Slack, WooCommerce Slack, and Twitter.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/dcook\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/damon-cook\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Slider Block for WordPress with SwiperJS - Builders","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:\/\/wpengine.com\/builders\/create-a-slider-block\/","og_locale":"en_US","og_type":"article","og_title":"Create a Slider Block for WordPress with SwiperJS - Builders","og_description":"Learn to create a slider block with rotating images with SwiperJS.","og_url":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/","og_site_name":"Builders","article_published_time":"2023-12-06T21:58:22+00:00","article_modified_time":"2023-12-07T15:28:51+00:00","og_image":[{"width":1536,"height":768,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/img-linkedin-postimages.png","type":"image\/png"}],"author":"Damon Cook","twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/swiper-slider.jpg","twitter_creator":"@dcook","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Damon Cook","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/"},"author":{"name":"Damon Cook","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/9d8d20c8a321b90faceae588fcf6d30d"},"headline":"Create a Slider Block for WordPress with SwiperJS","datePublished":"2023-12-06T21:58:22+00:00","dateModified":"2023-12-07T15:28:51+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/"},"wordCount":2625,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/create-slider-block.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/create-a-slider-block\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/","url":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/","name":"Create a Slider Block for WordPress with SwiperJS - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/create-slider-block.jpg","datePublished":"2023-12-06T21:58:22+00:00","dateModified":"2023-12-07T15:28:51+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/create-a-slider-block\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/create-slider-block.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2023\/12\/create-slider-block.jpg","width":1920,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/create-a-slider-block\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Create a Slider Block for WordPress with SwiperJS"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/9d8d20c8a321b90faceae588fcf6d30d","name":"Damon Cook","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/18d75285d6803fab88b7f45601bb68cbac7c3956347217c06a0291e27dc65f6a?s=96&d=mm&r=g","caption":"Damon Cook"},"description":"Damon Cook is a Developer Advocate at WP Engine. Previously, he navigated the WordPress agency land for a decade. He is a purveyor and discoverer of musical frisson. He can be found in the realms of WordPress Slack, WooCommerce Slack, and Twitter.","sameAs":["https:\/\/x.com\/dcook"],"url":"https:\/\/wpengine.com\/builders\/author\/damon-cook\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31316","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=31316"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/31316\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/31345"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=31316"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=31316"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=31316"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}