WordPress.org

WordPress Developer Blog

Static vs. dynamic blocks: What’s the difference?

The WordPress Block Editor offers two types of blocks: static and dynamic. The difference between these two types of blocks comes down to how they are rendered on the front-end.

Static blocks

A static block is a piece of content whose markup is known when the page is saved. The block saves its content and markup directly in the post content. The Paragraph block is a simple example of a static block.

The words inside a paragraph will not change unless a content editor manually changes them. Both the content and markup are known, which makes the Paragraph block a great example of a static block. Its HTML markup is directly saved to the post content.

A static block is written entirely in JavaScript. The save() function writes the block’s markup to the post_content entry for the post in the wp_posts database table. The entry for the example above will contain that exact markup, plus block indicator inline-comments:

<!-- wp:paragraph -->
<p>If I had a boat, I'd go out on the ocean.</p>
<!-- /wp:paragraph -->

The block indicators are part of the overall block grammar. WordPress uses these HTML comments to define the block and any attributes or metadata it has. WordPress parses these comments to display blocks both in the Editor and on the front-end, but the comments are never rendered in the source code. For a static block, the source code will only include the markup inside the block indicators.

A deeper dive

A static block’s save() function and the content saved to the database are tightly related to each other. The Post Editor runs a validation check to ensure that the markup created by the save() function is identical to the markup that has already been saved to the database. If there are any differences, the Post Editor becomes very unhappy and declares the block to be broken. This is called a block validation error.

A content editor has the option to attempt a block recovery. This will attempt to reconcile the content in the database with what the block is expecting to save to the database, based on the block’s attributes. This recovery process is sometimes, but not always, successful.

Block validation errors are most commonly caused when a block’s save() function is updated to change the markup produced by the block. Any small change, even to a class name, can trigger a validation error in the Editor.

A block developer can mitigate these issues by adding a block deprecation to register the change in the block. The block deprecation keeps a record of previous versions of a block’s markup. The Post Editor can then compare a block’s current content with a previous version and (ideally) avoid a validation error.

Dynamic blocks

A dynamic block is a piece of content whose markup and exact content are not known when the page is saved. This block could contain content that is timely or dependent on changes in other parts of the site. The contents of a dynamic block are expected to change without the intervention of a content editor. As a result, the markup of a dynamic block is rendered on the server-side.

A simple example is the core Site Title block, which displays the site’s name. This block must be dynamic because its content cannot be known at the time the page is saved. The site title can change at any time via the site settings. 

A deeper dive

A dynamic block is registered in both JavaScript and PHP. While the JavaScript side handles the editor experience, the PHP side handles the server-side rendering for the front-end markup. 

PHP block registration uses the register_block_type() function, which requires a render method to be defined. This can happen in one of two ways:

  1. The registration function includes a render_callback argument.
  2. A render property is added to block.json, whose value points to a separate PHP file. 

These render methods automatically receive attribute and inner content information. They can also get additional required dynamic site information – post lists, comments, taxonomy information, etc.

Blocks are still saved as part of the post_content entry of the post. However, none of the block’s markup is saved to the database. Instead, its attributes are written inside the block indicator comment. The render method is called to create the block’s markup whenever a front-end user visits the page.

As an example, let us think about the above paragraph block as though it is a dynamic block. In this case, a serialized form of the block is saved to the database. This form uses a self-closing block indicator comment. Block attributes are saved as key-value pairs in an JSON encoded string:

