Background column styles with blur support showcase

modules/@apostrophecms/asset/index.js

@@ -3,7 +3,7 @@ export default {
   options: {
     // Change to `apos` for admin UI HMR
     // `public` is the default and provides HMR for project UI code
-    hmr: 'public',
+    hmr: 'apos',
     refreshOnRestart: true
   }
 };

modules/@apostrophecms/layout-column-widget/index.js

@@ -1,4 +1,14 @@
 export default {
+  options: {
+    // Do not display tabs when there is only one.
+    // Since there is only one Styles tab, it will be hidden.
+    hideSingleTab: true
+  },
+  styles: {
+    add: {
+      background: 'background'
+    }
+  },
   fields: {
     add: {
       content: {
@@ -12,6 +22,13 @@ export default {
           }
         }
       }
+    },
+    // Let the content be shown in the Styles tab schema.
+    // Keep in mind this is only a visual change, no layout logic is affected.
+    group: {
+      styles: {
+        fields: [ 'content' ]
+      }
     }
   }
 };

modules/@apostrophecms/recently-edited/index.js

@@ -0,0 +1,11 @@
+// Hide recently edited feature from the admin bar.
+// Showcases how to opt-out from the new Recently Edited feature.
+export default {
+  methods(self) {
+    return {
+      addToAdminBar() {
+        // no-op
+      }
+    };
+  }
+};

modules/@apostrophecms/styles/index.js

@@ -377,5 +377,29 @@ export default {
         }
       }
     }
+  },
+  extendMethods(self) {
+    return {
+      registerPresets(_super) {
+        _super();
+        const bg = self.getPreset('background');
+        bg.fields.add.blur = {
+          label: 'Blur',
+          type: 'range',
+          min: 0,
+          max: 20,
+          def: 0,
+          unit: 'px',
+          property: '--preset-bg-blur',
+          class: 'has-bg-blur',
+          if: {
+            enabled: true,
+            backgroundType: 'image'
+          },
+          skipFalsyValues: true
+        };
+        self.setPreset('background', bg);
+      }
+    };
   }
 };

modules/asset/ui/src/index.scss

@@ -6,3 +6,28 @@
 @import './scss/_layout';
 @import './scss/_welcome';
 @import './scss/_widgets';
+
+.has-bg-blur {
+  --preset-bg-image-layer: none;
+  --preset-bg-overlay-layer: none;
+  position: relative;
+  isolation: isolate;
+}
+
+.has-bg-blur::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--preset-bg-blur) * -2);
+  z-index: -1;
+  background: var(--preset-bg-image) center / cover no-repeat;
+  filter: blur(var(--preset-bg-blur));
+  clip-path: inset(calc(var(--preset-bg-blur) * 2 - 1px));
+}
+
+.has-bg-blur::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: var(--preset-bg-overlay);
+}