From c248e9d94fa45399ba7b0cf4a6628ec9ddc184b5 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 25 Sep 2021 13:24:43 +0200
Subject: [PATCH] Fix with styles in array blocks content

---
 docs/modules/Blocks.md                 | 19 ++++++++++++++++++-
 src/dom_components/model/Components.js |  1 +
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/docs/modules/Blocks.md b/docs/modules/Blocks.md
index ef0189244..9e6786c7d 100644
--- a/docs/modules/Blocks.md
+++ b/docs/modules/Blocks.md
@@ -12,6 +12,9 @@ The default UI is a lightweight component with built-in Drag & Drop support, but
 ::: warning
 To get a better understanding of the content in this guide, we recommend reading [Components] first
 :::
+::: warning
+This guide is referring to GrapesJS v0.17.27 or higher
+:::
 
 [[toc]]
 
@@ -221,7 +224,21 @@ Don't put non serializable properties, like functions, in your blocks, keep them
 ```
 This will work, but if you try to save and reload a stored project, those will disappear.
 
-
+### Avoid styles
+Don't put styles in your blocks.
+```js
+// Your block
+{
+  content: [
+    { type: 'my-cmp', styles: '.cmp { color: red }' },
+    `
+    <div class="el">Element</div>
+    <style>.el { color: blue }</style>
+    `,
+  ],
+}
+```
+If you remove those components from the canvas, the CSS code generator will be able to skip some of those from the output, but
 
 
 ## DONT PUT IDS in your content
diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js
index 365bb54ae..b5d085ea5 100644
--- a/src/dom_components/model/Components.js
+++ b/src/dom_components/model/Components.js
@@ -162,6 +162,7 @@ export default Backbone.Collection.extend({
     if (isString(models)) {
       models = this.parseString(models, opt);
     } else if (isArray(models)) {
+      models = [...models];
       models.forEach((item, index) => {
         if (isString(item)) {
           const nodes = this.parseString(item, opt);