@themarioga/grid-editor 7.2.0 → 8.0.0-beta.2

package/CHANGELOG.md

@@ -5,6 +5,107 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [8.0.0-beta.2] - 2026-09-29
+
+### Added
+- The style plugin's catalog has Bootstrap 5.3's colors: `bg-*-subtle`,
+  `text-bg-*`, `text-*-emphasis`, `text-body-emphasis` and `border-*-subtle`,
+  the opacities `bg-opacity-*`, `text-opacity-*` and `border-opacity-*`,
+  `fixed-top` and `fixed-bottom`, and on an element `img-fluid`,
+  `img-thumbnail` and `object-fit-*`.
+- A Flex section in the style plugin: direction, wrap, `justify-content`,
+  `align-items`, `align-content`, and on anything but a row `gap`,
+  `row-gap`, `column-gap`, fill, grow and shrink, per breakpoint, with
+  `vstack` and `hstack` as chips. `style.sections.flex` turns it off.
+- `sticky-{bp}-top` and `sticky-{bp}-bottom`, per breakpoint, in the style
+  plugin's Position section.
+- On a node that is flex or grid in the view being edited, the drawer sits
+  on top out of the flow, and the canvas lays the content out as the page
+  will.
+
+### Changed
+- **BREAKING:** The style plugin's `visibility` utility is `display`, and
+  edits every `d-{bp}-*` value from `none` to `inline-flex`. The eye shows a
+  node again with the display it has below, so a flex column comes back
+  flex. `utility.visibility` and `utility.visibility_shown` are gone from the
+  locales, and `utility.display` is new.
+- **BREAKING:** `justify-content-*` and `align-items-*` are the style
+  plugin's, in its Flex section, on rows, columns, elements and containers.
+  The alignment plugin keeps `align-self-*` only.
+- A node Bootstrap hides in the view being edited is kept on the canvas with
+  the display it would have, not as a block.
+## [8.0.0-beta.1] - 2026-09-29
+
+Not published: what it holds shipped in 8.0.0-beta.2.
+
+### Removed
+- **BREAKING:** `grideditor.spacing.js`, `grideditor.textalign.js`,
+  `grideditor.visibility.js` and `grideditor.float.js`, deprecated in 7.3:
+  the style plugin carries them. Their names in the `plugins` setting are
+  plugins that are not loaded.
+- **BREAKING:** `utilities.spacing` and `utilities.visibility` are no longer
+  read; they are `style.spacing` and `style.visibility`.
+- **BREAKING:** `replaces` on a plugin's factory, added in 7.3 for those
+  plugins.
+- **BREAKING:** The numeric layout mode indexes of 2.x in `changeView`,
+  `getUtility` and `setUtility`: they are views that do not exist.
+- **BREAKING:** The warnings about `sortable_options` and
+  `resizable_options`, removed in 4.0, and about `tinymce.config.oninit`,
+  removed in 7.0: they are ignored, and `oninit` is passed to tinyMCE as it
+  is.
+- **BREAKING:** `ckeditor.config.on.instanceReady`, CKEditor 4's, which 7.x
+  called itself: it is not called, and `on` goes to CKEditor 5 as it is.
+- **BREAKING:** The adapter's `$.fn.gridEditor.containers`, `.features`,
+  `.utilities` and `.texts`, which kept a plugin written for 6.x from
+  throwing: one throws as it loads now.
+- The locale keys `warning.setting_removed`, `warning.oninit_removed` and
+  `warning.plugin_6x`, and the words on CKEditor 4 in
+  `error.ckeditor_missing`.
+- Notes on earlier versions in the README, the docs and the code;
+  UPGRADING.md keeps them. See [UPGRADING.md](UPGRADING.md).
+
+
+## [7.3.0] - 2026-09-29
+
+### Added
+- The style plugin, `grideditor.style.js`. Every row, column, container,
+  pane, element and section gets a *Style* accordion in its settings panel:
+  size, spacing, border, background, text, typography, display, position
+  and free css. It is written to the node's own `style` through the
+  browser, so a value the browser refuses is marked and not written, and
+  what the host wrote and nobody edits is kept. Each section offers
+  Bootstrap 5.3's classes for what it styles as chips, which put a class in
+  the classes field or take it off. A field whose property a Bootstrap
+  utility on the node also sets says that the class takes priority. Where
+  `settings_panel` is `popover` or `inline` the accordion opens in a
+  dialog, from a *Style* button. The `style` setting chooses the sections,
+  and in each the properties and whether it has chips. See the README and
+  [example/style.html](example/style.html).
+- The style plugin carries spacing, text alignment, visibility and float:
+  their per breakpoint fields are in its Spacing, Text, Display and
+  Position sections rather than in *Responsive*, and do what they did.
+  `style.spacing` and `style.visibility` take what `utilities.spacing` and
+  `utilities.visibility` took.
+- For plugins: `panelSection(node, kind)`, a section of a plugin's own in a
+  node's settings panel, between its general fields and *Responsive*;
+  `ge.openDialog`/`ge.closeDialog`, a modal of the editor's own over the
+  settings; `ge.hostStyle`/`ge.setHostStyle`, the host's own style under a
+  breakpoint preview; and `replaces` on a factory, for a plugin that takes
+  the place of others. A field made with `ge.utilityField` follows the view
+  and the classes field wherever the plugin puts it. See
+  [docs/plugins.md](docs/plugins.md).
+
+### Deprecated
+- `grideditor.spacing.js`, `grideditor.textalign.js`,
+  `grideditor.visibility.js` and `grideditor.float.js`, which go in 8.0.
+  Loaded on their own they do what they did, and say once per editor that
+  they are deprecated; loaded beside the style plugin they stand down, and
+  their names in the `plugins` setting ask for it. `utilities.spacing` and
+  `utilities.visibility` are still read, when `style.spacing` and
+  `style.visibility` are not there, and go in 8.0 too. See
+  [UPGRADING.md](UPGRADING.md).
+
+
 ## [7.2.0] - 2026-09-29
 
 ### Changed

