@themarioga/grid-editor 7.3.0 → 8.0.0-beta.3

package/example/containers.html

@@ -100,8 +100,11 @@
                     asked to do any of it, so there is no backdrop and no focus
                     trap to fight with. Double click a tab or item label to
                     rename it, and a card’s header and footer the same
-                    way. The last row shows two levels: tabs inside an
-                    accordion item.
+                    way. The row after the popup shows two levels: tabs inside
+                    an accordion item. A tabs container's gear has a Tabs
+                    section for its variant - tabs, pills or underline, full
+                    width, alignment, and vertical from a breakpoint up - and
+                    the last row has two of them.
                 </p>
                 <button class="btn btn-sm btn-secondary" id="output" type="button">Show the html this produces</button>
                 <button class="btn btn-sm btn-primary" id="authored" type="button">Open that html as a real page</button>
@@ -239,6 +242,65 @@
                 </div>
             </div>
 
+            <div class="row">
+                <div class="col-lg-6">
+                    <div data-ge-container="tabs" class="d-md-flex align-items-md-start">
+                        <ul class="nav nav-pills flex-md-column me-md-3" role="tablist" aria-orientation="vertical">
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-vtab-one" aria-controls="example-vtab-one">Profile</button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-vtab-two" aria-controls="example-vtab-two">Settings</button>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane fade show active" id="example-vtab-one" role="tabpanel" tabindex="0">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>Pills, vertical from tablet up: open the container&rsquo;s gear and look in Tabs.</p></div>
+                                </div></div>
+                            </div>
+                            <div class="tab-pane fade" id="example-vtab-two" role="tabpanel" tabindex="0">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>On a phone the pills are a row above the panes.</p></div>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-lg-6">
+                    <div data-ge-container="tabs">
+                        <ul class="nav nav-underline nav-fill" role="tablist">
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link active" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-utab-one" aria-controls="example-utab-one">Week</button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-utab-two" aria-controls="example-utab-two">Month</button>
+                            </li>
+                            <li class="nav-item" role="presentation">
+                                <button class="nav-link" type="button" role="tab" data-bs-toggle="tab" data-bs-target="#example-utab-three" aria-controls="example-utab-three">Year</button>
+                            </li>
+                        </ul>
+                        <div class="tab-content">
+                            <div class="tab-pane fade show active" id="example-utab-one" role="tabpanel" tabindex="0">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>Underline, filling the width.</p></div>
+                                </div></div>
+                            </div>
+                            <div class="tab-pane fade" id="example-utab-two" role="tabpanel" tabindex="0">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>The second.</p></div>
+                                </div></div>
+                            </div>
+                            <div class="tab-pane fade" id="example-utab-three" role="tabpanel" tabindex="0">
+                                <div class="row"><div class="col-lg-12">
+                                    <div class="ge-content" data-ge-content-type="tinymce"><p>The third.</p></div>
+                                </div></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
         </div> <!-- /#myGrid -->
     </div> <!-- /.container -->
 

package/example/index.html

@@ -44,15 +44,16 @@
         </p>
         <p class="text-body-secondary">
             Since 4.1: utility plugins, which edit Bootstrap's responsive
-            utility classes &mdash; visibility, column order, alignment,
+            utility classes &mdash; display, column order, alignment,
             gutters and spacing &mdash; per breakpoint. See
             <a href="utilities.html">Responsive utilities</a>.
         </p>
         <p class="text-body-secondary">
             New in 7.3: the style plugin, inline css by section with
-            Bootstrap's classes as chips, which also carries visibility,
+            Bootstrap's classes as chips, which also carries display,
             spacing, text alignment and float. See
-            <a href="style.html">Style</a>.
+            <a href="style.html">Style</a>. In 8.0: flex, sticky and
+            Bootstrap 5.3's colors.
         </p>
 
         <div class="list-group my-4">
@@ -134,7 +135,7 @@
                     <strong>Responsive utilities</strong>
                     <code class="text-body-secondary">utilities.html</code>
                 </div>
