@terrahq/wysiwyg 1.0.0 → 1.0.1

package/src/scss/framework/components/link/_c--link-a.scss

@@ -1,13 +1,44 @@
 @use "@scss/framework/foundation/_foundation.scss";
 @use "@scss/framework/_var/_vars.scss" as *;
+@use "@scss/paths" as paths;
+@use "sass:map";
+
 .c--link-a {
-  @extend .f--color-e;
-  text-decoration: none;
-  transition: all $time-b $ease-standard-a;
+    display: inline-flex;
+    align-items: center;
+    @extend .f--color-e;
+    gap: $measure * 0.5;
+    width: fit-content;
+    text-decoration: none;
+    padding-bottom: 2px;
+    background-image: linear-gradient(
+        map.get($color-options, f),
+        map.get($color-options, f)
+    );
+    background-repeat: no-repeat;
+    background-size: 0% 1px;
+    background-position: bottom left;
+    transition: background-size $time-b $ease-standard-a;
+
+    &::after {
+        content: '';
+        display: inline-block;
+        width: $measure*2.5;
+        height: $measure*2.5;
+        background-image: url(paths.asset-url("assets/icons/ArrowRight.svg"));
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+        transition: transform $time-b $ease-standard-a;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+        &:hover {
+            background-size: 100% 1px;
 
-  @media all and (hover: hover) {
-    &:hover {
-      opacity: 0.5;
+            &::after {
+                transform: rotate(-45deg);
+            }
+        }
     }
-  }
 }

package/src/scss/global-content/_global-mixins/blocks/_content-block-btn.scss

@@ -5,6 +5,9 @@
 $btn-wysiwyg-options: (
     "className": null,
     "margin-bottom": null,
+    "row-gap": null,
+    "column-gap": null,
+    "even-className": null,
 );
 
 @mixin block-btn-wp-modifier ($options) {
@@ -12,16 +15,32 @@ $btn-wysiwyg-options: (
         @if map.has-key($btn-wysiwyg-options, $property) {
             @if $value {
                 @if $property == "className" {
-                    .wp-block-buttons,
-                    .wp-block-button{
-                        .wp-block-button__link{
-                            @include make-class-options($value);
+                    .wp-block-buttons{
+                        .wp-block-button{
+                            .wp-block-button__link{
+                                @include make-class-options($value);
+                            }
                         }
                     }
                 }
+                @else if $property == "even-className" {
+                    .wp-block-buttons{
+                        .wp-block-button:nth-child(even){
+                            .wp-block-button__link{
+                                @include make-class-options($value);
+                            }
+                        }
+                    }
+                }
+                @else if $property == "row-gap" or $property == "column-gap" {
+                    .wp-block-buttons{
+                        display: flex;
+                        flex-wrap: wrap;
+                        #{$property}: $value;
+                    }
+                }
                 @else {
-                    .wp-block-buttons,
-                    .wp-block-button{
+                    .wp-block-buttons{
                         #{$property}: $value;
                     }
                 }

package/src/scss/global-content/_global-mixins/blocks/_content-block-columns.scss

@@ -3,11 +3,22 @@
 $columns-wysiwyg-options: (
     "margin-bottom": null,
     "breakpoint": null,
+    "column-gap": null,
+    "row-gap": null,
 );
 
 @mixin block-columns-wp() {
     .wp-block-columns{
         display: flex;
+        .wp-block-column {
+            //* columnas de igual ancho por defecto (como WordPress)
+            flex-grow: 1;
+            flex-basis: 0;
+            //* respeta el ancho propio si la columna lo trae inline (style="flex-basis:…")
+            &[style*="flex-basis"] {
+                flex-grow: 0;
+            }
+        }
     }
 }
 

package/src/scss/global-content/_global-mixins/blocks/_content-block-quote.scss

@@ -5,6 +5,7 @@ $quote-wysiwyg-options: (
     "padding": null,
     "margin-top": null,
     "margin-bottom": null,
+    "background": null,
     "border": null,
     "paragraph": null,
     "cite": null,
@@ -23,8 +24,14 @@ $quote-wysiwyg-options: (
         @each $property, $value in $options {
             @if map.has-key($quote-wysiwyg-options, $property) {
                 @if $value {
-                    @if $property == "border" {
-                        @include make-border-wysiwyg-options($value);
+                    @if $property == "background" {
+                        @include make-background-wysiwyg-options($value);
+                    }
+                    @else if $property == "border" {
+                        // * `& {}` evita el warning mixed-decls (declaración tras regla anidada)
+                        & {
+                            @include make-border-wysiwyg-options($value);
+                        }
                     }
                     @else if $property == "paragraph" {
                         p {
@@ -37,7 +44,9 @@ $quote-wysiwyg-options: (
                         }
                     }
                     @else {
-                        #{$property}: $value;
+                        & {
+                            #{$property}: $value;
+                        }
                     }
                 }
             }
@@ -51,8 +60,14 @@ $quote-wysiwyg-options: (
         @each $property, $value in $options {
             @if map.has-key($quote-wysiwyg-options, $property) {
                 @if $value {
-                    @if $property == "border" {
-                        @include make-border-wysiwyg-options($value);
+                    @if $property == "background" {
+                        @include make-background-wysiwyg-options($value);
+                    }
+                    @else if $property == "border" {
+                        // * `& {}` evita el warning mixed-decls (declaración tras regla anidada)
+                        & {
+                            @include make-border-wysiwyg-options($value);
+                        }
                     }
                     @else if $property == "paragraph" {
                         p {
@@ -63,7 +78,9 @@ $quote-wysiwyg-options: (
                         @error "Sanity doesn't support cite styles for quotes";
                     }
                     @else {
-                        #{$property}: $value;
+                        & {
+                            #{$property}: $value;
+                        }
                     }
                 }
             }

package/src/scss/global-content/_global-mixins/blocks/_content-block-separator.scss

@@ -5,6 +5,9 @@ $separator-wysiwyg-options: (
     "width": null,
     "color": null,
     "height": null,
+    "dots-color": null,
+    "dots-size": null,
+    "dots-spacing": null,
 );
 
 @mixin block-separator-wp () {
@@ -12,7 +15,24 @@ $separator-wysiwyg-options: (
         width: 100%;
         display: block;
         border: none;
-    } 
+    }
+    //* is-style-dots: tres puntos centrados en lugar de línea.
+    //* (default e is-style-wide siguen siendo línea: comparten .wp-block-separator)
+    //* Mayor especificidad que .wp-block-separator -> sobrescribe la línea del modifier.
+    .wp-block-separator.is-style-dots {
+        width: auto;
+        height: auto;
+        background: none;
+        text-align: center;
+        line-height: 1;
+        &::before {
+            content: "\00b7\00b7\00b7";
+            display: inline-block;
+            font-size: 1.5rem;
+            letter-spacing: 2em;
+            font-family: serif;
+        }
+    }
 }
 
 @mixin block-separator-wp-modifier($options) {
@@ -21,10 +41,36 @@ $separator-wysiwyg-options: (
             @if map.has-key($separator-wysiwyg-options, $property) {
                 @if $value {
                     @if $property == "color" {
-                        background: $value;
+                        //* color de la línea; en is-style-dots tiñe los puntos por defecto
+                        & {
+                            background: $value;
+                        }
+                        &.is-style-dots::before {
+                            color: $value;
+                        }
+                    }
+                    @else if $property == "dots-color" {
+                        //* color propio de los puntos (sobrescribe a "color" en is-style-dots)
+                        &.is-style-dots::before {
+                            color: $value;
+                        }
+                    }
+                    @else if $property == "dots-size" {
+                        &.is-style-dots::before {
+                            font-size: $value;
+                        }
+                    }
+                    @else if $property == "dots-spacing" {
+                        &.is-style-dots::before {
+                            letter-spacing: $value;
+                            padding-left: $value;
+                        }
                     }
                     @else {
-                        #{$property}: $value;
+                        // * `& {}` evita mixed-decls (declaración tras regla anidada)
+                        & {
+                            #{$property}: $value;
+                        }
                     }
                 }
             }

package/src/scss/global-content/_global-mixins/blocks/_content-block-table.scss

@@ -9,9 +9,19 @@ $table-wysiwyg-options: (
     "margin-bottom": null,
     "header-cells-padding": null,
     "body-cells-padding": null,
+    "table-border": null,
+    "table-border-radius": null,
+    "scroll-breakpoint": null,
+    // * `header-border` / `body-border` son LEGACY (compatibilidad con tablas
+    // * anteriores). Para tablas nuevas usar las granulares `*-border-right` /
+    // * `*-border-bottom`. Si se usan ambas a la vez, gana la última declarada.
     "header-border": null,
+    "header-border-right": null,
+    "header-border-bottom": null,
     "header-background": null,
     "body-border": null,
+    "body-border-right": null,
+    "body-border-bottom": null,
     "body-background": null,
     "odd-rows-background": null,
     "odd-rows-text-color": null,
@@ -59,6 +69,11 @@ $table-wysiwyg-options: (
                             }
                         }
                     }
+                    @else if $property == "header-background" {
+                        thead tr {
+                            background: $value;
+                        }
+                    }
                     @else if $property == "header-border" {
                         thead tr {
                             th {
@@ -66,9 +81,15 @@ $table-wysiwyg-options: (
                             }
                         }
                     }
-                    @else if $property == "header-background" {
-                        thead tr {
-                            background: $value;
+                    @else if $property == "header-border-right" {
+                        //* la última celda del header NO lleva borde derecho
+                        thead tr th:not(:last-child) {
+                            border-right: $value;
+                        }
+                    }
+                    @else if $property == "header-border-bottom" {
+                        thead tr th {
+                            border-bottom: $value;
                         }
                     }
                     @else if $property == "body-font-styles" {
@@ -81,14 +102,26 @@ $table-wysiwyg-options: (
                             padding: $value;
                         }
                     }
+                    @else if $property == "body-background" {
+                        tbody tr {
+                            background: $value;
+                        }
+                    }
                     @else if $property == "body-border" {
                         td {
                             @include make-border-wysiwyg-options($options: $value);
                         }
                     }
-                    @else if $property == "body-background" {
-                        tbody tr {
-                            background: $value;
+                    @else if $property == "body-border-right" {
+                        //* la última celda de cada fila NO lleva borde derecho
+                        tbody tr td:not(:last-child) {
+                            border-right: $value;
+                        }
+                    }
+                    @else if $property == "body-border-bottom" {
+                        //* las celdas de la última fila NO llevan borde inferior
+                        tbody tr:not(:last-child) td {
+                            border-bottom: $value;
                         }
                     }
                     @else if $property == "odd-rows-background" {
@@ -106,8 +139,47 @@ $table-wysiwyg-options: (
                             @include make-font-wysiwyg-options($options: $value);
                         }
                     }
+                    @else if $property == "table-border" {
+                        //* borde de la etiqueta <table>
+                        table {
+                            border: $value;
+                        }
+                    }
+                    @else if $property == "table-border-radius" {
+                        //* el radius necesita separate + overflow para recortar las esquinas
+                        table {
+                            border-radius: $value;
+                            border-collapse: separate;
+                            border-spacing: 0;
+                            overflow: hidden;
+                        }
+                    }
+                    @else if $property == "margin-bottom" {
+                        //* el margin-bottom del bloque va en el wrapper (.wp-block-table),
+                        //* nunca en la etiqueta <table>
+                        &:not(table) {
+                            margin-bottom: $value;
+                        }
+                    }
+                    @else if $property == "scroll-breakpoint" {
+                        //* scroll horizontal por debajo de este max-width: el wrapper
+                        //* (.wp-block-table) desborda y la <table> no baja de $value
+                        @media all and (max-width: $value) {
+                            &:not(table) {
+                                display: block;
+                                overflow-x: auto;
+                                -webkit-overflow-scrolling: touch;
+                            }
+                            table {
+                                min-width: $value;
+                            }
+                        }
+                    }
                     @else {
-                        #{$property}: $value;
+                        // * `& {}` evita mixed-decls (declaración tras regla anidada)
+                        & {
+                            #{$property}: $value;
+                        }
                     }
                 }
             }

package/src/scss/global-content/_global-mixins/blocks/_content-links.scss

@@ -5,13 +5,20 @@ $link-wysiwyg-options: (
     "className": null,
 );
 
+// Aplica las clases de link a los anchors del contenido EXCLUYENDO:
+//  - los que envuelven una imagen (`:not(:has(img))`), p. ej. imágenes enlazadas.
+//  - el <a> del bloque de botones (`.wp-block-button__link`), que empieza por
+//    "wp-" pero NO es un link de texto y no debe heredar los estilos del link.
+// Se resuelve por exclusión y no con un reset porque los estilos se aplican vía
+// @extend y un reset perdería por especificidad.
+
 @mixin block-link-wysiwyg-modifier ($options) {
     @each $property, $value in $options {
         @if map.has-key($link-wysiwyg-options, $property) {
             @if $value {
                 @if $property == "className" {
-                    a:not([class]),
-                    a[class^='wp-'] {
+                    a:not([class]):not(:has(img)),
+                    a[class^='wp-']:not([class*="button"]):not(:has(img)) {
                         @include make-class-options($value);
                     }
                 }

package/src/scss/global-content/_global-mixins/properties/_background.scss

@@ -0,0 +1,50 @@
+@use "sass:map";
+
+$background-wysiwyg-options: (
+    "background-color": null,
+    "background-image": null,
+    "background-size": null,
+    "background-position": null,
+    "background-repeat": null,
+    "overlay": null,
+);
+
+// * Aplica estilos de fondo (color/imagen) y, opcionalmente, una capa
+// * (`overlay`) por encima de la imagen para mejorar la legibilidad.
+// * Es autocontenida: envuelve las declaraciones planas en `& {}` para evitar
+// * el warning mixed-decls de Dart Sass, así que puede llamarse desde cualquier
+// * bloque sin envoltorios extra.
+@mixin make-background-wysiwyg-options($options) {
+    @each $property, $value in $options {
+        @if map.has-key($background-wysiwyg-options, $property) {
+            @if $value {
+                @if $property == "overlay" {
+                    // * Capa de color/degradado sobre el background-image.
+                    // * Se pinta con un ::before absoluto y se eleva el
+                    // * contenido (> *) por encima de la capa.
+                    & {
+                        position: relative;
+                    }
+                    &::before {
+                        content: "";
+                        position: absolute;
+                        inset: 0;
+                        background: $value;
+                        border-radius: inherit;
+                        pointer-events: none;
+                        z-index: 0;
+                    }
+                    > * {
+                        position: relative;
+                        z-index: 1;
+                    }
+                } @else {
+                    // * `& {}` evita el warning mixed-decls (declaración tras regla anidada)
+                    & {
+                        #{$property}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/scss/global-content/_global-mixins/properties/_font.scss

@@ -19,6 +19,7 @@ $font-wysiwyg-options: (
     "padding-top": null,
     "text-align": null,
     "bold-font-weight": null,
+    "bold-color": null,
 );
 
 @mixin make-font-wysiwyg-options($options) {
@@ -34,16 +35,24 @@ $font-wysiwyg-options: (
                         @extend .#{$value};
                     }
                 } @else if $property == "max-lines" {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    display: -webkit-box;
-                    -webkit-line-clamp: $value;
-                    -webkit-box-orient: vertical;
+                    // * `& {}` evita el warning mixed-decls (declaración tras regla anidada)
+                    & {
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: -webkit-box;
+                        -webkit-line-clamp: $value;
+                        -webkit-box-orient: vertical;
+                    }
                 } @else if $property == "bold-font-weight" {
                     b,
                     strong {
                         font-weight: $value;
                     }
+                } @else if $property == "bold-color" {
+                    b,
+                    strong {
+                        color: $value;
+                    }
                 } @else if $property == "margin-bottom-before-lists" {
                     &:has(
                       + ul,
@@ -52,7 +61,10 @@ $font-wysiwyg-options: (
                       margin-bottom: $value;
                     }
                 } @else {
-                    #{$property}: $value;
+                    // * `& {}` evita el warning mixed-decls (declaración tras regla anidada)
+                    & {
+                        #{$property}: $value;
+                    }
                 }
             }
         }

package/src/scss/global-content/_global-mixins/properties/_properties.scss

@@ -1,3 +1,4 @@
+@forward "./background";
 @forward "./border";
 @forward "./font";
 @forward "./media";

package/src/scss/sanity.scss

@@ -28,6 +28,7 @@
         "min-width": 30px,
         "margin-bottom": $measure * 7,
         "caption": (
+          // "bold-color": red,
           "color": red,
           "font-family": arial,
           // "font-size": 2rem,
@@ -49,6 +50,13 @@
         "padding": $measure * 5 $measure * 2,
         "margin-top": $measure,
         "margin-bottom": $measure * 5,
+        "background": (
+          "background-image": url("http://placeholder.terrahq.com/img-16by9.webp"),
+          "background-size": cover,
+          "background-position": center,
+          "background-repeat": no-repeat,
+          "overlay": linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
+        ),
         "border": (
           "border-color": red,
           "border-radius": 0,
@@ -56,7 +64,8 @@
           "border-width": 2px 0,
         ),
         "paragraph": (
-          // "color": red,
+          // "bold-color": red,
+          "color": #fefefe,
           "font-family": arial,
           // "font-size": 2rem,
           "font-style": italic,
@@ -75,22 +84,27 @@
       ),
       $headings-options: (
         "h2": (
+          // "bold-color": red,
           "color": orange,
           "className": f--font-b,
         ),
         "h3": (
+          // "bold-color": red,
           "color": orange,
           "className": f--font-c,
         ),
         "h4": (
+          // "bold-color": red,
           "color": purple,
           "className": f--font-d,
         ),
         "h5": (
+          // "bold-color": red,
           "color": orange,
           "className": f--font-e,
         ),
         "h6": (
+          // "bold-color": red,
           "color": orange,
           "className": f--font-f,
         ),
@@ -99,6 +113,7 @@
         "className": c--link-a,
       ),
       $paragraphs-options: (
+        // "bold-color": red,
         "className": f--font-e f--color-f,
         "margin-bottom": $measure * 4,
       ),
@@ -130,6 +145,7 @@
         "third-level-artwork-border-color": null,
         "margin-bottom": $measure * 4,
         "font-styles": (
+          // "bold-color": red,
           "className": f--font-e f--color-e,
         ),
       )