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

package/example/index.html

@@ -49,10 +49,10 @@
             <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
+            New in 7.3: the inline-style plugin, inline css by section with
             Bootstrap's classes as chips, which also carries display,
             spacing, text alignment and float. See
-            <a href="style.html">Style</a>. In 8.0: flex, sticky and
+            <a href="inline-style.html">Inline style</a>. In 8.0: flex, sticky and
             Bootstrap 5.3's colors.
         </p>
 
@@ -138,12 +138,12 @@
                 <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">
+            <a class="list-group-item list-group-item-action" href="inline-style.html">
                 <div class="d-flex justify-content-between">
-                    <strong>Style</strong>
-                    <code class="text-body-secondary">style.html</code>
+                    <strong>Inline style</strong>
+                    <code class="text-body-secondary">inline-style.html</code>
                 </div>
-                <span class="text-body-secondary">The style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
+                <span class="text-body-secondary">The inline-style plugin: inline css for rows, columns, containers and elements, by section, with Bootstrap's classes for each as chips</span>
             </a>
 
             <a class="list-group-item list-group-item-action" href="locale.html">

package/example/{style.html → inline-style.html}

@@ -14,12 +14,12 @@
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
 
     <!-- The editor, the elements and tabs plugins so there is one of each
-         kind of node, and the style plugin. -->
+         kind of node, and the inline-style plugin. -->
     <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.elements.min.js"></script>
     <script src="../dist/plugins/grideditor.tabs.min.js"></script>
-    <script src="../dist/plugins/grideditor.style.min.js"></script>
+    <script src="../dist/plugins/grideditor.inline-style.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -40,7 +40,7 @@
                     // Every section, unless the host says otherwise: this
                     // leaves out position and keeps the border section to
                     // three fields with no chips
