Add starscape block (#18)

Create content with stars in motion.

- Star quantity
- Star rotation speed
- Background gradient
- Max width & height
- Block alignment
- Text alignment

blocks/starscape/editor.scss

@@ -0,0 +1,6 @@
+/* Editor styles */
+.wp-block-a8c-starscape-resolution-control {
+    .components-base-control__label {
+        width: 100%;
+    }
+}

blocks/starscape/index.php

@@ -0,0 +1,9 @@
+<?php
+
+add_action( 'init', function() {
+	register_block_type( 'a8c/starscape', [
+		'editor_script' => 'wpcom-blocks',
+		'style' => 'wpcom-blocks',
+		'editor_style' => 'wpcom-blocks-editor',
+	] );
+} );

blocks/starscape/src/colorGradientOptions.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	gradients: [
+		{
+			name: __( 'Midnight' ),
+			gradient: '#00000c',
+		},
+		{
+			name: __( 'Astronomical Dawn' ),
+			gradient: 'linear-gradient(141deg, #020111 60%,#20202c 100%)',
+		},
+		{
+			name: __( 'Nautical Dawn' ),
+			gradient: 'linear-gradient(141deg, #020111 10%,#3a3a52 100%)',
+		},
+		{
+			name: __( 'Civil Dawn' ),
+			gradient: 'linear-gradient(141deg, #20202c 0%,#515175 100%)',
+		},
+		{
+			name: __( 'Sunrise' ),
+			gradient: 'linear-gradient(141deg, #20202c 0%,#6f71aa 80%,#8a76ab 100%)',
+		},
+		{
+			name: __( 'Morning' ),
+			gradient: 'linear-gradient(141deg, #40405c 0%,#7072ab 50%,#cd82a0 100%)',
+		},
+		{
+			name: __( 'Atmosphere' ),
+			gradient: 'linear-gradient(180deg, #00000c 65%,#1b2741 85%,#2e4473 95%,#4463a3 100%)',
+		},
+		{
+			name: __( 'Astronomical Dusk' ),
+			gradient: 'linear-gradient(141deg, #0b050b 60%,#27171c 100%)',
+		},
+		{
+			name: __( 'Nautical Dusk' ),
+			gradient: 'linear-gradient(141deg, #0b050b 10%,#4c2d2f 100%)',
+		},
+		{
+			name: __( 'Civil Dusk' ),
+			gradient: 'linear-gradient(141deg, #130f13 0%,#2f2122 50%,#6c353a 100%)',
+		},
+		{
+			name: __( 'Sunset' ),
+			gradient: 'linear-gradient(141deg, #1e1818 0%,#2f2122 30%,#6c353a 70%,#cf804b 100%)',
+		},
+		{
+			name: __( 'Evening' ),
+			gradient: 'linear-gradient(141deg, #2f2122 10%,#6c353a 40%,#cf804b 80%,#ffeb59 100%)',
+		},
+	],
+	colors: [
+		{
+			name: __( 'White' ),
+			color: '#ffffff',
+		},
+	],
+};

blocks/starscape/src/edit.js

@@ -0,0 +1,160 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentToolbar,
+	BlockControls,
+	InspectorControls,
+	RichText,
+	withColors,
+	__experimentalPanelColorGradientSettings as PanelColorGradientSettings,
+} from '@wordpress/block-editor';
+import {
+	BaseControl,
+	PanelBody,
+	RangeControl,
+} from '@wordpress/components';
+import { compose, withInstanceId } from '@wordpress/compose';
+import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { genStars, genAnimations } from './utils';
+import colorGradientOptions from './colorGradientOptions';
+import Starscape from './starscape';
+
+const Edit = ( {
+	instanceId,
+	textColor,
+	setTextColor,
+	attributes,
+	setAttributes,
+	className,
+} ) => {
+	const themeColors = useSelect(
+		( select ) => select( 'core/block-editor' ).getSettings().colors
+	);
+	return (
+		<>
+			<BlockControls>
+				<AlignmentToolbar
+					value={ attributes.textAlign }
+					onChange={ ( textAlign ) => setAttributes( { textAlign } ) }
+				/>
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Stars' ) } initialOpen={ false }>
+					<RangeControl
+						label={ __( 'Density' ) }
+						value={ attributes.density }
+						onChange={ ( density ) => setAttributes( {
+							density,
+							starStyles: genStars( { ...attributes, density } ),
+						} ) }
+						min={ 1 }
+						max={ 100 }
+					/>
+					<RangeControl
+						label={ __( 'Speed' ) }
+						value={ attributes.speed }
+						onChange={ ( speed ) => setAttributes( {
+							speed,
+							animationStyles: genAnimations( { speed } ),
+						} ) }
+						min={ 1 }
+						max={ 100 }
+					/>
+				</PanelBody>
+				<PanelColorGradientSettings
+					title={ __( 'Color' ) }
+					colors={ [ ...themeColors, ...colorGradientOptions.colors ] }
+					gradients={ colorGradientOptions.gradients }
+					settings={ [
+						{
+							label: __( 'Background' ),
+							gradientValue: attributes.background,
+							onGradientChange: ( background ) => setAttributes( { background } ),
+						},
+						{
+							label: __( 'Text' ),
+							colorValue: textColor.color,
+							onColorChange: setTextColor,
+						},
+					] }
+				/>
+				<PanelBody title={ __( 'Dimensions' ) } initialOpen={ false }>
+					<p>{ __( 'Control the area of stars you want. Smaller values have better performance, but blocks larger than the area specified will not be completely covered.' ) }</p>
+					<BaseControl
+						className="wp-block-a8c-starscape-resolution-control"
+						id={ `wp-block-a8c-starscape-width-control-${ instanceId }` }
+						label={ __( 'Max Width' ) }
+					>
+						<input
+							id={ `wp-block-a8c-starscape-width-control-${ instanceId }` }
+							type="number"
+							min="0"
+							value={ attributes.maxWidth }
+							onChange={ ( ev ) => {
+								const maxWidth = parseInt( ev.target.value, 10 );
+								setAttributes( {
+									maxWidth,
+									starStyles: genStars( { ...attributes, maxWidth } ),
+								} );
+							} }
+						/>
+					</BaseControl>
+					<BaseControl
+						className="wp-block-a8c-starscape-resolution-control"
+						id={ `wp-block-a8c-starscape-height-control-${ instanceId }` }
+						label={ __( 'Max Height' ) }
+					>
+						<input
+							id={ `wp-block-a8c-starscape-height-control-${ instanceId }` }
+							type="number"
+							min="0"
+							value={ attributes.maxHeight }
+							onChange={ ( ev ) => {
+								const maxHeight = parseInt( ev.target.value, 10 );
+								setAttributes( {
+									maxHeight,
+									starStyles: genStars( { ...attributes, maxHeight } ),
+								} );
+							} }
+						/>
+					</BaseControl>
+				</PanelBody>
+			</InspectorControls>
+			<Starscape
+				className={ className }
+				starStyles={ attributes.starStyles }
+				animationStyles={ attributes.animationStyles }
+				background={ attributes.background }
+			>
+				<RichText
+					tagName="div"
+					className={ classnames(
+						'wp-block-a8c-starscape__heading',
+						textColor.class,
+						attributes.textAlign && `has-text-align-${ attributes.textAlign }`
+					) }
+					style={ { color: textColor.color } }
+					value={ attributes.heading }
+					placeholder={ __( 'Heading' ) }
+					onChange={ ( heading ) => setAttributes( { heading } ) }
+				/>
+			</Starscape>
+		</>
+	);
+};
+
+export default compose( [
+	withInstanceId,
+	withColors( 'textColor' ),
+] )( Edit );

