Add Anchor Block Support and Vertical Alignment capability

src/superlist-item/block.json

@@ -10,6 +10,7 @@
 	"category": "design",
 	"description": "A list item that allows you to nest as many other blocks as you like inside it.",
 	"supports": {
+		"anchor": true,
 		"html": true,
 		"color": {
 			"background": true,

src/superlist-item/editor.scss

@@ -12,7 +12,7 @@
 		button.block-list-appender__toggle {
 			width: auto;
 			height: auto;
-			padding: 0.5rem !important;
+			padding: 0.2rem !important;
 			&:after {
 				content: attr(aria-label);
 			}

src/superlist/block.json

@@ -18,9 +18,13 @@
 		"itemWidth": {
 			"type": "string",
 			"default": "350px"
+		},
+		"verticalAlignment": {
+			"type": "string"
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": true,
 		"align": true,
 		"color": {

src/superlist/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from "classnames";
+
 /**
  * Retrieves the translation of text.
  *
@@ -20,6 +25,7 @@ import {
 	store as blockEditorStore,
 	InspectorControls,
 	useSetting,
+	BlockVerticalAlignmentToolbar,
 } from "@wordpress/block-editor";
 import {
 	PanelBody,
@@ -57,13 +63,15 @@ const LIST_TEMPLATE = [
  */
 export default function Edit(props) {
 	const { attributes, setAttributes } = props;
-	const { listStyle, orientation, itemWidth } = attributes;
+	const { listStyle, orientation, itemWidth, verticalAlignment } = attributes;
 	const [width, setWidth] = useState(itemWidth);
 	const subItemWidth = {
 		gridTemplateColumns: `repeat(auto-fill, minmax(${width}, 1fr))`,
 	};
 	const blockProps = useBlockProps({
-		className: `${listStyle} ${orientation}`,
+		className: classnames(listStyle, orientation, {
+			[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
+		}),
 		style: "horizontal" === orientation ? subItemWidth : {},
 	});
 
@@ -80,10 +88,17 @@ export default function Edit(props) {
 		setWidth(value);
 		setAttributes({ itemWidth: value });
 	}
+	function updateAlignment(verticalAlignment) {
+		setAttributes({ verticalAlignment: verticalAlignment });
+	}
 	const ListContainer = "none" !== listStyle ? listStyle : "div";
 	return (
 		<>
 			<BlockControls>
+				<BlockVerticalAlignmentToolbar
+					onChange={updateAlignment}
+					value={verticalAlignment}
+				/>
 				<ListStyleUI
 					value={listStyle}
 					onChange={switchStyle}

src/superlist/editor.scss

@@ -8,7 +8,6 @@
 	&.horizontal {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-		grid-template-rows: auto 1fr auto;
 		li {
 			margin: 0;
 		}

src/superlist/save.js

@@ -1,17 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from "classnames";
 /**
  * Retrieves the translation of text.
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-i18n/
  */
-import { __ } from '@wordpress/i18n';
+import { __ } from "@wordpress/i18n";
 
 /**
  * React hook that is used to mark the block wrapper element.
  * It provides all the necessary props like the class name.
  *
  * @see https://developer.wordpress.org/block-editor/packages/packages-block-editor/#useBlockProps
  */
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from "@wordpress/block-editor";
 
 /**
  * The save function defines the way in which the different attributes should
@@ -23,16 +27,18 @@ import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
  * @return {WPElement} Element to render.
  */
 export default function save({ attributes }) {
-	const { listStyle, orientation, itemWidth } = attributes;
+	const { listStyle, orientation, itemWidth, verticalAlignment } = attributes;
 	const subItemWidth = {
 		gridTemplateColumns: `repeat(auto-fill, minmax(${itemWidth}, 1fr))`,
 	};
-	const ListContainer = 'none' !== listStyle ? listStyle : 'div';
+	const ListContainer = "none" !== listStyle ? listStyle : "div";
 	return (
 		<ListContainer
 			{...useBlockProps.save({
-				className: `${listStyle} ${orientation}`,
-				style: 'horizontal' === orientation ? subItemWidth : {},
+				className: classnames(listStyle, orientation, {
+					[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
+				}),
+				style: "horizontal" === orientation ? subItemWidth : {},
 			})}
 		>
 			<InnerBlocks.Content />

src/superlist/style.scss

@@ -9,7 +9,7 @@
 	&.horizontal {
 		display: grid;
 		gap: 2rem;
-		grid-template-rows: auto 1fr auto;
+		grid-template-rows: auto;
 	}
 	&.none {
 		list-style: none;
@@ -18,6 +18,15 @@
 			margin-bottom: 0;
 		}
 	}
+	&.is-vertically-aligned-center {
+		align-items: center;
+	}
+	&.is-vertically-aligned-top {
+		align-items: flex-start;
+	}
+	&.is-vertically-aligned-bottom {
+		align-items: flex-end;
+	}
 }
 
 // allow indentation via padding to occur when a super list is nested inside a super list item, otherwise, remove the unnecessary padding-left.