-                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: visibility, column order, alignment, gutters, spacing, text alignment and float</span>
+                <span class="text-body-secondary">Bootstrap's utility classes edited per breakpoint: display, flex, column order, alignment, gutters, spacing, text alignment and float</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="style.html">

package/example/style.html

@@ -83,7 +83,7 @@
                     The gear of a row, a column, a container, a tab, an element
                     or a section has a <strong>Style</strong> accordion: size,
                     spacing, border, background, text, typography, display,
-                    position and free css. What you type is written to the
+                    flex, position and free css. What you type is written to the
                     node's own <code>style</code>; a value the browser does
                     not take is marked and not written.
                 </p>
@@ -96,9 +96,11 @@
                 </p>
                 <p class="form-text">
                     The inline style is the same at every size. Padding and
-                    margin, text alignment, visibility and float are
-                    Bootstrap's responsive classes, edited per breakpoint in
-                    their sections: pick a breakpoint in the dropdown.
+                    margin, text alignment, display, flex, sticky and float
+                    are Bootstrap's responsive classes, edited per breakpoint
+                    in their sections: pick a breakpoint in the dropdown. A
+                    node that is flex or grid has its drawer on top, out of
+                    the flow, so its content is laid out as on the page.
                 </p>
                 <div class="d-flex flex-wrap align-items-center gap-3 mb-3">
                     <div class="d-flex align-items-center gap-2">
@@ -144,6 +146,16 @@
                 </div>
             </div>
 
+            <div class="row my-3">
+                <div class="col-12 col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-3 bg-primary-subtle">
+                    <p class="mb-0">A column made flex: its texts are stacked on phones and side by side from tablet up, with a gap between them.</p>
+                    <p class="mb-0">Open its gear, and look in Display and Flex.</p>
+                </div>
+                <div class="col-12 col-md-6 text-bg-dark">
+                    <p>This column has <code>text-bg-dark</code>, one of Bootstrap 5.3's colors in the Background section, with the subtle ones and the opacities.</p>
+                </div>
+            </div>
+
         </div> <!-- /#myGrid -->
     </div> <!-- /.container -->
 

package/example/utilities.html

@@ -15,10 +15,10 @@
 
     <!-- The editor, and the utility plugins. Each is a file of its own, and
          loading it is what puts its fields in the settings panels. The style
-         plugin carries visibility, spacing, text alignment and float, which
-         were plugins of their own up to 7.2, and edits them in its Style
-         accordion; order, alignment and gutters are the grid's, and stay in
-         the Responsive section. -->
+         plugin carries display, flex, spacing, text alignment, sticky and
+         float, and edits them in its Style accordion - a row's justify and
+         align among them, in Flex; order, a column's align-self and gutters
+         are the grid's, and stay in the Responsive section. -->
     <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
     <script src="../dist/grideditor.min.js"></script>
     <script src="../dist/plugins/grideditor.order.min.js"></script>
@@ -91,8 +91,8 @@
                     change is written for that breakpoint alone; in
                     <strong>All sizes</strong> it is written once, for every
                     size. Each drawer's gear has a <strong>Style</strong>
-                    accordion, whose sections hold visibility, spacing, text
-                    alignment and float, and a <strong>Responsive</strong>
+                    accordion, whose sections hold display, flex, spacing, text
+                    alignment, sticky and float, and a <strong>Responsive</strong>
                     section for the grid's utilities. Every field says what
                     the breakpoint inherits and from where.
                 </p>
@@ -106,7 +106,8 @@
                     </select>
                 </div>
                 <p class="form-text">
-                    <strong>Visibility:</strong> the eye in a drawer hides the
+                    <strong>Display:</strong> a field in the Display section,
+                    and the eye in a drawer, which hides the
                     node in the view being edited. It stays on the canvas,
                     faded, so you can show it again; in All sizes a badge says
                     at which breakpoints it is hidden. The sidebar below is
@@ -119,10 +120,10 @@
                     comes first on phones only.
                 </p>
                 <p class="form-text">