-                    style: narrow.checked ? {
+                    inline_style: narrow.checked ? {
                         sections: {
                             position: false,
                             border: { properties: ['border-width', 'border-style', 'border-color'], catalog: false },
@@ -66,7 +66,7 @@
         });
     </script>
 
-    <title>Grid Editor style example</title>
+    <title>Grid Editor inline style example</title>
 </head>
 <body>
     <!-- Back to the demo index -->
@@ -78,7 +78,7 @@
 
         <div class="row my-3">
             <div class="col-lg-8">
-                <h1 class="h4">Style</h1>
+                <h1 class="h4">Inline style</h1>
                 <p class="form-text">
                     The gear of a row, a column, a container, a tab, an element
                     or a section has a <strong>Style</strong> accordion: size,

package/example/utilities.html

@@ -14,8 +14,8 @@
     <link rel="stylesheet" type="text/css" href="../dist/grideditor.css" />
 
     <!-- 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 display, flex, spacing, text alignment, sticky and
+         loading it is what puts its fields in the settings panels. The
+         inline-style 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. -->
@@ -26,7 +26,7 @@
     <script src="../dist/plugins/grideditor.gutters.min.js"></script>
     <!-- Float works on elements, so the elements plugin comes first -->
     <script src="../dist/plugins/grideditor.elements.min.js"></script>
-    <script src="../dist/plugins/grideditor.style.min.js"></script>
+    <script src="../dist/plugins/grideditor.inline-style.min.js"></script>
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {

package/package.json

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

package/src/js/grideditor.js

@@ -3206,6 +3206,7 @@ function build(instance, baseElem, optionsOrMethod) {
 
         function createDetails(container, cssClasses) {
             var detailsDiv = dom.element('div', { 'class': 'ge-details' });
+            detailsDiv.appendChild(sectionTitle(t('panel.section_general')));
             var general = detailsDiv.appendChild(dom.element('div', { 'class': 'ge-details-general' }));
             var field = function(label) {
                 var holder = dom.element('label', { 'class': 'ge-field' });
@@ -3272,6 +3273,11 @@ function build(instance, baseElem, optionsOrMethod) {
             return detailsDiv;
         }
 
+        /** The heading of one of a panel's sections. */
+        function sectionTitle(text) {
+            return dom.element('h6', { 'class': 'ge-section-title' }, text);
+        }
+
         /**
          * What plugins add to a node's panel, between its general fields and
          * the Responsive section: each plugin's panelSection(node, kind), in
@@ -3294,6 +3300,7 @@ function build(instance, baseElem, optionsOrMethod) {
                     var holder = dom.element('div', { 'class': 'ge-panel-section', 'data-ge-plugin': name });
 
                     if (mode === 'offcanvas' || mode === 'modal') {
+                        holder.appendChild(sectionTitle(t(section.labelKey)));
                         holder.appendChild(section.body);
                     } else {
                         var label = t(section.labelKey);
@@ -5302,6 +5309,7 @@ GridEditor.locales = {
         'panel.done': 'Done',
         'panel.id': 'Id',
         'panel.classes': 'Classes',
+        'panel.section_general': 'Id and classes',
         'panel.kind_row': 'Row',
         'panel.kind_column': 'Column',
         'panel.kind_element': 'Element',

package/src/js/{style → inline-style}/accordion.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's accordion for one node: a section per group of
+ * The inline-style plugin's accordion for one node: a section per group of
  * properties, each with the merged utilities' per breakpoint fields, the
  * inline fields and the catalog - as far as each applies to the node.
  *
@@ -46,7 +46,7 @@ function partContent(ge, part, node, kind) {
 
     if (fields.length < 2) { return fields[0] || null; }
 
-    var box = dom.element('div', { 'class': 'ge-style-part-fields' });
+    var box = dom.element('div', { 'class': 'ge-inline-style-part-fields' });
     fields.forEach(function(field) { box.appendChild(field); });
 
     return box;
@@ -59,7 +59,7 @@ function partContent(ge, part, node, kind) {
  */
 export function createAccordion(ge, node, kind, context) {
     var inline = takesInlineStyle(node, kind);
-    var accordion = dom.element('div', { 'class': 'accordion ge-style' });
+    var accordion = dom.element('div', { 'class': 'accordion ge-inline-style' });
     var fields = [];
     var catalogs = [];
     var notes = [];
@@ -68,7 +68,7 @@ export function createAccordion(ge, node, kind, context) {
     var changed = function() { render(); };
 
     function item(key, labelKey) {
-        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-style-section': key }));
+        var entry = accordion.appendChild(dom.element('div', { 'class': 'accordion-item', 'data-ge-inline-style-section': key }));
         var header = entry.appendChild(dom.element('h2', { 'class': 'accordion-header' }));
         var button = header.appendChild(dom.element('button', {
             type: 'button',
@@ -114,13 +114,13 @@ export function createAccordion(ge, node, kind, context) {
         if (!parts.length && !properties.length && !catalog) { return; }
 
         var body = item(key, section.labelKey).body;
-        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-style-part')); });
+        parts.forEach(function(part) { body.appendChild(dom.addClass(part, 'ge-inline-style-part')); });
 
         if (properties.length) {
-            var note = body.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-all-sizes' }, ge.t('style.all_sizes')));
+            var note = body.appendChild(dom.element('small', { 'class': 'ge-inline-style-note ge-inline-style-all-sizes' }, ge.t('inline_style.all_sizes')));
             notes.push(note);
 
-            var grid = body.appendChild(dom.element('div', { 'class': 'ge-style-fields' }));
+            var grid = body.appendChild(dom.element('div', { 'class': 'ge-inline-style-fields' }));
             properties.forEach(function(property) {
                 var field = createStyleField(ge, node, property, changed);
                 fields.push(field);
@@ -137,7 +137,7 @@ export function createAccordion(ge, node, kind, context) {
     // Last, since it shows what the fields made above do not
     if (customItem) {
         custom = createCustom(ge, node, fields.map(function(field) {
-            return field.getAttribute('data-ge-style-property');
+            return field.getAttribute('data-ge-inline-style-property');
         }), changed);
         customItem.body.appendChild(custom.element);
         accordion.appendChild(customItem.entry);
@@ -148,7 +148,7 @@ export function createAccordion(ge, node, kind, context) {
     /** Open this section and no other; null closes them all. */
     function open(key) {
         dom.all(accordion, '.accordion-item').forEach(function(entry) {
-            toggle(entry, entry.getAttribute('data-ge-style-section') === key);
+            toggle(entry, entry.getAttribute('data-ge-inline-style-section') === key);
         });
     }
 

package/src/js/{style → inline-style}/catalog.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's catalog: Bootstrap's classes for what a section
+ * The inline-style plugin's catalog: Bootstrap's classes for what a section
  * styles, as chips that put a class on the node or take it off.
  *
  * A chip never touches the node itself. It writes the panel's classes
@@ -41,16 +41,16 @@ export function createCatalog(ge, node, kind, groups) {
     var offered = groups.filter(function(group) { return offeredOn(group, kind); });
     if (!offered.length) { return null; }
 
-    var box = dom.element('div', { 'class': 'ge-style-catalog' });
-    box.appendChild(dom.element('span', { 'class': 'ge-style-label' }, ge.t('style.catalog')));
+    var box = dom.element('div', { 'class': 'ge-inline-style-catalog' });
+    box.appendChild(dom.element('span', { 'class': 'ge-inline-style-label' }, ge.t('inline_style.catalog')));
 
     offered.forEach(function(group) {
-        var row = box.appendChild(dom.element('div', { 'class': 'ge-style-chips' }));
+        var row = box.appendChild(dom.element('div', { 'class': 'ge-inline-style-chips' }));
 
         group.classes.forEach(function(name) {
             var chip = row.appendChild(dom.element('button', {
                 type: 'button',
-                'class': 'btn btn-sm btn-outline-secondary ge-style-chip',
+                'class': 'btn btn-sm btn-outline-secondary ge-inline-style-chip',
                 'data-ge-class': name,
                 'aria-pressed': 'false',
             }, name));
@@ -68,7 +68,7 @@ export function createCatalog(ge, node, kind, groups) {
 export function renderCatalog(box, node) {
     var classes = classesOf(node);
 
-    dom.all(box, '.ge-style-chip').forEach(function(chip) {
+    dom.all(box, '.ge-inline-style-chip').forEach(function(chip) {
         var on = classes.indexOf(chip.getAttribute('data-ge-class')) !== -1;
         dom.toggleClass(chip, 'active', on);
         chip.setAttribute('aria-pressed', on ? 'true' : 'false');

package/src/js/{style → inline-style}/custom.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's free css: a textarea with every declaration of the
+ * The inline-style plugin's free css: a textarea with every declaration of the
  * node's own style that no field on show stands for - whatever the host
  * wrote that the sections have no field for, and what a section the host
  * turned off or narrowed would have shown.
@@ -36,12 +36,12 @@ export function createCustom(ge, node, properties, changed) {
         longhands(property).forEach(function(longhand) { covered[longhand] = true; });
     });
 
-    var box = dom.element('div', { 'class': 'ge-style-custom' });
+    var box = dom.element('div', { 'class': 'ge-inline-style-custom' });
     var textarea = box.appendChild(dom.element('textarea', {
-        'class': 'form-control form-control-sm font-monospace ge-style-custom-css',
+        'class': 'form-control form-control-sm font-monospace ge-inline-style-custom-css',
         rows: '4',
         spellcheck: 'false',
-        'aria-label': ge.t('style.section_custom'),
+        'aria-label': ge.t('inline_style.section_custom'),
     }));
 
     /** The declarations of the host's style no field stands for. */

package/src/js/{style → inline-style}/display.js

@@ -1,10 +1,10 @@
 /**
- * Display, a part of the style plugin: how a node is displayed per
+ * Display, a part of the inline-style plugin: how a node is displayed per
  * breakpoint, hidden included, with Bootstrap's d-{breakpoint}-* classes,
  * and the eye in the drawers that hides and shows it.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle and its options: grideditor.style.js puts them in its sections.
+ * handle and its options: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 import * as dom from '../dom.js';

package/src/js/{style → inline-style}/drawerflow.js

@@ -1,5 +1,5 @@
 /**
- * The drawer of a flex or grid node, a part of the style plugin.
+ * The drawer of a flex or grid node, a part of the inline-style plugin.
  *
  * A drawer is its node's first child, in the flow: in a row, which wraps,
  * it is a line of its own above the columns, but in anything else that

package/src/js/{style → inline-style}/fields.js

@@ -1,5 +1,5 @@
 /**
- * The style plugin's inline fields: one per css property, each writing the
+ * The inline-style plugin's inline fields: one per css property, each writing the
  * node's own style through ge.setHostStyle, never by hand, so the preview
  * of a breakpoint view neither shows in them nor eats what they write.
  *
@@ -40,7 +40,7 @@ function mark(input, ok, ge) {
     if (ok) {
         input.removeAttribute('title');
     } else {
-        input.setAttribute('title', ge.t('style.invalid'));
+        input.setAttribute('title', ge.t('inline_style.invalid'));
     }
 }
 
@@ -70,7 +70,7 @@ function pickable(value) {
 
 /** A picker and a text beside it, which takes what a picker cannot: rgba, var(), transparent. */
 function colorControl(onValue) {
-    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-style-color' });
+    var box = dom.element('div', { 'class': 'input-group input-group-sm ge-inline-style-color' });
     var picker = box.appendChild(dom.element('input', { type: 'color', 'class': 'form-control form-control-color' }));
     var text = box.appendChild(textInput());
 
@@ -146,10 +146,10 @@ var LENGTH = /^-?(?:\d*\.)?\d+(?:[a-z%]+)?$/i;
 
 /** The lengths of a shadow, in the order css writes them; a text shadow has no spread. */
 var SHADOW_PARTS = [
-    { name: 'x', labelKey: 'style.shadow_x' },
-    { name: 'y', labelKey: 'style.shadow_y' },
-    { name: 'blur', labelKey: 'style.shadow_blur' },
-    { name: 'spread', labelKey: 'style.shadow_spread' },
+    { name: 'x', labelKey: 'inline_style.shadow_x' },
+    { name: 'y', labelKey: 'inline_style.shadow_y' },
+    { name: 'blur', labelKey: 'inline_style.shadow_blur' },
+    { name: 'spread', labelKey: 'inline_style.shadow_spread' },
 ];
 
 /**
@@ -206,7 +206,7 @@ function composeShadow(parts, box) {
  */
 function shadowControl(ge, node, property, changed) {
     var box = property === 'box-shadow';
-    var holder = dom.element('div', { 'class': 'ge-style-shadow' });
+    var holder = dom.element('div', { 'class': 'ge-inline-style-shadow' });
     var textMode = false;
 
     function writeValue(value, input) {
@@ -218,34 +218,34 @@ function shadowControl(ge, node, property, changed) {
 
     function builder(parts) {
         holder.innerHTML = '';
-        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-style-shadow-builder' }));
+        var grid = holder.appendChild(dom.element('div', { 'class': 'ge-inline-style-shadow-builder' }));
         var names = box ? SHADOW_PARTS : SHADOW_PARTS.slice(0, 3);
         var inputs = names.map(function(part, i) {
-            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part' }));
-            cell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t(part.labelKey)));
-            var input = cell.appendChild(textInput('ge-style-shadow-' + part.name));
+            var cell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part' }));
+            cell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t(part.labelKey)));
+            var input = cell.appendChild(textInput('ge-inline-style-shadow-' + part.name));
             input.value = parts.lengths[i] || '';
             return input;
         });
 
-        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-style-shadow-part ge-style-shadow-color' }));
-        colorCell.appendChild(dom.element('span', { 'class': 'ge-style-shadow-label' }, ge.t('style.shadow_color')));
+        var colorCell = grid.appendChild(dom.element('label', { 'class': 'ge-inline-style-shadow-part ge-inline-style-shadow-color' }));
+        colorCell.appendChild(dom.element('span', { 'class': 'ge-inline-style-shadow-label' }, ge.t('inline_style.shadow_color')));
         var color = colorControl(function() { update(); });
         colorCell.appendChild(color.element);
         color.set(parts.color);
 
         var inset = null;
         if (box) {
-            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-style-shadow-inset' }));
+            var insetCell = grid.appendChild(dom.element('label', { 'class': 'form-check ge-inline-style-shadow-inset' }));
             inset = insetCell.appendChild(dom.element('input', { type: 'checkbox', 'class': 'form-check-input' }));
-            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('style.shadow_inset')));
+            insetCell.appendChild(dom.element('span', { 'class': 'form-check-label' }, ge.t('inline_style.shadow_inset')));
             inset.checked = parts.inset;
             inset.addEventListener('change', function() { update(); });
         }
 
         inputs.forEach(function(input) { input.addEventListener('change', function() { update(); }); });
 
-        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-style-shadow-mode' }, ge.t('style.shadow_text_mode')));
+        var toText = holder.appendChild(dom.element('a', { href: '#', 'class': 'ge-inline-style-shadow-mode' }, ge.t('inline_style.shadow_text_mode')));
         toText.addEventListener('click', function(e) {
             e.preventDefault();
             textMode = true;
@@ -264,7 +264,7 @@ function shadowControl(ge, node, property, changed) {
 
     function text(value) {
         holder.innerHTML = '';
-        var input = holder.appendChild(textInput('ge-style-shadow-text'));
+        var input = holder.appendChild(textInput('ge-inline-style-shadow-text'));
         input.value = value;
         input.addEventListener('change', function() {
             if (input.value.trim() === '') {
@@ -288,7 +288,7 @@ function shadowControl(ge, node, property, changed) {
 
         // Built again only when the value changed under it: building takes
         // the focus from whichever of its inputs the user moved on to
-        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-style-shadow-text')) { return; }
+        if (value === shown && holder.firstChild && textMode === !!holder.querySelector('.ge-inline-style-shadow-text')) { return; }
         shown = value;
 
         if (textMode || !parts) {
@@ -308,8 +308,8 @@ function shadowControl(ge, node, property, changed) {
  * sections up to date.
  */
 export function createStyleField(ge, node, property, changed) {
-    var field = dom.element('div', { 'class': 'ge-style-field', 'data-ge-style-property': property.name });
-    var label = field.appendChild(dom.element('label', { 'class': 'ge-style-label' }, ge.t(property.labelKey)));
+    var field = dom.element('div', { 'class': 'ge-inline-style-field', 'data-ge-inline-style-property': property.name });
+    var label = field.appendChild(dom.element('label', { 'class': 'ge-inline-style-label' }, ge.t(property.labelKey)));
     var render;
 
     function current() {
@@ -355,19 +355,19 @@ export function createStyleField(ge, node, property, changed) {
 
     var control = field.querySelector('input, select');
     if (control) {
-        control.id = 'ge-style-field-' + (++fieldCounter);
+        control.id = 'ge-inline-style-field-' + (++fieldCounter);
         label.setAttribute('for', control.id);
     }
 
-    field.appendChild(dom.element('small', { 'class': 'ge-style-note ge-style-overridden' }));
+    field.appendChild(dom.element('small', { 'class': 'ge-inline-style-note ge-inline-style-overridden' }));
 
     renderers.set(field, function() {
         render();
 
         // A Bootstrap utility on the node wins over the value: every one is !important
         var winner = current() ? overriding(property.name, classesOf(node)) : null;
-        var note = dom.child(field, '.ge-style-overridden');
-        note.textContent = winner ? ge.t('style.overridden', { 'class': winner }) : '';
+        var note = dom.child(field, '.ge-inline-style-overridden');
+        note.textContent = winner ? ge.t('inline_style.overridden', { 'class': winner }) : '';
         dom.toggle(note, !!winner);
     });
     renderStyleField(field);

package/src/js/{style → inline-style}/flex.js

@@ -1,12 +1,12 @@
 /**
- * Flex, a part of the style plugin: a flex container's direction, wrap,
+ * Flex, a part of the inline-style plugin: a flex container's direction, wrap,
  * alignment and gaps, and how its children grow, shrink and fill, per
  * breakpoint, with Bootstrap's flex-{breakpoint}-*, justify-content-*,
  * align-items-*, align-content-*, gap-* and row-/column-gap-* classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
  * handle and the spacing options, whose scale the gaps share:
- * grideditor.style.js puts them in its Flex section.
+ * grideditor.inline-style.js puts them in its Flex section.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/float.js

@@ -1,9 +1,9 @@
 /**
- * Float, a part of the style plugin: floating an element per breakpoint, with Bootstrap's
+ * Float, a part of the inline-style plugin: floating an element per breakpoint, with Bootstrap's
  * float-{breakpoint}-start, -end and -none classes.
  *
  * Its families, and whatever it does on the canvas, as a function of the
- * handle: grideditor.style.js puts them in its sections.
+ * handle: grideditor.inline-style.js puts them in its sections.
  */
 import { GridEditor } from '../grideditor.js';
 

package/src/js/{style → inline-style}/options.js

@@ -1,7 +1,7 @@
 /**
- * The style plugin's settings, `style` in the editor's options:
+ * The inline-style plugin's settings, `inline_style` in the editor's options:
  *
- *   style: {
+ *   inline_style: {
  *       sections: { border: { properties: [...], catalog: false }, position: false, … },
  *       spacing: { values, scale },   // the values offered, and what 0 to 5 come to
  *       visibility: { drawer },       // false leaves the eye out of the drawers
@@ -19,7 +19,7 @@ function resolveSections(ge, given) {
     var resolved = {};
 
     Object.keys(given || {}).forEach(function(key) {
-        if (!section(key)) { ge.warn('style.sections: there is no "' + key + '" section: ignored'); }
+        if (!section(key)) { ge.warn('inline_style.sections: there is no "' + key + '" section: ignored'); }
     });
 
     SECTIONS.forEach(function(each) {
@@ -34,7 +34,7 @@ function resolveSections(ge, given) {
             if (Array.isArray(option.properties)) {
                 option.properties.forEach(function(name) {
                     if (own.indexOf(name) === -1) {
-                        ge.warn('style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
+                        ge.warn('inline_style.sections.' + each.key + ': "' + name + '" is not one of its properties: ignored');
                     }
                 });
                 properties = option.properties.filter(function(name) { return own.indexOf(name) !== -1; })
@@ -50,7 +50,7 @@ function resolveSections(ge, given) {
 }
 
 export function resolveOptions(ge) {
-    var style = ge.settings.style || {};
+    var style = ge.settings.inline_style || {};
 
     return {
         sections: resolveSections(ge, style.sections),