Release remaining things for 0.1.3 into the production branch

CONTRIBUTING.md

@@ -0,0 +1,33 @@
+# Contributing to Super List Block
+
+Thank you for considering contributing to the Superlist Block project! We welcome contributions of all kinds, including bug fixes, feature development, documentation improvements, and more.
+
+## Getting Started
+
+1. **Fork the Repository**: Start by forking the repository to your GitHub account.
+2. **Clone the Repository**: Clone your forked repository to your local machine.
+   ```bash
+   git clone https://github.com/your-username/superlist-block.git
+   ```
+3. **Create a Branch**: Create a new branch for your feature or bug fix.
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+4. **Make Changes**: Make your changes in the codebase. Be sure to follow the project's coding style and conventions.
+5. **Open a Pull Request**: Once you have made your changes, push your branch to your forked repository and open a pull request against the `main` repository.
+   ```bash
+   git push origin feature/your-feature-name
+   ```
+   Then, go to the original repository and click on "New Pull Request". Select your branch and provide a clear description of your changes.
+6. **Review Process**: Your pull request will be reviewed by the maintainers. They may request changes or provide feedback. Be open to suggestions and make any necessary adjustments.
+7. **Merge**: Once your pull request is approved, it will be merged into the main branch. You will be notified when this happens.
+
+## Branching Strategy
+- `main` Branch: All development work should be merged into the main branch. This is the default branch for active development.
+- `production` Branch: The production branch contains the officially released code. Only stable and tested changes from the main branch are merged into production.
+
+## Merging to `production`
+Once your changes have been merged into the `main` branch and thoroughly tested, they may be merged into the production branch by a maintainer for an official release. There is no set release schedule, but we aim to release new versions regularly. If you have a specific feature or bug fix that you believe should be included in the next release, please open an issue or pull request to discuss it with the maintainers.
+
+## Reporting Issues
+If you encounter any issues or have suggestions for improvements, please open an issue in the repository. Provide as much detail as possible to help us understand and address the problem.

README.md

@@ -5,6 +5,8 @@
 
 Nest multiple blocks inside lists of any kind of list (ordered, unordered, no marker, etc), or do away with list markers and use it like a repeater!
 
+_Super List is open for contributions! If you would like to contribute to the project, please check out the [Contributing Guide](CONTRIBUTING.md)._
+
 ## Description
 
 A handy little block that can be used in a variety of ways. Use it to nest other blocks inside list items, to create simple grid layouts ( like a properly responsive pricing table, or a wrapping icon list), or other use cases I haven't yet thought of!

src/superlist/edit.js → src/superlist/edit/edit.js

