@devvit/ui-renderer 0.10.7-next-2023-10-09-102a57871.0 → 0.10.7-next-2023-10-09-14cdd70d8.0

package/blocks/attributes.d.ts

@@ -1,18 +1,19 @@
 import { ClassInfo } from 'lit/directives/class-map.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 import { ButtonAppearance, ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
-import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockColor, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSize, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType } from '@devvit/protos';
+import { Block, BlockAlignment, BlockAvatarFacing, BlockAvatarSize, BlockBorder, BlockButtonAppearance, BlockButtonSize, BlockColor, BlockFullSnooSize, BlockGap, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSizes, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight } from '@devvit/protos';
 import { RenderContext } from './templates/renderContext.js';
 import { ref as clientRef } from 'lit/directives/ref.js';
 export interface AttributeOverrides {
     styles?: StyleInfo | undefined;
     classes?: ClassInfo | undefined;
 }
-export declare function defaultClasses(type: BlockType): ClassInfo;
+export declare function defaultClasses(block: Block, ctx: RenderContext): ClassInfo;
+export declare function defaultStyles(block: Block): StyleInfo;
 export declare function stackDirectionClass(direction: BlockStackDirection, reverse: boolean | undefined): ClassInfo;
 export declare function stackChildClass(parentDirection: BlockStackDirection): ClassInfo;
-export declare function sizingClass(sizing: BlockSize | undefined): ClassInfo;
-export declare function sizingStyle(sizing: BlockSize | undefined): StyleInfo;
+export declare function sizingClass(sizing: BlockSizes | undefined): ClassInfo;
+export declare function sizingStyle(sizing: BlockSizes | undefined): StyleInfo;
 export declare function paddingClass(padding: BlockPadding | undefined): ClassInfo;
 export declare function gapClass(spacing: BlockGap | undefined): ClassInfo;
 export declare function alignmentClass(direction: BlockStackDirection, align: BlockAlignment | undefined): ClassInfo;

package/blocks/attributes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../library/src/blocks/attributes.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"attributes.d.ts","sourceRoot":"","sources":["../../library/src/blocks/attributes.ts"],"names":[],"mappings":"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"}

package/blocks/attributes.js

@@ -1,15 +1,24 @@
 import { ButtonSize } from '@reddit/faceplate-ui/templates/button.js';
 import { BlockActionType, BlockAvatarFacing, BlockAvatarSize, BlockBorderWidth, BlockButtonAppearance, BlockButtonSize, BlockFullSnooSize, BlockGap, BlockHorizontalAlignment, BlockIconSize, BlockImageResizeMode, BlockPadding, BlockRadius, BlockSpacerShape, BlockSpacerSize, BlockStackDirection, BlockTextOutline, BlockTextSize, BlockTextWeight, BlockType, BlockVerticalAlignment, } from '@devvit/protos';
-import { getSizeUnits, isHTMLElement, ref, resolveColors, sanitizeStyleInfo, } from './templates/util.js';
+import { getSizes, isHTMLElement, parseDimension, ref, resolveColors, sanitizeStyleInfo, } from './templates/util.js';
 import { nothing } from 'lit';
 import { brightnessByColor } from './templates/color.js';