-                    <strong>Alignment:</strong> fields in the panel of a row
-                    (justify and align its columns) and of a column (align
-                    itself). The third row centres its narrow column from
-                    small desktop up.
+                    <strong>Alignment:</strong> a row justifies and aligns its
+                    columns with fields in the Style accordion's Flex section,
+                    and a column aligns itself with a field in Responsive. The
+                    third row centres its narrow column from small desktop up.
                 </p>
                 <p class="form-text">
                     <strong>Gutters:</strong> fields in a row's panel. A row

package/package.json

@@ -33,7 +33,7 @@
     "comment": "A scoped package publishes restricted unless it is told otherwise.",
     "access": "public"
   },
-  "version": "7.3.0",
+  "version": "8.0.0-beta.3",
   "main": "dist/grideditor.js",
   "module": "dist/grideditor.esm.js",
   "types": "dist/grideditor.d.ts",

package/src/js/dom.js

@@ -314,8 +314,7 @@ export function fire(node, type) {
 /* ------------------------------------------------------------------
  * Taking a node away, visibly.
  *
- * The durations are the ones 6.x had through jQuery: 400 ms unless the
- * caller says otherwise. `done` runs once the node is out of sight, which is
+ * The durations are jQuery's: 400 ms unless the caller says otherwise. `done` runs once the node is out of sight, which is
  * when the caller removes it; a node that is already out of sight is done at
  * once, on the next task, as jQuery had it.
  * ------------------------------------------------------------------ */

package/src/js/grideditor.jquery.js

@@ -1,20 +1,18 @@
 /**
- * The jQuery API of grid-editor 6, on top of the 7.0 editor.
+ * The jQuery API of grid-editor 6, on top of the plain DOM editor.
  *
- * grid-editor is plain DOM since 7.0. A page written for 6.x - one that
- * calls $(el).gridEditor(...), listens with $(el).on('grideditor:...') and
- * reads jQuery objects out of the payloads - loads jQuery 4 and this file
- * after grideditor.js, and runs unchanged:
+ * A page written for 6.x - one that calls $(el).gridEditor(...), listens
+ * with $(el).on('grideditor:...') and reads jQuery objects out of the
+ * payloads - loads jQuery 4 and this file after grideditor.js, and runs
+ * unchanged:
  *
  *   <script src="jquery.min.js"></script>
  *   <script src="dist/grideditor.min.js"></script>
  *   <script src="dist/grideditor.jquery.min.js"></script>
  *   <script src="dist/plugins/grideditor.tabs.min.js"></script>
  *
- * What it keeps is the host's side of 6.x. Plugins are not: a plugin
- * written for 6.x registered on $.fn.gridEditor.containers, .features,
- * .utilities or .texts, and is warned about and left out, since the plugin
- * contract hands out elements now. UPGRADING.md says how to port one.
+ * What it keeps is the host's side of 6.x. Plugins are not: they register
+ * on GridEditor, and the plugin contract hands out elements.
  *
  * Every value 6.x gave host code as a jQuery object is one again: the event
  * payloads and the callbacks' arguments, what the create* methods return,
@@ -250,15 +248,6 @@ function install() {
         };
     });
 
-    /** Plugins registered the 6.x way: said once each, and never called. */
-    function warnAboutLegacyPlugins() {
-        ['containers', 'features', 'utilities', 'texts'].forEach(function(registry) {
-            Object.keys(legacy[registry]).forEach(function(name) {
-                warnOnce('plugin-6x:' + registry + ':' + name, english('warning.plugin_6x', { name: name }));
-            });
-        });
-    }
-
     function dispatchMethod(set, name, args) {
         var descriptor = METHODS[name];
 
@@ -300,8 +289,6 @@ function install() {
             return dispatchMethod(this, optionsOrMethod, Array.prototype.slice.call(arguments, 1));
         }
 
-        warnAboutLegacyPlugins();
-
         var options = adaptOptions(optionsOrMethod);
 
         this.each(function() {
@@ -311,14 +298,6 @@ function install() {
         return this;
     };
 
-    // Where a 6.x plugin registers. Kept, so one does not throw as it
-    // loads, and read only to say it is not used.
-    var legacy = { containers: {}, features: {}, utilities: {}, texts: {} };
-    $.fn.gridEditor.containers = legacy.containers;
-    $.fn.gridEditor.features = legacy.features;
-    $.fn.gridEditor.utilities = legacy.utilities;
-    $.fn.gridEditor.texts = legacy.texts;
-
     // Strings are the same thing in both: a 6.x locale file loads unchanged
     $.fn.gridEditor.locales = GridEditor.locales;
     $.fn.gridEditor.t = GridEditor.t;

package/src/js/grideditor.js

@@ -4,9 +4,8 @@
  * A fork of https://github.com/Friendly-Pixel/grid-editor by Simon Epskamp,
  * maintained at https://github.com/themarioga/grid-editor.
  *
- * Plain DOM since 7.0: nothing here needs jQuery. A page written for the 6.x
- * jQuery API loads grideditor.jquery.js beside this file and keeps working;
- * see UPGRADING.md.
+ * Plain DOM: nothing here needs jQuery. A page written against the jQuery
+ * API loads grideditor.jquery.js beside this file.
  */
 import * as dom from './dom.js';
 
@@ -73,8 +72,6 @@ var ALL_VIEW_LABEL_KEY = 'view.all';
 /** Every view key the dropdown can offer, in the order it offers them. */
 var VIEW_KEYS = [ALL_VIEW].concat(BREAKPOINTS.map(function(tier) { return tier.key; }));
 
-/** What the three layout mode indexes of 2.x meant. */
-var LEGACY_VIEW_INDEXES = ['lg', 'sm', 'xs'];
 
 var MAX_COL_SIZE = 12;
 var MAX_COL_OFFSET = 11;
@@ -158,12 +155,6 @@ var NESTED_SETTINGS = {
     },
 };
 
-/** Settings 4.0 took away, and what a host should reach for instead. */
-var REMOVED_SETTINGS = {
-    sortable_options: 'drag',
-    resizable_options: 'resize',
-};
-
 var warned = {};
 
 /** Editors on the page, counted so each one's sortable groups are its own. */
@@ -372,7 +363,7 @@ function build(instance, baseElem, optionsOrMethod) {
             'element_tools'     : [], // Host tools on element drawers, same shape as row_tools
             'element_classes'   : [], // Preset class toggles on an element's settings panel
             // content_types, text_tools and text_classes are the text editor
-            // plugins' settings since 6.0: see grideditor.text.js
+            // plugins' settings: see grideditor.text.js
             'container_classes' : [], // The same, on a container's panel
             'pane_classes'      : [], // And on a tab's or an accordion item's
             'container_tools'   : [], // Host tools on container drawers
@@ -405,18 +396,6 @@ function build(instance, baseElem, optionsOrMethod) {
             settings[name] = Object.assign({}, NESTED_SETTINGS[name], settings[name]);
         });
 
-        // Both handed out the drag toolkit's own options, which 4.0 stops
-        // promising: there is no widget underneath a host should be reaching
-        // for. What they were used for is a setting of the editor's now.
-        Object.keys(REMOVED_SETTINGS).forEach(function(name) {
-            if (optionsOrMethod && optionsOrMethod[name] !== undefined) {
-                warn(translate(settings, 'warning.setting_removed', {
-                    setting: name,
-                    replacement: REMOVED_SETTINGS[name],
-                }));
-            }
-        });
-
 
         // Elems
         var canvas,
@@ -432,7 +411,7 @@ function build(instance, baseElem, optionsOrMethod) {
         var sizePicker = null; // The open column size picker, if there is one
         var sourceOpen = false; // Whether the canvas is being edited as html
         var dropMarker = null; // The line showing where a dragged toolbar button would land
-        var warnedHere = {}; // Deprecations are worth saying once per instance, not once per call
+        var warnedHere = {}; // Some warnings are worth saying once per instance, not once per call
         var sortables = []; // Every list made sortable, so deinit destroys exactly those
         var instanceId = ++editorCounter; // Scopes the sortable groups to this editor
         var destroyed = false;
@@ -1866,35 +1845,8 @@ function build(instance, baseElem, optionsOrMethod) {
 
             registerFamily('grid', {}, widthFamily());
             if (settings.row_cols !== false) { registerFamily('grid', {}, rowColsFamily()); }
-            // A plugin whose factory says it `replaces` others has taken
-            // their place: an old name in the plugins setting asks for it,
-            // and the old plugin, loaded beside it, stands down
-            var replacedBy = {};
-            [GridEditor.containers, GridEditor.features, GridEditor.utilities].forEach(function(registry) {
-                Object.keys(registry).forEach(function(name) {
-                    (registry[name].replaces || []).forEach(function(old) {
-                        if (!replacedBy[old]) { replacedBy[old] = name; }
-                    });
-                });
-            });
-            var named = function(name) {
-                return !settings.plugins || settings.plugins.indexOf(name) !== -1;
-            };
-            var namedAsOld = function(name) {
-                return !!settings.plugins && settings.plugins.some(function(old) { return replacedBy[old] === name; });
-            };
-            var standsDown = function(name) {
-                return !!replacedBy[name] && wanted(replacedBy[name]);
-            };
             var wanted = function(name) {
-                return !standsDown(name) && (named(name) || namedAsOld(name));
-            };
-            var replaced = function(name) {
-                if (!standsDown(name) || !named(name)) { return false; }
-
-                warnOnceHere('replaced:' + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] +
-                    '", which is loaded: ignoring it');
-                return true;
+                return !settings.plugins || settings.plugins.indexOf(name) !== -1;
             };
 
             // What the plugins setting does not choose: the text editors,
@@ -1905,16 +1857,16 @@ function build(instance, baseElem, optionsOrMethod) {
             };
 
             Object.keys(GridEditor.containers).forEach(function(type) {
-                if (!replaced(type) && wanted(type)) { CONTAINERS[type] = GridEditor.containers[type](api); }
+                if (wanted(type)) { CONTAINERS[type] = GridEditor.containers[type](api); }
             });
 
             Object.keys(GridEditor.features).forEach(function(name) {
                 var factory = GridEditor.features[name];
-                if (!replaced(name) && featureWanted(name, factory)) { FEATURES[name] = factory(api); }
+                if (featureWanted(name, factory)) { FEATURES[name] = factory(api); }
             });
 
             Object.keys(GridEditor.utilities).forEach(function(name) {
-                if (replaced(name) || !wanted(name)) { return; }
+                if (!wanted(name)) { return; }
 
                 UTILITIES[name] = GridEditor.utilities[name](api);
                 (UTILITIES[name].families || []).forEach(function(family) {
@@ -1932,12 +1884,6 @@ function build(instance, baseElem, optionsOrMethod) {
             (settings.plugins || []).forEach(function(name) {
                 if (CONTAINERS[name] || FEATURES[name] || UTILITIES[name]) { return; }
 
-                if (standsDown(name)) {
-                    warnOnceHere('renamed:' + name, 'the "' + name + '" plugin is part of "' + replacedBy[name] +
-                        '" now: name "' + replacedBy[name] + '" in the plugins setting instead');
-                    return;
-                }
-
                 warnOnceHere('plugin:' + name, 'the "' + name + '" plugin is not loaded: ' +
                     'include dist/plugins/grideditor.' + name + '.js after the editor');
             });
@@ -3295,8 +3241,7 @@ function build(instance, baseElem, optionsOrMethod) {
                 refreshUtilities(container);
             });
 
-            // Bootstrap 5's outline buttons, filled while their class is on;
-            // up to 5.x they carried Bootstrap 3's btn-default, which 5 lacks
+            // Bootstrap's outline buttons, filled while their class is on
             var classGroup = general.appendChild(dom.element('div', { 'class': 'btn-group btn-group-sm ge-presets', role: 'group' }));
             cssClasses.forEach(function(rowClass) {
                 var on = dom.hasClass(container, rowClass.cssClass);
@@ -3307,7 +3252,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     'aria-pressed': on ? 'true' : 'false',
                 });
 
-                // A preset's label is the host's markup, as it was in 6.x
+                // A preset's label is the host's markup
                 btn.innerHTML = rowClass.label;
                 dom.toggleClass(btn, 'active', on);
                 btn.addEventListener('click', function() {
@@ -5139,20 +5084,8 @@ function build(instance, baseElem, optionsOrMethod) {
             dom.one(layoutDropdown, 'button').textContent = t(labelKeyFor(view));
         }
 
-        /**
-         * The view key a caller asked for, or null. 2.x callers passed a
-         * layout mode index, which still works and says so once.
-         */
+        /** The view key a caller asked for, or null. */
         function viewKey(view) {
-            if (typeof view == 'number') {
-                warnOnceHere('changeView-index', 'changeView(' + view + '): layout modes are ' +
-                    'identified by breakpoint key now, so pass one of ' +
-                    JSON.stringify(VIEW_KEYS) + '. Numeric indexes still work, ' +
-                    'but they mean what they meant in 2.x (' +
-                    LEGACY_VIEW_INDEXES.join(', ') + ') and will be dropped.');
-                return LEGACY_VIEW_INDEXES[view] || null;
-            }
-
             return VIEW_KEYS.indexOf(view) === -1 ? null : view;
         }
 
@@ -5409,14 +5342,12 @@ GridEditor.locales = {
         'utility.inherit': 'Inherit: {value} (from {breakpoint})',
         'utility.varies': 'Changes at {breakpoints}; choosing here replaces that',
         'error.sortable_missing': 'SortableJS not available! Make sure you loaded the Sortable js file; dragging is off without it.',
-        'warning.setting_removed': 'The {setting} setting was removed in 4.0. Use {replacement} instead.',
         'warning.already_editing': 'This element already has an editor: that one is handed back, with the options it was made with.',
         'warning.destroyed': '{method}() was called on an editor that has been destroyed, and does nothing.',
         'warning.duplicate_build': 'grideditor.js was loaded twice: the first GridEditor is kept.',
-        'warning.plugin_6x': 'The "{name}" plugin is written for grid-editor 6 and is not loaded. Plugins register on GridEditor since 7.0: see UPGRADING.md.',
         'warning.adapter_no_jquery': 'grideditor.jquery.js needs jQuery 4, and there is no jQuery on the page: the jQuery API is not there.',
         'error.tinymce_missing': 'tinyMCE not available! Make sure you loaded the tinyMCE js file.',
-        'error.ckeditor_missing': 'CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file: CKEditor 4 is no longer supported.',
+        'error.ckeditor_missing': 'CKEditor 5 not available! Make sure you loaded its ckeditor5.umd.js file.',
         'error.summernote_missing': 'Summernote not available! Make sure you loaded jQuery and the Summernote js file.',
     },
 };

package/src/js/locales/grideditor.es.js

@@ -74,6 +74,23 @@ GridEditor.locales.es = {
     'container.add_tabs': 'Pestañas',
     'container.add_tab': 'Añadir pestaña',
     'container.tab_label': 'Pestaña {number}',
+    'container.tabs_section': 'Pestañas',
+    'container.tabs_style': 'Estilo',
+    'container.tabs_style_tabs': 'Pestañas',
+    'container.tabs_style_pills': 'Pills',
+    'container.tabs_style_underline': 'Subrayado',
+    'container.tabs_width': 'Ancho',
+    'container.tabs_width_natural': 'Natural',
+    'container.tabs_width_fill': 'Rellenar',
+    'container.tabs_width_justified': 'Justificado',
+    'container.tabs_align': 'Alineación',
+    'container.tabs_align_start': 'Inicio',
+    'container.tabs_align_center': 'Centro',
+    'container.tabs_align_end': 'Fin',
+    'container.tabs_layout': 'Disposición',
+    'container.tabs_layout_horizontal': 'Horizontal',
+    'container.tabs_layout_vertical': 'Vertical',
+    'container.tabs_layout_vertical_from': 'Vertical desde {breakpoint}',
     'container.add_accordion': 'Acordeón',
     'container.add_accordion_item': 'Añadir apartado',
     'container.accordion_label': 'Apartado {number}',
@@ -124,9 +141,8 @@ GridEditor.locales.es = {
     'utility.default': 'Por defecto',
     'utility.inherit': 'Hereda: {value} (de {breakpoint})',
     'utility.varies': 'Cambia en {breakpoints}; elegir aquí lo sustituye',
-    'utility.visibility': 'Visibilidad',
+    'utility.display': 'Display',
     'utility.visibility_hidden': 'Oculto',
-    'utility.visibility_shown': 'Visible',
     'tool.hide_in_view': 'Ocultar en esta vista',
     'tool.show_in_view': 'Mostrar en esta vista',
     'badge.hidden_in': 'Oculto en {breakpoints}',
@@ -138,6 +154,16 @@ GridEditor.locales.es = {
     'badge.order': 'Orden: {value}',
     'utility.justify_content': 'Justificar columnas',
     'utility.align_items': 'Alinear columnas',
+    'utility.align_content': 'Alinear líneas',
+    'utility.flex_direction': 'Dirección',
+    'utility.flex_wrap': 'Salto de línea',
+    'utility.gap': 'Separación',
+    'utility.row_gap': 'Separación entre filas',
+    'utility.column_gap': 'Separación entre columnas',
+    'utility.flex_fill': 'Rellenar',
+    'utility.flex_grow': 'Crecer',
+    'utility.flex_shrink': 'Encoger',
+    'utility.sticky': 'Fijo al desplazar',
     'utility.align_self': 'Alinearse',
     'utility.gutters': 'Espaciado entre columnas',
     'utility.gutters_x': 'Espaciado horizontal',
@@ -169,6 +195,7 @@ GridEditor.locales.es = {
     'style.section_text': 'Texto',
     'style.section_typography': 'Tipografía',
     'style.section_display': 'Visualización',
+    'style.section_flex': 'Flex',
     'style.section_position': 'Posición',
     'style.section_custom': 'CSS libre',
     'style.all_sizes': 'Se aplica a todos los tamaños',
@@ -228,15 +255,12 @@ GridEditor.locales.es = {
     'style.prop_left': 'Izquierda',
     'style.prop_z_index': 'Z-index',
     'error.sortable_missing': '¡SortableJS no está disponible! Asegúrate de haber cargado el archivo js de Sortable; sin él no se puede arrastrar.',
-    'warning.setting_removed': 'El ajuste {setting} se eliminó en la 4.0. Usa {replacement} en su lugar.',
     'warning.already_editing': 'Este elemento ya tiene un editor: se devuelve ese, con las opciones con las que se creó.',
     'warning.destroyed': 'Se ha llamado a {method}() en un editor destruido, y no hace nada.',
     'warning.duplicate_build': 'grideditor.js se ha cargado dos veces: se mantiene el primer GridEditor.',
-    'warning.plugin_6x': 'El plugin "{name}" está escrito para grid-editor 6 y no se carga. Desde la 7.0 los plugins se registran en GridEditor: consulta UPGRADING.md.',
     'warning.adapter_no_jquery': 'grideditor.jquery.js necesita jQuery 4 y la página no tiene jQuery: la API de jQuery no está disponible.',
-    'warning.oninit_removed': 'La opción oninit de tinyMCE se eliminó en la 7.0 y se ignora: usa init_instance_callback.',
     'error.tinymce_missing': '¡tinyMCE no está disponible! Asegúrate de haber cargado el archivo js de tinyMCE.',
-    'error.ckeditor_missing': '¡CKEditor 5 no está disponible! Asegúrate de haber cargado su archivo ckeditor5.umd.js: CKEditor 4 ya no está soportado.',
+    'error.ckeditor_missing': '¡CKEditor 5 no está disponible! Asegúrate de haber cargado su archivo ckeditor5.umd.js.',
     'error.ckeditor_start': 'CKEditor no ha podido arrancar: {message}',
     'warning.ckeditor_plugin': 'CKEditor no tiene ningún plugin llamado {name}, así que se deja fuera.',
     'error.codemirror_missing': '¡CodeMirror no está disponible! Asegúrate de haber cargado el archivo js de CodeMirror; sin él el código se edita en un textarea normal.',