blocks/starscape/src/icon.js

@@ -0,0 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+const StarsIcon = ( props ) => {
+	return (
+		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" { ...props } >
+			<Path d="M10.9464 9.8369L9.04878 4L7.14872 9.84433H1L5.97442 13.4563L4.07436 19.3007L9.04878 15.6887L10.9488 14.32L12.1178 13.4603L10.2265 19.2812L15.1916 15.6738L20.1568 19.2812L18.2603 13.4443L23.2254 9.8369H17.0881L15.1916 4L13.2951 9.8369H10.9464Z" />
+		</SVG>
+	);
+};
+
+export default StarsIcon;

blocks/starscape/src/index.js

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import StarsIcon from './icon';
+import Edit from './edit';
+import Save from './save';
+
+import generated from './generated.json';
+
+// Generates the default value saved in generated.json
+//
+// import { genAnimations, genStars } from './utils';
+// window.generate = () => JSON.stringify(
+// 	{
+// 		starStyles: genStars( { density: 20, maxWidth: 1920, maxHeight: 1080 } ),
+// 		animationStyles: genAnimations( { speed: 20 } ),
+// 	},
+// 	null,
+// 	'\t'
+// );
+
+export function registerBlock() {
+	registerBlockType( 'a8c/starscape', {
+		title: __( 'Starscape' ),
+		description: __( 'Create content with stars in motion.' ),
+		icon: <StarsIcon />,
+		category: 'widgets',
+		supports: {
+			html: false,
+			align: true,
+		},
+		attributes: {
+			align: {
+				type: 'string',
+				default: 'full',
+			},
+			textAlign: {
+				type: 'string',
+				default: 'center',
+			},
+			density: {
+				type: 'int',
+				default: 20,
+			},
+			speed: {
+				type: 'int',
+				default: 20,
+			},
+			maxWidth: {
+				type: 'int',
+				default: 1920,
+			},
+			maxHeight: {
+				type: 'int',
+				default: 1080,
+			},
+			starStyles: {
+				type: 'array',
+				default: generated.starStyles,
+			},
+			animationStyles: {
+				type: 'array',
+				default: generated.animationStyles,
+			},
+			heading: {
+				type: 'string',
+			},
+			textColor: {
+				type: 'string',
+			},
+			customTextColor: {
+				type: 'string',
+				default: '#ffffff',
+			},
+			background: {
+				type: 'string',
+				default: '#00000c',
+			},
+		},
+		edit: ( props ) => <Edit { ...props } />,
+		save: ( props ) => <Save { ...props } />,
+	} );
+}

blocks/starscape/src/save.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { RichText, getColorClassName } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Starscape from './starscape';
+
+const Save = ( { attributes, className } ) => {
+	const textColorClass = getColorClassName( 'color', attributes.textColor );
+
+	return (
+		<Starscape
+			className={ className }
+			starStyles={ attributes.starStyles }
+			animationStyles={ attributes.animationStyles }
+			background={ attributes.background }
+		>
+			<RichText.Content
+				tagName="div"
+				className={ classnames(
+					'wp-block-a8c-starscape__heading',
+					{ [ `align${ attributes.align }` ]: attributes.align },
+					{ [ `has-text-align-${ attributes.textAlign }` ]: attributes.textAlign },
+					textColorClass
+				) }
+				style={ { color: textColorClass ? undefined : attributes.customTextColor } }
+				value={ attributes.heading }
+			/>
+		</Starscape>
+	);
+};
+
+export default Save;