-export function defaultClasses(type) {
+export function defaultClasses(block, ctx) {
+    const type = block.type;
     return {
         'box-border': true,
         'overflow-hidden': type === BlockType.BLOCK_ROOT || type === BlockType.BLOCK_STACK,
         'm-0': type === BlockType.BLOCK_IMAGE,
+        ...stackChildClass(ctx.stackDirection),
+        ...sizingClass(getSizes(block)),
+        ...cursorClass(block),
     };
 }
+export function defaultStyles(block) {
+    return sanitizeStyleInfo({
+        ...sizingStyle(getSizes(block)),
+    });
+}
 export function stackDirectionClass(direction, reverse) {
     const vstack = direction === BlockStackDirection.STACK_VERTICAL;
     const hstack = direction === BlockStackDirection.STACK_HORIZONTAL;
@@ -36,16 +45,18 @@ export function sizingClass(sizing) {
     return {
         'col-start-1': sizing?.grow === true,
         'row-start-1': sizing?.grow === true,
-        'shrink-1': sizing?.grow === true,
-        'grow-1': sizing?.grow === true,
+        shrink: sizing?.grow === true,
+        grow: sizing?.grow === true,
     };
 }
 export function sizingStyle(sizing) {
     return sanitizeStyleInfo({
-        width: sizing?.width === undefined ? undefined : `${sizing.width}${getSizeUnits(sizing.widthUnit)}`,
-        height: sizing?.height === undefined
-            ? undefined
-            : `${sizing.height}${getSizeUnits(sizing.heightUnit)}`,
+        width: parseDimension(sizing?.width?.value),
+        minWidth: parseDimension(sizing?.width?.min),
+        maxWidth: parseDimension(sizing?.width?.max),
+        height: parseDimension(sizing?.height?.value),
+        minHeight: parseDimension(sizing?.height?.min),
+        maxHeight: parseDimension(sizing?.height?.max),
     });
 }
 export function paddingClass(padding) {

package/blocks/templates/renderAnimationBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAYvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8BnF"}
+{"version":3,"file":"renderAnimationBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderAnimationBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAKvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BnF"}

package/blocks/templates/renderAnimationBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { cursorClass, defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, onClickAction } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderAnimationBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,13 +10,10 @@ export function renderAnimationBlock(block, ctx) {
     }
     const { url, type } = block.config.animationConfig;
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
-        ...cursorClass(block),
+        ...defaultClasses(block, ctx),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     const onClick = onClickAction(block, ctx);
     return html `<devvit-animation-player

package/blocks/templates/renderAvatarBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderAvatarBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAcvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8BhF"}
+{"version":3,"file":"renderAvatarBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderAvatarBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAWvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BhF"}

package/blocks/templates/renderAvatarBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { avatarSizeClass, cursorClass, defaultClasses, facingClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { avatarSizeClass, defaultClasses, defaultStyles, facingClass, onClickAction, } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderAvatarBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,15 +10,12 @@ export function renderAvatarBlock(block, ctx) {
     }
     const { thingId, facing, size, background } = block.config.avatarConfig;
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...avatarSizeClass(size),
         ...facingClass(facing),
-        ...cursorClass(block),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     const onClick = onClickAction(block, ctx);
     return html `<div

package/blocks/templates/renderButtonBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAA6C,MAAM,gBAAgB,CAAC;AAalF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAInD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmEhF"}
+{"version":3,"file":"renderButtonBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderButtonBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAA6C,MAAM,gBAAgB,CAAC;AAUlF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAInD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAgEhF"}

package/blocks/templates/renderButtonBlock.js

@@ -2,7 +2,7 @@ import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUICo
 import { button } from '@reddit/faceplate-ui/templates/button.js';
 import { styleMap } from '@reddit/faceplate-ui/templateUtils/styleMap.js';
 import { BlockButtonSize, BlockIconSize, BlockType } from '@devvit/protos';
-import { buttonAppearance, buttonSize, textColorStyle, cursorClass, defaultClasses, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { buttonAppearance, buttonSize, defaultClasses, defaultStyles, onClickAction, textColorStyle, } from '../attributes.js';
 import { classMap } from './util.js';
 import { renderIconBlock } from './renderIconBlock.js';
 import { nothing } from 'lit';
@@ -14,15 +14,12 @@ export function renderButtonBlock(block, ctx) {
     }
     const { icon, disabled, textColor, textColors } = block.config.buttonConfig;
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
-        ...cursorClass(block),
+        ...defaultClasses(block, ctx),
         textColor: Boolean(textColor || textColors),
     };
     const styles = {
+        ...defaultStyles(block),
         ...textColorStyle(textColors, textColor),
-        ...sizingStyle(block.size),
         // not available in all platforms yet
         // ...backgroundStyle(block.config?.buttonConfig?.backgroundColor),
     };

package/blocks/templates/renderFullSnooBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderFullSnooBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAYvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8BlF"}
+{"version":3,"file":"renderFullSnooBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderFullSnooBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BlF"}

package/blocks/templates/renderFullSnooBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { cursorClass, defaultClasses, facingClass, fullSnooSizeClass, onClickAction, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, facingClass, fullSnooSizeClass, onClickAction, } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderFullSnooBlock(block, ctx) {
     const { html, styleMap, ifDefined } = getTemplateRenderingStrategy();
@@ -10,15 +10,12 @@ export function renderFullSnooBlock(block, ctx) {
     }
     const { userId, size, facing } = block.config.fullsnooConfig;
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...fullSnooSizeClass(size),
         ...facingClass(facing),
-        ...cursorClass(block),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     const onClick = onClickAction(block, ctx);
     return html `<div

package/blocks/templates/renderIconBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAavC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAyB,YAAY,EAAE,MAAM,WAAW,CAAC;AAGhE,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAmC9E"}
+{"version":3,"file":"renderIconBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderIconBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAUvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAyB,YAAY,EAAE,MAAM,WAAW,CAAC;AAGhE,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAgC9E"}

package/blocks/templates/renderIconBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { textColorStyle, cursorClass, defaultClasses, iconSizeClass, onClickAction, sizingClass, sizingStyle, stackChildClass, textColorClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, iconSizeClass, onClickAction, textColorClass, textColorStyle, } from '../attributes.js';
 import { classMap, resolveIcon } from './util.js';
 import { resolveStyleColor } from './color.js';
 export function renderIconBlock(block, ctx) {
@@ -10,17 +10,14 @@ export function renderIconBlock(block, ctx) {
         return nothing;
     }
     const { icon, size, color, colors } = block.config.iconConfig;
-    const styles = {
-        ...textColorStyle(colors, color ?? 'neutral-content'),
-        ...sizingStyle(block.size),
-    };
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...textColorClass(),
         ...iconSizeClass(size),
-        ...cursorClass(block),
+    };
+    const styles = {
+        ...defaultStyles(block),
+        ...textColorStyle(colors, color ?? 'neutral-content'),
     };
     const onClick = onClickAction(block, ctx);
     return html `<div

package/blocks/templates/renderImageBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAWvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAA6B,YAAY,EAAE,MAAM,WAAW,CAAC;AAKpE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA4C/E"}
+{"version":3,"file":"renderImageBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderImageBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAA6B,YAAY,EAAE,MAAM,WAAW,CAAC;AAKpE,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAyC/E"}

package/blocks/templates/renderImageBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { cursorClass, defaultClasses, onClickAction, resizeModeClass, sizingClass, sizingStyle, stackChildClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, onClickAction, resizeModeClass } from '../attributes.js';
 import { classMap, isValidImageURL } from './util.js';
 import { VerifiedPublicImageHosts } from './constants.js';
 const FALLBACK_IMG_URL = 'https://i.redd.it/p1vmc5ulmpib1.png';
@@ -18,14 +18,11 @@ export function renderImageBlock(block, ctx) {
         imageUrl = FALLBACK_IMG_URL;
     }
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...resizeModeClass(resizeMode),
-        ...cursorClass(block),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     const onClick = onClickAction(block, ctx);
     return html `

package/blocks/templates/renderSpacerBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderSpacerBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderSpacerBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AASvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAuBhF"}
+{"version":3,"file":"renderSpacerBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderSpacerBlock.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAqBhF"}

package/blocks/templates/renderSpacerBlock.js

@@ -1,16 +1,14 @@
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { defaultClasses, sizingClass, sizingStyle, spacerSizeClass, stackChildClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, spacerSizeClass } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderSpacerBlock(block, ctx) {
     const { html, styleMap } = getTemplateRenderingStrategy();
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...spacerSizeClass(block.config?.spacerConfig?.size, block.config?.spacerConfig?.shape, ctx.stackDirection),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     return html `<div
     class="${classMap(classes)}"

package/blocks/templates/renderStackBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAEL,kBAAkB,EAgBnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,EAC/D,kBAAkB,GAAE,kBAAkB,GAAG,SAAqB,GAC7D,YAAY,CAmFd"}
+{"version":3,"file":"renderStackBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderStackBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAuB,MAAM,gBAAgB,CAAC;AAE5D,OAAO,EAEL,kBAAkB,EAiBnB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,2BAAsE,EACzE,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,KAAK,YAAY,EAC/D,kBAAkB,GAAE,kBAAkB,GAAG,SAAqB,GAC7D,YAAY,CAgFd"}

package/blocks/templates/renderStackBlock.js

@@ -1,7 +1,7 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { BlockStackDirection } from '@devvit/protos';
-import { alignmentClass, backgroundClass, backgroundStyle, borderClass, borderStyle, cursorClass, defaultClasses, gapClass, onClickAction, paddingClass, pointerEventsClass, radiusClass, sizingClass, sizingStyle, stackChildClass, stackDirectionClass, } from '../attributes.js';
+import { alignmentClass, backgroundClass, backgroundStyle, borderClass, borderStyle, defaultClasses, defaultStyles, gapClass, onClickAction, paddingClass, pointerEventsClass, radiusClass, stackDirectionClass, } from '../attributes.js';
 import { classMap } from './util.js';
 import { resolveStyleColor } from './color.js';
 export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirection.UNRECOGNIZED }, renderBlock, attributeOverrides = undefined) {
@@ -17,22 +17,19 @@ export function renderStackBlock(block, ctx = { stackDirection: BlockStackDirect
     // capture mouse events on a stack if there are actions associated or there's a background color
     const pointerEvents = !!block.actions.length || hasBGColor;
     const classes = {
-        ...defaultClasses(block.type),
+        ...defaultClasses(block, ctx),
         ...backgroundClass(!!backgroundColors || !!backgroundColor),
         ...stackDirectionClass(direction, reverse),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
         ...paddingClass(padding),
         ...gapClass(gap),
         ...alignmentClass(direction, alignment),
         ...borderClass(border),
         ...radiusClass(cornerRadius),
-        ...cursorClass(block),
         ...pointerEventsClass(pointerEvents),
         ...attributeOverrides?.classes,
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
         ...backgroundStyle(backgroundColors, backgroundColor),
         ...borderStyle(border),
         ...attributeOverrides?.styles,

package/blocks/templates/renderTextBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAkBvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAiE9E"}
+{"version":3,"file":"renderTextBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderTextBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAkD,MAAM,gBAAgB,CAAC;AAgBvF,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAGnD,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA8D9E"}

package/blocks/templates/renderTextBlock.js

@@ -1,7 +1,7 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import { BlockTextSize, BlockTextStyle, BlockTextWeight } from '@devvit/protos';
-import { textColorStyle, cursorClass, defaultClasses, onClickAction, setTextOutline, sizingClass, sizingStyle, stackChildClass, textAlignClass, textSelectClass, textSizeClass, textWeightClass, textColorClass, textTruncateClass, } from '../attributes.js';
+import { defaultClasses, defaultStyles, onClickAction, setTextOutline, textAlignClass, textColorClass, textColorStyle, textSelectClass, textSizeClass, textTruncateClass, textWeightClass, } from '../attributes.js';
 import { classMap } from './util.js';
 import { resolveStyleColor } from './color.js';
 export function renderTextBlock(block, ctx) {
@@ -35,21 +35,18 @@ export function renderTextBlock(block, ctx) {
     }
     textSize = size ?? textSize;
     textWeight = weight ?? textWeight;
-    const styles = {
-        ...textColorStyle(colors, color ?? textColor),
-        ...sizingStyle(block.size),
-    };
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
         ...textColorClass(),
         ...textSizeClass(textSize),
         ...textTruncateClass(),
         ...textAlignClass(alignment),
         ...textWeightClass(textWeight),
         ...textSelectClass(selectable),
-        ...cursorClass(block),
+    };
+    const styles = {
+        ...defaultStyles(block),
+        ...textColorStyle(colors, color ?? textColor),
     };
     const onClick = onClickAction(block, ctx);
     return html `<span

package/blocks/templates/renderWebViewBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderWebViewBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CA2BjF"}
+{"version":3,"file":"renderWebViewBlock.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/renderWebViewBlock.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAY,YAAY,EAAE,MAAM,WAAW,CAAC;AAEnD,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,aAAa,GAAG,YAAY,CAyBjF"}

package/blocks/templates/renderWebViewBlock.js

@@ -1,6 +1,6 @@
 import { nothing } from 'lit';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
-import { defaultClasses, sizingClass, sizingStyle, stackChildClass } from '../attributes.js';
+import { defaultClasses, defaultStyles } from '../attributes.js';
 import { classMap } from './util.js';
 export function renderWebViewBlock(block, ctx) {
     const { html, styleMap } = getTemplateRenderingStrategy();
@@ -10,12 +10,10 @@ export function renderWebViewBlock(block, ctx) {
     }
     const { url } = block.config.webviewConfig;
     const classes = {
-        ...defaultClasses(block.type),
-        ...stackChildClass(ctx.stackDirection),
-        ...sizingClass(block.size),
+        ...defaultClasses(block, ctx),
     };
     const styles = {
-        ...sizingStyle(block.size),
+        ...defaultStyles(block),
     };
     return html `<devvit-blocks-webview
     src="${url}"

package/blocks/templates/util.d.ts

@@ -4,7 +4,7 @@ import { ref as clientRef, RefOrCallback } from 'lit/directives/ref.js';
 import { StyleInfo } from 'lit/directives/style-map.js';
 import { nothing, TemplateResult } from 'lit';
 import type { UnsafeString } from '@reddit/baseplate/html.js';
-import { BlockColor, BlockSizeUnit } from '@devvit/protos';
+import { Block, BlockColor, BlockSizes, BlockSizes_Dimension_Value, BlockSizeUnit } from '@devvit/protos';
 export type TemplateLike = TemplateResult | typeof nothing;
 export declare function classMap(classInfo: ClassInfo, forceString?: boolean): string | ReturnType<typeof clientClassMap>;
 export declare function unsafeHTML(input: string): DirectiveResult<DirectiveClass> | UnsafeString;
@@ -17,6 +17,13 @@ export declare function resolveIcon(name: string): TemplateResult;
  */
 export declare function sanitizeStyleInfo(styleInfo: StyleInfo): StyleInfo;
 export declare function isValidImageURL(imageUrl: string): boolean;
+/**
+ * Returns a BlockSizes object either directly from the block or constructs
+ * one from the legacy `size` field
+ * @param block
+ */
+export declare function getSizes(block: Block): BlockSizes | undefined;
+export declare function parseDimension(value: BlockSizes_Dimension_Value | undefined): string | undefined;
 export declare function getSizeUnits(unit: BlockSizeUnit | undefined): string;
 /**
  * Extracts the light and dark colors from a BlockColor object with an optional

package/blocks/templates/util.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE3D,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAW5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CASjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAWzD;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAUpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAC/B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAIzD"}
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../library/src/blocks/templates/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAEpF,OAAO,EAAE,GAAG,IAAI,SAAS,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,EACL,KAAK,EACL,UAAU,EACV,UAAU,EACV,0BAA0B,EAC1B,aAAa,EACd,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,YAAY,GAAG,cAAc,GAAG,OAAO,OAAO,CAAC;AAE3D,wBAAgB,QAAQ,CACtB,SAAS,EAAE,SAAS,EACpB,WAAW,CAAC,EAAE,OAAO,GACpB,MAAM,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAW5C;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,eAAe,CAAC,cAAc,CAAC,GAAG,YAAY,CAMxF;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,aAAa,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,GAAG,MAAM,CAM7E;AAED,wBAAgB,aAAa,CAAC,EAAE,EAAE,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,EAAE,IAAI,WAAW,CAEtF;AAED,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,cAAc,CAiBxD;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,SAAS,GAAG,SAAS,CASjE;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAWzD;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,GAAG,UAAU,GAAG,SAAS,CA2B7D;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,0BAA0B,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAKhG;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,CAUpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,aAAa,CAC3B,MAAM,EAAE,UAAU,GAAG,SAAS,EAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,GAC/B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAIzD"}

package/blocks/templates/util.js

@@ -5,7 +5,7 @@ import { unsafeHTML as serverUnsafeHTML } from '@reddit/baseplate/html.js';
 import { getTemplateRenderingStrategy } from '@reddit/faceplate-ui/faceplateUIConfig.js';
 import faceplateIcons from '@reddit/faceplate-ui/svgs/svg-manifest.js';
 import { REDD_IT, VerifiedImageHosts } from './constants.js';
-import { BlockSizeUnit } from '@devvit/protos';
+import { BlockSizeUnit, } from '@devvit/protos';
 export function classMap(classInfo, forceString) {
     const { getType } = getTemplateRenderingStrategy();
     if (getType() === 'client' && forceString !== true) {
@@ -79,6 +79,41 @@ export function isValidImageURL(imageUrl) {
         return false;
     }
 }
+/**
+ * Returns a BlockSizes object either directly from the block or constructs
+ * one from the legacy `size` field
+ * @param block
+ */
+export function getSizes(block) {
+    return (block.sizes ??
+        (block.size
+            ? {
+                width: block.size.width != undefined
+                    ? {
+                        value: {
+                            value: block.size.width,
+                            unit: block.size.widthUnit ?? BlockSizeUnit.SIZE_UNIT_PERCENT,
+                        },
+                    }
+                    : undefined,
+                height: block.size.height != undefined
+                    ? {
+                        value: {
+                            value: block.size.height,
+                            unit: block.size.heightUnit ?? BlockSizeUnit.SIZE_UNIT_PERCENT,
+                        },
+                    }
+                    : undefined,
+                grow: block.size.grow,
+            }
+            : undefined));
+}
+export function parseDimension(value) {
+    if (!value) {
+        return undefined;
+    }
+    return `${value.value}${getSizeUnits(value.unit)}`;
+}
 export function getSizeUnits(unit) {
     switch (unit) {
         case BlockSizeUnit.SIZE_UNIT_PIXELS:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devvit/ui-renderer",
-  "version": "0.10.7-next-2023-10-09-102a57871.0",
+  "version": "0.10.7-next-2023-10-09-14cdd70d8.0",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -52,9 +52,9 @@
   },
   "types": "./index.d.ts",
   "dependencies": {
-    "@devvit/protos": "0.10.7-next-2023-10-09-102a57871.0",
-    "@devvit/runtime-lite": "0.10.7-next-2023-10-09-102a57871.0",
-    "@devvit/runtimes": "0.10.7-next-2023-10-09-102a57871.0",
+    "@devvit/protos": "0.10.7-next-2023-10-09-14cdd70d8.0",
+    "@devvit/runtime-lite": "0.10.7-next-2023-10-09-14cdd70d8.0",
+    "@devvit/runtimes": "0.10.7-next-2023-10-09-14cdd70d8.0",
     "@lottiefiles/lottie-player": "1.7.1",
     "p-queue": "7.3.4",
     "rxjs": "7.5.7"
@@ -81,7 +81,7 @@
   "devDependencies": {
     "@devvit/eslint-config": "0.10.6",
     "@devvit/repo-tools": "0.10.6",
-    "@devvit/tsconfig": "0.10.7-next-2023-10-09-102a57871.0",
+    "@devvit/tsconfig": "0.10.7-next-2023-10-09-14cdd70d8.0",
     "@lit/localize": "0.11.4",
     "@open-wc/testing-helpers": "2.3.0",
     "@reddit/baseplate": "0.14.0",
@@ -110,5 +110,5 @@
     "directory": "dist"
   },
   "source": "./src/index.ts",
-  "gitHead": "77a303782b46ba62b2f03e109abd93cdf2bad7ab"
+  "gitHead": "7b5d8500a569bc3a02dacad8fe1d5432a3913e80"
 }