@terrahq/wysiwyg 1.0.0 → 1.0.2

package/readme/blocks/Columns.md

@@ -1,31 +1,46 @@
 # Columns
 
-Here are the styling options for columns.
+Here are the styling options for columns (the `wp-block-columns` block). Just for WP.
+
+By default the columns are **equal width** (each column shares the available space evenly). A column that carries its own width (WordPress adds an inline `flex-basis`) keeps that width.
 
 ## Editable options
 
 ### breakpoint
 
-This value indicates the breakpoint at which the columns transitions to a single column.
+This value indicates the breakpoint at which the columns transition to a single column (they stack).
 
 The value for this property must be a numerical value in pixels (px).
 
-### margin-bottom
+### column-gap
+
+This property sets the horizontal gap between columns.
+
+The value must be a numerical value expressed in any unit.
 
-This property sets the margin-bottom of the button.
+### row-gap
+
+This property sets the vertical gap between columns when they wrap or stack.
 
 The value must be a numerical value expressed in any unit.
 
+### margin-bottom
+
+This property sets the margin-bottom of the columns block.
+
+The value must be a numerical value expressed in any unit.
 
 ## SCSS
 
 ```scss
-    .c--content-X {
-        @include make-content-modifier (
-            $columns-options: (
-                "breakpoint": $tablets,
-                "margin-bottom": $measure*4,
-            )
-        );
-    }
-```
+.c--content-X {
+  @include make-content-modifier(
+    $columns-options: (
+      "breakpoint": $tablets,
+      "column-gap": $measure * 4,
+      "row-gap": $measure * 4,
+      "margin-bottom": $measure * 4,
+    )
+  );
+}
+```

package/readme/blocks/Links.md

@@ -2,6 +2,8 @@
 
 Here are the styling options for a link.
 
+The link styles are applied to text links only. Anchors that **wrap an image** (e.g. a linked image) and the **button block link** (`.wp-block-button__link`) are excluded, so they don't inherit the link styles (color, underline, hover, etc.).
+
 ## Editable options
 
 ### className

package/readme/blocks/Quote.md

@@ -22,6 +22,10 @@ This property sets the margin-bottom of the quote.
 
 The value must be a numerical value expressed in any unit.
 
+### background
+
+The background property accepts the background styling options (background color, background image and `overlay`) listed [here](../properties/Background.md).
+
 ### border
 
 The border property accepts the border styling options listed [here](../properties/Border.md).
@@ -44,6 +48,14 @@ The cite property accepts the text-related styling options listed [here](../prop
                 "padding": $measure*5 0,
                 "margin-top": $measure,
                 "margin-bottom": $measure*5,
+                "background": (
+                    "background-color": #1a1a1a,
+                    "background-image": url("/images/quote-bg.jpg"),
+                    "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,

package/readme/blocks/Separator.md

@@ -2,6 +2,31 @@
 
 Here are the styling options for a separator.
 
+## Styles
+
+The WordPress separator block has three styles, all handled automatically:
+
+- **Default** (`wp-block-separator`) and **Wide** (`is-style-wide`) render as a line and share the same styling (the options below apply to both).
+- **Dots** (`is-style-dots`) renders as three centered dots (•••) instead of a line. By default it uses the `color` option for the dots, and it ignores the line-only properties (`height`, `width`). Its appearance can be fine-tuned with the dots-only options below.
+
+### dots-color
+
+Color of the dots in `is-style-dots`. Overrides `color` for the dots only.
+
+Possible values: same as `color`.
+
+### dots-size
+
+Size of the dots in `is-style-dots`.
+
+The value must be a numerical value expressed in any unit.
+
+### dots-spacing
+
+Spacing between the dots in `is-style-dots`.
+
+The value must be a numerical value expressed in any unit (e.g. `1.5em`).
+
 ## Editable options
 
 ### margin

package/readme/blocks/Table.md

@@ -1,30 +1,47 @@
 # Table
 
-Here are the styling options for a table.
+Here are the styling options for a table (the `wp-block-table` block). Just for WP.
+
+The markup is a `<figure class="wp-block-table">` wrapping a `<table>` (with an optional `<figcaption>`). Header cells are `<th>` inside `<thead>`; body cells are `<td>` inside `<tbody>`.
+
+## Always-on behaviour
+
+These rules are applied automatically so you never get doubled borders on the edges:
+
+- The **last cell of each body row** never gets a right border.
+- The **cells of the last body row** never get a bottom border.
+- The **last header cell** never gets a right border.
+
+Also:
+
+- `margin-bottom` is applied to the **block wrapper** (`.wp-block-table` `<figure>`), never to the `<table>` element.
+- Cell borders are **right** and **bottom** only (there are no left/top border options, by design, to avoid double lines between cells). The outer frame is the `table-border`.
 
 ## Editable options
 
 ### header-font-styles
 
-This property sets the font styles for the table header.
+Font styles for the header cells (`<th>`). Accepts **all** the text-related options listed [here](../properties/Font.md) (`color`, `font-family`, `font-size`, `bold-color`, `bold-font-weight`, `className`, etc.).
 
-The header-font-styles property accepts the text-related styling options listed [here](../properties/Font.md).
+### body-font-styles
 
-### header-cells-padding
+Font styles for the body cells (`<td>`). Accepts all the options listed [here](../properties/Font.md).
 
-This property sets the padding for the table header.
+### caption
 
-The value must be a numerical value expressed in any unit.
+Font styles for the table caption (`<figcaption>`). Accepts all the options listed [here](../properties/Font.md).
 
-### header-border
+### header-cells-padding
 
-This property sets the border for the table header.
+Padding of the header cells. The value must be a numerical value expressed in any unit.
 
-The border property accepts the border styling options listed [here](../properties/Border.md).
+### body-cells-padding
+
+Padding of the body cells. The value must be a numerical value expressed in any unit.
 
 ### header-background
 
-This property sets the background for the table header.
+Background of the header row.
 
 The possible values include:
 
@@ -37,77 +54,67 @@ The possible values include:
 - A color within a variable map (map.get($color-options, a))
 - Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
 
-### body-font-styles
+### body-background
 
-This property sets the font styles for the table body.
+Background of the body rows. Same possible values as `header-background`.
 
-The body-font-styles property accepts the text-related styling options listed [here](../properties/Font.md).
+### odd-rows-background
 
-### body-cells-padding
+Background of the **odd** rows of the body (`tbody tr:nth-child(odd)`). Same possible values as `header-background`.
 
-This property sets the padding for the table body.
+### odd-rows-text-color
 
-The value must be a numerical value expressed in any unit.
+Text color of the **odd** rows of the body. Same color values as `header-background` (no gradient).
 
-### body-border
+### table-border
 
-This property sets the border for the table body.
+Border of the `<table>` element (the outer frame). Use a CSS `border` shorthand.
 
-The border property accepts the border styling options listed [here](../properties/Border.md).
+Example value: `2px solid map.get($color-options, a)`.
 
-### body-background
+### table-border-radius
 
-This property sets the background for the table body.
+Border-radius of the `<table>`. To make the radius visible, it switches the table to `border-collapse: separate` and clips the corners with `overflow: hidden`.
 
-The possible values include:
+The value must be a numerical value expressed in any unit.
 
-- Transparent (transparent)
-- A color name (red)
-- Hexadecimal color (#ffffff)
-- RGB color (rgb(255, 255, 255))
-- RGBA color (rgba(255, 255, 255, .5))
-- A variable referencing any of the above options ($color-a)
-- A color within a variable map (map.get($color-options, a))
-- Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
+### header-border
 
-### odd-rows-background
+> ⚠️ **Legacy / backward-compatibility only.** This option is kept so existing tables that already use it don't break. For new tables prefer the granular [`header-border-right`](#header-border-right) and [`header-border-bottom`](#header-border-bottom), which avoid doubled lines on the edges. If you set both a legacy and a granular option at the same time, the one declared **last in your `$table-options` map wins** (later declarations override earlier ones in the generated CSS), so pick one approach per table.
 
-This property sets the background of the odd rows in the table body.
+Full border of **all** the header cells (`thead tr th`). Accepts the border styling options listed [here](../properties/Border.md) (`border-color`, `border-radius`, `border-style`, `border-width`).
 
-The possible values include:
+### header-border-right
 
-- Transparent (transparent)
-- A color name (red)
-- Hexadecimal color (#ffffff)
-- RGB color (rgb(255, 255, 255))
-- RGBA color (rgba(255, 255, 255, .5))
-- A variable referencing any of the above options ($color-a)
-- A color within a variable map (map.get($color-options, a))
-- Gradient (linear-gradient(90deg, map.get($color-options, i) 0%, map.get($color-options, h) 100%))
+Right border of the header cells, **except the last one** (`thead tr th:not(:last-child)`). Use a CSS `border` shorthand, e.g. `1px solid map.get($color-options, a)`.
 
-### odd-rows-text-color
+### header-border-bottom
 
-This property sets the color of the odd rows in the table body.
+Bottom border of **all** the header cells (`thead tr th`). Use a CSS `border` shorthand.
 
-The possible values include:
+### body-border
 
-- Transparent (transparent)
-- A color name (red)
-- Hexadecimal color (#ffffff)
-- RGB color (rgb(255, 255, 255))
-- RGBA color (rgba(255, 255, 255, .5))
-- A variable referencing any of the above options ($color-a)
-- A color within a variable map (map.get($color-options, a))
+> ⚠️ **Legacy / backward-compatibility only.** This option is kept so existing tables that already use it don't break. For new tables prefer the granular [`body-border-right`](#body-border-right) and [`body-border-bottom`](#body-border-bottom), which avoid doubled lines on the edges. If you set both a legacy and a granular option at the same time, the one declared **last in your `$table-options` map wins** (later declarations override earlier ones in the generated CSS), so pick one approach per table.
 
-### caption
+Full border of **all** the body cells (`td`). Accepts the border styling options listed [here](../properties/Border.md) (`border-color`, `border-radius`, `border-style`, `border-width`).
+
+### body-border-right
+
+Right border of the body cells, **except the last cell of each row** (`tbody tr td:not(:last-child)`). Use a CSS `border` shorthand.
+
+### body-border-bottom
+
+Bottom border of the body cells, **except the cells of the last row** (`tbody tr:not(:last-child) td`). Use a CSS `border` shorthand.
+
+### scroll-breakpoint
 
-This property sets the font styles for the table caption.
+Enables horizontal scroll on the table below the given max-width. Under that viewport width the block wrapper (`.wp-block-table`) gets `overflow-x: auto` and the `<table>` keeps a `min-width` (the same value) so it overflows and scrolls. Above it, the table behaves normally.
 
-The caption property accepts the text-related styling options listed [here](../properties/Font.md).
+The value must be a numerical value in pixels (px).
 
 ### margin-bottom
 
-This property sets the margin-bottom of the table.
+Margin-bottom of the table block (applied to the `.wp-block-table` wrapper, not the `<table>`).
 
 The value must be a numerical value expressed in any unit.
 
@@ -117,6 +124,7 @@ The value must be a numerical value expressed in any unit.
 .c--content-X {
   @include make-content-modifier(
     $table-options: (
+      // Font of the header / body / caption — accepts every Font.md option
       "header-font-styles": (
         "color": #638c1d,
         "font-family": arial,
@@ -131,68 +139,53 @@ The value must be a numerical value expressed in any unit.
         "text-underline-position": under,
         "className": f--font-a,
         "margin-bottom": 32px,
-        "margin-bottom-before-lists": 24px,
         "padding-top": 8px,
         "text-align": center,
         "bold-font-weight": 800,
+        "bold-color": red,
       ),
       "body-font-styles": (
-        "color": #638c1d,
-        "font-family": arial,
-        "font-size": 2rem,
-        "font-style": italic,
-        "font-weight": 400,
-        "letter-spacing": 1px,
-        "line-height": 1.5,
-        "max-lines": 3,
-        "text-decoration": underline,
-        "text-decoration-color": #000000,
-        "text-underline-position": under,
         "className": f--font-a,
-        "margin-bottom": 32px,
-        "margin-bottom-before-lists": 24px,
-        "padding-top": 8px,
-        "text-align": center,
         "bold-font-weight": 800,
+        "bold-color": red,
       ),
       "caption": (
-        "color": #638c1d,
-        "font-family": arial,
-        "font-size": 2rem,
-        "font-style": italic,
-        "font-weight": 400,
-        "letter-spacing": 1px,
-        "line-height": 1.5,
-        "max-lines": 3,
-        "text-decoration": underline,
-        "text-decoration-color": #000000,
-        "text-underline-position": under,
-        "className": f--font-a,
-        "margin-bottom": 32px,
-        "margin-bottom-before-lists": 24px,
-        "padding-top": 8px,
-        "text-align": center,
-        "bold-font-weight": 800,
+        "className": f--font-f,
+        "text-align": right,
       ),
-      "margin-bottom": $measure * 4,
+      // Padding
       "header-cells-padding": $measure * 2,
       "body-cells-padding": $measure $measure * 2,
-      "header-border": (
-        "border-radius": 1px,
-        "border-width": 1px,
-        "border-style": solid,
-        "border-color": map.get($color-options, a),
-      ),
+      // Backgrounds
       "header-background": map.get($color-options, a),
-      "body-border": (
-        "border-radius": 1px,
-        "border-width": 1px,
-        "border-style": solid,
-        "border-color": map.get($color-options, a),
-      ),
-      "body-background": map.get($color-options, a),
-      "odd-rows-background": map.get($color-options, c),
+      "body-background": rgba(map.get($color-options, e), 0.3),
+      "odd-rows-background": rgba(map.get($color-options, e), 0.5),
       "odd-rows-text-color": map.get($color-options, d),
+      // Table frame
+      "table-border": 2px solid map.get($color-options, a),
+      "table-border-radius": $measure * 2,
+      // Cell borders (right + bottom; edges excluded automatically) — RECOMMENDED
+      "header-border-right": 1px solid map.get($color-options, a),
+      "header-border-bottom": 2px solid map.get($color-options, a),
+      "body-border-right": 1px solid map.get($color-options, e),
+      "body-border-bottom": 1px solid map.get($color-options, e),
+      // LEGACY (backward-compatibility only): a full border on every cell.
+      // Prefer the granular *-border-right/-bottom above for new tables.
+      // Don't combine both — if set together, whichever is declared LAST wins.
+      // "header-border": (
+      //   "border-color": map.get($color-options, a),
+      //   "border-style": solid,
+      //   "border-width": 1px,
+      // ),
+      // "body-border": (
+      //   "border-color": map.get($color-options, e),
+      //   "border-style": solid,
+      //   "border-width": 1px,
+      // ),
+      // Horizontal scroll on small screens
+      "scroll-breakpoint": 700px,
+      // Spacing of the whole block
+      "margin-bottom": $measure * 4,
     )
   );
 }

package/readme/blocks/Video.md

@@ -1,24 +1,93 @@
 # Video
 
-Here are the styling options for a video.
+Here are the styling options for a video (the `wp-block-video` and `wp-block-embed` blocks). Just for WP.
+
+The styling options below apply to the `<iframe>` / `<video>` element, except `caption` (the `<figcaption>`) and `margin-bottom` (the block wrapper). These are the same shared media options as the [Image](./Image.md) block, **minus the `zoom-button-*` options**, which only apply to images (a video has no lightbox button).
 
 ## Editable options
 
+### border-color
+
+Border color of the video.
+
+Possible values include:
+
+- Transparent (transparent)
+- A color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### border-radius
+
+Border-radius of the video. The value must be a numerical value expressed in any unit.
+
+### border-style
+
+Border style of the video. Values can include those accepted by the CSS `border-style` property.
+
+### border-width
+
+Border width of the video. The value must be a numerical value expressed in any unit.
+
+### object-fit
+
+How the video fills its box. Values can include those accepted by the CSS `object-fit` property.
+
+### object-position
+
+Position of the video inside its box. Values can include those accepted by the CSS `object-position` property.
+
+### max-height
+
+Maximum height of the video. The value must be a numerical value expressed in any unit.
+
+### min-height
+
+Minimum height of the video. The value must be a numerical value expressed in any unit.
+
+### max-width
+
+Maximum width of the video. The value must be a numerical value expressed in any unit.
+
+### min-width
+
+Minimum width of the video. The value must be a numerical value expressed in any unit.
+
+### caption
+
+Font styles for the video caption (`<figcaption>`). Accepts all the text-related options listed [here](../properties/Font.md).
+
 ### margin-bottom
 
-This property sets the margin-bottom of the video.
+This property sets the margin-bottom of the video block.
 
 The value must be a numerical value expressed in any unit.
 
-
 ## SCSS
 
 ```scss