@@ -18,11 +18,8 @@ import { __ } from "@wordpress/i18n";
  */
 import {
 	useBlockProps,
-	InnerBlocks,
 	BlockControls,
-	// __experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 	InspectorControls,
 	useSetting,
 	BlockVerticalAlignmentToolbar,
@@ -32,20 +29,23 @@ import {
 	PanelRow,
 	__experimentalUnitControl as UnitControl,
 } from "@wordpress/components";
-import { useSelect } from "@wordpress/data";
 import { useState } from "@wordpress/element";
+
+/**
+ * Internal Dependencies
+ */
+import ListStyleUI from "./list-style";
+import Orientation from "./orientation";
 /**
  * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
  * Those files can contain any CSS code that gets applied to the editor.
  *
  * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
  */
 import "./editor.scss";
-import ListStyleUI from "./list-style";
-import { Orientation } from "./orientation";
 
 /**
- * Internal Dependencies
+ * Constants
  */
 const ALLOWED_BLOCKS = ["createwithrani/superlist-item"];
 const LIST_TEMPLATE = [
@@ -61,8 +61,7 @@ const LIST_TEMPLATE = [
  *
  * @return {WPElement} Element to render.
  */
-export default function Edit(props) {
-	const { attributes, setAttributes } = props;
+export default function Edit({ attributes, setAttributes }) {
 	const { listStyle, orientation, itemWidth, verticalAlignment } = attributes;
 
 	// check if theme.json has set a preferred list orientation
@@ -79,39 +78,72 @@ export default function Edit(props) {
 		undefined !== orientation ? orientation : defaultListOrientation
 	);
 
+	// set state for list item width from the attribute
 	const [width, setWidth] = useState(itemWidth);
 
+	// set inline CSS Custom Property for list item width
 	const subItemWidth = {
 		"--wp--custom--superlist-block--list-settings--width": width,
 	};
+
 	const blockProps = useBlockProps({
+		// add class names to set list style, list orientation, and vertical alignment
 		className: classnames(listStyle, listOrientation, {
 			[`is-vertically-aligned-${verticalAlignment}`]: verticalAlignment,
 		}),
+		// add inline style if list orientation is horizontal and the user has set a custom list item width
 		style: "horizontal" === listOrientation ? subItemWidth : {},
 	});
 
 	const innerBlockProps = useInnerBlocksProps(blockProps, {
+		// we only allow one kind of inner block, and we automatically populate this block with two inner blocks
 		allowedBlocks: ALLOWED_BLOCKS,
 		template: LIST_TEMPLATE,
+		// we also set the inner block orientation based on the list orientation, this affects the in-between appender position
 		orientation: `${listOrientation}`,
+		// we also set the focus to newly added inner block when it's added
 		templateInsertUpdateSelection: true,
 	});
+
+	/**
+	 * onChange function to switch the list style
+	 * @param {string} style ul || ol || none
+	 */
 	function switchStyle(style) {
 		setAttributes({ listStyle: style });
 	}
+
+	/**
+	 * onChange function to set the user inputted item width including unit
+	 * @param {string} value
+	 */
 	function setItemWidth(value) {
 		setWidth(value);
 		setAttributes({ itemWidth: value });
 	}
+
+	/**
+	 * onChange function to set the vertical alignment attribute
+	 * @param {string} verticalAlignment
+	 */
 	function updateAlignment(verticalAlignment) {
 		setAttributes({ verticalAlignment: verticalAlignment });
 	}
+
+	/**
+	 * onChange function to update the list orientation
+	 * @param {string} orientation horizontal || vertical
+	 */
 	function updateOrientation(orientation) {
 		setListOrientation(orientation);
 		setAttributes({ orientation: orientation });
 	}
+
+	/**
+	 * Set container tag name based on list style, if the list style is none, set it to `ol`
+	 */
 	const ListContainer = "none" !== listStyle ? listStyle : "ol";
+
 	return (
 		<>
 			<BlockControls>
@@ -135,15 +167,22 @@ export default function Edit(props) {
 					initialOpen={true}
 					title={__("List Settings", "superlist-block")}
 				>
-					{listOrientation === "horizontal" && (
-						<PanelRow>
-							<UnitControl
-								label={__("List-item max-width", "superlist-block")}
-								onChange={setItemWidth}
-								value={width}
-							/>
-						</PanelRow>
-					)}
+					{
+						/**
+						 * Only show list item setting if the list orientation is
+						 * horizontal, because this setting is specifically for the basic
+						 * grid mode this block offers.
+						 */
+						listOrientation === "horizontal" && (
+							<PanelRow>
+								<UnitControl
+									label={__("List-item max-width", "superlist-block")}
+									onChange={setItemWidth}
+									value={width}
+								/>
+							</PanelRow>
+						)
+					}
 					<br />
 					<PanelRow>
 						<ListStyleUI

src/superlist/editor.scss → src/superlist/edit/editor.scss

@@ -6,18 +6,14 @@
 
 .editor-styles-wrapper .wp-block-createwithrani-superlist-block {
 	&.horizontal {
-		display: grid;
 		li {
 			margin: 0;
 		}
 	}
 	&.none {
-		list-style: none;
 		padding: 0;
 		li {
 			list-style: none;
-			margin-top: 0;
-			margin-bottom: 0;
 		}
 	}
 }

src/superlist/list-style.js → src/superlist/edit/list-style.js

@@ -1,44 +1,43 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find } from "lodash";
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { ToolbarGroup, Button } from '@wordpress/components';
-import { formatListBullets, formatListNumbered, menu } from '@wordpress/icons';
+import { __ } from "@wordpress/i18n";
+import { ToolbarGroup, Button } from "@wordpress/components";
+import { formatListBullets, formatListNumbered, menu } from "@wordpress/icons";
 
 const DEFAULT_LIST_CONTROLS = [
 	{
 		icon: formatListBullets,
-		title: __('Unordered list', 'superlist-block'),
-		listStyle: 'ul',
+		title: __("Unordered list", "superlist-block"),
+		listStyle: "ul",
 	},
 	{
 		icon: formatListNumbered,
-		title: __('Ordered List', 'superlist-block'),
-		listStyle: 'ol',
+		title: __("Ordered List", "superlist-block"),
+		listStyle: "ol",
 	},
 	{
 		icon: menu,
-		title: __('No marker', 'superlist-block'),
-		listStyle: 'none',
+		title: __("No marker", "superlist-block"),
+		listStyle: "none",
 	},
 ];
 
 const POPOVER_PROPS = {
-	position: 'bottom right',
+	position: "bottom right",
 	isAlternate: true,
 };
 
 function ListStyleUI({
 	value,
 	onChange,
 	listControls = DEFAULT_LIST_CONTROLS,
-	label = __('Superlist'),
-	describedBy = __('Change list style'),
+	describedBy = __("Change list style"),
 	isCollapsed = true,
 	placement,
 }) {
@@ -55,10 +54,10 @@ function ListStyleUI({
 		if (activeStyle) return activeStyle.icon;
 	}
 
-	return 'toolbar' === placement ? (
+	return "toolbar" === placement ? (
 		<ToolbarGroup
 			icon={setIcon()}
-			label={__(describedBy, 'superlist-block')}
+			label={__(describedBy, "superlist-block")}
 			popoverProps={POPOVER_PROPS}
 			isCollapsed
 			controls={listControls.map((control) => {
@@ -68,20 +67,20 @@ function ListStyleUI({
 				return {
 					...control,
 					isActive,
-					role: isCollapsed ? 'menuitemradio' : undefined,
+					role: isCollapsed ? "menuitemradio" : undefined,
 					onClick: applyOrUnset(listStyle),
 				};
 			})}
 		/>
 	) : (
 		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
-			<legend>{__(`${describedBy}`, 'superlist-block')}</legend>
+			<legend>{__(`${describedBy}`, "superlist-block")}</legend>
 			<div>
 				{listControls.map(({ icon, listStyle, title }) => {
 					return (
 						<Button
 							key={listStyle}
-							label={__(title, 'superlist-block')}
+							label={__(title, "superlist-block")}
 							icon={icon}
 							isPressed={listStyle === value}
 							onClick={applyOrUnset(listStyle)}

src/superlist/orientation.js → src/superlist/edit/orientation.js

@@ -2,11 +2,7 @@ import { __ } from "@wordpress/i18n";
 import { ToolbarButton, Button } from "@wordpress/components";
 import { arrowRight, arrowDown } from "@wordpress/icons";
 
-export const Orientation = ({
-	listOrientation,
-	placement,
-	updateOrientation,
-}) => {
+const Orientation = ({ listOrientation, placement, updateOrientation }) => {
 	return "toolbar" === placement ? (
 		<>
 			<ToolbarButton
@@ -50,3 +46,5 @@ export const Orientation = ({
 		</fieldset>
 	);
 };
+
+export default Orientation;

src/superlist/example.js → src/superlist/example/example.js

@@ -1,7 +1,7 @@
 import example1 from "./example1.jpg";
 import example2 from "./example2.jpg";
 
-export const example = {
+const Example = {
 	attributes: {
 		listStyle: "none",
 		orientation: "horizontal",
@@ -64,3 +64,4 @@ export const example = {
 		},
 	],
 };
+export default Example;

src/superlist/index.js

@@ -19,10 +19,10 @@ import "./style.scss";
  * Internal dependencies
  */
 import metadata from "./block.json";
-import edit from "./edit";
+import edit from "./edit/edit";
 import save from "./save";
-import { example } from "./example";
-import { transforms } from "./transforms";
+import example from "./example/example";
+import transforms from "./transforms";
 import { SuperList as icon } from "./icons";
 
 /**
@@ -31,6 +31,9 @@ import { SuperList as icon } from "./icons";
  * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
  */
 registerBlockType("createwithrani/superlist-block", {
+	/**
+	 * Pulling the metadata in just in case something weird happens with client-side installation through the Block Library search again.
+	 */
 	...metadata,
 	icon,
 	edit,