Merge pull request #22 from eighteen73/feature/carousel-improvements

Feature/carousel improvements
eighteen73 · Sep 4, 2024 · 46548d1 · 46548d1
2 parents d236a2d + 1e00656
commit 46548d1
Show file tree

Hide file tree

Showing 8 changed files with 90 additions and 69 deletions.
diff --git a/dist/carousel/block.json b/dist/carousel/block.json
@@ -73,8 +73,13 @@
         false
       ]
     },
-    "allowedBlocks": {
-      "type": "array"
+    "allowedBlock": {
+      "type": "string",
+      "default": "pulsar/carousel-slide"
+    },
+    "disabledControls": {
+      "type": "boolean",
+      "default": false
     }
   },
   "usesContext": [

diff --git a/dist/carousel/index.asset.php b/dist/carousel/index.asset.php
@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '78471dc35de435e2208f');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => 'd00ff3f5faa94a8ac399');
diff --git a/dist/carousel/index.js b/dist/carousel/index.js
diff --git a/pulsar-blocks.php b/pulsar-blocks.php
@@ -4,7 +4,7 @@
  * Description:       A collection of blocks we use at eighteen73.
  * Requires at least: 6.3
  * Requires PHP:      7.4
- * Version:           0.6.2
+ * Version:           0.7.0
  * Author:            eighteen73
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html

diff --git a/src/carousel/block.json b/src/carousel/block.json
@@ -65,9 +65,14 @@
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
 		},