-    .c--content-X {
-        @include make-content-modifier (
-            $video-options: (
-                "margin-bottom": $measure*4,
-            )
-        );
-    }
-```
+.c--content-X {
+  @include make-content-modifier(
+    $video-options: (
+      "border-color": red,
+      "border-radius": 20px,
+      "border-style": solid,
+      "border-width": 2px,
+      "object-fit": cover,
+      "object-position": center,
+      "max-height": 700px,
+      "min-height": 0,
+      "max-width": 100%,
+      "min-width": 30px,
+      "caption": (
+        "className": f--font-f,
+        "text-align": right,
+      ),
+      "margin-bottom": $measure * 5,
+    )
+  );
+}
+```

package/readme/properties/Background.md

@@ -0,0 +1,74 @@
+# Background Options
+
+These properties are used to style the background of the blocks: a background color, a background image (with its size/position/repeat) and an optional `overlay` layer painted on top of the image to keep the content readable.
+
+## Editable Variables
+
+### background-color
+
+Sets the background color of the block.
+
+Possible values include:
+
+- Transparent (transparent)
+- Color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
+### background-image
+
+Sets the background image of the block.
+
+The value accepts any valid CSS `background-image` value, for example:
+
+- A url (url("/images/bg.jpg"))
+- A gradient (linear-gradient(...))
+- A variable referencing any of the above options ($bg)
+
+### background-size
+
+Sets the background-size of the block (cover, contain, auto, 100% 100%, etc.).
+
+### background-position
+
+Sets the background-position of the block (center, top left, 50% 50%, etc.).
+
+### background-repeat
+
+Sets the background-repeat of the block (no-repeat, repeat, repeat-x, etc.).
+
+### overlay
+
+Adds a color/gradient layer on top of the background image to keep the content readable.
+
+It is rendered as a `::before` pseudo-element covering the block, behind its content (the block's direct children are automatically raised above it). The layer inherits the block's `border-radius`.
+
+The value accepts any valid CSS `background` value, for example:
+
+- A semi-transparent color (rgba(0, 0, 0, 0.55))
+- A gradient (linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)))
+- A variable referencing any of the above options ($overlay)
+
+When you use an `overlay`, remember to set a light text `color` on the block's content so it contrasts against the layer.
+
+## SCSS
+
+```scss
+.c--content-X {
+  @include make-content-modifier(
+    $quote-options: (
+      "background": (
+        "background-color": #1a1a1a,
+        "background-image": url("/images/bg.jpg"),
+        "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)),
+      ),
+    )
+  );
+}
+```