<!— wp:paragraph { “content”: “If I had a boat, I'd go out on the ocean.” } /—>

The block’s render method would take the content attribute and apply markup. The front-end code would be the same as the block’s static version.

Which type should you use?

If you are a block developer, one of the first decisions you will likely make is whether to write your block as a static block or a dynamic one. 

Sometimes, the requirements of the block will make that decision for you. Does your block rely on information from other parts of the site, such as other posts, taxonomies, or site settings? If so, the block must be dynamic. The content relies on information outside of the page it lives on, so it can change.

On the other hand, if you can guarantee that the block’s contents will always remain the same, you still have a choice. A static block is the obvious choice since the content is, well, static. However, there are arguments for opting for a dynamic block in this case.

Advantages of a static block

Static blocks are inherently simpler because they are written in a single language, JavaScript. Their markup is known at the time the page is saved, so, as mentioned above, all of that HTML code can be saved directly to the database. 

This approach is more performant. When a visitor views the page, the content comes from the database. There is no delay in displaying the block since no server-side rendering is required.

Advantages of a dynamic block

The markup of a dynamic block is expected to change. This is why that markup is not saved to the database. As a result, that markup is not subject to the Post Editor’s validation. This means that changes to a dynamic block’s markup cannot throw a validation error. Block validation errors are fairly complex and are wonderfully explained in this article about Choosing Dynamic Blocks from NC State University.

This can be advantageous for block developers on more agile teams, where markup changes may be more likely. For example, a team may wish to make UX or accessibility improvements to a block. If that block is a dynamic block, changes to the markup are simply made to the PHP render() function. No additions to the deprecation array are required.

Conclusion

Block developers have a choice about what type of block they want to develop. Static blocks are great for content and markup that will not change. Dynamic blocks are designed for content dependent on external factors, but have advantages for static content as well. In the end, it is up to the block developer to make the right choice for their content and situation.

Thank you to @bph, @fabiankaegy, @greenshady, @mburridge, and @webcommsat for reviewing this post.

18 responses to “Static vs. dynamic blocks: What’s the difference?”

  1. retrofox Avatar

    Awesome article! Thanks for that.
    QQ: what happens if the block is initially static, and then we decide to make it dynamic? How do we deal with the validation errors?
    Thanks in advance

  2. Joni Halabi Avatar

    Thank you so much!

    Funny you should ask, because I am working on converting static blocks to dynamic blocks at work right now!

    I decided that I did not want to deal with validation errors at all. My strategy is to create a separate, dynamic version of the original static block, then write an auto-migration script to convert the static version of the block to the dynamic version.

    A bit complex, but it leaves us with a clean version of the block in the end. I wrote about the process on my personal blog, if you’re interested: https://jhalabi.com/blog/static-to-dynamic-block-conversion

    1. Neo Avatar

      Thanks Joni Halabi!
      Will it work for all static blocks?

      1. Joni Halabi Avatar

        I’ve only done this with two of our static blocks at work, which is not the best sample size. I believe that the general theory of creating the dynamic version and writing a conversion script should work for most, if not all, static blocks, but the details are going to vary wildly depending on the blocks. It’s pretty custom work each time.

        1. iontulburedev Avatar

          Hi. Can i make accordions, tabs or image sliders as static blocks or dynamic only ?

  3. Quynh Avatar

    Thanks for your info.

  4. Quynh Avatar

    Thank you for your posting

  5. 0xbee Avatar

    Fantastic article, really explains the differences between static and dynamic blocks!

  6. Bobi Avatar
    Bobi

    > A simple example (of dynamic block) is the core Site Title block

    Sorry but don’t think this is a good example. The Recent Comments and Recent Posts blocks would have been better. The content of a dynamic block is usually changing quite often, thousands of times per day on busy sites.

    Also dynamic blocks have one *huge* disadvantage: they cost server resources every time a page is loaded on the front-end. Simply put having more dynamic blocks makes your site slower and your hosting more expensive 🙂

    1. Justin Tadlock Avatar

      Site Title was noted as a simple example for the purposes of demonstration. More complex blocks would not have served as better examples to show what a dynamic block is. A dynamic block is simply a block that is generated on output via PHP rather than being static HTML. Site Title is a simple example of this.

  7. iontulburedev Avatar

    Let’s say i need to build accordions, tabs or image slider blocks. Can i do them static or dynamic only ?

    1. Joni Halabi Avatar

      I would say that blocks like accordions, tabs, or image sliders can be written as either static or dynamic blocks. The only time dynamic blocks are required is when the content in your block could change automatically.

      An example of a block that could only ever be dynamic is the core Latest Posts block. That block displays the most recent posts on the site. Those posts change automatically, whenever a new post is published. That automatic aspect to the block is why Latest Posts could never be a static block. If it were static, it would always display the same posts, even if a new post is published. The only way a static version of that block would be updated is if a content editor manually makes a change.

      If your accordion/tab/image slider does not have that kind of automatic component, it can technically be static or dynamic.

    2. Justin Tadlock Avatar

      And to expand on Joni’s answer there, it’s possible you have a mix of static and dynamic. The content itself can be static, but you may dynamically alter it some way on the front end.

      For example, the Image block outputs a static image, but its markup is dynamically altered on the front end to handle the lightbox feature.

      I could definitely see a similar scenario with accordions, tabs, etc. because there is an interactive component to them on the front end.

  8. iontulburedev Avatar

    Hi. Does viewScript in block.json actually enqueue the file on frontend for static blocks ?

    I can’t make it work so additionally i still have to enqueue them via php like the old ways. I asked on StackExchange, WordPress.org and didn’t get an answer yet…

    https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend/

    https://wordpress.org/support/topic/static-blocks-viewscript-enqueue-js-on-frontend-2/

    https://wordpress.stackexchange.com/questions/424842/gutenberg-static-blocks-viewscript-doesnt-enqueue-js-on-frontend

    1. iontulburedev Avatar

      I didn’t declare the viewStyle for frontend and thus the css wasn’t being enqueued.

      { "viewStyle": [ "file:./view.css", "example-view-style" ] }
      

      build/view.css had all the needed css for swiper – it just wasn’t being declared withviewStyle https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-style .

      view.css:

      /*!*******************************************************************************************************************************************************************************************!*\
        !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!./node_modules/swiper/swiper-bundle.css ***!
        \*******************************************************************************************************************************************************************************************/
      /**
       * Swiper 11.0.7
       * Most modern mobile touch slider and framework with hardware accelerated transitions
       * https://swiperjs.com
       *
       * Copyright 2014-2024 Vladimir Kharlampidi
       *
       * Released under the MIT License
       *
       * Released on: February 27, 2024
       */
      
      /* FONT_START */
      @font-face {
        font-family: 'swiper-icons';
        src: url("data:application/font-woff;charset=utf-8;base64, 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");
        font-weight: 400;
        font-style: normal;
      }
      /* FONT_END */
      :root {
        --swiper-theme-color: #007aff;
        /*
        --swiper-preloader-color: var(--swiper-theme-color);
        --swiper-wrapper-transition-timing-function: initial;
        */
      }
      :host {
        position: relative;
        display: block;
        margin-left: auto;
        margin-right: auto;
        z-index: 1;
      }
      .swiper {
        margin-left: auto;
        margin-right: auto;
        position: relative;
        overflow: hidden;
        list-style: none;
        padding: 0;
        /* Fix of Webkit flickering */
        z-index: 1;
        display: block;
      }
      .swiper-vertical &gt; .swiper-wrapper {
        flex-direction: column;
      }
      .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
        box-sizing: content-box;
      }
      .swiper-android .swiper-slide,
      .swiper-ios .swiper-slide,
      .swiper-wrapper {
        transform: translate3d(0px, 0, 0);
      }
      .swiper-horizontal {
        touch-action: pan-y;
      }
      .swiper-vertical {
        touch-action: pan-x;
      }
      .swiper-slide {
        flex-shrink: 0;
        width: 100%;
        height: 100%;
        position: relative;
        transition-property: transform;
        display: block;
      }
      .swiper-slide-invisible-blank {
        visibility: hidden;
      }
      /* Auto Height */
      .swiper-autoheight,
      .swiper-autoheight .swiper-slide {
        height: auto;
      }
      .swiper-autoheight .swiper-wrapper {
        align-items: flex-start;
        transition-property: transform, height;
      }
      .swiper-backface-hidden .swiper-slide {
        transform: translateZ(0);
        backface-visibility: hidden;
      }
      /* 3D Effects */
      .swiper-3d.swiper-css-mode .swiper-wrapper {
        perspective: 1200px;
      }
      .swiper-3d .swiper-wrapper {
        transform-style: preserve-3d;
      }
      .swiper-3d {
        perspective: 1200px;
      }
      .swiper-3d .swiper-slide,
      .swiper-3d .swiper-cube-shadow {
        transform-style: preserve-3d;
      }
      /* CSS Mode */
      .swiper-css-mode &gt; .swiper-wrapper {
        overflow: auto;
        scrollbar-width: none;
        /* For Firefox */
        -ms-overflow-style: none;
        /* For Internet Explorer and Edge */
      }
      .swiper-css-mode &gt; .swiper-wrapper::-webkit-scrollbar {
        display: none;
      }
      .swiper-css-mode &gt; .swiper-wrapper &gt; .swiper-slide {
        scroll-snap-align: start start;
      }
      .swiper-css-mode.swiper-horizontal &gt; .swiper-wrapper {
        scroll-snap-type: x mandatory;
      }
      .swiper-css-mode.swiper-vertical &gt; .swiper-wrapper {
        scroll-snap-type: y mandatory;
      }
      .swiper-css-mode.swiper-free-mode &gt; .swiper-wrapper {
        scroll-snap-type: none;
      }
      .swiper-css-mode.swiper-free-mode &gt; .swiper-wrapper &gt; .swiper-slide {
        scroll-snap-align: none;
      }
      .swiper-css-mode.swiper-centered &gt; .swiper-wrapper::before {
        content: '';
        flex-shrink: 0;
        order: 9999;
      }
      .swiper-css-mode.swiper-centered &gt; .swiper-wrapper &gt; .swiper-slide {
        scroll-snap-align: center center;
        scroll-snap-stop: always;
      }
      .swiper-css-mode.swiper-centered.swiper-horizontal &gt; .swiper-wrapper &gt; .swiper-slide:first-child {
        margin-inline-start: var(--swiper-centered-offset-before);
      }
      .swiper-css-mode.swiper-centered.swiper-horizontal &gt; .swiper-wrapper::before {
        height: 100%;
        min-height: 1px;
        width: var(--swiper-centered-offset-after);
      }
      .swiper-css-mode.swiper-centered.swiper-vertical &gt; .swiper-wrapper &gt; .swiper-slide:first-child {
        margin-block-start: var(--swiper-centered-offset-before);
      }
      .swiper-css-mode.swiper-centered.swiper-vertical &gt; .swiper-wrapper::before {
        width: 100%;
        min-width: 1px;
        height: var(--swiper-centered-offset-after);
      }
      /* Slide styles start */
      /* 3D Shadows */
      .swiper-3d .swiper-slide-shadow,
      .swiper-3d .swiper-slide-shadow-left,
      .swiper-3d .swiper-slide-shadow-right,
      .swiper-3d .swiper-slide-shadow-top,
      .swiper-3d .swiper-slide-shadow-bottom,
      .swiper-3d .swiper-slide-shadow,
      .swiper-3d .swiper-slide-shadow-left,
      .swiper-3d .swiper-slide-shadow-right,
      .swiper-3d .swiper-slide-shadow-top,
      .swiper-3d .swiper-slide-shadow-bottom {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 10;
      }
      .swiper-3d .swiper-slide-shadow {
        background: rgba(0, 0, 0, 0.15);
      }
      .swiper-3d .swiper-slide-shadow-left {
        background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }
      .swiper-3d .swiper-slide-shadow-right {
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }
      .swiper-3d .swiper-slide-shadow-top {
        background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }
      .swiper-3d .swiper-slide-shadow-bottom {
        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }
      .swiper-lazy-preloader {
        width: 42px;
        height: 42px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -21px;
        margin-top: -21px;
        z-index: 10;
        transform-origin: 50%;
        box-sizing: border-box;
        border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
        border-radius: 50%;
        border-top-color: transparent;
      }
      .swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
      .swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
        animation: swiper-preloader-spin 1s infinite linear;
      }
      .swiper-lazy-preloader-white {
        --swiper-preloader-color: #fff;
      }
      .swiper-lazy-preloader-black {
        --swiper-preloader-color: #000;
      }
      @keyframes swiper-preloader-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      /* Slide styles end */
      .swiper-virtual .swiper-slide {
        -webkit-backface-visibility: hidden;
        transform: translateZ(0);
      }
      .swiper-virtual.swiper-css-mode .swiper-wrapper::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
      }
      .swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after {
        height: 1px;
        width: var(--swiper-virtual-size);
      }
      .swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after {
        width: 1px;
        height: var(--swiper-virtual-size);
      }
      :root {
        --swiper-navigation-size: 44px;
        /*
        --swiper-navigation-top-offset: 50%;
        --swiper-navigation-sides-offset: 10px;
        --swiper-navigation-color: var(--swiper-theme-color);
        */
      }
      .swiper-button-prev,
      .swiper-button-next {
        position: absolute;
        top: var(--swiper-navigation-top-offset, 50%);
        width: calc(var(--swiper-navigation-size) / 44 * 27);
        height: var(--swiper-navigation-size);
        margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--swiper-navigation-color, var(--swiper-theme-color));
      }
      .swiper-button-prev.swiper-button-disabled,
      .swiper-button-next.swiper-button-disabled {
        opacity: 0.35;
        cursor: auto;
        pointer-events: none;
      }
      .swiper-button-prev.swiper-button-hidden,
      .swiper-button-next.swiper-button-hidden {
        opacity: 0;
        cursor: auto;
        pointer-events: none;
      }
      .swiper-navigation-disabled .swiper-button-prev,
      .swiper-navigation-disabled .swiper-button-next {
        display: none !important;
      }
      .swiper-button-prev svg,
      .swiper-button-next svg {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        transform-origin: center;
      }
      .swiper-rtl .swiper-button-prev svg,
      .swiper-rtl .swiper-button-next svg {
        transform: rotate(180deg);
      }
      .swiper-button-prev,
      .swiper-rtl .swiper-button-next {
        left: var(--swiper-navigation-sides-offset, 10px);
        right: auto;
      }
      .swiper-button-next,
      .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 10px);
        left: auto;
      }
      .swiper-button-lock {
        display: none;
      }
      /* Navigation font start */
      .swiper-button-prev:after,
      .swiper-button-next:after {
        font-family: swiper-icons;
        font-size: var(--swiper-navigation-size);
        text-transform: none !important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
      }
      .swiper-button-prev:after,
      .swiper-rtl .swiper-button-next:after {
        content: 'prev';
      }
      .swiper-button-next,
      .swiper-rtl .swiper-button-prev {
        right: var(--swiper-navigation-sides-offset, 10px);
        left: auto;
      }
      .swiper-button-next:after,
      .swiper-rtl .swiper-button-prev:after {
        content: 'next';
      }
      /* Navigation font end */
      :root {
        /*
        --swiper-pagination-color: var(--swiper-theme-color);
        --swiper-pagination-left: auto;
        --swiper-pagination-right: 8px;
        --swiper-pagination-bottom: 8px;
        --swiper-pagination-top: auto;
        --swiper-pagination-fraction-color: inherit;
        --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
        --swiper-pagination-progressbar-size: 4px;
        --swiper-pagination-bullet-size: 8px;
        --swiper-pagination-bullet-width: 8px;
        --swiper-pagination-bullet-height: 8px;
        --swiper-pagination-bullet-border-radius: 50%;
        --swiper-pagination-bullet-inactive-color: #000;
        --swiper-pagination-bullet-inactive-opacity: 0.2;
        --swiper-pagination-bullet-opacity: 1;
        --swiper-pagination-bullet-horizontal-gap: 4px;
        --swiper-pagination-bullet-vertical-gap: 6px;
        */
      }
      .swiper-pagination {
        position: absolute;
        text-align: center;
        transition: 300ms opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;
      }
      .swiper-pagination.swiper-pagination-hidden {
        opacity: 0;
      }
      .swiper-pagination-disabled &gt; .swiper-pagination,
      .swiper-pagination.swiper-pagination-disabled {
        display: none !important;
      }
      /* Common Styles */
      .swiper-pagination-fraction,
      .swiper-pagination-custom,
      .swiper-horizontal &gt; .swiper-pagination-bullets,
      .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: var(--swiper-pagination-bottom, 8px);
        top: var(--swiper-pagination-top, auto);
        left: 0;
        width: 100%;
      }
      /* Bullets */
      .swiper-pagination-bullets-dynamic {
        overflow: hidden;
        font-size: 0;
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        transform: scale(0.33);
        position: relative;
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
        transform: scale(1);
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
        transform: scale(1);
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
        transform: scale(0.66);
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
        transform: scale(0.33);
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
        transform: scale(0.66);
      }
      .swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
        transform: scale(0.33);
      }
      .swiper-pagination-bullet {
        width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
        height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
        display: inline-block;
        border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
        background: var(--swiper-pagination-bullet-inactive-color, #000);
        opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
      }
      button.swiper-pagination-bullet {
        border: none;
        margin: 0;
        padding: 0;
        box-shadow: none;
        -webkit-appearance: none;
                -moz-appearance: none;
             appearance: none;
      }
      .swiper-pagination-clickable .swiper-pagination-bullet {
        cursor: pointer;
      }
      .swiper-pagination-bullet:only-child {
        display: none !important;
      }
      .swiper-pagination-bullet-active {
        opacity: var(--swiper-pagination-bullet-opacity, 1);
        background: var(--swiper-pagination-color, var(--swiper-theme-color));
      }
      .swiper-vertical &gt; .swiper-pagination-bullets,
      .swiper-pagination-vertical.swiper-pagination-bullets {
        right: var(--swiper-pagination-right, 8px);
        left: var(--swiper-pagination-left, auto);
        top: 50%;
        transform: translate3d(0px, -50%, 0);
      }
      .swiper-vertical &gt; .swiper-pagination-bullets .swiper-pagination-bullet,
      .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
        display: block;
      }
      .swiper-vertical &gt; .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
      .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
      }
      .swiper-vertical &gt; .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
      .swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        display: inline-block;
        transition: 200ms transform,
              200ms top;
      }
      .swiper-horizontal &gt; .swiper-pagination-bullets .swiper-pagination-bullet,
      .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
      }
      .swiper-horizontal &gt; .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
      .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
      }
      .swiper-horizontal &gt; .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,
      .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        transition: 200ms transform,
              200ms left;
      }
      .swiper-horizontal.swiper-rtl &gt; .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
        transition: 200ms transform,
          200ms right;
      }
      /* Fraction */
      .swiper-pagination-fraction {
        color: var(--swiper-pagination-fraction-color, inherit);
      }
      /* Progress */
      .swiper-pagination-progressbar {
        background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
        position: absolute;
      }
      .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        background: var(--swiper-pagination-color, var(--swiper-theme-color));
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transform-origin: left top;
      }
      .swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
        transform-origin: right top;
      }
      .swiper-horizontal &gt; .swiper-pagination-progressbar,
      .swiper-pagination-progressbar.swiper-pagination-horizontal,
      .swiper-vertical &gt; .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
      .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
        width: 100%;
        height: var(--swiper-pagination-progressbar-size, 4px);
        left: 0;
        top: 0;
      }
      .swiper-vertical &gt; .swiper-pagination-progressbar,
      .swiper-pagination-progressbar.swiper-pagination-vertical,
      .swiper-horizontal &gt; .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,
      .swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
        width: var(--swiper-pagination-progressbar-size, 4px);
        height: 100%;
        left: 0;
        top: 0;
      }
      .swiper-pagination-lock {
        display: none;
      }
      :root {
        /*
        --swiper-scrollbar-border-radius: 10px;
        --swiper-scrollbar-top: auto;
        --swiper-scrollbar-bottom: 4px;
        --swiper-scrollbar-left: auto;
        --swiper-scrollbar-right: 4px;
        --swiper-scrollbar-sides-offset: 1%;
        --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
        --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
        --swiper-scrollbar-size: 4px;
        */
      }
      .swiper-scrollbar {
        border-radius: var(--swiper-scrollbar-border-radius, 10px);
        position: relative;
        touch-action: none;
        background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
      }
      .swiper-scrollbar-disabled &gt; .swiper-scrollbar,
      .swiper-scrollbar.swiper-scrollbar-disabled {
        display: none !important;
      }
      .swiper-horizontal &gt; .swiper-scrollbar,
      .swiper-scrollbar.swiper-scrollbar-horizontal {
        position: absolute;
        left: var(--swiper-scrollbar-sides-offset, 1%);
        bottom: var(--swiper-scrollbar-bottom, 4px);
        top: var(--swiper-scrollbar-top, auto);
        z-index: 50;
        height: var(--swiper-scrollbar-size, 4px);
        width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
      }
      .swiper-vertical &gt; .swiper-scrollbar,
      .swiper-scrollbar.swiper-scrollbar-vertical {
        position: absolute;
        left: var(--swiper-scrollbar-left, auto);
        right: var(--swiper-scrollbar-right, 4px);
        top: var(--swiper-scrollbar-sides-offset, 1%);
        z-index: 50;
        width: var(--swiper-scrollbar-size, 4px);
        height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
      }
      .swiper-scrollbar-drag {
        height: 100%;
        width: 100%;
        position: relative;
        background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
        border-radius: var(--swiper-scrollbar-border-radius, 10px);
        left: 0;
        top: 0;
      }
      .swiper-scrollbar-cursor-drag {
        cursor: move;
      }
      .swiper-scrollbar-lock {
        display: none;
      }
      /* Zoom container styles start */
      .swiper-zoom-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
      .swiper-zoom-container &gt; img,
      .swiper-zoom-container &gt; svg,
      .swiper-zoom-container &gt; canvas {
        max-width: 100%;
        max-height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
      }
      /* Zoom container styles end */
      .swiper-slide-zoomed {
        cursor: move;
        touch-action: none;
      }
      /* a11y */
      .swiper .swiper-notification {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
        opacity: 0;
        z-index: -1000;
      }
      .swiper-free-mode &gt; .swiper-wrapper {
        transition-timing-function: ease-out;
        margin: 0 auto;
      }
      .swiper-grid &gt; .swiper-wrapper {
        flex-wrap: wrap;
      }
      .swiper-grid-column &gt; .swiper-wrapper {
        flex-wrap: wrap;
        flex-direction: column;
      }
      .swiper-fade.swiper-free-mode .swiper-slide {
        transition-timing-function: ease-out;
      }
      .swiper-fade .swiper-slide {
        pointer-events: none;
        transition-property: opacity;
      }
      .swiper-fade .swiper-slide .swiper-slide {
        pointer-events: none;
      }
      .swiper-fade .swiper-slide-active {
        pointer-events: auto;
      }
      .swiper-fade .swiper-slide-active .swiper-slide-active {
        pointer-events: auto;
      }
      .swiper-cube {
        overflow: visible;
      }
      .swiper-cube .swiper-slide {
        pointer-events: none;
        backface-visibility: hidden;
        z-index: 1;
        visibility: hidden;
        transform-origin: 0 0;
        width: 100%;
        height: 100%;
      }
      .swiper-cube .swiper-slide .swiper-slide {
        pointer-events: none;
      }
      .swiper-cube.swiper-rtl .swiper-slide {
        transform-origin: 100% 0;
      }
      .swiper-cube .swiper-slide-active,
      .swiper-cube .swiper-slide-active .swiper-slide-active {
        pointer-events: auto;
      }
      .swiper-cube .swiper-slide-active,
      .swiper-cube .swiper-slide-next,
      .swiper-cube .swiper-slide-prev {
        pointer-events: auto;
        visibility: visible;
      }
      .swiper-cube .swiper-cube-shadow {
        position: absolute;
        left: 0;
        bottom: 0px;
        width: 100%;
        height: 100%;
        opacity: 0.6;
        z-index: 0;
      }
      .swiper-cube .swiper-cube-shadow:before {
        content: '';
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        filter: blur(50px);
      }
      .swiper-cube .swiper-slide-next + .swiper-slide {
        pointer-events: auto;
        visibility: visible;
      }
      /* Cube slide shadows start */
      .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top,
      .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
      .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,
      .swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right {
        z-index: 0;
        backface-visibility: hidden;
      }
      /* Cube slide shadows end */
      .swiper-flip {
        overflow: visible;
      }
      .swiper-flip .swiper-slide {
        pointer-events: none;
        backface-visibility: hidden;
        z-index: 1;
      }
      .swiper-flip .swiper-slide .swiper-slide {
        pointer-events: none;
      }
      .swiper-flip .swiper-slide-active,
      .swiper-flip .swiper-slide-active .swiper-slide-active {
        pointer-events: auto;
      }
      /* Flip slide shadows start */
      .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top,
      .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
      .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,
      .swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right {
        z-index: 0;
        backface-visibility: hidden;
      }
      /* Flip slide shadows end */
      .swiper-creative .swiper-slide {
        backface-visibility: hidden;
        overflow: hidden;
        transition-property: transform, opacity, height;
      }
      .swiper-cards {
        overflow: visible;
      }
      .swiper-cards .swiper-slide {
        transform-origin: center bottom;
        backface-visibility: hidden;
        overflow: hidden;
      }
      
      
      /*# sourceMappingURL=view.css.map*/
      

      And the npx @wordpress/create-block@latest app command doesn’t add it by default.

      CSS & JS are enqueued without the use of wp_enqueue_script

      block.json now looks like this (handles are optional):

      {
      	"$schema": "https://schemas.wp.org/trunk/block.json",
      	"apiVersion": 3,
      	"name": "m/simple-slider",
      	"version": "0.1.0",
      	"title": "Horizontal slider.",
      	"category": "m-gutenberg-blocks",
      	"icon": "slides",
      	"description": "A simple slider",
      	"attributes": {
              "images": {
                  "type": "array",
                  "default": []
      		},
      		"speed": {
      			"type": "number",
      			"default": 1
      		}
      	},
      	"example": {
      		"attributes": {
      			"preview" : true
      		}
      	},
      	"supports": {
      		"html": true,
      		"color": {
      			"background": true,
      			"text": true
      		},
      		"spacing": {
      			"padding": true,
      			"margin": true
      		},
      		"anchor": true,
      		"align": true
      	},
      	"textdomain": "simple-slider",
      	"editorScript": "file:./index.js",
      	"editorStyle": "file:./index.css",
      	"style": "file:./style-index.css",
      	"viewScript": ["file:./view.js", "swiper-slider-script"],
      	"viewStyle": [ "file:./view.css", "swiper-slider-style" ]
      }
      

Leave a Reply

Your email address will not be published. Required fields are marked *