move red-orbiter block into red-orbital plugin

red-orbital.php

@@ -22,6 +22,7 @@
  * @see https://developer.wordpress.org/reference/functions/register_block_type/
  */
 function red_block_red_orbital_block_init() {
-	register_block_type( __DIR__ . '/build' );
+	register_block_type( __DIR__ . '/build/red-orbital' );
+	register_block_type( __DIR__ . '/build/red-orbiter' );
 }
 add_action( 'init', 'red_block_red_orbital_block_init' );

src/red-orbiter/block.json

@@ -0,0 +1,28 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "red-block/red-orbiter",
+	"version": "0.1.0",
+	"title": "Orbiter",
+	"category": "widgets",
+	"icon": "image-filter",
+	"description": "For use with the Orbital Block.",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "red-orbiter",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css",
+	"parent": ["red-block/red-orbital"],
+	"attributes": {
+		"imgSrc": {
+			"type": "string",
+			"default": "https://via.placeholder.com/64x64"
+		},
+		"backgroundColor": {
+			"type": "string",
+			"default": "#ffc8c8"
+		}
+	}
+}

src/red-orbiter/edit.js

@@ -0,0 +1,57 @@
+import { __ } from "@wordpress/i18n";
+
+import {
+	useBlockProps,
+	InnerBlocks,
+	InspectorControls,
+} from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import { ColorPicker, Panel, PanelBody, PanelRow } from "@wordpress/components";
+
+import "./editor.scss";
+
+const InnerBlocksWithLimit = ({ clientId, limit = 2, ...rest }) => {
+	const { blockCount } = useSelect((select) => ({
+		blockCount: select("core/block-editor").getBlockCount(clientId),
+	}));
+
+	const blockAppender = () => {
+		return blockCount < limit ? <InnerBlocks.DefaultBlockAppender /> : false;
+	};
+
+	return <InnerBlocks renderAppender={() => blockAppender()} {...rest} />;
+};
+
+export default function Edit({ attributes, setAttributes, clientId }) {
+	return (
+		<>
+			<InspectorControls>
+				<Panel>
+					<PanelBody title="Settings" initialOpen={ true }>
+						<PanelRow>
+						<legend className="blocks-base-control__label">
+								{ __( 'Background Color', 'red-orbital' ) }
+						</legend>
+						</PanelRow>
+							<ColorPicker
+								color={attributes.backgroundColor}
+								onChange={(color) => setAttributes({ backgroundColor: color })}
+								enableAlpha
+								defaultValue="#000"
+							/>
+					</PanelBody>
+				</Panel>
+			</InspectorControls>
+
+			<div {...useBlockProps()}>
+				<div
+					className="orbiter-bg"
+					style={{
+						backgroundColor: attributes.backgroundColor,
+					}}
+				/>
+				<InnerBlocksWithLimit orientation="horizontal" clientId={clientId} />
+			</div>
+		</>
+	);
+}

src/red-orbiter/editor.scss

@@ -0,0 +1,55 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.block-list .wp-block-red-block-red-orbiter {
+	z-index: 10;
+	position: relative;
+	display: flex;
+	align-items: center;
+	list-style: none;
+	margin-bottom: 1px;
+	padding: 8px;
+
+	&::before {
+		position: absolute;
+		content: '';
+		top: 0;
+		left: 72px;
+		width: calc(100% - 90px);
+		height: 1px;
+		background-color: #e8e8e8;
+	}
+
+	.block-editor-inner-blocks > .block-editor-block-list__layout {
+		display: flex;
+		align-items: center;
+
+		> * {
+			max-height: 60px;
+			margin: 6px;
+		}
+
+		img {
+			max-height: 60px;
+			width: auto;
+			max-width: 240px;
+		}
+	}
+
+	.orbiter-bg {
+		position: relative;
+		width: 60px;
+		height: 60px;
+		margin-right: 16px;
+	}
+
+	&.has-child-selected,
+	&.is-selected {
+		.block-editor-inner-blocks > .block-editor-block-list__layout > * {
+			max-height: none;
+		}
+	}
+}

src/red-orbiter/index.js

@@ -0,0 +1,38 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

src/red-orbiter/save.js

@@ -0,0 +1,45 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/packages/packages-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";
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/developers/block-api/block-edit-save/#save
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function save({ attributes }) {
+	return (
+		<li
+			{...useBlockProps.save({
+				className: "orbiter",
+			})}
+		>
+			<div
+				className="orbiter-bg"
+				style={{
+					backgroundColor: attributes.backgroundColor,
+				}}
+			/>
+			<div className="orbiter-content content-center">
+				<div className="feature">
+					<InnerBlocks.Content />
+				</div>
+			</div>
+		</li>
+	);
+}

src/red-orbiter/style.scss

@@ -0,0 +1,129 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-red-block-red-orbiter {
+	--duration__feature-hover: 0.3s;
+
+	.orbiter-bg {
+		position: absolute;
+		inset: 0;
+		border-radius: 50%;
+	}
+
+	.feature {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		text-align: center;
+
+		img {
+			width: 75%;
+			height: 75%;
+			object-fit: contain;
+		}
+
+		& > * {
+			position: absolute;
+			inset: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			margin: 0;
+
+			transition: opacity var(--duration__feature-hover);
+
+			&:nth-child(1) {
+				opacity: 1;
+			}
+
+			&:nth-child(2) {
+				opacity: 0;
+			}
+		}
+
+		&:hover {
+			& > * {
+				&:first-child {
+					opacity: 0;
+				}
+
+				&:last-child {
+					opacity: 1;
+				}
+			}
+		}
+	}
+}
+
+.orbiters.pulse {
+	--duration__pulse: 1.5s;
+
+	.orbiter:hover {
+		> .orbiter-bg {
+			animation-play-state: paused;
+		}
+	}
+
+	.orbiter {
+		> .orbiter-bg {
+			animation: pulse var(--duration__pulse) alternate ease-in-out infinite
+				running;
+		}
+
+		&:nth-child(2) > .orbiter-bg {
+			&::before {
+				animation-delay: 2s;
+			}
+		}
+
+		&:nth-child(3) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.4s;
+			}
+		}
+
+		&:nth-child(4) > .orbiter-bg {
+			&::before {
+				animation-delay: 1.5s;
+			}
+		}
+
+		&:nth-child(5) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.7s;
+			}
+		}
+
+		&:nth-child(6) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.2s;
+			}
+		}
+
+		&:nth-child(7) > .orbiter-bg {
+			&::before {
+				animation-delay: 1.1s;
+			}
+		}
+
+		&:nth-child(8) > .orbiter-bg {
+			&::before {
+				animation-delay: 0.4s;
+			}
+		}
+	}
+}
+
+@keyframes pulse {
+	from {
+		transform: scale(1);
+	}
+	to {
+		transform: scale(1.1);
+	}
+}