-    "allowedBlocks": {
-			"type": "array"
-		}
+    "allowedBlock": {
+			"type": "string",
+      "default": "pulsar/carousel-slide"
+		},
+    "disabledControls": {
+      "type": "boolean",
+      "default": false
+    }
   },
   "usesContext": [
     "isLinked"

diff --git a/src/carousel/components/inspector-controls/index.js b/src/carousel/components/inspector-controls/index.js
@@ -11,67 +11,73 @@ export default function CarouselInspectorControls({
 	attributes,
 	context,
 }) {
-	const { carouselOptions, advancedCarouselOptions, mergeOptions } =
-		attributes;
+	const {
+		carouselOptions,
+		advancedCarouselOptions,
+		mergeOptions,
+		disabledControls,
+	} = attributes;
 
 	const isDisabled = advancedCarouselOptions && !mergeOptions;
 
 	return (
-		<>
-			<InspectorControls>
-				<PanelBody title={__('Settings', 'pulsar-blocks')}>
-					<GlobalControls
-						onChange={onChange}
-						attributes={attributes}
-						context={context}
-						isDisabled={isDisabled}
-					></GlobalControls>
-				</PanelBody>
+		!disabledControls && (
+			<>
+				<InspectorControls>
+					<PanelBody title={__('Settings', 'pulsar-blocks')}>
+						<GlobalControls
+							onChange={onChange}
+							attributes={attributes}
+							context={context}
+							isDisabled={isDisabled}
+						></GlobalControls>
+					</PanelBody>
 
-				<PanelBody
-					title={__('Desktop settings', 'pulsar-blocks')}
-					initialOpen={true}
-				>
-					<BreakpointControls
-						onChange={onChange}
-						carouselOptions={carouselOptions}
-						size={false}
-						isDisabled={isDisabled}
-					/>
-				</PanelBody>
+					<PanelBody
+						title={__('Desktop settings', 'pulsar-blocks')}
+						initialOpen={true}
+					>
+						<BreakpointControls
+							onChange={onChange}
+							carouselOptions={carouselOptions}
+							size={false}
+							isDisabled={isDisabled}
+						/>
+					</PanelBody>
 
-				<PanelBody
-					title={__('Tablet settings', 'pulsar-blocks')}
-					initialOpen={false}
-				>
-					<BreakpointControls
-						onChange={onChange}
-						carouselOptions={carouselOptions}
-						size={1024}
-						isDisabled={isDisabled}
-					/>
-				</PanelBody>
+					<PanelBody
+						title={__('Tablet settings', 'pulsar-blocks')}
+						initialOpen={false}
+					>
+						<BreakpointControls
+							onChange={onChange}
+							carouselOptions={carouselOptions}
+							size={1024}
+							isDisabled={isDisabled}
+						/>
+					</PanelBody>
+
+					<PanelBody
+						title={__('Mobile settings', 'pulsar-blocks')}
+						initialOpen={false}
+					>
+						<BreakpointControls
+							onChange={onChange}
+							carouselOptions={carouselOptions}
+							size={640}
+							isDisabled={isDisabled}
+						/>
+					</PanelBody>
+				</InspectorControls>
 
-				<PanelBody
-					title={__('Mobile settings', 'pulsar-blocks')}
-					initialOpen={false}
-				>
-					<BreakpointControls
+				<InspectorControls group="advanced">
+					<AdvancedControls
 						onChange={onChange}
-						carouselOptions={carouselOptions}
-						size={640}
-						isDisabled={isDisabled}
+						advancedCarouselOptions={advancedCarouselOptions}
+						mergeOptions={mergeOptions}
 					/>
-				</PanelBody>
-			</InspectorControls>
-
-			<InspectorControls group="advanced">
-				<AdvancedControls
-					onChange={onChange}
-					advancedCarouselOptions={advancedCarouselOptions}
-					mergeOptions={mergeOptions}
-				/>
-			</InspectorControls>
-		</>
+				</InspectorControls>
+			</>
+		)
 	);
 }
diff --git a/src/carousel/components/placeholder.js b/src/carousel/components/placeholder.js
@@ -3,7 +3,11 @@ import { Placeholder } from '@wordpress/components';
 import SingleBlockTypeAppender from '../../components/single-block-type-appender';
 import { Carousel as Icon } from '../../components/icons';
 
-export default function CarouselPlaceholder({ clientId, children }) {
+export default function CarouselPlaceholder({
+	allowedBlock,
+	clientId,
+	children,
+}) {
 	return (
 		<Placeholder
 			icon={Icon}
@@ -18,9 +22,8 @@ export default function CarouselPlaceholder({ clientId, children }) {
 		>
 			<SingleBlockTypeAppender
 				onClickAfter={() => {}}
-				variant="primary"
-				text={__('Add slide', 'pulsar-blocks')}
-				allowedBlock="pulsar/carousel-slide"
+				variant="secondary"
+				allowedBlock={allowedBlock}
 				clientId={clientId}
 				isEnabled={true}
 				style={{ alignSelf: 'center' }}

diff --git a/src/carousel/edit.js b/src/carousel/edit.js
@@ -45,7 +45,7 @@ export default function Edit({
 		mergeOptions,
 		ariaLabel,
 		hasTrack,
-		allowedBlocks,
+		allowedBlock,
 		template,
 		templateLock,
 	} = attributes;
@@ -54,7 +54,6 @@ export default function Edit({
 	const blockProps = useBlockProps();
 	const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {
 		orientation: 'horizontal',
-		allowedBlocks,
 		template,
 		templateLock,
 		renderAppender: false,
@@ -186,7 +185,10 @@ export default function Edit({
 
 			<div {...innerBlocksProps}>
 				{!isReady || innerBlocks.length === 0 ? (
-					<CarouselPlaceholder clientId={clientId}>
+					<CarouselPlaceholder
+						allowedBlock={allowedBlock}
+						clientId={clientId}
+					>
 						{children}
 					</CarouselPlaceholder>
 				) : (
@@ -229,7 +231,7 @@ export default function Edit({
 					}}
 					variant="secondary"
 					text={__('Add slide', 'pulsar-blocks')}
-					allowedBlock="pulsar/carousel-slide"
+					allowedBlock={allowedBlock}
 					style={{ width: '100%', justifyContent: 'center' }}
 					clientId={clientId}
 					isEnabled={