@plone/volto 16.13.0 → 17.0.0-alpha.0

package/theme/themes/pastanaga/extras/teaser.less

@@ -0,0 +1,166 @@
+@teaser-images-aspect-ratio: var(--teaser-images-aspect-ratio, 16/9);
+@teaser-images-object-position: var(--teaser-images-object-position, top left);
+
+.teaser-item {
+  display: flex;
+  color: rgba(0, 0, 0, 0.87);
+
+  &.placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    img {
+      max-width: 300px;
+      height: auto;
+      align-self: center;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+    text-align: left;
+  }
+
+  &.default .image-wrapper {
+    margin-right: 25px;
+
+    img {
+      max-width: 100%;
+      height: auto;
+    }
+  }
+}
+
+.teaser-item.default {
+  .content {
+    width: 100%;
+  }
+}
+
+.teaser-item .image-wrapper img {
+  width: 100%;
+  aspect-ratio: @teaser-images-aspect-ratio;
+  object-fit: cover;
+  object-position: @teaser-images-object-position;
+}
+
+#page-document > .block.teaser {
+  padding: 25px 0;
+
+  &.has--align--left,
+  &.has--align--right {
+    .teaser-item.default {
+      display: flex;
+
+      .image-wrapper {
+        align-self: flex-start;
+      }
+
+      @media only screen and (max-width: @largestMobileScreen) {
+        flex-direction: column !important;
+
+        .image-wrapper {
+          margin-right: 0;
+          margin-bottom: 25px;
+          margin-left: 0;
+
+          img {
+            width: 100%;
+            max-width: unset;
+            height: auto;
+          }
+        }
+      }
+    }
+  }
+
+  &.has--align--left {
+    .teaser-item.default {
+      flex-direction: row;
+
+      .image-wrapper {
+        margin-right: 20px;
+        margin-left: 0;
+
+        @media only screen and (max-width: @largestMobileScreen) {
+          margin-right: 0;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.has--align--right {
+    a .teaser-item.default {
+      flex-direction: row-reverse;
+
+      .image-wrapper {
+        margin-right: 0;
+        margin-left: 20px;
+
+        @media only screen and (max-width: @largestMobileScreen) {
+          margin-right: 0;
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.has--align--center {
+    .teaser-item.default {
+      display: block;
+
+      a {
+        display: block;
+      }
+
+      .image-wrapper {
+        margin-bottom: 25px;
+      }
+    }
+  }
+}
+
+.block-editor-teaser.has--align--left .block.teaser,
+.block-editor-teaser.has--align--right .block.teaser {
+  .teaser-item.default {
+    display: flex;
+
+    .image-wrapper {
+      align-self: flex-start;
+    }
+  }
+}
+
+.block-editor-teaser.has--align--left .block.teaser {
+  .teaser-item.default {
+    flex-direction: row;
+
+    .image-wrapper {
+      margin-right: 20px;
+      margin-left: 0;
+    }
+  }
+}
+
+.block-editor-teaser.has--align--right .block.teaser {
+  .teaser-item.default {
+    flex-direction: row-reverse;
+
+    .image-wrapper {
+      margin-right: 0;
+      margin-left: 20px;
+    }
+  }
+}
+
+.block-editor-teaser.has--align--center .block.teaser {
+  .teaser-item.default {
+    display: block;
+
+    .image-wrapper {
+      margin: 0 0 25px 0;
+    }
+  }
+}

package/webpack-plugins/webpack-relative-resolver.js

@@ -1,7 +1,9 @@
 const path = require('path');
 
 class RelativeResolverPlugin {
-  constructor(registry) {
+  constructor(registry, source, target) {
+    this.source = source || 'resolve';
+    this.target = target || 'resolve';
     this.registry = registry;
     this.voltoPaths = Object.assign(
       { '@plone/volto/': `${registry.voltoPath}/src` },
@@ -33,24 +35,36 @@ class RelativeResolverPlugin {
   }
 
   apply(resolver) {
-    resolver.plugin('resolve', (request, callback) => {
-      if (
-        request.request.startsWith('.') &&
-        request.context &&
-        request.context.issuer &&
-        this.isAddon(request)
-      ) {
-        const normalizedResourceName = this.getResolvePath(request);
-        const nextRequest = Object.assign({}, request, {
-          request: normalizedResourceName,
-          path: this.registry.projectRootPath,
-        });
-
-        resolver.doResolve('resolve', nextRequest, '', callback);
-      } else {
-        callback();
-      }
-    });
+    var target = resolver.ensureHook(this.target);
+    resolver
+      .getHook(this.source)
+      .tapAsync(
+        'RelativeResolverPlugin',
+        (request, resolveContext, callback) => {
+          if (
+            request.request.startsWith('.') &&
+            request.context &&
+            request.context.issuer &&
+            this.isAddon(request)
+          ) {
+            const normalizedResourceName = this.getResolvePath(request);
+            const nextRequest = Object.assign({}, request, {
+              request: normalizedResourceName,
+              path: this.registry.projectRootPath,
+            });
+
+            return resolver.doResolve(
+              target,
+              nextRequest,
+              null,
+              resolveContext,
+              callback,
+            );
+          } else {
+            callback();
+          }
+        },
+      );
   }
 }
 

package/webpack-plugins/webpack-root-resolver.js

@@ -1,23 +1,34 @@
 const path = require('path');
 
 class RootResolverPlugin {
+  constructor(source, target) {
+    this.source = source || 'resolve';
+    this.target = target || 'resolve';
+  }
+
   apply(resolver) {
-    resolver.plugin('resolve', function RelativeBackResolver(
-      request,
-      callback,
-    ) {
-      if (request.request.startsWith('~/../')) {
-        const resourcePath = request.request.substr(5);
+    var target = resolver.ensureHook(this.target);
+    resolver
+      .getHook(this.source)
+      .tapAsync('RootResolverPlugin', (request, resolveContext, callback) => {
+        if (request.request.startsWith('~/../')) {
+          const resourcePath = request.request.substr(5);
 
-        const nextRequest = Object.assign({}, request, {
-          request: path.resolve(`./${resourcePath}`),
-        });
+          const nextRequest = Object.assign({}, request, {
+            request: path.resolve(`./${resourcePath}`),
+          });
 
-        resolver.doResolve('resolve', nextRequest, '', callback);
-      } else {
-        callback();
-      }
-    });
+          resolver.doResolve(
+            target,
+            nextRequest,
+            null,
+            resolveContext,
+            callback,
+          );
+        } else {
+          callback();
+        }
+      });
   }
 }
 

package/webpack-plugins/webpack-svg-plugin.js

@@ -16,10 +16,17 @@ module.exports = {
           loader: 'svgo-loader',
           options: {
             plugins: [
-              { removeTitle: true },
-              { convertPathData: false },
-              { removeUselessStrokeAndFill: true },
-              { removeViewBox: false },
+              {
+                name: 'preset-default',
+                params: {
+                  overrides: {
+                    convertPathData: false,
+                    removeViewBox: false,
+                  },
+                },
+              },
+              'removeTitle',
+              'removeUselessStrokeAndFill',
             ],
           },
         },