package/readme/properties/Font.md

@@ -122,6 +122,20 @@ This property sets the weight of the font when we set it to bold in the backend.
 
 Values can include those accepted by the CSS 'font-weight' property.
 
+### bold-color
+
+This property sets the color of the text when we set it to bold in the backend (the `<strong>` / `<b>` tags), independently of the regular text color.
+
+Possible values include:
+
+- Transparent (transparent)
+- Color name (red)
+- Hexadecimal color (#ffffff)
+- RGB color (rgb(255, 255, 255))
+- RGBA color (rgba(255, 255, 255, .5))
+- A variable referencing any of the above options ($color-a)
+- A color within a variable map (map.get($color-options, a))
+
 ## SCSS
 
 ```scss
@@ -145,6 +159,7 @@ Values can include those accepted by the CSS 'font-weight' property.
       "padding-top": 8px,
       "text-align": center,
       "bold-font-weight": 800,
+      "bold-color": red,
     )
   );
 }

package/readme/properties/Media.md

@@ -0,0 +1,33 @@
+# Media Options
+
+These are the shared options used by the media blocks: [Image](../blocks/Image.md) and [Video](../blocks/Video.md). They style the media element (`<img>`, `<iframe>`, `<video>`), its caption and its spacing.
+
+## Editable options
+
+### border-color / border-radius / border-style / border-width
+
+Border of the media element. They accept the [Border](./Border.md) values (color, radius, style, width).
+
+### object-fit
+
+How the media fills its box. Values can include those accepted by the CSS `object-fit` property.
+
+### object-position
+
+Position of the media inside its box. Values can include those accepted by the CSS `object-position` property.
+
+### max-height / min-height / max-width / min-width
+
+Size constraints of the media element. The value must be a numerical value expressed in any unit.
+
+### caption
+
+Font styles for the media caption (`<figcaption>`). Accepts all the text-related options listed in [Font](./Font.md).
+
+### margin-bottom
+
+Margin-bottom of the media block. The value must be a numerical value expressed in any unit.
+
+### zoom-button-background-color / zoom-button-bottom / zoom-button-right / zoom-button-border-radius
+
+**Image only (Gutenberg).** Style the lightbox/zoom trigger button shown over an image. They have no effect on videos (a video has no zoom button). See [Image](../blocks/Image.md) for details.

package/src/assets/icons/ArrowRight.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <path d="M5 12h14M13 6l6 6-6 6" stroke="#8c6ba8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/scss/_paths.scss

@@ -1,4 +1,5 @@
-$base-path: "/wordpress-starter/" !default;
+// Sin barra final: el separador lo añade asset-url() para evitar dobles "//".
+$base-path: "/wordpress-starter" !default;
 
 @function asset-url($path) {
   @return "#{$base-path}/#{$path}";