Add custom field to block settings

sulu · Nov 12, 2020 · d32fd5e · d32fd5e
1 parent 2d7f84c
commit d32fd5e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 4 deletions.
diff --git a/assets/website/css/components/_blocks.scss b/assets/website/css/components/_blocks.scss
@@ -5,3 +5,12 @@
 .blocks__item {
     margin: 30px 0;
 }
+
+.blocks__item--highlight {
+    background: silver;
+    padding: 30px 0;
+
+    + .blocks__item--highlight {
+        padding-top: 0;
+    }
+}
diff --git a/assets/website/package-lock.json b/assets/website/package-lock.json
diff --git a/assets/website/package.json b/assets/website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sulu_demo",
-  "version": "1.0.49",
+  "version": "1.0.52",
   "private": true,
   "description": "Basic bundle structure for a default website project.",
   "author": "Sulu GmbH",

diff --git a/config/forms/page_block_settings.xml b/config/forms/page_block_settings.xml
@@ -0,0 +1,40 @@
+<?xml version="1.0" ?>
+<form xmlns="http://schemas.sulu.io/template/template"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://schemas.sulu.io/template/template http://schemas.sulu.io/template/form-1.0.xsd"
+>
+    <key>page_block_settings</key>
+
+    <properties>
+        <section name="custom">
+            <properties>
+                <property name="theme" type="single_select">
+                    <meta>
+                        <title lang="en">Block Theme</title>
+                        <title lang="de">Block Theme</title>
+                    </meta>
+
+                    <params>
+                        <param name="default_value" value=""/>
+
+                        <param name="values" type="collection">
+                            <param name="">
+                                <meta>
+                                    <title lang="en">Default</title>
+                                    <title lang="de">Standard</title>
+                                </meta>
+                            </param>
+
+                            <param name="highlight">
+                                <meta>
+                                    <title lang="en">Highlight</title>
+                                    <title lang="de">Highlight</title>
+                                </meta>
+                            </param>
+                        </param>
+                    </params>
+                </property>
+            </properties>
+        </section>
+    </properties>
+</form>
diff --git a/public/build/website/css/main.css b/public/build/website/css/main.css
diff --git a/templates/includes/blocks.html.twig b/templates/includes/blocks.html.twig
@@ -1,7 +1,7 @@
 {% if content.blocks|default([])|length %}
     <div class="blocks">
         {% for block in content.blocks %}
-            <div class="blocks__item">
+            <div class="blocks__item{% if block.settings.theme|default %} blocks__item--{{ block.settings.theme }}{% endif %}">
                 {% include 'includes/blocks/' ~ block.type ~ '.html.twig' with {
                     content: block,
                     view: view.blocks[loop.index0],