WordPress.org
Get WordPress

Plugin Directory

Changeset 3395126


Ignore:
Timestamp:
11/13/2025 03:13:26 PM (4 months ago)
Author:
weblazer
Message:

Release 1.0.3: Plugin rebranding and editor improvements

  • Plugin rebranded from 'Native Blocks Carousel' to 'Any Block Carousel Slider'
  • Fixed dynamic arrow style updates in Gutenberg editor (iframe contexts)
  • Improved block detection across editor iframes for arrow icon sync
  • Enhanced multi-context carousel updates for Site/Block Editor compatibility
  • Updated banner assets with new plugin name
  • Regenerated banner GIFs at 30fps for smoother animations
Location:
native-blocks-carousel/trunk
Files:
12 added
3 deleted
16 edited

Legend:

Unmodified
Added
Removed

  • native-blocks-carousel/trunk/assets/css/carousel-editor.css

    r3394953 r3395126  
    11/*
    2  * Gutenberg editor styles for Native Blocks Carousel
    3  * @package NativeBlocksCarousel
     2 * Gutenberg editor styles for Any Block Carousel Slider
     3 * @package AnyBlockCarouselSlider
    44 */
    55
    6 .cfg-nbc-carousel-toggle-control {
     6.cfg-abcs-toggle-control {
    77    margin-bottom: 1rem;
    88}
    99
    10 .cfg-nbc-carousel-toggle-control .components-base-control__label {
     10.cfg-abcs-toggle-control .components-base-control__label {
    1111    font-weight: 600;
    1212    color: #1e1e1e;
    1313}
    1414
    15 .cfg-nbc-carousel-toggle-control .components-base-control__help {
     15.cfg-abcs-toggle-control .components-base-control__help {
    1616    font-size: 12px;
    1717    color: #757575;
    … …  
    1919}
    2020
    21 .cfg-nbc-carousel-toggle-control .components-toggle-control__label[for*="carousel"] {
     21.cfg-abcs-toggle-control .components-toggle-control__label[for*="carousel"] {
    2222    color: #007cba;
    2323    font-weight: 600;
    2424}
    2525
    26 .cfg-nbc-carousel-panel .components-panel__body-title {
     26.cfg-abcs-panel .components-panel__body-title {
    2727    font-weight: 600;
    2828}
    2929
    30 .nbc-arrow-style-panel .components-base-control__field,
    31 .nbc-arrow-style-panel .components-toggle-group-control {
     30.abcs-arrow-style-panel .components-base-control__field,
     31.abcs-arrow-style-panel .components-toggle-group-control {
    3232    display: grid;
    3333    justify-content: center;
    3434}
    3535
    36 .nbc-arrow-style-panel .components-toggle-group-control {
     36.abcs-arrow-style-panel .components-toggle-group-control {
    3737    width: 100%;
    3838}
    3939
    40 .nbc-arrow-style-panel .nbc-arrow-style-group {
     40.abcs-arrow-style-panel .abcs-arrow-style-group {
    4141    gap: 8px;
    4242}
    4343
    44 .nbc-arrow-style-group.components-toggle-group-control {
     44.abcs-arrow-style-group.components-toggle-group-control {
    4545    display: flex;
    4646    flex-wrap: wrap;
    4747}
    4848
    49 .nbc-arrow-style-group .components-toggle-group-control__option {
    50     --nbc-arrow-option-size: 44px;
    51     width: var(--nbc-arrow-option-size);
    52     height: var(--nbc-arrow-option-size);
    53     min-width: var(--nbc-arrow-option-size);
    54     min-height: var(--nbc-arrow-option-size);
    55     flex: 0 0 var(--nbc-arrow-option-size);
     49.abcs-arrow-style-group .components-toggle-group-control__option {
     50    --abcs-arrow-option-size: 44px;
     51    width: var(--abcs-arrow-option-size);
     52    height: var(--abcs-arrow-option-size);
     53    min-width: var(--abcs-arrow-option-size);
     54    min-height: var(--abcs-arrow-option-size);
     55    flex: 0 0 var(--abcs-arrow-option-size);
    5656    padding: 0;
    5757    border-radius: 10px;
    … …  
    6767}
    6868
    69 .nbc-arrow-style-group .components-toggle-group-control__option>span {
     69.abcs-arrow-style-group .components-toggle-group-control__option>span {
    7070    display: flex;
    7171    align-items: center;
    … …  
    7676}
    7777
    78 .nbc-arrow-style-group .components-toggle-group-control__option:hover {
     78.abcs-arrow-style-group .components-toggle-group-control__option:hover {
    7979    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    8080    transform: translateY(-1px);
    8181}
    8282
    83 .nbc-arrow-style-group .components-toggle-group-control__option.is-selected {
     83.abcs-arrow-style-group .components-toggle-group-control__option.is-selected {
    8484    background: var(--wp-admin-theme-color, #3858e9);
    8585    border-color: var(--wp-admin-theme-color, #3858e9);
    … …  
    8989}
    9090
    91 .nbc-arrow-style-group .components-toggle-group-control__option.is-selected .nbc-arrow-style-icon__button {
     91.abcs-arrow-style-group .components-toggle-group-control__option.is-selected .abcs-arrow-style-icon__button {
    9292    background: rgba(255, 255, 255, 0.2);
    9393    border-color: rgba(255, 255, 255, 0.7);
    … …  
    9696}
    9797
    98 .nbc-arrow-style-icon {
     98.abcs-arrow-style-icon {
    9999    display: flex;
    100100    align-items: center;
    … …  
    104104}
    105105
    106 .nbc-arrow-style-icon svg {
     106.abcs-arrow-style-icon svg {
    107107    width: 20px;
    108108    height: 20px;
    … …  
    111111
    112112
    113 .cfg-nbc-carousel-panel-first {
     113.cfg-abcs-panel-first {
    114114    order: -1000 !important;
    115115}
    116116
    117 .block-editor-block-inspector .cfg-nbc-carousel-panel-first {
     117.block-editor-block-inspector .cfg-abcs-panel-first {
    118118    order: -1000 !important;
    119119    margin-bottom: 16px;
    120120}
    121121
    122 .block-editor-block-list__layout .nbc-carousel>*:not(:first-child),
    123 .editor-styles-wrapper .nbc-carousel>*:not(:first-child) {
     122.block-editor-block-list__layout .abcs>*:not(:first-child),
     123.editor-styles-wrapper .abcs>*:not(:first-child) {
    124124    pointer-events: none;
    125125}
    126126
    127127@media (prefers-color-scheme: dark) {
    128     .cfg-nbc-carousel-toggle-control .components-base-control__label {
     128    .cfg-abcs-toggle-control .components-base-control__label {
    129129        color: #fff;
    130130    }
    131131
    132     .cfg-nbc-carousel-toggle-control .components-base-control__help {
     132    .cfg-abcs-toggle-control .components-base-control__help {
    133133        color: #ccc;
    134134    }
    135135}
    136136
    137 :has(> .nbc-carousel.nbc-carousel-hide-arrows)::after {
     137:has(> .abcs.abcs-hide-arrows)::after {
    138138    display: none !important;
    139139    content: none !important;
    140140}
    141141
    142 :has(> .nbc-carousel.nbc-carousel-hide-markers)::after {
     142:has(> .abcs.abcs-hide-markers)::after {
    143143    display: none !important;
    144144    content: none !important;
    … …  
    146146
    147147@supports selector(::scroll-button(*)) {
    148     .nbc-carousel.nbc-carousel-hide-arrows::scroll-button(*) {
     148    .abcs.abcs-hide-arrows::scroll-button(*) {
    149149        display: none !important;
    150150        opacity: 0 !important;
    … …  
    155155
    156156@supports selector(::scroll-marker-group) {
    157     .nbc-carousel.nbc-carousel-hide-markers::scroll-marker-group {
     157    .abcs.abcs-hide-markers::scroll-marker-group {
    158158        display: none !important;
    159159        opacity: 0 !important;
    … …  
    164164
    165165@supports selector(::scroll-marker) {
    166     .nbc-carousel.nbc-carousel-hide-markers>*::scroll-marker {
     166    .abcs.abcs-hide-markers>*::scroll-marker {
    167167        opacity: 0 !important;
    168168        cursor: default !important;

  • native-blocks-carousel/trunk/assets/css/carousel.css

    r3394953 r3395126  
    11/**
    2  * Native Blocks Carousel - Styles CSS
     2 * Any Block Carousel Slider - Styles CSS
    33 *
    4  * Transform any WordPress block into a carousel with the .nbc-carousel class
     4 * Transform any WordPress block into a carousel with the .abcs class
    55 * Compatible with post loops and all WordPress blocks
    66 * Compatible with Block Editor and frontend
    77 *
    8  * @package NativeBlocksCarousel
     8 * @package AnyBlockCarouselSlider
    99 * @version 1.0.2
    1010 * @author weblazer35
    … …  
    4747/* Required so ::scroll-button and ::scroll-marker are positioned correctly */
    4848/* ::scroll-button tends to position relative to a distant ancestor, not the carousel itself */
    49 :has(.nbc-carousel) {
     49:has(.abcs) {
    5050    position: relative !important;
    5151}
    … …  
    5353/* Also force the direct parent to be positioned relative */
    5454/* Important to correctly anchor buttons to the container */
    55 .nbc-carousel {
     55.abcs {
    5656    position: relative !important;
    5757}
    … …  
    6060/* Double safety for cases where :has() is not supported everywhere */
    6161/* IMPORTANT: the parent must be the positioning context for the buttons */
    62 *:has(> .nbc-carousel) {
     62*:has(> .abcs) {
    6363    position: relative !important;
    6464    /* Ensure the parent can contain positioned buttons */
    … …  
    6969}
    7070
    71 .nbc-carousel,
    72 .block-editor-block-list__layout .nbc-carousel,
    73 .editor-styles-wrapper .nbc-carousel {
     71.abcs,
     72.block-editor-block-list__layout .abcs,
     73.editor-styles-wrapper .abcs {
    7474    /* Layout */
    7575    position: relative !important;
    … …  
    117117   ========================================================================== */
    118118
    119 .nbc-carousel>*,
    120 .block-editor-block-list__layout .nbc-carousel>*,
    121 .editor-styles-wrapper .nbc-carousel>* {
     119.abcs>*,
     120.block-editor-block-list__layout .abcs>*,
     121.editor-styles-wrapper .abcs>* {
    122122    /* Layout */
    123123    position: relative;
    … …  
    135135}
    136136
    137 .nbc-carousel .wp-block-group[style*="border-radius"] {
     137.abcs .wp-block-group[style*="border-radius"] {
    138138    overflow: hidden;
    139139}
    140140
    141 .nbc-carousel .wp-block-group.has-global-padding {
     141.abcs .wp-block-group.has-global-padding {
    142142    padding-left: initial;
    143143    padding-right: initial;
    … …  
    145145
    146146/* Backgrounds */
    147 .nbc-carousel .has-background,
    148 .block-editor-block-list__layout .nbc-carousel .has-background,
    149 .editor-styles-wrapper .nbc-carousel .has-background {
     147.abcs .has-background,
     148.block-editor-block-list__layout .abcs .has-background,
     149.editor-styles-wrapper .abcs .has-background {
    150150    height: 100%;
    151151}
    … …  
    156156
    157157/* Disable flex-wrap and the gallery column system */
    158 .wp-block-gallery.nbc-carousel,
    159 .block-editor-block-list__layout .wp-block-gallery.nbc-carousel,
    160 .editor-styles-wrapper .wp-block-gallery.nbc-carousel {
     158.wp-block-gallery.abcs,
     159.block-editor-block-list__layout .wp-block-gallery.abcs,
     160.editor-styles-wrapper .wp-block-gallery.abcs {
    161161    flex-wrap: nowrap !important;
    162162    columns: auto !important;
    … …  
    164164
    165165/* Chaque figure dans la galerie carousel */
    166 .wp-block-gallery.nbc-carousel>.wp-block-image,
    167 .block-editor-block-list__layout .wp-block-gallery.nbc-carousel>.wp-block-image,
    168 .editor-styles-wrapper .wp-block-gallery.nbc-carousel>.wp-block-image {
     166.wp-block-gallery.abcs>.wp-block-image,
     167.block-editor-block-list__layout .wp-block-gallery.abcs>.wp-block-image,
     168.editor-styles-wrapper .wp-block-gallery.abcs>.wp-block-image {
    169169    flex: 0 0 auto;
    170170    /* Default width: 6 images visible on wide desktop (> 1280px) */
    … …  
    176176
    177177/* Images dans la galerie carousel */
    178 .wp-block-gallery.nbc-carousel>.wp-block-image img,
    179 .block-editor-block-list__layout .wp-block-gallery.nbc-carousel>.wp-block-image img,
    180 .editor-styles-wrapper .wp-block-gallery.nbc-carousel>.wp-block-image img {
     178.wp-block-gallery.abcs>.wp-block-image img,
     179.block-editor-block-list__layout .wp-block-gallery.abcs>.wp-block-image img,
     180.editor-styles-wrapper .wp-block-gallery.abcs>.wp-block-image img {
    181181    width: 100%;
    182182    height: 100%;
    … …  
    189189
    190190/* Convertir le CSS Grid en Flexbox pour le carousel */
    191 .is-layout-grid.nbc-carousel,
    192 .block-editor-block-list__layout .is-layout-grid.nbc-carousel,
    193 .editor-styles-wrapper .is-layout-grid.nbc-carousel {
     191.is-layout-grid.abcs,
     192.block-editor-block-list__layout .is-layout-grid.abcs,
     193.editor-styles-wrapper .is-layout-grid.abcs {
    194194    display: flex !important;
    195195    grid-template-columns: none !important;
    … …  
    200200/* Grids in carousel mode display items with a fixed width */
    201201/* Use --carousel-grid-item-width to customise */
    202 .is-layout-grid.nbc-carousel>*,
    203 .block-editor-block-list__layout .is-layout-grid.nbc-carousel>*,
    204 .editor-styles-wrapper .is-layout-grid.nbc-carousel>* {
     202.is-layout-grid.abcs>*,
     203.block-editor-block-list__layout .is-layout-grid.abcs>*,
     204.editor-styles-wrapper .is-layout-grid.abcs>* {
    205205    flex: 0 0 auto;
    206206    /* Default width sized for 3 visible columns */
    … …  
    211211
    212212/* Grid Item Position - Respecter grid-column span */
    213 .is-layout-grid.nbc-carousel>*[style*="grid-column-end:span 2"],
    214 .is-layout-grid.nbc-carousel>*[style*="grid-column:span 2"] {
     213.is-layout-grid.abcs>*[style*="grid-column-end:span 2"],
     214.is-layout-grid.abcs>*[style*="grid-column:span 2"] {
    215215    width: calc(var(--carousel-grid-item-width, 33.333%) * 2 + var(--wp--style--block-gap, 1rem)) !important;
    216216}
    217217
    218 .is-layout-grid.nbc-carousel>*[style*="grid-column-end:span 3"],
    219 .is-layout-grid.nbc-carousel>*[style*="grid-column:span 3"] {
     218.is-layout-grid.abcs>*[style*="grid-column-end:span 3"],
     219.is-layout-grid.abcs>*[style*="grid-column:span 3"] {
    220220    width: calc(var(--carousel-grid-item-width, 33.333%) * 3 + var(--wp--style--block-gap, 1rem) * 2) !important;
    221221}
    222222
    223 .is-layout-grid.nbc-carousel>*[style*="grid-column-end:span 4"],
    224 .is-layout-grid.nbc-carousel>*[style*="grid-column:span 4"] {
     223.is-layout-grid.abcs>*[style*="grid-column-end:span 4"],
     224.is-layout-grid.abcs>*[style*="grid-column:span 4"] {
    225225    width: calc(var(--carousel-grid-item-width, 33.333%) * 4 + var(--wp--style--block-gap, 1rem) * 3) !important;
    226226}
    … …  
    229229/* Add these classes to the Grid block to control item width */
    230230
    231 /* nbc-carousel-cols-1: 1 visible item (full width) */
    232 .is-layout-grid.nbc-carousel.nbc-carousel-cols-1>* {
     231/* abcs-cols-1: 1 visible item (full width) */
     232.is-layout-grid.abcs.abcs-cols-1>* {
    233233    --carousel-grid-item-width: 100%;
    234234    width: 100%;
    … …  
    236236}
    237237
    238 /* nbc-carousel-cols-2: 2 visible items */
    239 .is-layout-grid.nbc-carousel.nbc-carousel-cols-2>* {
     238/* abcs-cols-2: 2 visible items */
     239.is-layout-grid.abcs.abcs-cols-2>* {
    240240    --carousel-grid-item-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
    241241    width: calc(50% - var(--wp--style--block-gap, 1rem) / 2);
    … …  
    243243}
    244244
    245 /* nbc-carousel-cols-3: 3 visible items (default) */
    246 .is-layout-grid.nbc-carousel.nbc-carousel-cols-3>* {
     245/* abcs-cols-3: 3 visible items (default) */
     246.is-layout-grid.abcs.abcs-cols-3>* {
    247247    --carousel-grid-item-width: calc(33.333% - var(--wp--style--block-gap, 1rem) * 2 / 3);
    248248    width: calc(33.333% - var(--wp--style--block-gap, 1rem) * 2 / 3);
    … …  
    250250}
    251251
    252 /* nbc-carousel-cols-4: 4 visible items */
    253 .is-layout-grid.nbc-carousel.nbc-carousel-cols-4>* {
     252/* abcs-cols-4: 4 visible items */
     253.is-layout-grid.abcs.abcs-cols-4>* {
    254254    --carousel-grid-item-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4);
    255255    width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4);
    … …  
    257257}
    258258
    259 /* nbc-carousel-cols-5: 5 visible items */
    260 .is-layout-grid.nbc-carousel.nbc-carousel-cols-5>* {
     259/* abcs-cols-5: 5 visible items */
     260.is-layout-grid.abcs.abcs-cols-5>* {
    261261    --carousel-grid-item-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5);
    262262    width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5);
    … …  
    264264}
    265265
    266 /* nbc-carousel-cols-6: 6 visible items */
    267 .is-layout-grid.nbc-carousel.nbc-carousel-cols-6>* {
     266/* abcs-cols-6: 6 visible items */
     267.is-layout-grid.abcs.abcs-cols-6>* {
    268268    --carousel-grid-item-width: calc(16.666% - var(--wp--style--block-gap, 1rem) * 5 / 6);
    269269    width: calc(16.666% - var(--wp--style--block-gap, 1rem) * 5 / 6);
    … …  
    271271}
    272272
    273 /* nbc-carousel-cols-7: 7 visible items */
    274 .is-layout-grid.nbc-carousel.nbc-carousel-cols-7>* {
     273/* abcs-cols-7: 7 visible items */
     274.is-layout-grid.abcs.abcs-cols-7>* {
    275275    --carousel-grid-item-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7);
    276276    width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7);
    … …  
    278278}
    279279
    280 /* nbc-carousel-cols-8: 8 visible items */
    281 .is-layout-grid.nbc-carousel.nbc-carousel-cols-8>* {
     280/* abcs-cols-8: 8 visible items */
     281.is-layout-grid.abcs.abcs-cols-8>* {
    282282    --carousel-grid-item-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8);
    283283    width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8);
    … …  
    285285}
    286286
    287 /* nbc-carousel-cols-9: 9 visible items */
    288 .is-layout-grid.nbc-carousel.nbc-carousel-cols-9>* {
     287/* abcs-cols-9: 9 visible items */
     288.is-layout-grid.abcs.abcs-cols-9>* {
    289289    --carousel-grid-item-width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9);
    290290    width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9);
    … …  
    292292}
    293293
    294 /* nbc-carousel-cols-10: 10 visible items */
    295 .is-layout-grid.nbc-carousel.nbc-carousel-cols-10>* {
     294/* abcs-cols-10: 10 visible items */
     295.is-layout-grid.abcs.abcs-cols-10>* {
    296296    --carousel-grid-item-width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10);
    297297    width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10);
    … …  
    299299}
    300300
    301 /* nbc-carousel-cols-11: 11 visible items */
    302 .is-layout-grid.nbc-carousel.nbc-carousel-cols-11>* {
     301/* abcs-cols-11: 11 visible items */
     302.is-layout-grid.abcs.abcs-cols-11>* {
    303303    --carousel-grid-item-width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11);
    304304    width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11);
    … …  
    306306}
    307307
    308 /* nbc-carousel-cols-12: 12 visible items */
    309 .is-layout-grid.nbc-carousel.nbc-carousel-cols-12>* {
     308/* abcs-cols-12: 12 visible items */
     309.is-layout-grid.abcs.abcs-cols-12>* {
    310310    --carousel-grid-item-width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12);
    311311    width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12);
    … …  
    313313}
    314314
    315 /* nbc-carousel-cols-13: 13 visible items */
    316 .is-layout-grid.nbc-carousel.nbc-carousel-cols-13>* {
     315/* abcs-cols-13: 13 visible items */
     316.is-layout-grid.abcs.abcs-cols-13>* {
    317317    --carousel-grid-item-width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13);
    318318    width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13);
    … …  
    320320}
    321321
    322 /* nbc-carousel-cols-14: 14 visible items */
    323 .is-layout-grid.nbc-carousel.nbc-carousel-cols-14>* {
     322/* abcs-cols-14: 14 visible items */
     323.is-layout-grid.abcs.abcs-cols-14>* {
    324324    --carousel-grid-item-width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14);
    325325    width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14);
    … …  
    327327}
    328328
    329 /* nbc-carousel-cols-15: 15 visible items */
    330 .is-layout-grid.nbc-carousel.nbc-carousel-cols-15>* {
     329/* abcs-cols-15: 15 visible items */
     330.is-layout-grid.abcs.abcs-cols-15>* {
    331331    --carousel-grid-item-width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15);
    332332    width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15);
    … …  
    334334}
    335335
    336 /* nbc-carousel-cols-16: 16 visible items */
    337 .is-layout-grid.nbc-carousel.nbc-carousel-cols-16>* {
     336/* abcs-cols-16: 16 visible items */
     337.is-layout-grid.abcs.abcs-cols-16>* {
    338338    --carousel-grid-item-width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16);
    339339    width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16);
    … …  
    341341}
    342342
    343 /* nbc-carousel-min-width: use the minimum width defined in the grid */
     343/* abcs-min-width: use the minimum width defined in the grid */
    344344/* WordPress generates: grid-template-columns: repeat(auto-fill, minmax(XXXpx, 1fr)) */
    345345/* On doit extraire cette valeur et l'utiliser comme largeur fixe en mode Flexbox */
    346 .is-layout-grid.nbc-carousel.nbc-carousel-min-width>*,
    347 .block-editor-block-list__layout .is-layout-grid.nbc-carousel.nbc-carousel-min-width>*,
    348 .editor-styles-wrapper .is-layout-grid.nbc-carousel.nbc-carousel-min-width>* {
     346.is-layout-grid.abcs.abcs-min-width>*,
     347.block-editor-block-list__layout .is-layout-grid.abcs.abcs-min-width>*,
     348.editor-styles-wrapper .is-layout-grid.abcs.abcs-min-width>* {
    349349    /* Largeur fixe avec adaptation sur mobile */
    350350    flex: 0 0 auto !important;
    … …  
    356356
    357357/* Specific rules for Post Template (children are <li class="wp-block-post">) */
    358 .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    359 .block-editor-block-list__layout .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    360 .editor-styles-wrapper .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post {
     358.wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     359.block-editor-block-list__layout .wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     360.editor-styles-wrapper .wp-block-post-template.abcs.abcs-min-width .wp-block-post {
    361361    flex: 0 0 auto !important;
    362362    width: min(var(--carousel-min-width, 200px), 100%) !important;
    … …  
    366366
    367367/* Specific rules for Group blocks (children can be <div> or other elements) */
    368 .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    369 .block-editor-block-list__layout .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    370 .editor-styles-wrapper .wp-block-group.nbc-carousel.nbc-carousel-min-width>* {
     368.wp-block-group.abcs.abcs-min-width>*,
     369.block-editor-block-list__layout .wp-block-group.abcs.abcs-min-width>*,
     370.editor-styles-wrapper .wp-block-group.abcs.abcs-min-width>* {
    371371    flex: 0 0 auto !important;
    372372    width: min(var(--carousel-min-width, 200px), 100%) !important;
    … …  
    379379   ========================================================================== */
    380380
    381 /* En mode Auto (nbc-carousel-min-width), le snap se fait sur le centre */
    382 .nbc-carousel.nbc-carousel-min-width>*,
    383 .block-editor-block-list__layout .nbc-carousel.nbc-carousel-min-width>*,
    384 .editor-styles-wrapper .nbc-carousel.nbc-carousel-min-width>* {
     381/* En mode Auto (abcs-min-width), le snap se fait sur le centre */
     382.abcs.abcs-min-width>*,
     383.block-editor-block-list__layout .abcs.abcs-min-width>*,
     384.editor-styles-wrapper .abcs.abcs-min-width>* {
    385385    scroll-snap-align: center !important;
    386386}
    … …  
    391391
    392392/* Post Template en mode list view (sans is-layout-grid) : snap sur le centre */
    393 .wp-block-post-template.nbc-carousel:not(.is-layout-grid) .wp-block-post,
    394 .block-editor-block-list__layout .wp-block-post-template.nbc-carousel:not(.is-layout-grid) .wp-block-post,
    395 .editor-styles-wrapper .wp-block-post-template.nbc-carousel:not(.is-layout-grid) .wp-block-post {
     393.wp-block-post-template.abcs:not(.is-layout-grid) .wp-block-post,
     394.block-editor-block-list__layout .wp-block-post-template.abcs:not(.is-layout-grid) .wp-block-post,
     395.editor-styles-wrapper .wp-block-post-template.abcs:not(.is-layout-grid) .wp-block-post {
    396396    scroll-snap-align: center !important;
    397397}
    398398
    399399/* Specific rules for Post Template in Auto mode */
    400 .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    401 .block-editor-block-list__layout .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    402 .editor-styles-wrapper .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post {
     400.wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     401.block-editor-block-list__layout .wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     402.editor-styles-wrapper .wp-block-post-template.abcs.abcs-min-width .wp-block-post {
    403403    scroll-snap-align: center !important;
    404404}
    405405
    406406/* Specific rules for Group in Auto mode */
    407 .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    408 .block-editor-block-list__layout .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    409 .editor-styles-wrapper .wp-block-group.nbc-carousel.nbc-carousel-min-width>* {
     407.wp-block-group.abcs.abcs-min-width>*,
     408.block-editor-block-list__layout .wp-block-group.abcs.abcs-min-width>*,
     409.editor-styles-wrapper .wp-block-group.abcs.abcs-min-width>* {
    410410    scroll-snap-align: center !important;
    411411}
    412412
    413413/* Specific rules for Gallery in Auto mode */
    414 .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image,
    415 .block-editor-block-list__layout .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image,
    416 .editor-styles-wrapper .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image {
     414.wp-block-gallery.abcs.abcs-min-width>.wp-block-image,
     415.block-editor-block-list__layout .wp-block-gallery.abcs.abcs-min-width>.wp-block-image,
     416.editor-styles-wrapper .wp-block-gallery.abcs.abcs-min-width>.wp-block-image {
    417417    scroll-snap-align: center !important;
    418418}
    … …  
    424424/* Fallback : indicateur de pagination pour navigateurs non compatibles */
    425425/* Objectif : signaler visuellement le carrousel sans boutons cliquables */
    426 :has(> .nbc-carousel)::after {
     426:has(> .abcs)::after {
    427427    content: '';
    428428    position: absolute;
    … …  
    446446}
    447447
    448 :has(> .nbc-carousel)::hover::after {
     448:has(> .abcs)::hover::after {
    449449    opacity: 0.75;
    450450}
    451451
    452 :has(> .nbc-carousel.nbc-carousel-hide-arrows)::after,
    453 :has(> .nbc-carousel.nbc-carousel-hide-markers)::after {
     452:has(> .abcs.abcs-hide-arrows)::after,
     453:has(> .abcs.abcs-hide-markers)::after {
    454454    display: none !important;
    455455    content: none !important;
    … …  
    462462
    463463    /* Masquer les fallbacks visuels */
    464     :has(> .nbc-carousel)::after {
     464    :has(> .abcs)::after {
    465465        display: none;
    466466    }
    467467
    468     .nbc-carousel::scroll-button(*) {
     468    .abcs::scroll-button(*) {
    469469        position: absolute;
    470470        z-index: var(--carousel-z-index);
    … …  
    500500    }
    501501
    502     .nbc-carousel::scroll-button(*):hover {
     502    .abcs::scroll-button(*):hover {
    503503        box-shadow: var(--carousel-shadow), 0 6px 20px rgba(0, 0, 0, 0.2);
    504504        background-color: var(--carousel-button-bg);
    … …  
    506506    }
    507507
    508     .nbc-carousel::scroll-button(*):disabled {
     508    .abcs::scroll-button(*):disabled {
    509509        opacity: 0;
    510510        visibility: hidden;
    … …  
    516516    /* Simple approach: rely on padding variables already defined by JavaScript */
    517517    /* Le calcul se fait dans le CSS avec calc() */
    518     .nbc-carousel::scroll-button(left) {
     518    .abcs::scroll-button(left) {
    519519        left: calc(var(--carousel-padding-left, 0px) + var(--carousel-button-offset, 0px));
    520520        content: '';
    … …  
    527527    }
    528528
    529     .nbc-carousel::scroll-button(right) {
     529    .abcs::scroll-button(right) {
    530530        right: calc(var(--carousel-padding-right, 0px) + var(--carousel-button-offset, 0px));
    531531        left: auto;
    … …  
    539539    }
    540540
    541     .nbc-carousel.nbc-carousel-hide-arrows::scroll-button(*) {
     541    .abcs.abcs-hide-arrows::scroll-button(*) {
    542542        display: none !important;
    543543        opacity: 0 !important;
    … …  
    546546    }
    547547
    548     .nbc-carousel.nbc-carousel-hide-markers::scroll-marker-group {
     548    .abcs.abcs-hide-markers::scroll-marker-group {
    549549        display: none !important;
    550550        opacity: 0 !important;
    … …  
    561561
    562562    /* Masquer les fallbacks visuels */
    563     :has(> .nbc-carousel)::after {
     563    :has(> .abcs)::after {
    564564        display: none;
    565565    }
    566566
    567     .nbc-carousel::scroll-marker-group {
     567    .abcs::scroll-marker-group {
    568568        position: absolute;
    569569        z-index: var(--carousel-z-index);
    … …  
    582582
    583583@supports selector(::scroll-marker) {
    584     .nbc-carousel>*::scroll-marker {
     584    .abcs>*::scroll-marker {
    585585        position: relative;
    586586        content: '';
    … …  
    595595    }
    596596
    597     .nbc-carousel.nbc-carousel-hide-markers>*::scroll-marker {
     597    .abcs.abcs-hide-markers>*::scroll-marker {
    598598        opacity: 0 !important;
    599599        cursor: default !important;
    … …  
    601601    }
    602602
    603     .nbc-carousel>*::scroll-marker:hover {
     603    .abcs>*::scroll-marker:hover {
    604604        opacity: 0.75;
    605605    }
    606606
    607     .nbc-carousel>*::scroll-marker:target-current {
     607    .abcs>*::scroll-marker:target-current {
    608608        opacity: 1;
    609609        cursor: default;
    … …  
    628628/* Mobile (default) - 1 column */
    629629/* Exclude min-width mode which has its own rules */
    630 .wp-block-post-template.is-layout-grid.nbc-carousel:not(.nbc-carousel-min-width) .wp-block-post {
     630.wp-block-post-template.is-layout-grid.abcs:not(.abcs-min-width) .wp-block-post {
    631631    width: 100% !important;
    632632    min-width: 100% !important;
    … …  
    637637
    638638    /* 2 columns */
    639     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-2 .wp-block-post {
     639    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-2 .wp-block-post {
    640640        width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
    641641        min-width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
    … …  
    643643
    644644    /* 3 columns */
    645     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-3 .wp-block-post {
     645    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-3 .wp-block-post {
    646646        width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important;
    647647        min-width: calc(33.33333% - var(--wp--style--block-gap, 1.25em) * 2 / 3) !important;
    … …  
    649649
    650650    /* 4 columns */
    651     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-4 .wp-block-post {
     651    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-4 .wp-block-post {
    652652        width: calc(25% - var(--wp--style--block-gap, 1.25em) * 3 / 4) !important;
    653653        min-width: calc(25% - var(--wp--style--block-gap, 1.25em) * 3 / 4) !important;
    … …  
    655655
    656656    /* 5 columns */
    657     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-5 .wp-block-post {
     657    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-5 .wp-block-post {
    658658        width: calc(20% - var(--wp--style--block-gap, 1.25em) * 4 / 5) !important;
    659659        min-width: calc(20% - var(--wp--style--block-gap, 1.25em) * 4 / 5) !important;
    … …  
    661661
    662662    /* 6 columns */
    663     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-6 .wp-block-post {
     663    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-6 .wp-block-post {
    664664        width: calc(16.66667% - var(--wp--style--block-gap, 1.25em) * 5 / 6) !important;
    665665        min-width: calc(16.66667% - var(--wp--style--block-gap, 1.25em) * 5 / 6) !important;
    … …  
    667667
    668668    /* 7 columns */
    669     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-7 .wp-block-post {
     669    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-7 .wp-block-post {
    670670        width: calc(14.285% - var(--wp--style--block-gap, 1.25em) * 6 / 7) !important;
    671671        min-width: calc(14.285% - var(--wp--style--block-gap, 1.25em) * 6 / 7) !important;
    … …  
    673673
    674674    /* 8 columns */
    675     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-8 .wp-block-post {
     675    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-8 .wp-block-post {
    676676        width: calc(12.5% - var(--wp--style--block-gap, 1.25em) * 7 / 8) !important;
    677677        min-width: calc(12.5% - var(--wp--style--block-gap, 1.25em) * 7 / 8) !important;
    … …  
    679679
    680680    /* 9 columns */
    681     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-9 .wp-block-post {
     681    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-9 .wp-block-post {
    682682        width: calc(11.111% - var(--wp--style--block-gap, 1.25em) * 8 / 9) !important;
    683683        min-width: calc(11.111% - var(--wp--style--block-gap, 1.25em) * 8 / 9) !important;
    … …  
    685685
    686686    /* 10 columns */
    687     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-10 .wp-block-post {
     687    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-10 .wp-block-post {
    688688        width: calc(10% - var(--wp--style--block-gap, 1.25em) * 9 / 10) !important;
    689689        min-width: calc(10% - var(--wp--style--block-gap, 1.25em) * 9 / 10) !important;
    … …  
    691691
    692692    /* 11 columns */
    693     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-11 .wp-block-post {
     693    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-11 .wp-block-post {
    694694        width: calc(9.090% - var(--wp--style--block-gap, 1.25em) * 10 / 11) !important;
    695695        min-width: calc(9.090% - var(--wp--style--block-gap, 1.25em) * 10 / 11) !important;
    … …  
    697697
    698698    /* 12 columns */
    699     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-12 .wp-block-post {
     699    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-12 .wp-block-post {
    700700        width: calc(8.333% - var(--wp--style--block-gap, 1.25em) * 11 / 12) !important;
    701701        min-width: calc(8.333% - var(--wp--style--block-gap, 1.25em) * 11 / 12) !important;
    … …  
    703703
    704704    /* 13 columns */
    705     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-13 .wp-block-post {
     705    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-13 .wp-block-post {
    706706        width: calc(7.692% - var(--wp--style--block-gap, 1.25em) * 12 / 13) !important;
    707707        min-width: calc(7.692% - var(--wp--style--block-gap, 1.25em) * 12 / 13) !important;
    … …  
    709709
    710710    /* 14 columns */
    711     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-14 .wp-block-post {
     711    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-14 .wp-block-post {
    712712        width: calc(7.142% - var(--wp--style--block-gap, 1.25em) * 13 / 14) !important;
    713713        min-width: calc(7.142% - var(--wp--style--block-gap, 1.25em) * 13 / 14) !important;
    … …  
    715715
    716716    /* 15 columns */
    717     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-15 .wp-block-post {
     717    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-15 .wp-block-post {
    718718        width: calc(6.666% - var(--wp--style--block-gap, 1.25em) * 14 / 15) !important;
    719719        min-width: calc(6.666% - var(--wp--style--block-gap, 1.25em) * 14 / 15) !important;
    … …  
    721721
    722722    /* 16 columns */
    723     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-16 .wp-block-post {
     723    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-16 .wp-block-post {
    724724        width: calc(6.25% - var(--wp--style--block-gap, 1.25em) * 15 / 16) !important;
    725725        min-width: calc(6.25% - var(--wp--style--block-gap, 1.25em) * 15 / 16) !important;
    … …  
    732732
    733733    /* 3 columns and up: force 2 columns on tablets */
    734     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-3 .wp-block-post,
    735     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-4 .wp-block-post,
    736     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-5 .wp-block-post,
    737     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-6 .wp-block-post,
    738     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-7 .wp-block-post,
    739     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-8 .wp-block-post,
    740     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-9 .wp-block-post,
    741     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-10 .wp-block-post,
    742     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-11 .wp-block-post,
    743     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-12 .wp-block-post,
    744     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-13 .wp-block-post,
    745     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-14 .wp-block-post,
    746     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-15 .wp-block-post,
    747     .wp-block-post-template.is-layout-grid.nbc-carousel.nbc-carousel-cols-16 .wp-block-post {
     734    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-3 .wp-block-post,
     735    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-4 .wp-block-post,
     736    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-5 .wp-block-post,
     737    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-6 .wp-block-post,
     738    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-7 .wp-block-post,
     739    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-8 .wp-block-post,
     740    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-9 .wp-block-post,
     741    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-10 .wp-block-post,
     742    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-11 .wp-block-post,
     743    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-12 .wp-block-post,
     744    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-13 .wp-block-post,
     745    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-14 .wp-block-post,
     746    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-15 .wp-block-post,
     747    .wp-block-post-template.is-layout-grid.abcs.abcs-cols-16 .wp-block-post {
    748748        width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
    749749        min-width: calc(50% - var(--wp--style--block-gap, 1.25em) / 2) !important;
    … …  
    756756
    757757/* Mobile (default) - 2 columns for galleries */
    758 .wp-block-gallery.nbc-carousel .wp-block-image {
     758.wp-block-gallery.abcs .wp-block-image {
    759759    width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    760760    min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    … …  
    765765
    766766    /* 1 column */
    767     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-1 .wp-block-image {
     767    .wp-block-gallery.abcs.abcs-cols-1 .wp-block-image {
    768768        width: 100% !important;
    769769        min-width: 100% !important;
    … …  
    771771
    772772    /* 2 columns */
    773     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-2 .wp-block-image {
     773    .wp-block-gallery.abcs.abcs-cols-2 .wp-block-image {
    774774        width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    775775        min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    … …  
    777777
    778778    /* 3 columns */
    779     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-3 .wp-block-image {
     779    .wp-block-gallery.abcs.abcs-cols-3 .wp-block-image {
    780780        width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3) !important;
    781781        min-width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3) !important;
    … …  
    783783
    784784    /* 4 columns */
    785     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-4 .wp-block-image {
     785    .wp-block-gallery.abcs.abcs-cols-4 .wp-block-image {
    786786        width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4) !important;
    787787        min-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4) !important;
    … …  
    789789
    790790    /* 5 columns */
    791     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-5 .wp-block-image {
     791    .wp-block-gallery.abcs.abcs-cols-5 .wp-block-image {
    792792        width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5) !important;
    793793        min-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5) !important;
    … …  
    795795
    796796    /* 6 columns */
    797     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-6 .wp-block-image {
     797    .wp-block-gallery.abcs.abcs-cols-6 .wp-block-image {
    798798        width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6) !important;
    799799        min-width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6) !important;
    … …  
    801801
    802802    /* 7 columns */
    803     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-7 .wp-block-image {
     803    .wp-block-gallery.abcs.abcs-cols-7 .wp-block-image {
    804804        width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7) !important;
    805805        min-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7) !important;
    … …  
    807807
    808808    /* 8 columns */
    809     .wp-block-gallery.nbc-carousel.nbc-carousel-cols-8 .wp-block-image {
     809    .wp-block-gallery.abcs.abcs-cols-8 .wp-block-image {
    810810        width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8) !important;
    811811        min-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8) !important;
    … …  
    819819/* Mobile (default) - 1 column */
    820820/* Exclude min-width mode which has its own rules */
    821 .wp-block-group.is-layout-grid.nbc-carousel:not(.nbc-carousel-min-width)>* {
     821.wp-block-group.is-layout-grid.abcs:not(.abcs-min-width)>* {
    822822    width: 100% !important;
    823823    min-width: 100% !important;
    … …  
    828828
    829829    /* 2 columns */
    830     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-2>* {
     830    .wp-block-group.is-layout-grid.abcs.abcs-cols-2>* {
    831831        width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    832832        min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    … …  
    834834
    835835    /* 3 columns */
    836     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-3>* {
     836    .wp-block-group.is-layout-grid.abcs.abcs-cols-3>* {
    837837        width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3) !important;
    838838        min-width: calc(33.33333% - var(--wp--style--block-gap, 1rem) * 2 / 3) !important;
    … …  
    840840
    841841    /* 4 columns */
    842     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-4>* {
     842    .wp-block-group.is-layout-grid.abcs.abcs-cols-4>* {
    843843        width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4) !important;
    844844        min-width: calc(25% - var(--wp--style--block-gap, 1rem) * 3 / 4) !important;
    … …  
    846846
    847847    /* 5 columns */
    848     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-5>* {
     848    .wp-block-group.is-layout-grid.abcs.abcs-cols-5>* {
    849849        width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5) !important;
    850850        min-width: calc(20% - var(--wp--style--block-gap, 1rem) * 4 / 5) !important;
    … …  
    852852
    853853    /* 6 columns */
    854     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-6>* {
     854    .wp-block-group.is-layout-grid.abcs.abcs-cols-6>* {
    855855        width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6) !important;
    856856        min-width: calc(16.66667% - var(--wp--style--block-gap, 1rem) * 5 / 6) !important;
    … …  
    858858
    859859    /* 7 columns */
    860     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-7>* {
     860    .wp-block-group.is-layout-grid.abcs.abcs-cols-7>* {
    861861        width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7) !important;
    862862        min-width: calc(14.285% - var(--wp--style--block-gap, 1rem) * 6 / 7) !important;
    … …  
    864864
    865865    /* 8 columns */
    866     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-8>* {
     866    .wp-block-group.is-layout-grid.abcs.abcs-cols-8>* {
    867867        width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8) !important;
    868868        min-width: calc(12.5% - var(--wp--style--block-gap, 1rem) * 7 / 8) !important;
    … …  
    870870
    871871    /* 9 columns */
    872     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-9>* {
     872    .wp-block-group.is-layout-grid.abcs.abcs-cols-9>* {
    873873        width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9) !important;
    874874        min-width: calc(11.111% - var(--wp--style--block-gap, 1rem) * 8 / 9) !important;
    … …  
    876876
    877877    /* 10 columns */
    878     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-10>* {
     878    .wp-block-group.is-layout-grid.abcs.abcs-cols-10>* {
    879879        width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10) !important;
    880880        min-width: calc(10% - var(--wp--style--block-gap, 1rem) * 9 / 10) !important;
    … …  
    882882
    883883    /* 11 columns */
    884     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-11>* {
     884    .wp-block-group.is-layout-grid.abcs.abcs-cols-11>* {
    885885        width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11) !important;
    886886        min-width: calc(9.090% - var(--wp--style--block-gap, 1rem) * 10 / 11) !important;
    … …  
    888888
    889889    /* 12 columns */
    890     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-12>* {
     890    .wp-block-group.is-layout-grid.abcs.abcs-cols-12>* {
    891891        width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12) !important;
    892892        min-width: calc(8.333% - var(--wp--style--block-gap, 1rem) * 11 / 12) !important;
    … …  
    894894
    895895    /* 13 columns */
    896     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-13>* {
     896    .wp-block-group.is-layout-grid.abcs.abcs-cols-13>* {
    897897        width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13) !important;
    898898        min-width: calc(7.692% - var(--wp--style--block-gap, 1rem) * 12 / 13) !important;
    … …  
    900900
    901901    /* 14 columns */
    902     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-14>* {
     902    .wp-block-group.is-layout-grid.abcs.abcs-cols-14>* {
    903903        width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14) !important;
    904904        min-width: calc(7.142% - var(--wp--style--block-gap, 1rem) * 13 / 14) !important;
    … …  
    906906
    907907    /* 15 columns */
    908     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-15>* {
     908    .wp-block-group.is-layout-grid.abcs.abcs-cols-15>* {
    909909        width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15) !important;
    910910        min-width: calc(6.666% - var(--wp--style--block-gap, 1rem) * 14 / 15) !important;
    … …  
    912912
    913913    /* 16 columns */
    914     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-16>* {
     914    .wp-block-group.is-layout-grid.abcs.abcs-cols-16>* {
    915915        width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16) !important;
    916916        min-width: calc(6.25% - var(--wp--style--block-gap, 1rem) * 15 / 16) !important;
    … …  
    923923
    924924    /* 3 columns and up: force 2 columns on tablets */
    925     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-3>*,
    926     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-4>*,
    927     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-5>*,
    928     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-6>*,
    929     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-7>*,
    930     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-8>*,
    931     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-9>*,
    932     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-10>*,
    933     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-11>*,
    934     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-12>*,
    935     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-13>*,
    936     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-14>*,
    937     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-15>*,
    938     .wp-block-group.is-layout-grid.nbc-carousel.nbc-carousel-cols-16>* {
     925    .wp-block-group.is-layout-grid.abcs.abcs-cols-3>*,
     926    .wp-block-group.is-layout-grid.abcs.abcs-cols-4>*,
     927    .wp-block-group.is-layout-grid.abcs.abcs-cols-5>*,
     928    .wp-block-group.is-layout-grid.abcs.abcs-cols-6>*,
     929    .wp-block-group.is-layout-grid.abcs.abcs-cols-7>*,
     930    .wp-block-group.is-layout-grid.abcs.abcs-cols-8>*,
     931    .wp-block-group.is-layout-grid.abcs.abcs-cols-9>*,
     932    .wp-block-group.is-layout-grid.abcs.abcs-cols-10>*,
     933    .wp-block-group.is-layout-grid.abcs.abcs-cols-11>*,
     934    .wp-block-group.is-layout-grid.abcs.abcs-cols-12>*,
     935    .wp-block-group.is-layout-grid.abcs.abcs-cols-13>*,
     936    .wp-block-group.is-layout-grid.abcs.abcs-cols-14>*,
     937    .wp-block-group.is-layout-grid.abcs.abcs-cols-15>*,
     938    .wp-block-group.is-layout-grid.abcs.abcs-cols-16>* {
    939939        width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    940940        min-width: calc(50% - var(--wp--style--block-gap, 1rem) / 2) !important;
    … …  
    964964
    965965    /* Reduce the gap on mobile */
    966     .nbc-carousel {
     966    .abcs {
    967967        gap: var(--wp--style--block-gap, 0.5rem);
    968968        padding: 0.75rem 0px;
    … …  
    980980
    981981    /* Reduce the gap even further */
    982     .nbc-carousel {
     982    .abcs {
    983983        gap: var(--wp--style--block-gap, 0.25rem);
    984984        padding: 1rem 0px;
    … …  
    998998
    999999/* Toggle Control */
    1000 .cfg-nbc-carousel-toggle-control {
     1000.cfg-abcs-toggle-control {
    10011001    margin-bottom: 1rem;
    10021002}
    10031003
    1004 .cfg-nbc-carousel-toggle-control .components-base-control__label {
     1004.cfg-abcs-toggle-control .components-base-control__label {
    10051005    font-weight: 600;
    10061006    color: #1e1e1e;
    10071007}
    10081008
    1009 .cfg-nbc-carousel-toggle-control .components-base-control__help {
     1009.cfg-abcs-toggle-control .components-base-control__help {
    10101010    font-size: 12px;
    10111011    color: #757575;
    … …  
    10131013}
    10141014
    1015 .cfg-nbc-carousel-toggle-control .components-toggle-control__label[for*="carousel"] {
     1015.cfg-abcs-toggle-control .components-toggle-control__label[for*="carousel"] {
    10161016    color: #007cba;
    10171017    font-weight: 600;
    … …  
    10191019
    10201020/* Panel Carousel */
    1021 .cfg-nbc-carousel-panel .components-panel__body-title {
     1021.cfg-abcs-panel .components-panel__body-title {
    10221022    font-weight: 600;
    10231023}
    10241024
    1025 .cfg-nbc-carousel-panel-first {
     1025.cfg-abcs-panel-first {
    10261026    order: -1000 !important;
    10271027}
    10281028
    1029 .block-editor-block-inspector .cfg-nbc-carousel-panel-first {
     1029.block-editor-block-inspector .cfg-abcs-panel-first {
    10301030    order: -1000 !important;
    10311031    margin-bottom: 16px;
    … …  
    10331033
    10341034/* Fix editor click behaviour */
    1035 .block-editor-block-list__layout .nbc-carousel>*:not(:first-child),
    1036 .editor-styles-wrapper .nbc-carousel>*:not(:first-child) {
     1035.block-editor-block-list__layout .abcs>*:not(:first-child),
     1036.editor-styles-wrapper .abcs>*:not(:first-child) {
    10371037    pointer-events: none;
    10381038}
    … …  
    10431043
    10441044/* Optimisation du rendu */
    1045 .nbc-carousel,
    1046 .block-editor-block-list__layout .nbc-carousel,
    1047 .editor-styles-wrapper .nbc-carousel {
     1045.abcs,
     1046.block-editor-block-list__layout .abcs,
     1047.editor-styles-wrapper .abcs {
    10481048    will-change: scroll-position;
    10491049    contain: layout style;
    … …  
    10511051
    10521052/* Optimise rendered elements */
    1053 .nbc-carousel>*,
    1054 .block-editor-block-list__layout .nbc-carousel>*,
    1055 .editor-styles-wrapper .nbc-carousel>* {
     1053.abcs>*,
     1054.block-editor-block-list__layout .abcs>*,
     1055.editor-styles-wrapper .abcs>* {
    10561056    will-change: transform;
    10571057}
    … …  
    10641064@media (prefers-reduced-motion: reduce) {
    10651065
    1066     .nbc-carousel,
    1067     .block-editor-block-list__layout .nbc-carousel,
    1068     .editor-styles-wrapper .nbc-carousel {
     1066    .abcs,
     1067    .block-editor-block-list__layout .abcs,
     1068    .editor-styles-wrapper .abcs {
    10691069        scroll-behavior: auto;
    10701070    }
    10711071
    1072     .nbc-carousel::scroll-button(*),
    1073     *:has(>.nbc-carousel)::after {
     1072    .abcs::scroll-button(*),
     1073    *:has(>.abcs)::after {
    10741074        transition: none;
    10751075    }
    10761076
    1077     .nbc-carousel>*::scroll-marker {
     1077    .abcs>*::scroll-marker {
    10781078        transition: none;
    10791079    }
    … …  
    10831083@media (prefers-contrast: high) {
    10841084
    1085     .nbc-carousel::scroll-button(*),
    1086     *:has(>.nbc-carousel)::after {
     1085    .abcs::scroll-button(*),
     1086    *:has(>.abcs)::after {
    10871087        border-width: 3px;
    10881088    }
    10891089
    1090     .nbc-carousel>*::scroll-marker {
     1090    .abcs>*::scroll-marker {
    10911091        border: 2px solid currentColor;
    10921092    }
    … …  
    10951095@media (max-width: 600px) {
    10961096
    1097     .nbc-carousel.nbc-carousel-min-width>*,
    1098     .block-editor-block-list__layout .nbc-carousel.nbc-carousel-min-width>*,
    1099     .editor-styles-wrapper .nbc-carousel.nbc-carousel-min-width>*,
    1100     .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    1101     .block-editor-block-list__layout .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    1102     .editor-styles-wrapper .wp-block-post-template.nbc-carousel.nbc-carousel-min-width .wp-block-post,
    1103     .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    1104     .block-editor-block-list__layout .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    1105     .editor-styles-wrapper .wp-block-group.nbc-carousel.nbc-carousel-min-width>*,
    1106     .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image,
    1107     .block-editor-block-list__layout .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image,
    1108     .editor-styles-wrapper .wp-block-gallery.nbc-carousel.nbc-carousel-min-width>.wp-block-image {
     1097    .abcs.abcs-min-width>*,
     1098    .block-editor-block-list__layout .abcs.abcs-min-width>*,
     1099    .editor-styles-wrapper .abcs.abcs-min-width>*,
     1100    .wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     1101    .block-editor-block-list__layout .wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     1102    .editor-styles-wrapper .wp-block-post-template.abcs.abcs-min-width .wp-block-post,
     1103    .wp-block-group.abcs.abcs-min-width>*,
     1104    .block-editor-block-list__layout .wp-block-group.abcs.abcs-min-width>*,
     1105    .editor-styles-wrapper .wp-block-group.abcs.abcs-min-width>*,
     1106    .wp-block-gallery.abcs.abcs-min-width>.wp-block-image,
     1107    .block-editor-block-list__layout .wp-block-gallery.abcs.abcs-min-width>.wp-block-image,
     1108    .editor-styles-wrapper .wp-block-gallery.abcs.abcs-min-width>.wp-block-image {
    11091109        width: 100% !important;
    11101110        min-width: 100% !important;

  • native-blocks-carousel/trunk/assets/js/carousel-editor.js

    r3394953 r3395126  
    11/**
    22 * Adds a "Carousel" toggle to Group, Post Template and Gallery blocks
    3  * to easily enable/disable the .nbc-carousel class.
     3 * to easily enable/disable the .abcs class.
    44 */
    55(function (wp) {
    … …  
    1616  const SUPPORTED_BLOCKS = ['core/group', 'core/post-template', 'core/gallery'];
    1717
    18   const SHARED = window.NativeBlocksCarouselShared || {};
     18  const SHARED = window.AnyBlockCarouselSliderShared || {};
    1919  const FALLBACK_DEFAULT_ARROW_STYLE = 'chevron';
    2020  const DEFAULT_ARROW_STYLE = SHARED.DEFAULT_ARROW_STYLE || FALLBACK_DEFAULT_ARROW_STYLE;
    … …  
    123123
    124124  const isValidArrowStyle = (styleKey) => !!getIconDefinition(styleKey);
     125
     126  const findBlockWrapperElements = (rootDoc, targetClientId) => {
     127    if (!targetClientId) {
     128      return [];
     129    }
     130
     131    const results = new Set();
     132
     133    const collectFromDocument = (searchDoc) => {
     134      if (!searchDoc || typeof searchDoc.querySelectorAll !== 'function') {
     135        return;
     136      }
     137      const matches = searchDoc.querySelectorAll(`[data-block="${targetClientId}"]`);
     138      matches.forEach((node) => {
     139        if (node) {
     140          results.add(node);
     141        }
     142      });
     143    };
     144
     145    collectFromDocument(rootDoc);
     146
     147    if (rootDoc === document) {
     148      const iframeSelectors = [
     149        '.editor-canvas iframe',
     150        'iframe[name="editor-canvas"]',
     151        '.edit-site-visual-editor__editor-canvas',
     152      ];
     153
     154      iframeSelectors.forEach((selector) => {
     155        try {
     156          const iframe = document.querySelector(selector);
     157          if (!iframe) {
     158            return;
     159          }
     160
     161          const iframeDoc = iframe.contentDocument || (iframe.contentWindow && iframe.contentWindow.document) || null;
     162          collectFromDocument(iframeDoc);
     163        } catch (error) {
     164          // Ignore cross-origin or unavailable iframe documents
     165        }
     166      });
     167    }
     168
     169    return Array.from(results);
     170  };
    125171
    126172  /**
    … …  
    188234        {
    189235          value: 'chevron',
    190           label: __('Chevron', 'native-blocks-carousel'),
     236          label: __('Chevron', 'any-block-carousel-slider'),
    191237        },
    192238        {
    193239          value: 'arrow',
    194           label: __('Arrow', 'native-blocks-carousel'),
     240          label: __('Arrow', 'any-block-carousel-slider'),
    195241        },
    196242        {
    197243          value: 'angles',
    198           label: __('Angles', 'native-blocks-carousel'),
     244          label: __('Angles', 'any-block-carousel-slider'),
    199245        },
    200246      ];
    … …  
    207253        return createElement(
    208254          'span',
    209           { className: 'nbc-arrow-style-icon' },
     255          { className: 'abcs-arrow-style-icon' },
    210256          createElement(RawHTML, { children: rightArrow })
    211257        );
    … …  
    241287        const filteredClasses = classArray.filter(
    242288          (cls) =>
    243             !cls.startsWith('nbc-carousel-cols-') &&
    244             cls !== 'nbc-carousel-min-width' &&
     289            !cls.startsWith('abcs-cols-') &&
     290            cls !== 'abcs-min-width' &&
    245291            // Remove legacy classes kept for migration purposes
    246292            !cls.startsWith('carousel-cols-') &&
    247293            cls !== 'carousel-min-width' &&
    248             !cls.startsWith('nbc-carousel-icon-') &&
    249             cls !== 'nbc-carousel-hide-arrows' &&
    250             cls !== 'nbc-carousel-hide-markers'
     294            !cls.startsWith('abcs-icon-') &&
     295            cls !== 'abcs-hide-arrows' &&
     296            cls !== 'abcs-hide-markers'
    251297        );
    252298
    253299        if (enabled) {
    254           // Add the 'nbc-carousel' class if it is not already present
    255           if (!filteredClasses.includes('nbc-carousel')) {
    256             filteredClasses.push('nbc-carousel');
    257           }
    258 
    259           // For galleries, detect and add the nbc-carousel-cols-X class
     300          // Add the 'abcs' class if it is not already present
     301          if (!filteredClasses.includes('abcs')) {
     302            filteredClasses.push('abcs');
     303          }
     304
     305          // For galleries, detect and add the abcs-cols-X class
    260306          if (name === 'core/gallery') {
    261307            const columnCount = attributes.columns;
    … …  
    263309            // If a column count is defined (up to 8 columns)
    264310            if (columnCount && columnCount >= 1 && columnCount <= 8) {
    265               filteredClasses.push(`nbc-carousel-cols-${columnCount}`);
     311              filteredClasses.push(`abcs-cols-${columnCount}`);
    266312            }
    267313            // Otherwise default to 3 columns
    268314            else {
    269               filteredClasses.push('nbc-carousel-cols-3');
     315              filteredClasses.push('abcs-cols-3');
    270316            }
    271317          }
    272318
    273           // For grids (Group and Post Template), detect and add the nbc-carousel-cols-X class
     319          // For grids (Group and Post Template), detect and add the abcs-cols-X class
    274320          if (
    275321            (name === 'core/group' || name === 'core/post-template') &&
    … …  
    286332            // If a column count is defined (up to 16 columns) and we are not in Auto mode
    287333            if (columnCount && columnCount >= 1 && columnCount <= 16 && !isAutoMode) {
    288               filteredClasses.push(`nbc-carousel-cols-${columnCount}`);
     334              filteredClasses.push(`abcs-cols-${columnCount}`);
    289335            }
    290336            // If a minimum width is defined or we are in Auto mode
    291337            else if (minimumColumnWidth || isAutoMode) {
    292               filteredClasses.push('nbc-carousel-min-width');
     338              filteredClasses.push('abcs-min-width');
    293339            }
    294340            // Otherwise default to 3 columns
    295341            else {
    296               filteredClasses.push('nbc-carousel-cols-3');
     342              filteredClasses.push('abcs-cols-3');
    297343            }
    298344          }
    299345        } else {
    300           // Remove the 'nbc-carousel' class
    301           const index = filteredClasses.indexOf('nbc-carousel');
     346          // Remove the 'abcs' class
     347          const index = filteredClasses.indexOf('abcs');
    302348          if (index > -1) {
    303349            filteredClasses.splice(index, 1);
    … …  
    311357
    312358      /**
    313        * Keep the nbc-carousel-cols-X class in sync when column counts change.
     359       * Keep the abcs-cols-X class in sync when column counts change.
    314360       */
    315361      useEffect(() => {
    … …  
    321367        const classArray = currentClasses.split(' ').filter(Boolean);
    322368
    323         // Find the current nbc-carousel-cols-* class
     369        // Find the current abcs-cols-* class
    324370        const currentColsClass = classArray.find((cls) =>
    325           cls.startsWith('nbc-carousel-cols-')
     371          cls.startsWith('abcs-cols-')
    326372        );
    327         const hasMinWidthClass = classArray.includes('nbc-carousel-min-width');
     373        const hasMinWidthClass = classArray.includes('abcs-min-width');
    328374
    329375        let expectedColsClass = null;
    … …  
    336382          // If a column count is defined (up to 8 columns)
    337383          if (columnCount && columnCount >= 1 && columnCount <= 8) {
    338             expectedColsClass = `nbc-carousel-cols-${columnCount}`;
     384            expectedColsClass = `abcs-cols-${columnCount}`;
    339385          }
    340386          // Otherwise default to 3 columns
    341387          else {
    342             expectedColsClass = 'nbc-carousel-cols-3';
     388            expectedColsClass = 'abcs-cols-3';
    343389          }
    344390        }
    … …  
    357403          if (columnCount && columnCount >= 1 && columnCount <= 16) {
    358404            // Manual grid mode: ignore minimumColumnWidth and gridItemPosition
    359             expectedColsClass = `nbc-carousel-cols-${columnCount}`;
     405            expectedColsClass = `abcs-cols-${columnCount}`;
    360406            shouldHaveMinWidthClass = false;
    361407          }
    … …  
    372418            // Otherwise default to 3 columns
    373419            else {
    374               expectedColsClass = 'nbc-carousel-cols-3';
     420              expectedColsClass = 'abcs-cols-3';
    375421              shouldHaveMinWidthClass = false;
    376422            }
    … …  
    382428          const filteredClasses = classArray.filter(
    383429            (cls) =>
    384               !cls.startsWith('nbc-carousel-cols-') &&
    385               cls !== 'nbc-carousel-min-width' &&
     430              !cls.startsWith('abcs-cols-') &&
     431              cls !== 'abcs-min-width' &&
    386432              // Remove legacy classes kept for migration purposes
    387433              !cls.startsWith('carousel-cols-') &&
    … …  
    394440          }
    395441          if (shouldHaveMinWidthClass) {
    396             filteredClasses.push('nbc-carousel-min-width');
     442            filteredClasses.push('abcs-min-width');
    397443          }
    398444
    … …  
    413459        const baseClasses = classArray.filter(
    414460          (cls) =>
    415             !cls.startsWith('nbc-carousel-icon-') &&
    416             cls !== 'nbc-carousel-hide-arrows' &&
    417             cls !== 'nbc-carousel-hide-markers'
     461            !cls.startsWith('abcs-icon-') &&
     462            cls !== 'abcs-hide-arrows' &&
     463            cls !== 'abcs-hide-markers'
    418464        );
    419465        const normalizedStyle = normalizedArrowStyle;
    420         const desiredClass = `nbc-carousel-icon-${normalizedStyle}`;
     466        const desiredClass = `abcs-icon-${normalizedStyle}`;
    421467
    422468        let nextClasses = [...baseClasses];
    … …  
    427473              nextClasses.push(desiredClass);
    428474            }
    429           } else if (!nextClasses.includes('nbc-carousel-hide-arrows')) {
    430             nextClasses.push('nbc-carousel-hide-arrows');
    431           }
    432 
    433           if (!carouselShowMarkers && !nextClasses.includes('nbc-carousel-hide-markers')) {
    434             nextClasses.push('nbc-carousel-hide-markers');
     475          } else if (!nextClasses.includes('abcs-hide-arrows')) {
     476            nextClasses.push('abcs-hide-arrows');
     477          }
     478
     479          if (!carouselShowMarkers && !nextClasses.includes('abcs-hide-markers')) {
     480            nextClasses.push('abcs-hide-markers');
    435481          }
    436482        }
    … …  
    453499          if (doc && typeof requestAnimationFrame === 'function') {
    454500            const runUpdate = () => {
    455               const blockWrapper = doc.querySelector(`[data-block="${clientId}"]`);
    456               let targetCarousel = null;
    457 
    458               if (blockWrapper) {
    459                 if (blockWrapper.classList && blockWrapper.classList.contains('nbc-carousel')) {
    460                   targetCarousel = blockWrapper;
    461                 } else {
    462                   targetCarousel = blockWrapper.querySelector('.nbc-carousel');
    463                 }
    464               }
    465 
    466               if (!targetCarousel) {
     501              const blockWrappers = findBlockWrapperElements(doc, clientId);
     502              if (!blockWrappers.length) {
    467503                return;
    468504              }
    469505
    470               const config = {
    471                 styleKey: normalizedStyle,
    472                 elements: [targetCarousel],
    473               };
    474 
    475               applyArrowIconsToCarousels(null, doc, config);
    476 
    477               setTimeout(() => {
    478                 applyArrowIconsToCarousels(null, doc, config);
    479               }, 50);
     506              const carouselsByDocument = new Map();
     507
     508              blockWrappers.forEach((wrapper) => {
     509                if (!wrapper) {
     510                  return;
     511                }
     512
     513                const potentialTargets = [];
     514
     515                if (wrapper.classList && wrapper.classList.contains('abcs')) {
     516                  potentialTargets.push(wrapper);
     517                }
     518
     519                const descendants = wrapper.querySelectorAll('.abcs');
     520                descendants.forEach((node) => {
     521                  potentialTargets.push(node);
     522                });
     523
     524                potentialTargets.forEach((carouselNode) => {
     525                  if (!carouselNode) {
     526                    return;
     527                  }
     528
     529                  const ownerDocument = carouselNode.ownerDocument || doc;
     530                  if (!carouselsByDocument.has(ownerDocument)) {
     531                    carouselsByDocument.set(ownerDocument, new Set());
     532                  }
     533
     534                  carouselsByDocument.get(ownerDocument).add(carouselNode);
     535                });
     536              });
     537
     538              if (!carouselsByDocument.size) {
     539                return;
     540              }
     541
     542              carouselsByDocument.forEach((carouselSet, ownerDocument) => {
     543                const elements = Array.from(carouselSet);
     544                if (!elements.length) {
     545                  return;
     546                }
     547
     548                const config = {
     549                  styleKey: normalizedStyle,
     550                  elements,
     551                };
     552
     553                applyArrowIconsToCarousels(null, ownerDocument, config);
     554
     555                setTimeout(() => {
     556                  applyArrowIconsToCarousels(null, ownerDocument, config);
     557                }, 50);
     558              });
    480559            };
    481560
    … …  
    492571        }
    493572
    494         const styleId = 'nbc-arrow-style-control-styles';
     573        const styleId = 'abcs-arrow-style-control-styles';
    495574        if (document.getElementById(styleId)) {
    496575          return;
    … …  
    501580        style.type = 'text/css';
    502581        style.textContent = `
    503           .nbc-arrow-style-panel .components-base-control__field,
    504           .nbc-arrow-style-panel .components-toggle-group-control {
     582          .abcs-arrow-style-panel .components-base-control__field,
     583          .abcs-arrow-style-panel .components-toggle-group-control {
    505584            display: grid;
    506585            justify-content: center;
    507586          }
    508           .nbc-arrow-style-panel .components-toggle-group-control {
     587          .abcs-arrow-style-panel .components-toggle-group-control {
    509588            width: 100%;
    510589          }
    511           .nbc-arrow-style-panel .nbc-arrow-style-group {
     590          .abcs-arrow-style-panel .abcs-arrow-style-group {
    512591            gap: 8px;
    513592          }
    514           .nbc-arrow-style-group.components-toggle-group-control {
     593          .abcs-arrow-style-group.components-toggle-group-control {
    515594            display: flex;
    516595            flex-wrap: wrap;
    517596          }
    518           .nbc-arrow-style-group .components-toggle-group-control__option {
    519             --nbc-arrow-option-size: 44px;
    520             width: var(--nbc-arrow-option-size);
    521             height: var(--nbc-arrow-option-size);
    522             min-width: var(--nbc-arrow-option-size);
    523             min-height: var(--nbc-arrow-option-size);
    524             flex: 0 0 var(--nbc-arrow-option-size);
     597          .abcs-arrow-style-group .components-toggle-group-control__option {
     598            --abcs-arrow-option-size: 44px;
     599            width: var(--abcs-arrow-option-size);
     600            height: var(--abcs-arrow-option-size);
     601            min-width: var(--abcs-arrow-option-size);
     602            min-height: var(--abcs-arrow-option-size);
     603            flex: 0 0 var(--abcs-arrow-option-size);
    525604            padding: 0;
    526605            border-radius: 10px;
    … …  
    535614            box-sizing: border-box;
    536615          }
    537           .nbc-arrow-style-group .components-toggle-group-control__option > span {
     616          .abcs-arrow-style-group .components-toggle-group-control__option > span {
    538617            display: flex;
    539618            align-items: center;
    … …  
    543622            line-height: 0;
    544623          }
    545           .nbc-arrow-style-group .components-toggle-group-control__option:hover {
     624          .abcs-arrow-style-group .components-toggle-group-control__option:hover {
    546625            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    547626            transform: translateY(-1px);
    548627          }
    549           .nbc-arrow-style-group .components-toggle-group-control__option.is-selected {
     628          .abcs-arrow-style-group .components-toggle-group-control__option.is-selected {
    550629            background: var(--wp-admin-theme-color, #3858e9);
    551630            border-color: var(--wp-admin-theme-color, #3858e9);
    … …  
    554633            transform: none;
    555634          }
    556           .nbc-arrow-style-icon {
     635          .abcs-arrow-style-icon {
    557636            display: flex;
    558637            align-items: center;
    … …  
    561640            height: 100%;
    562641          }
    563           .nbc-arrow-style-icon svg {
     642          .abcs-arrow-style-icon svg {
    564643            width: 20px;
    565644            height: 20px;
    … …  
    583662            PanelBody,
    584663            {
    585               title: __('Carousel', 'native-blocks-carousel'),
     664              title: __('Carousel', 'any-block-carousel-slider'),
    586665              initialOpen: true,
    587666            },
    588667            createElement(ToggleControl, {
    589               label: __('Enable carousel', 'native-blocks-carousel'),
     668              label: __('Enable carousel', 'any-block-carousel-slider'),
    590669              checked: carouselEnabled,
    591670              __nextHasNoMarginBottom: true,
    … …  
    595674                  ? __(
    596675                    'Carousel is enabled. The number of visible columns is detected automatically from the gallery settings.',
    597                     'native-blocks-carousel'
     676                    'any-block-carousel-slider'
    598677                  )
    599678                  : (name === 'core/group' || name === 'core/post-template') && attributes.layout?.type === 'grid'
    … …  
    601680                      ? __(
    602681                        'Carousel is enabled in Auto mode. Slide width is set by the "Minimum column width" (' + attributes.layout.minimumColumnWidth + ').',
    603                         'native-blocks-carousel'
     682                        'any-block-carousel-slider'
    604683                      )
    605684                      : attributes.layout?.columnCount
    606685                        ? __(
    607686                          'Carousel is enabled in Manual mode. The number of visible columns (' + attributes.layout.columnCount + ') is taken from the grid settings.',
    608                           'native-blocks-carousel'
     687                          'any-block-carousel-slider'
    609688                        )
    610689                        : __(
    611690                          'Carousel is enabled. Configure the column count or minimum width in the grid settings.',
    612                           'native-blocks-carousel'
     691                          'any-block-carousel-slider'
    613692                        )
    614693                    : __(
    615694                      'Carousel is enabled. Items scroll horizontally.',
    616                       'native-blocks-carousel'
     695                      'any-block-carousel-slider'
    617696                    )
    618697                : __(
    619698                  'Enable to convert this block into a carousel with navigation. You can then choose Manual mode (column count) or Auto mode (minimum column width).',
    620                   'native-blocks-carousel'
     699                  'any-block-carousel-slider'
    621700                ),
    622701            }),
    623702            carouselEnabled
    624703              ? createElement(ToggleControl, {
    625                 label: __('Display navigation arrows', 'native-blocks-carousel'),
     704                label: __('Display navigation arrows', 'any-block-carousel-slider'),
    626705                checked: carouselShowArrows,
    627706                __nextHasNoMarginBottom: true,
    … …  
    632711                  ? __(
    633712                    'Navigation arrows are visible on the carousel.',
    634                     'native-blocks-carousel'
     713                    'any-block-carousel-slider'
    635714                  )
    636715                  : __(
    637716                    'Arrows are hidden. Users can navigate via swipe or scroll.',
    638                     'native-blocks-carousel'
     717                    'any-block-carousel-slider'
    639718                  ),
    640719              })
    … …  
    642721            carouselEnabled
    643722              ? createElement(ToggleControl, {
    644                 label: __('Display pagination markers', 'native-blocks-carousel'),
     723                label: __('Display pagination markers', 'any-block-carousel-slider'),
    645724                checked: carouselShowMarkers,
    646725                __nextHasNoMarginBottom: true,
    … …  
    651730                  ? __(
    652731                    'Pagination markers are displayed below the carousel.',
    653                     'native-blocks-carousel'
     732                    'any-block-carousel-slider'
    654733                  )
    655734                  : __(
    656735                    'Pagination markers are hidden for a cleaner layout.',
    657                     'native-blocks-carousel'
     736                    'any-block-carousel-slider'
    658737                  ),
    659738              })
    … …  
    663742                PanelBody,
    664743                {
    665                   title: __('Arrow style', 'native-blocks-carousel'),
     744                  title: __('Arrow style', 'any-block-carousel-slider'),
    666745                  initialOpen: true,
    667                   className: 'nbc-arrow-style-panel',
     746                  className: 'abcs-arrow-style-panel',
    668747                },
    669748                createElement(
    670749                  ToggleGroupControl,
    671750                  {
    672                     className: 'nbc-arrow-style-group',
     751                    className: 'abcs-arrow-style-group',
    673752                    value: normalizedArrowStyle,
    674753                    isBlock: false,
    … …  
    686765                      label: option.label,
    687766                      icon: buildIconElement(option.value),
    688                       className: 'nbc-arrow-style-option',
     767                      className: 'abcs-arrow-style-option',
    689768                      'aria-label': option.label,
    690769                      showTooltip: true,
    … …  
    718797      if (typeof window !== 'undefined' && window.getComputedStyle) {
    719798        const node = props?.clientId ? document.querySelector(`[data-block="${props.clientId}"]`) : null;
    720         const carouselNode = node && node.classList.contains('nbc-carousel') ? node : node?.querySelector?.('.nbc-carousel');
     799        const carouselNode = node && node.classList.contains('abcs') ? node : node?.querySelector?.('.abcs');
    721800        if (carouselNode) {
    722801          const computedGap = window.getComputedStyle(carouselNode).gap || window.getComputedStyle(carouselNode).columnGap;
    … …  
    837916            ...customStyles,
    838917          },
    839           'data-nbc-carousel-arrow-style': attributes.carouselArrowStyle || DEFAULT_ARROW_STYLE,
     918          'data-abcs-arrow-style': attributes.carouselArrowStyle || DEFAULT_ARROW_STYLE,
    840919        },
    841920      };
    … …  
    848927  addFilter(
    849928    'blocks.registerBlockType',
    850     'native-blocks-carousel/add-carousel-attribute',
     929    'any-block-carousel-slider/add-carousel-attribute',
    851930    addCarouselAttribute
    852931  );
    … …  
    854933  addFilter(
    855934    'editor.BlockEdit',
    856     'native-blocks-carousel/with-carousel-control',
     935    'any-block-carousel-slider/with-carousel-control',
    857936    withCarouselControl
    858937  );
    … …  
    860939  addFilter(
    861940    'editor.BlockListBlock',
    862     'native-blocks-carousel/with-carousel-styles',
     941    'any-block-carousel-slider/with-carousel-styles',
    863942    withCarouselStyles
    864943  );
    … …  
    870949   */
    871950  function copyPaddingVariablesToParent() {
    872     const carousels = document.querySelectorAll('.nbc-carousel');
     951    const carousels = document.querySelectorAll('.abcs');
    873952    carousels.forEach(function (carousel) {
    874953      const computedStyle = window.getComputedStyle(carousel);
    … …  
    10981177    }
    10991178
    1100     if (element.dataset && element.dataset.nbcCarouselArrowStyle) {
    1101       const normalizedDatasetStyle = normalizeStyleKey(element.dataset.nbcCarouselArrowStyle);
     1179    if (element.dataset && element.dataset.abcsCarouselArrowStyle) {
     1180      const normalizedDatasetStyle = normalizeStyleKey(element.dataset.abcsCarouselArrowStyle);
    11021181      if (isValidArrowStyle(normalizedDatasetStyle)) {
    11031182        return normalizedDatasetStyle;
    … …  
    11051184    }
    11061185
    1107     const parentWithData = element.closest('[data-nbc-carousel-arrow-style]');
    1108     if (parentWithData && parentWithData.dataset && parentWithData.dataset.nbcCarouselArrowStyle) {
    1109       const normalizedParentStyle = normalizeStyleKey(parentWithData.dataset.nbcCarouselArrowStyle);
     1186    const parentWithData = element.closest('[data-abcs-arrow-style]');
     1187    if (parentWithData && parentWithData.dataset && parentWithData.dataset.abcsCarouselArrowStyle) {
     1188      const normalizedParentStyle = normalizeStyleKey(parentWithData.dataset.abcsCarouselArrowStyle);
    11101189      if (isValidArrowStyle(normalizedParentStyle)) {
    11111190        return normalizedParentStyle;
    … …  
    11131192    }
    11141193
    1115     const iconClass = Array.from(element.classList).find((cls) => cls.startsWith('nbc-carousel-icon-'));
     1194    const iconClass = Array.from(element.classList).find((cls) => cls.startsWith('abcs-icon-'));
    11161195
    11171196    if (iconClass) {
    1118       const styleKey = normalizeStyleKey(iconClass.replace('nbc-carousel-icon-', ''));
     1197      const styleKey = normalizeStyleKey(iconClass.replace('abcs-icon-', ''));
    11191198      if (isValidArrowStyle(styleKey)) {
    11201199        return styleKey;
    … …  
    11811260      docsToSearch.forEach((searchDoc) => {
    11821261        try {
    1183           const found = Array.from(searchDoc.querySelectorAll('.nbc-carousel'));
     1262          const found = Array.from(searchDoc.querySelectorAll('.abcs'));
    11841263          if (found.length) {
    11851264            found.forEach((node) => {
    … …  
    12111290      const parent = carousel.parentElement;
    12121291
    1213       if (carousel.classList && carousel.classList.contains('nbc-carousel-hide-arrows')) {
     1292      if (carousel.classList && carousel.classList.contains('abcs-hide-arrows')) {
    12141293        carousel.style.setProperty('--carousel-button-arrow-left', 'none');
    12151294        carousel.style.setProperty('--carousel-button-arrow-right', 'none');
    … …  
    12351314
    12361315      if (carousel.dataset) {
    1237         carousel.dataset.nbcCarouselArrowStyle = styleKey;
     1316        carousel.dataset.abcsCarouselArrowStyle = styleKey;
     1317        carousel.dataset.abcsArrowStyle = styleKey;
    12381318      }
    12391319
    … …  
    12431323      if (parent) {
    12441324        if (parent.dataset) {
    1245           parent.dataset.nbcCarouselArrowStyle = styleKey;
     1325          parent.dataset.abcsCarouselArrowStyle = styleKey;
     1326          parent.dataset.abcsArrowStyle = styleKey;
    12461327        }
    12471328        parent.style.setProperty('--carousel-button-arrow-left', `url("${leftArrowSvg}")`);
    … …  
    13821463                shouldUpdate = true;
    13831464              }
    1384               if (node.nodeType === 1 && node.classList && node.classList.contains('nbc-carousel')) {
     1465              if (node.nodeType === 1 && node.classList && node.classList.contains('abcs')) {
    13851466                shouldUpdate = true;
    13861467              }
    … …  
    15371618
    15381619  if (typeof window !== 'undefined') {
    1539     window.nbcCarousel = window.nbcCarousel || {};
    1540     window.nbcCarousel.applyArrowIconsToCarousels = (color, context, overrideConfig) => {
     1620    window.abcsCarousel = window.abcsCarousel || {};
     1621    window.abcsCarousel.applyArrowIconsToCarousels = (color, context, overrideConfig) => {
    15411622      const normalizedConfig = overrideConfig ? {
    15421623        ...overrideConfig,

  • native-blocks-carousel/trunk/assets/js/carousel-frontend-init.js

    r3394953 r3395126  
    11/**
    2  * Frontend script for Native Blocks Carousel
     2 * Frontend script for Any Block Carousel Slider
    33 * Injects missing CSS variables for the minimumColumnWidth mode.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 * @version 1.0.2
    77 * @author weblazer35
    … …  
    1111    'use strict';
    1212
    13     const SHARED = window.NativeBlocksCarouselShared || {};
     13    const SHARED = window.AnyBlockCarouselSliderShared || {};
    1414    const FALLBACK_DEFAULT_ARROW_STYLE = 'chevron';
    1515    const DEFAULT_ARROW_STYLE = SHARED.DEFAULT_ARROW_STYLE || FALLBACK_DEFAULT_ARROW_STYLE;
    … …  
    180180     */
    181181    function injectMinWidthVariables() {
    182         // Find all carousels with the nbc-carousel-min-width class
    183         const carousels = document.querySelectorAll('.nbc-carousel.nbc-carousel-min-width');
     182        // Find all carousels with the abcs-min-width class
     183        const carousels = document.querySelectorAll('.abcs.abcs-min-width');
    184184
    185185        carousels.forEach(function (carousel) {
    … …  
    217217     */
    218218    function injectPaddingVariables() {
    219         const carousels = document.querySelectorAll('.nbc-carousel');
     219        const carousels = document.querySelectorAll('.abcs');
    220220
    221221        carousels.forEach(function (carousel) {
    … …  
    324324
    325325        const iconClass = Array.prototype.find.call(element.classList, function (cls) {
    326             return cls.indexOf('nbc-carousel-icon-') === 0;
     326            return cls.indexOf('abcs-icon-') === 0;
    327327        });
    328328
    329329        if (iconClass) {
    330             const styleKey = iconClass.replace('nbc-carousel-icon-', '');
     330            const styleKey = iconClass.replace('abcs-icon-', '');
    331331            return normalizeStyleKey(styleKey);
    332332        }
    … …  
    390390            docsToSearch.forEach((searchDoc) => {
    391391                try {
    392                     const found = Array.from(searchDoc.querySelectorAll('.nbc-carousel'));
     392                    const found = Array.from(searchDoc.querySelectorAll('.abcs'));
    393393                    found.forEach((node) => {
    394394                        if (node) {
    … …  
    417417            const parent = carousel.parentElement;
    418418
    419             if (carousel.classList && carousel.classList.contains('nbc-carousel-hide-arrows')) {
     419            if (carousel.classList && carousel.classList.contains('abcs-hide-arrows')) {
    420420                carousel.style.setProperty('--carousel-button-arrow-left', 'none');
    421421                carousel.style.setProperty('--carousel-button-arrow-right', 'none');
    … …  
    441441            carousel.style.setProperty('--carousel-button-arrow-left', 'url("' + leftArrowSvg + '")');
    442442            carousel.style.setProperty('--carousel-button-arrow-right', 'url("' + rightArrowSvg + '")');
     443        if (carousel.dataset) {
     444            carousel.dataset.abcsCarouselArrowStyle = styleKey;
     445            carousel.dataset.abcsArrowStyle = styleKey;
     446        }
    443447
    444448            if (parent) {
     449            if (parent.dataset) {
     450                parent.dataset.abcsCarouselArrowStyle = styleKey;
     451                parent.dataset.abcsArrowStyle = styleKey;
     452            }
    445453                parent.style.setProperty('--carousel-button-arrow-left', 'url("' + leftArrowSvg + '")');
    446454                parent.style.setProperty('--carousel-button-arrow-right', 'url("' + rightArrowSvg + '")');
    … …  
    521529    window.addEventListener('load', function () {
    522530        // Check whether --carousel-min-width is missing on some carousels
    523         const carousels = document.querySelectorAll('.nbc-carousel.nbc-carousel-min-width');
     531        const carousels = document.querySelectorAll('.abcs.abcs-min-width');
    524532        let needsMinWidthUpdate = false;
    525533        carousels.forEach(function (carousel) {
    … …  
    552560
    553561    if (typeof window !== 'undefined') {
    554         window.nbcCarousel = window.nbcCarousel || {};
    555         window.nbcCarousel.applyArrowIconsToCarousels = function (color, context, overrideConfig) {
     562        window.abcsCarousel = window.abcsCarousel || {};
     563        window.abcsCarousel.applyArrowIconsToCarousels = function (color, context, overrideConfig) {
    556564            const normalizedConfig = overrideConfig ? {
    557565                ...overrideConfig,

  • native-blocks-carousel/trunk/assets/js/carousel-shared.js

    r3394953 r3395126  
    22  'use strict';
    33
    4   const shared = global.NativeBlocksCarouselShared || {};
     4  const shared = global.AnyBlockCarouselSliderShared || {};
    55
    66  const DEFAULT_ARROW_STYLE = 'chevron';
    … …  
    110110  shared.generateArrowMarkup = generateArrowMarkup;
    111111
    112   global.NativeBlocksCarouselShared = shared;
     112  global.AnyBlockCarouselSliderShared = shared;
    113113})(window);
    114114

  • native-blocks-carousel/trunk/includes/Activator.php

    r3394953 r3395126  
    33 * Handles plugin activation and deactivation.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    1212/**
    … …  
    2424        if (\version_compare(\get_bloginfo('version'), '6.0', '<')) {
    2525            \wp_die(
    26                 \esc_html__('This plugin requires WordPress 6.0 or later.', 'native-blocks-carousel'),
    27                 \esc_html__('WordPress version too low', 'native-blocks-carousel')
     26                \esc_html__('This plugin requires WordPress 6.0 or later.', 'any-block-carousel-slider'),
     27                \esc_html__('WordPress version too low', 'any-block-carousel-slider')
    2828            );
    2929        }
    … …  
    3131        if (\version_compare(\PHP_VERSION, '7.4', '<')) {
    3232            \wp_die(
    33                 \esc_html__('This plugin requires PHP 7.4 or later.', 'native-blocks-carousel'),
    34                 \esc_html__('PHP version too low', 'native-blocks-carousel')
     33                \esc_html__('This plugin requires PHP 7.4 or later.', 'any-block-carousel-slider'),
     34                \esc_html__('PHP version too low', 'any-block-carousel-slider')
    3535            );
    3636        }

  • native-blocks-carousel/trunk/includes/Assets.php

    r3394953 r3395126  
    11<?php
    22/**
    3  * Handles asset loading for Native Blocks Carousel.
     3 * Handles asset loading for Any Block Carousel Slider.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    12 use Weblazer\NativeBlocksCarousel\Contracts\ServiceInterface;
     12use Weblazer\AnyBlockCarouselSlider\Contracts\ServiceInterface;
    1313
    1414/**
    … …  
    7373
    7474        \wp_enqueue_style(
    75             'native-blocks-carousel',
     75            'any-block-carousel-slider',
    7676            $this->pluginUrl . 'assets/css/carousel.css',
    7777            [],
    … …  
    7979        );
    8080
    81         \wp_enqueue_script('native-blocks-carousel-shared');
     81        \wp_enqueue_script('any-block-carousel-slider-shared');
    8282
    8383        if (!\is_admin()) {
    84             \wp_enqueue_script('native-blocks-carousel-frontend');
     84            \wp_enqueue_script('any-block-carousel-slider-frontend');
    8585        }
    8686
    … …  
    9797        $this->registerScripts();
    9898
    99         \wp_enqueue_style('native-blocks-carousel');
     99        \wp_enqueue_style('any-block-carousel-slider');
    100100
    101         $editorStylesPath = NATIVE_BLOCKS_CAROUSEL_PLUGIN_PATH . 'assets/css/carousel-editor.css';
     101        $editorStylesPath = ANY_BLOCK_CAROUSEL_SLIDER_PLUGIN_PATH . 'assets/css/carousel-editor.css';
    102102        if (\file_exists($editorStylesPath)) {
    103103            $editorStyles = \file_get_contents($editorStylesPath);
    104104            if ($editorStyles) {
    105                 \wp_add_inline_style('native-blocks-carousel', $editorStyles);
     105                \wp_add_inline_style('any-block-carousel-slider', $editorStyles);
    106106            }
    107107        }
    108108
    109         \wp_enqueue_script('native-blocks-carousel-shared');
     109        \wp_enqueue_script('any-block-carousel-slider-shared');
    110110
    111         \wp_enqueue_script('native-blocks-carousel-editor');
     111        \wp_enqueue_script('any-block-carousel-slider-editor');
    112112    }
    113113
    … …  
    119119    private function registerScripts(): void
    120120    {
    121         if (!\wp_script_is('native-blocks-carousel-shared', 'registered')) {
     121        if (!\wp_script_is('any-block-carousel-slider-shared', 'registered')) {
    122122            \wp_register_script(
    123                 'native-blocks-carousel-shared',
     123                'any-block-carousel-slider-shared',
    124124                $this->pluginUrl . 'assets/js/carousel-shared.js',
    125125                [],
    … …  
    129129        }
    130130
    131         if (!\wp_script_is('native-blocks-carousel-frontend', 'registered')) {
     131        if (!\wp_script_is('any-block-carousel-slider-frontend', 'registered')) {
    132132            \wp_register_script(
    133                 'native-blocks-carousel-frontend',
     133                'any-block-carousel-slider-frontend',
    134134                $this->pluginUrl . 'assets/js/carousel-frontend-init.js',
    135                 ['native-blocks-carousel-shared'],
     135                ['any-block-carousel-slider-shared'],
    136136                $this->version,
    137137                true
    … …  
    139139        }
    140140
    141         if (!\wp_script_is('native-blocks-carousel-editor', 'registered')) {
     141        if (!\wp_script_is('any-block-carousel-slider-editor', 'registered')) {
    142142            \wp_register_script(
    143                 'native-blocks-carousel-editor',
     143                'any-block-carousel-slider-editor',
    144144                $this->pluginUrl . 'assets/js/carousel-editor.js',
    145145                [
    146                     'native-blocks-carousel-shared',
     146                    'any-block-carousel-slider-shared',
    147147                    'wp-blocks',
    148148                    'wp-element',

  • native-blocks-carousel/trunk/includes/Autoloader.php

    r3394953 r3395126  
    11<?php
    22/**
    3  * Basic autoloader for Native Blocks Carousel classes.
     3 * Basic autoloader for Any Block Carousel Slider classes.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    1212/**

  • native-blocks-carousel/trunk/includes/Contracts/ServiceInterface.php

    r3394953 r3395126  
    11<?php
    22/**
    3  * Generic contract for Native Blocks Carousel services.
     3 * Generic contract for Any Block Carousel Slider services.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel\Contracts;
     10namespace Weblazer\AnyBlockCarouselSlider\Contracts;
    1111
    1212interface ServiceInterface

  • native-blocks-carousel/trunk/includes/Contracts/TranslatableInterface.php

    r3393718 r3395126  
    33 * Contrat pour les services responsables du chargement des traductions.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel\Contracts;
     10namespace Weblazer\AnyBlockCarouselSlider\Contracts;
    1111
    1212interface TranslationServiceInterface extends ServiceInterface

  • native-blocks-carousel/trunk/includes/Contracts/TranslationServiceInterface.php

    r3393718 r3395126  
    33 * Contrat pour les services responsables du chargement des traductions.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel\Contracts;
     10namespace Weblazer\AnyBlockCarouselSlider\Contracts;
    1111
    1212interface TranslationServiceInterface extends ServiceInterface

  • native-blocks-carousel/trunk/includes/Plugin.php

    r3394953 r3395126  
    11<?php
    22/**
    3  * Main class for the Native Blocks Carousel plugin.
     3 * Main class for the Any Block Carousel Slider plugin.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    12 use Weblazer\NativeBlocksCarousel\Contracts\ServiceInterface;
    13 use Weblazer\NativeBlocksCarousel\Translations;
     12use Weblazer\AnyBlockCarouselSlider\Contracts\ServiceInterface;
     13use Weblazer\AnyBlockCarouselSlider\Translations;
    1414
    1515/**
    … …  
    5454                new Translations(),
    5555                new Assets(
    56                     NATIVE_BLOCKS_CAROUSEL_VERSION,
    57                     NATIVE_BLOCKS_CAROUSEL_PLUGIN_URL,
     56                    ANY_BLOCK_CAROUSEL_SLIDER_VERSION,
     57                    ANY_BLOCK_CAROUSEL_SLIDER_PLUGIN_URL,
    5858                    $theme_styles
    5959                ),

  • native-blocks-carousel/trunk/includes/Renderer.php

    r3394953 r3395126  
    33 * Logic responsible for injecting CSS variables into rendered blocks.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
    11 
    12 use Weblazer\NativeBlocksCarousel\Contracts\ServiceInterface;
     10namespace Weblazer\AnyBlockCarouselSlider;
     11
     12use Weblazer\AnyBlockCarouselSlider\Contracts\ServiceInterface;
    1313
    1414/**
    … …  
    3838    {
    3939        $class_name = $block['attrs']['className'] ?? '';
    40         $has_carousel_class = false !== \strpos($class_name, 'nbc-carousel')
    41             || false !== \strpos($block_content, 'nbc-carousel');
     40        $has_carousel_class = false !== \strpos($class_name, 'abcs')
     41            || false !== \strpos($block_content, 'abcs');
    4242
    4343        if (!$has_carousel_class) {
    … …  
    5959            $processor = new \WP_HTML_Tag_Processor($block_content);
    6060
    61             if ($processor->next_tag(['class_name' => 'nbc-carousel'])) {
     61            if ($processor->next_tag(['class_name' => 'abcs'])) {
    6262                $existing_style = $processor->get_attribute('style');
    6363                $processor->set_attribute('style', $this->mergeStyleAttribute($existing_style, $styles_string));
    … …  
    7171        }
    7272
    73         $pattern = '/(<(?:div|ul|figure)\s+[^>]*class="[^"]*\bnbc-carousel\b[^"]*"[^>]*?)(?:\s+style="([^"]*)")?(\s*>)/i';
     73        $pattern = '/(<(?:div|ul|figure)\s+[^>]*class="[^"]*\babcs\b[^"]*"[^>]*?)(?:\s+style="([^"]*)")?(\s*>)/i';
    7474
    7575        $replacement = function (array $matches) use ($styles_string) {
    … …  
    102102        if (
    103103            ('core/group' !== ($block['blockName'] ?? '') && 'core/post-template' !== ($block['blockName'] ?? ''))
    104             || false === \strpos($class_name, 'nbc-carousel-min-width')
     104            || false === \strpos($class_name, 'abcs-min-width')
    105105        ) {
    106106            return;
    … …  
    182182
    183183        if (null === $padding_left && null === $padding_right && null === $padding_top && null === $padding_bottom) {
    184             if (\preg_match('/(<(?:div|ul|figure)[^>]*class="[^"]*\bnbc-carousel\b[^"]*"[^>]*?)(?:\s+style="([^"]*)")?/i', $block_content, $carousel_matches)) {
     184            if (\preg_match('/(<(?:div|ul|figure)[^>]*class="[^"]*\babcs\b[^"]*"[^>]*?)(?:\s+style="([^"]*)")?/i', $block_content, $carousel_matches)) {
    185185                $style_attr = $carousel_matches[2] ?? '';
    186186

  • native-blocks-carousel/trunk/includes/ThemeStyles.php

    r3394953 r3395126  
    11<?php
    22/**
    3  * Handles theme-inherited styles for Native Blocks Carousel.
     3 * Handles theme-inherited styles for Any Block Carousel Slider.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    1212/**
    … …  
    6464
    6565        if (!empty($button_bg) || !empty($button_color)) {
    66             \wp_add_inline_style('native-blocks-carousel', $custom_css);
     66            \wp_add_inline_style('any-block-carousel-slider', $custom_css);
    6767        }
    6868    }

  • native-blocks-carousel/trunk/includes/Translations.php

    r3393718 r3395126  
    11<?php
    22/**
    3  * Service de chargement des traductions pour Native Blocks Carousel.
     3 * Service de chargement des traductions pour Any Block Carousel Slider.
    44 *
    5  * @package NativeBlocksCarousel
     5 * @package AnyBlockCarouselSlider
    66 */
    77
    88declare(strict_types=1);
    99
    10 namespace Weblazer\NativeBlocksCarousel;
     10namespace Weblazer\AnyBlockCarouselSlider;
    1111
    12 use Weblazer\NativeBlocksCarousel\Contracts\TranslationServiceInterface;
     12use Weblazer\AnyBlockCarouselSlider\Contracts\TranslationServiceInterface;
    1313
    1414class Translations implements TranslationServiceInterface
    … …  
    2828    {
    2929        load_plugin_textdomain(
    30             'native-blocks-carousel',
     30            'any-block-carousel-slider',
    3131            false,
    32             dirname(plugin_basename(NATIVE_BLOCKS_CAROUSEL_PLUGIN_FILE)) . '/languages'
     32            dirname(plugin_basename(ANY_BLOCK_CAROUSEL_SLIDER_PLUGIN_FILE)) . '/languages'
    3333        );
    3434    }

  • native-blocks-carousel/trunk/readme.txt

    r3394953 r3395126  
    1 === Native Blocks Carousel ===
     1=== Any Block Carousel Slider ===
    22Contributors: weblazer
    33Donate link: https://weblazer.github.io/
    4 Tags: carousel, gutenberg, query-loop, woocommerce, css-only
     4Tags: carousel, slider, block, gutenberg, query-loop
    55Requires at least: 6.0
    66Tested up to: 6.8
    7 Stable tag: 1.0.2
     7Stable tag: 1.0.3
    88Requires PHP: 7.4
    99License: GPLv2 or later
    1010License URI: https://www.gnu.org/licenses/gpl-2.0.html
    1111
    12 Transform any WordPress block into a responsive Gutenberg carousel with pure CSS. Works with Query Loop, Gallery, WooCommerce Products, and custom blocks. Zero JavaScript, maximum performance.
     12Gutenberg carousel slider block: transform any WordPress block into a responsive carousel with pure CSS. Zero JavaScript.
    1313
    1414== Description ==
    1515
    16 **Native Blocks Carousel** instantly converts any native WordPress block (Gallery, Group, Grid, Query Loop, Post Template, WooCommerce Products, etc.) into a responsive carousel without adding a dedicated block or loading a JavaScript library. Simply enable the "Carousel" toggle in the editor: your content stays 100% native, your DOM stays lightweight, and your Lighthouse performance scores remain intact.
    17 
    18 Unlike all-in-one carousel blocks like **Carousel Slider v2** that require you to add a "Carousel" block and manually recreate each slide ([see official listing](https://wordpress.org/plugins/carousel-block/)), **Native Blocks Carousel** hooks directly into the blocks you're already using. Result: a WordPress loop, image gallery, or product grid can become a slider in one click, without content duplication or extra maintenance.
    19 
    20 = Why Native Blocks Carousel instead of a dedicated carousel block? =
    21 
    22 * **WordPress loops without friction** – Transform Query Loop and Post Template blocks into a "loop slider" without creating a block per slide.
     16**Any Block Carousel Slider** is a Gutenberg carousel slider block plugin that instantly converts any native WordPress block (Gallery, Group, Grid, Query Loop, Post Template, WooCommerce Products, etc.) into a responsive carousel slider without adding a dedicated block or loading a JavaScript library. Simply enable the "Carousel" toggle in the Gutenberg editor: your content stays 100% native, your DOM stays lightweight, and your Lighthouse performance scores remain intact.
     17
     18Unlike many all-in-one carousel slider blocks that require you to add a dedicated "Carousel" block and rebuild every slide, **Any Block Carousel Slider** hooks straight into the Gutenberg blocks you already use. The result: a WordPress loop, image gallery, or product grid can become a carousel slider in one click, without content duplication or extra maintenance.
     19
     20= Why Any Block Carousel Slider instead of a dedicated carousel slider block? =
     21
     22* **WordPress loops without friction** – Transform Query Loop and Post Template Gutenberg blocks into a "loop slider" without creating a block per slide.
    2323* **Familiar editorial experience** – Content editors keep the Gutenberg interface they know (patterns, global styles, alignments, inner blocks).
    2424* **Zero JavaScript on the frontend** – Native scroll, `scroll-snap`, GPU-friendly, no Swiper/Slick bundle to load.
    … …  
    3636= Quick comparison =
    3737
    38 | Feature | Native Blocks Carousel | Classic carousel blocks |
    39 | --- | --- | --- |
    40 | Activation | Toggle on existing block | Add separate carousel block |
    41 | WordPress loop | ✅ Query Loop, Post Template, CPT, products | ❌ Requires a block per slide or custom code |
    42 | Frontend JavaScript | ❌ None | ✅ Swiper/Slick + custom scripts |
    43 | Performance | Native CSS, no dependencies | Scripts, reflow, additional files |
    44 | Content maintenance | Single source block | Content duplication in carousel block |
    45 | Security | No third-party dependencies to update | Dependent library (Swiper/Slick) |
     38- **Activation**: Any Block Carousel Slider – toggle an existing Gutenberg block. Classic carousel slider blocks – add a dedicated slider block and rebuild every slide.
     39- **WordPress loop**: Any Block Carousel Slider – fonctionne avec Query Loop, Post Template, CPT et produits WooCommerce sans duplication. Les carrousels concurrents – imposent un bloc par diapositive ou du code personnalisé.
     40- **Frontend JavaScript**: Any Block Carousel Slider – zéro JavaScript, carousel slider 100 % CSS. Les carrousels concurrents – chargent Swiper/Slick et des scripts additionnels.
     41- **Performance**: Any Block Carousel Slider – DOM léger, aucun asset externe. Les carrousels concurrents – multiplient les fichiers, reflow et téléchargements.
     42- **Content maintenance**: Any Block Carousel Slider – un seul bloc Gutenberg à mettre à jour. Les carrousels concurrents – dupliquent le contenu dans des slides dédiées.
     43- **Security & upkeep**: Any Block Carousel Slider – aucune bibliothèque tierce à surveiller. Les carrousels concurrents – dépendent de librairies JS externes comme Swiper/Slick.
    4644
    4745= Key features =
    4846
    49 * **100% CSS** – Smooth carousel with `scroll-snap`, `::scroll-button`, and `::scroll-marker`. No script to bundle.
     47* **100% CSS** – Smooth carousel slider with `scroll-snap`, `::scroll-button`, and `::scroll-marker`. No script to bundle.
    5048* **Smart responsive** – Automatically handles visible columns, spacing, and control sizes according to WordPress breakpoints (1280, 1024, 782, 600, 480, 375).
    5149* **Two width modes** – Manual mode (fixed column count) and Auto mode (fixed width like 320px) with automatic detection.
    52 * **Block spacing detection** – Respects `gap` and `padding` values defined in the editor, including presets.
     50* **Gutenberg block spacing detection** – Respects `gap` and `padding` values defined in the block editor, including presets.
    5351* **Theme colors** – Buttons automatically inherit your theme's colors and radii (via CSS variables).
    54 * **Intact semantics** – Your block's tags and classes remain unchanged: perfect for SEO, schemas, and E2E testing.
    55 
    56 = Native WordPress workflow =
    57 
    58 1. Add or edit a supported block (Gallery, Group, Columns, Query Loop/Post Template, WooCommerce Products, arranged patterns).
    59 2. Enable the **Carousel** option in the sidebar panel (Layout or Block section depending on the block).
     52* **Intact semantics** – Your Gutenberg block's tags and classes remain unchanged: perfect for SEO, schemas, and E2E testing.
     53
     54= Native Gutenberg block workflow =
     55
     561. Add or edit a supported Gutenberg block (Gallery, Group, Columns, Query Loop/Post Template, WooCommerce Products, arranged patterns).
     572. Enable the **Carousel** option in the Gutenberg sidebar panel (Layout or Block section depending on the block).
    60583. Adjust your usual settings (column count, minimum width, spacing, alignment).
    61 4. Save: your block becomes a touch-friendly, accessible, and SEO-friendly carousel.
     594. Save: your block becomes a touch-friendly, accessible, and SEO-friendly carousel slider.
    6260
    6361= Advanced customization =
    6462
    65 * **Manual mode (fixed columns)** – Ideal for article sliders: 1 to 6 columns depending on screen sizes.
    66 * **Auto mode (fixed width)** – Perfect for product carousels: 280px, 320px, or 360px respected pixel-perfect.
     63* **Manual mode (fixed columns)** – Ideal for article carousel sliders: 1 to 6 columns depending on screen sizes.
     64* **Auto mode (fixed width)** – Perfect for product carousel sliders: 280px, 320px, or 360px respected pixel-perfect.
    6765* **Padding and gaps** – Automatic management via CSS vars `--carousel-padding-*`, `--wp--style--block-gap`.
    6866* **Themes & `theme.json`** – Override variables to align controls with your design system.
    … …  
    8179
    82801. Go to "Plugins" → "Add New".
    83 2. Search for **Native Blocks Carousel**.
     812. Search for **Any Block Carousel Slider**.
    84823. Click "Install Now" then "Activate".
    8583
    … …  
    9290= Usage =
    9391
    94 1. Open a page, post, or template.
    95 2. Select a compatible block (Gallery, Group, Columns, Query Loop, WooCommerce Products, ACF block…).
    96 3. Enable the **Carousel** button in the settings.
     921. Open a page, post, or template in the Gutenberg editor.
     932. Select a compatible Gutenberg block (Gallery, Group, Columns, Query Loop, WooCommerce Products, ACF block…).
     943. Enable the **Carousel** button in the block settings.
    97954. Adjust your columns, minimum width, or spacing.
    98 5. Publish or update: the carousel is operational.
     965. Publish or update: the carousel slider is operational.
    9997
    10098== Frequently Asked Questions ==
    10199
    102 = How does Native Blocks Carousel compare to Carousel Slider v2? =
    103 
    104 Unlike Carousel Slider v2 which requires adding a dedicated "Carousel" block and manually creating each slide, Native Blocks Carousel transforms your existing blocks (Query Loop, Gallery, Products) with a simple toggle. For Query Loops specifically, Carousel Slider v2 would require creating a carousel block, then adding a Query Loop with only 1 post per slide—very impractical. Native Blocks Carousel handles this natively: one toggle, zero duplication, maximum performance.
     100= How does Any Block Carousel Slider differ from traditional carousel blocks? =
     101
     102Unlike traditional carousels that force you to insert a dedicated "Carousel" block and rebuild each slide by hand, Any Block Carousel Slider turns the Gutenberg blocks you already have (Query Loop, Gallery, Products, etc.) into a slider via a simple toggle. With a Query Loop for instance, legacy solutions usually require limiting the loop to one post per slide and duplicating layouts. Here, one block is enough: single action, zero duplication, maximum performance.
    105103
    106104= Is it compatible with all themes (block themes, FSE)? =
    107105
    108 Yes. The plugin reads style variables generated by your theme (classic or full site editing) and applies the carousel without breaking the initial grid.
     106Yes. The Gutenberg carousel slider block plugin reads style variables generated by your theme (classic or full site editing) and applies the carousel slider without breaking the initial grid.
    109107
    110108= Does it require JavaScript on the frontend? =
    … …  
    114112= How do I transform a Query Loop into a carousel? =
    115113
    116 Enable the Query Loop block (or Post Template), configure your filters and rendering, then check **Carousel**. Posts are automatically aligned on a scrollable line with snap and CSS arrows. This is the main advantage over traditional carousel plugins that don't support Query Loops natively.
     114Enable the Query Loop Gutenberg block (or Post Template), configure your filters and rendering, then check **Carousel**. Posts are automatically aligned on a scrollable line with snap and CSS arrows. This is the main advantage over traditional carousel slider plugins that don't support Query Loops natively.
    117115
    118116= Can I mix images, titles, buttons, and forms in the same carousel? =
    119117
    120 Yes. The plugin respects existing inner blocks. A Group block containing image + text + button (or a custom ACF block) is transformed as-is.
     118Yes. The plugin respects existing inner Gutenberg blocks. A Group block containing image + text + button (or a custom ACF block) is transformed as-is into a carousel slider.
    121119
    122120= WooCommerce compatible? =
    123121
    124 The **Products** block (List, Hand-picked Products, On Sale, etc.) works immediately. Add to cart buttons remain interactive.
     122The **Products** Gutenberg block (List, Hand-picked Products, On Sale, etc.) works immediately as a carousel slider. Add to cart buttons remain interactive.
    125123
    126124= Is there an autoplay mode, infinite loop, or custom arrows? =
    … …  
    130128= Can I have multiple carousels on the same page? =
    131129
    132 Yes, without limit. Each block manages its own CSS variables.
     130Yes, without limit. Each Gutenberg block manages its own CSS variables for the carousel slider.
    133131
    134132= How do I adjust buttons or position markers? =
    … …  
    149147== Screenshots ==
    150148
    151 1. "Carousel" option in the Gutenberg sidebar panel.
    152 2. WooCommerce products carousel rendered with 100% CSS.
    153 3. Block Grid converted into a responsive carousel.
    154 4. Native Gallery displayed in carousel mode.
    155 5. Custom CSS variables to adapt the design.
     1491. "Carousel" option in the Gutenberg block sidebar panel.
     1502. WooCommerce products carousel slider rendered with 100% CSS.
     1513. Gutenberg Block Grid converted into a responsive carousel slider.
     1524. Native Gallery block displayed in carousel slider mode.
     1535. Custom CSS variables to adapt the carousel slider design.
    156154
    157155== Changelog ==
     156
     157= 1.0.3 - 2025-11-13 =
     158* 🔄 Plugin rebranded from "Native Blocks Carousel" to "Any Block Carousel Slider".
     159* 🐛 Fixed dynamic arrow style updates in the Gutenberg editor (now works correctly in iframe contexts).
     160* 🎨 Improved block detection across editor iframes for better arrow icon synchronization.
     161* 🛠️ Enhanced multi-context carousel updates for Site Editor and Block Editor compatibility.
    158162
    159163= 1.0.2 - 2025-11-13 =
    160164* ✨ Added dedicated toggles in the inspector to show or hide arrows and pagination markers independently.
    161165* 🎯 Introduced `carouselShowArrows` and `carouselShowMarkers` block attributes for fine-grained carousel controls.
    162 * 🎨 Synced editor and frontend behaviors for the `nbc-carousel-hide-arrows` and `nbc-carousel-hide-markers` classes.
     166* 🎨 Synced editor and frontend behaviors for the `abcs-hide-arrows` and `abcs-hide-markers` classes.
    163167* 🛠️ Bumped plugin version and refreshed asset headers.
    164168
    … …  
    186190== Upgrade Notice ==
    187191
     192= 1.0.3 =
     193Recommended update: fixes dynamic arrow style updates in the editor and improves compatibility with Site Editor iframes.
     194
    188195= 1.0.2 =
    189196Recommended update: manage arrow and marker visibility directly from the editor with consistent styling on both admin and frontend.
    … …  
    193200= GitHub Repository =
    194201
    195 Source code is available on GitHub: [https://github.com/WEBLAZER/native-blocks-carousel](https://github.com/WEBLAZER/native-blocks-carousel)
     202Source code is available on GitHub: [https://github.com/WEBLAZER/any-block-carousel-slider](https://github.com/WEBLAZER/any-block-carousel-slider)
    196203
    197204= Contributions =
Note: See TracChangeset for help on using the changeset viewer.