Merge branch 'develop' of github.com:BracketSpace/DoW-Starter-Theme into develop

Author: szaleq

.tools/utils/generate-theme-json.js

@@ -10,11 +10,13 @@ import { mapValues, pick, startCase } from 'lodash-es';
 import { loadConfig, saveConfig } from './config.js';
 
 const getColorPalette = async () =>
-	Object.entries(await loadConfig('colors')).map(([slug, color]) => ({
-		slug,
-		color,
-		name: startCase(slug),
-	}));
+	Object.entries(await loadConfig('colors'))
+		.filter(([slug]) => !slug.startsWith('_'))
+		.map(([slug, color]) => ({
+			slug,
+			color,
+			name: startCase(slug),
+		}));
 
 const getLayoutSettings = async () =>
 	mapValues(

config/app.php

@@ -5,6 +5,7 @@
 // phpcs:disable SlevomatCodingStandard.Namespaces.UseFromSameNamespace.UseFromSameNamespace
 
 use DoWStarterTheme\Common\{
+    Assets,
     Customizer,
     Helpers,
     Hooks,
@@ -38,6 +39,10 @@
         CommonIntegrations\ACF::class,
         CommonIntegrations\ACFBlockCreator::class,
 
+        // Assets
+        Assets\MainScript::class,
+        Assets\MainStyle::class,
+
         // Block Editor Integration
         CommonIntegrations\Editor\Editor::class,
 

src/assets/ts/blocks/responsiveSpacer/constants.ts

@@ -1,3 +1,3 @@
 export const MIN_SPACER_HEIGHT = 20;
-export const MAX_SPACER_HEIGHT = 500;
+export const MAX_SPACER_HEIGHT = 300;
 export const MAX_MOBILE_HEIGHT = 40;

src/assets/ts/blocks/responsiveSpacer/edit.tsx

@@ -1,21 +1,22 @@
 /**
  * External dependencies
  */
-import { FC } from 'react';
+import { FC, useEffect, useState } from 'react';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import {
 	TextControl,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
 	ToggleControl,
 } from '@wordpress/components';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -31,6 +32,13 @@ const Edit: FC<BlockEditProps> = ({
 	isSelected,
 	toggleSelection,
 }) => {
+	const [isResizing, setIsResizing] = useState(false);
+	const [_height, setHeight] = useState(height);
+
+	useEffect(() => {
+		setHeight(height);
+	}, [height]);
+
 	const updateTabletHeight = (value: number | undefined) =>
 		setAttributes({ tabletHeight: value });
 
@@ -54,44 +62,60 @@ const Edit: FC<BlockEditProps> = ({
 
 	return (
 		<>
-			<ResizableBox
-				className={classnames(
-					'block-library-spacer__resize-container',
-					className,
-					{
-						'is-selected': isSelected,
-					}
-				)}
-				size={{
-					height,
-					width: '100%',
-				}}
-				minHeight={MIN_SPACER_HEIGHT}
-				enable={{
-					top: false,
-					right: false,
-					bottom: true,
-					left: false,
-					topRight: false,
-					bottomRight: false,
-					bottomLeft: false,
-					topLeft: false,
-				}}
-				onResizeStart={() => toggleSelection && toggleSelection(false)}
-				onResizeStop={(event, direction, elt, delta) => {
-					if (toggleSelection) {
-						toggleSelection(true);
-					}
+			<View
+				{...useBlockProps({
+					style: {
+						height: _height,
+					},
+				})}
+			>
+				<ResizableBox
+					className={classnames(
+						'block-library-spacer__resize-container',
+						className,
+						{
+							'is-resizing': isResizing,
+							'is-selected': isSelected,
+						}
+					)}
+					minHeight={MIN_SPACER_HEIGHT}
+					enable={{
+						top: false,
+						right: false,
+						bottom: true,
+						left: false,
+						topRight: false,
+						bottomRight: false,
+						bottomLeft: false,
+						topLeft: false,
+					}}
+					onResizeStart={() => {
+						if (toggleSelection) {
+							toggleSelection(false);
+						}
+
+						setIsResizing(true);
+					}}
+					onResizeStop={(event, direction, elt) => {
+						if (toggleSelection) {
+							toggleSelection(true);
+						}
+
+						updateHeight(elt.clientHeight);
+
+						setIsResizing(false);
+					}}
+					onResize={(event, direction, elt) => {
+						if (!isResizing) {
+							setIsResizing(true);
+						}
 
-					const spacerHeight = Math.min(
-						height + delta.height,
-						MAX_SPACER_HEIGHT
-					);
-					updateHeight(spacerHeight);
-				}}
-				showHandle={isSelected}
-				children={undefined} // Fix TypeScript error due to invalid types
-			/>
+						setHeight(elt.clientHeight);
+					}}
+					showHandle={isSelected}
+					children={undefined} // Fix TypeScript error due to invalid types
+				/>
+			</View>
 			<InspectorControls>
 				<PanelBody title={__('Size settings')}>
 					<RangeControl

src/classes/Common/Assets/MainScript.php

@@ -0,0 +1,18 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoWStarterTheme\Common\Assets;
+
+class MainScript extends Script
+{
+    /**
+     * Enqueues asset.
+     *
+     * @action wp_enqueue_scripts
+     */
+    public function enqueueAsset(): void
+    {
+        $this->enqueue();
+    }
+}

src/classes/Common/Assets/MainStyle.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoWStarterTheme\Common\Assets;
+
+class MainStyle extends Style
+{
+    protected string $name = 'style';
+
+    /**
+     * Enqueues asset.
+     *
+     * @action wp_enqueue_scripts
+     */
+    public function enqueueAsset(): void
+    {
+        $this->enqueue();
+    }
+}

src/classes/Features/BlockSpacing/BlockSpacingHooks.php

@@ -4,6 +4,7 @@
 
 namespace DoWStarterTheme\Features\BlockSpacing;
 
+use DoWStarterTheme\Common\Assets\MainStyle;
 use DoWStarterTheme\Common\Contracts\Hookable;
 use DoWStarterTheme\Common\Helpers\CSSGenerator;
 use WP_Post;
@@ -17,9 +18,11 @@ class BlockSpacingHooks implements Hookable
      * Class constructor.
      *
      * @param BlockSpacing $blockSpacing Block spacing helper instance.
+     * @param MainStyle    $style        Main style asset instance.
      */
     public function __construct(
         private BlockSpacing $blockSpacing,
+        private MainStyle $style,
     ) {
     }
 
@@ -38,7 +41,7 @@ public function addStyles(): void
             return;
         }
 
-        wp_add_inline_style('dow-starter-theme-front-style', $styles);
+        wp_add_inline_style($this->style->getHandle(), $styles);
     }
 
     /**

src/classes/Features/ReusableContent/ReusableContentHooks.php

@@ -54,7 +54,7 @@ public function printStyles(): void
     public function contentSlotsField(array $field): array
     {
         if ($field['name'] === 'content_slot') {
-            $field['choices'] = $this->config;
+            $field['choices'] = $this->config->get('content-slots');
         }
 
         return $field;