package/README.md

@@ -1,7 +1,7 @@
 Grid Editor
 ===========
 
-Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. Bootstrap's responsive utilities — visibility, order, alignment, gutters, spacing, text alignment and float — are edited per breakpoint too. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
+Grid Editor is a visual javascript editor for the [bootstrap 5 grid system](https://getbootstrap.com/docs/5.3/layout/grid/), in plain DOM: no jQuery needed. You can create, drag, resize and delete rows and columns — sized in units, equal (`col`) or to their content (`col-auto`), or shared out by their row (`row-cols-*`) — indent them, group them in sections (`.container`), copy and paste them, and give each of bootstrap's six breakpoints its own layout — or edit them all at once, with a mouse or with a finger. Bootstrap's responsive utilities — display, flex, order, alignment, gutters, spacing, text alignment, sticky and float — are edited per breakpoint too, and any row, column, container or element can be given inline css, with Bootstrap's classes for it offered as chips. It also edits tabs, accordions, popups and cards, and any markup you mark as an element, and it tells your application about every change it makes.
 
 This is a fork of [Friendly-Pixel/grid-editor](https://github.com/Friendly-Pixel/grid-editor)
 by Simon Epskamp, carrying it on from 2.x. It is published as
@@ -45,11 +45,10 @@ package: an Angular CLI project, with a build step, unlike the pages above.
 Installation
 ------------
 
-* __Dependencies:__ Grid Editor depends on [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. It does not need jQuery since 7.0.
+* __Dependencies:__ Grid Editor depends on [SortableJS](https://sortablejs.github.io/Sortable/), Bootstrap Icons, and Bootstrap 5, so make sure you have included those in the page. It does not need jQuery.
     * If you want to use the tinyMCE integration, include tinyMCE 7 (7.9.3 or later) as well, and `dist/plugins/grideditor.tinymce.min.js` after the editor.
     * If you want to use the summernote integration, include summernote and `dist/plugins/grideditor.summernote.min.js`. Summernote needs jQuery itself, so that page loads jQuery too; nothing else does.
-    * If you want to use the CKEditor integration... you get the point: CKEditor 5's browser build (`ckeditor5.umd.js` and `ckeditor5.css`) and `dist/plugins/grideditor.ckeditor.min.js`. CKEditor 4 is no longer supported.
-    * Up to 5.x the main bundle carried a copy of the three; since 6.0 the plugin of the editor you use has to be loaded, as above. See [UPGRADING.md](UPGRADING.md).
+    * If you want to use the CKEditor integration... you get the point: CKEditor 5's browser build (`ckeditor5.umd.js` and `ckeditor5.css`) and `dist/plugins/grideditor.ckeditor.min.js`.
 * From npm:
 
 ```
@@ -111,7 +110,7 @@ Load the classic script *or* the module build on a page, never both.
 
 A page that uses the jQuery API of 6.x - `$(el).gridEditor(...)`, jQuery
 events, jQuery objects in the payloads - keeps it by loading jQuery 4 and the
-adapter after the editor, and the 7.x plugins after that:
+adapter after the editor, and the plugins after that:
 
 ```html
 <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
@@ -120,7 +119,8 @@ adapter after the editor, and the 7.x plugins after that:
 <script src="grid-editor/dist/plugins/grideditor.tabs.min.js"></script>
 ```
 
-Plugins written for 6.x are not kept working: see [UPGRADING.md](UPGRADING.md).
+Plugins written for 6.x do not work with it, and throw as they register on
+`$.fn.gridEditor`: [UPGRADING.md](UPGRADING.md) says how to port one.
 
 Usage
 -----
@@ -215,7 +215,7 @@ ge.settings.locale;   // 'en'
 A html string written into the canvas - through the source view,
 `source_textarea`, `createElement` or a paste - is parsed as `innerHTML`
 parses: a `<script>` in it is kept in the markup and does not run in the
-editor. Up to 6.x it did.
+editor.
 
 Events
 ------
@@ -306,7 +306,7 @@ which loses to `col-auto` and `col-N`. `row_cols: false` takes the field away.
 In a breakpoint view a size or an offset is written for that breakpoint. In the
 all view it is written once, as the class with no breakpoint (`col-4`,
 `offset-2`), and the breakpoints' own sizes or offsets are taken off: one value
-for every size. Up to 4.x the all view wrote all six breakpoints instead.
+for every size.
 
 The settings button on a row, a column, a container, a tab, an accordion item
 or an element opens a panel with two fields: the node's `id`, and its css
@@ -428,7 +428,7 @@ __`settings_panel`:__ Where the settings a gear opens are shown - a node's id, i
 | `'offcanvas'` | A Bootstrap offcanvas at the side of the window, from the bottom on a phone. It does not move the canvas, and has room for every field |
 | `'popover'` | A Bootstrap popover under the gear, or over it when there is more room there; a press anywhere else puts it away |
 | `'modal'` | A Bootstrap modal |
-| `'inline'` | Unfolded in the drawer itself, as up to 5.x |
+| `'inline'` | Unfolded in the drawer itself |
 
 Each is titled after its node ("Column settings"), the node is outlined while its settings are open, and Escape closes them. The editor opens and places them itself, with Bootstrap's markup and css: a page needs neither Popper nor Bootstrap's javascript, and the modal is Bootstrap's own when Bootstrap is there. [example/utilities.html](example/utilities.html) switches between the four.
 
@@ -454,7 +454,7 @@ new GridEditor('#myGrid', {
 
 ### Breakpoints and sizing
 
-__`layout_modes`:__ Which views the toolbar dropdown offers. Default `['all', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']`. Offer fewer to keep the feel of 2.x:
+__`layout_modes`:__ Which views the toolbar dropdown offers. Default `['all', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']`. Offer fewer for a simpler dropdown:
 
 ```javascript
 new GridEditor('#myGrid', {
@@ -482,7 +482,7 @@ new GridEditor('#myGrid', {
 A column's text is a *text block*: a content area, the text editor that edits
 it, and a drawer of its own - move, which editor, settings, the host's
 `text_tools`, delete - like any other block. It drags between columns, the
-clipboard copies it, and spacing, text alignment and visibility apply to it.
+clipboard copies it, and spacing, text alignment and display apply to it.
 The markup does not change: the drawer sits beside the content area in a
 wrapper that only exists while editing, because inside it the text editor would
 take it for text. It sits over the text's top right corner and takes no room,
@@ -560,41 +560,112 @@ __`element_tools`:__ Extra tools on every element drawer, same shape as `row_too
 See [example/elements.html](example/elements.html), which also shows the
 pattern for an element with no visual output of its own.
 
+### Style
+
+Inline css for rows, columns, containers, panes, elements and sections, and
+Bootstrap's classes for it. A plugin:
+
+```html
+<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>   <!-- after grideditor.elements -->
+```
+
+Each of those nodes gets a *Style* accordion in its settings panel, between
+its id and classes and the *Responsive* section. One section is open at a
+time, and the one you opened last is open on the next node too.
+
+| Section | Inline fields | Per breakpoint |
+| --- | --- | --- |
+| Size | `width`, `height`, `min-*` and `max-*` (a column: `min-*` and `max-*` only, its width is the grid's) | |
+| Spacing | `margin-*` and `padding-*`, by side | padding and margin, `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}` |
+| Border | width, style, color, radius, and a shadow builder | |
+| Background | color, image, size, position, repeat | |
+| Text | color, size, alignment, and a text shadow builder | `text-{bp}-start`, `-center`, `-end` |
+| Typography | family, weight, style, line height, letter spacing, transform, decoration | |
+| Display | display, opacity, overflow, visibility | display, `d-{bp}-*` from `none` to `inline-flex`, with the eye in the drawer that hides and shows |
+| Flex | | direction, wrap, `justify-content-{bp}-*`, `align-items-{bp}-*`, `align-content-{bp}-*`; on anything but a row the gaps, `gap-{bp}-{0–5}`, `row-gap-*`, `column-gap-*`, and fill, grow and shrink |
+| Position | position, `top`, `right`, `bottom`, `left` (not on a column), `z-index` | sticky, `sticky-{bp}-top` / `-bottom`; float, `float-{bp}-*`, on an element |
+| Custom css | whatever no field stands for, as text | |
+
+What you type goes to the node's own `style`, through the browser: a value it
+does not take is marked and not written, and whatever the host wrote that you
+do not edit is kept, `!important` included. The style attribute is the same at
+every size, and in a breakpoint view the accordion says so; the per breakpoint
+fields are Bootstrap's responsive classes, and edit the view you are in.
+A text gets only Text and Display, with their per breakpoint fields: its
+editor owns what is inside it.
+
+Every section but Spacing and Custom css also offers Bootstrap's classes for
+what it styles - `rounded-3`, `shadow-sm`, `bg-primary`, `bg-primary-subtle`,
+`text-bg-dark`, `bg-opacity-50`, `fs-4`, `fw-bold`, `vstack`, `fixed-top`,
+and on an element `img-fluid` and `object-fit-cover`… - as chips. A chip puts its class in the
+classes field, and pressing it again takes it off; chips that are
+alternatives, like `rounded-2` and `rounded-pill`, take each other off.
+Bootstrap's utilities are `!important`, so a field whose property a class on
+the node also sets says which class takes priority.
+
+With `settings_panel: 'popover'` or `'inline'` the panel has a *Style* button
+instead, which opens the accordion in a dialog.
+
+__`style`:__ Every section, unless you say otherwise.
+
+```javascript
+new GridEditor('#myGrid', {
+    style: {
+        sections: {
+            position: false,                                                  // no Position section
+            border: { properties: ['border-width', 'border-color'], catalog: false },  // two fields, no chips
+        },
+        spacing: { values: ['0', '2', '4'], scale: [/* if you changed $spacers */] },
+        visibility: { drawer: false },   // no eye in the drawers, the display field only
+    },
+});
+```
+
+The sections are `size`, `spacing`, `border`, `background`, `text`,
+`typography`, `display`, `flex`, `position` and `custom`. `properties` chooses and
+orders a section's inline fields; the per breakpoint ones stay while the
+section does. What a section you left out or narrowed would have shown is in
+Custom css.
+
+Sanitizing what `getHtml` returns is the page's business, style attributes
+included.
+
+A node that is flex or grid in the view you are in - a column with `d-flex`,
+a row with `flex-nowrap` - has its drawer on top, out of the flow, so the
+canvas lays out its content as the page will.
+
+See [example/style.html](example/style.html).
+
 ### Responsive utilities
 
-Bootstrap's responsive utility classes, edited per breakpoint. Each family is
-a plugin in a file of its own:
+Bootstrap's responsive utility classes, edited per breakpoint. The grid's are
+plugins of their own; the ones that style a node are the style plugin's, above.
 
 ```html
-<script src="grid-editor/dist/plugins/grideditor.visibility.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.order.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.alignment.min.js"></script>
 <script src="grid-editor/dist/plugins/grideditor.gutters.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.spacing.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.textalign.min.js"></script>
-<script src="grid-editor/dist/plugins/grideditor.float.min.js"></script>   <!-- after grideditor.elements -->
+<script src="grid-editor/dist/plugins/grideditor.style.min.js"></script>
 ```
 
 | Plugin | Classes | On |
 | --- | --- | --- |
-| `visibility` | `d-{bp}-none`, `d-{bp}-block`, `d-{bp}-flex` | rows, columns, elements, containers |
 | `order` | `order-{bp}-{first,0–5,last}` | columns |
-| `alignment` | `justify-content-{bp}-*`, `align-items-{bp}-*`; `align-self-{bp}-*` | rows; columns |
+| `alignment` | `align-self-{bp}-*` | columns |
 | `gutters` | `g-{bp}-{0–5}`, `gx-{bp}-*`, `gy-{bp}-*` | rows |
-| `spacing` | `{p,m}{,x,y,t,b,s,e}-{bp}-{0–5}`, and `auto` for margin | rows, columns, elements, containers |
-| `textalign` | `text-{bp}-start`, `-center`, `-end` | rows, columns, elements, containers |
-| `float` | `float-{bp}-start`, `-end`, `-none` | elements |
+| `style` | display, flex (a row's `justify-content-*` and `align-items-*` among it), spacing, text alignment, sticky and float; see [Style](#style) | rows, columns, elements, containers, texts |
 
 A plugin puts a field in the *Responsive* section of each drawer's settings
-panel, and some add a tool to the drawer. In a breakpoint view a change is
+panel - or, for the style plugin, in its section of the *Style* accordion -
+and some add a tool to the drawer. In a breakpoint view a change is
 written for that breakpoint alone, and the field says what it inherits and from
 where. In the all view it is written once, as the class with no breakpoint, and
 replaces what the breakpoints said. While you edit, the canvas shows what the
 classes mean in the view you are in; `getHtml` returns only the classes.
 
 ```javascript
-ge.setUtility(column, 'visibility', 'none', 'md');   // d-md-none
-ge.getUtility(column, 'visibility', 'lg');           // 'none', inherited
+ge.setUtility(column, 'display', 'none', 'md');   // d-md-none
+ge.getUtility(column, 'display', 'lg');           // 'none', inherited
 ```
 
 __`utilities`:__ Options for each plugin, under its name.
@@ -602,10 +673,8 @@ __`utilities`:__ Options for each plugin, under its name.
 ```javascript
 new GridEditor('#myGrid', {
     utilities: {
-        visibility: { drawer: false },   // no eye in the drawers, the field only
         order: { drawer: false },        // no arrows in the column drawers
         gutters: { scale: ['0', '.25rem', '.5rem', '1rem', '1.5rem', '3rem'] },  // if you changed $spacers
-        spacing: { values: ['0', '2', '4'], scale: [/* the same */] },          // offer fewer steps
     },
 });
 ```
@@ -880,9 +949,6 @@ new GridEditor('#myGrid', {
 });
 ```
 
-`config.on.instanceReady`, CKEditor 4's, is still called once the editor is
-ready, with the editor as `this` and as `evt.editor`.
-
 __`summernote.config`:__ Specify summernote config, when using the `summernote` `content_types`.
 See the [summernote documentation](http://summernote.org/deep-dive/). 
 Also check out the [summernote example](example/summernote.html).

package/UPGRADING.md

@@ -1,3 +1,89 @@
+Upgrading from grid-editor `7.x` to `8.0`
+=========================================
+
+8.0 takes out what kept pages, plugins and options of earlier versions
+working. Nothing it removes warns: an option that is gone is ignored like any
+option the editor does not know. The jQuery adapter stays, and so does the
+conversion of markup 5.x saved. `8.0.0-beta.2` is the first beta published
+(`8.0.0-beta.1` never was); install it with
+`npm install @themarioga/grid-editor@next`.
+
+* __The spacing, textalign, visibility and float plugins are gone.__ Load
+  `grideditor.style.js`, which has carried them since 7.3, and name it in the
+  `plugins` setting: `'spacing'`, `'textalign'`, `'visibility'` and `'float'`
+  there are plugins that are not loaded now, and only get the usual warning.
+* __`utilities.spacing` and `utilities.visibility` are not read.__ They are
+  `style.spacing` and `style.visibility`.
+* __`replaces` on a plugin's factory does nothing.__ A plugin that stood in
+  for another is loaded beside it, like any two plugins.
+* __`changeView`, `getUtility` and `setUtility` take a view key only.__ The
+  numeric indexes of 2.x - `0`, `1`, `2` for desktop, tablet and phone - are
+  views that do not exist: `changeView(0)` warns that there is no such
+  layout mode and does nothing. Pass `'lg'`, `'sm'` or `'xs'`.
+* __`sortable_options` and `resizable_options` are ignored__, without the
+  warning 4.0 gave: use `drag` and `resize`.
+* __`tinymce.config.oninit` is passed to tinyMCE as it is__, without the
+  warning 7.0 gave: use `init_instance_callback`.
+* __`ckeditor.config.on.instanceReady` is not called.__ It was CKEditor 4's,
+  and 7.x called it itself; `on` goes to CKEditor 5 as it is, which does not
+  know it. A function in `config.extraPlugins` is CKEditor 5's way: it is
+  called with the editor as the editor starts.
+* __The adapter has no `$.fn.gridEditor.containers`, `.features`,
+  `.utilities` or `.texts`.__ A plugin written for 6.x that registers there
+  throws as it loads, where 7.x warned and left it out. Port it: see
+  "Port a plugin written for 6.x" below.
+* __Gone from the locales:__ `warning.setting_removed`,
+  `warning.oninit_removed` and `warning.plugin_6x`. A locale of your own
+  can drop them.
+
+What `8.0.0-beta.2` adds to that:
+
+* __The `visibility` utility is `display`.__ It edits every `d-{bp}-*`
+  value now, not only hidden and shown: `setUtility(node, 'display', 'none',
+  'md')`, and `before-utility` and `after-utility` say `family: 'display'`.
+  `'visibility'` is a family no plugin declares, and gets the usual warning.
+  The eye and `style.visibility.drawer` are as they were.
+* __A row's `justify-content-*` and `align-items-*` are the style plugin's.__
+  They are in its Flex section, on rows and on anything made flex, and the
+  alignment plugin keeps `align-self-*` only. A page that loads alignment
+  without style has no field for them: load `grideditor.style.js`.
+* __Locale keys:__ `utility.visibility` and `utility.visibility_shown` are
+  gone, and `utility.display` is new; `utility.justify_content` and
+  `utility.align_items` come with the style plugin now. The Flex section and
+  sticky bring keys of their own, listed in
+  [docs/locale-keys.md](docs/locale-keys.md).
+
+Upgrading from grid-editor `7.2` to `7.3`
+=========================================
+
+Nothing breaks. The spacing, textalign, visibility and float plugins are now
+part of the **style plugin**, and deprecated on their own: they go in 8.0.
+A page that loads them keeps working as it did, with a warning in the
+console.
+
+* __Load the style plugin instead of the four.__ It edits the same classes
+  per breakpoint, in its Spacing, Text, Display and Position sections rather
+  than in *Responsive*, and adds inline css and Bootstrap's classes as
+  chips.
+
+  ```html
+  <script src="dist/plugins/grideditor.style.min.js"></script>
+  ```
+
+  As a module, `import '@themarioga/grid-editor/plugins/style'`. Loaded
+  beside it, the old files stand down.
+* __Name it in the `plugins` setting__, if the page names its plugins:
+  `plugins: ['style', …]` instead of `'spacing'`, `'textalign'`,
+  `'visibility'` or `'float'`. An old name still asks for the style plugin,
+  with a warning, until 8.0.
+* __Move the options.__ `utilities: { spacing: … }` is
+  `style: { spacing: … }`, and `utilities: { visibility: … }` is
+  `style: { visibility: … }`. The old ones are still read, with a warning,
+  until 8.0.
+* __Tests or code that look for the fields__ in the Responsive section find
+  them in the Style accordion now: `[data-ge-style-section="spacing"]` and
+  the others.
+
 Upgrading from grid-editor `7.1` to `7.2`
 =========================================