FEATURES Handling block extra options

plugins/dynamiques-blocks/src/dernieres-dynamiques/block.json

@@ -9,7 +9,11 @@
 	"description": "Example block scaffolded with Create Block tool.",
 	"example": {},
 	"supports": {
-		"html": false
+		"html": false,
+		"color": {
+			"background": true,
+			"text": true
+		}
 	},
 	"textdomain": "dernieres-dynamiques",
 	"editorScript": "file:./index.js",
@@ -21,6 +25,10 @@
 		"displayType": {
 			"type": "string",
 			"default": "grid"
+		},
+		"showTableOfContents": {
+			"type": "boolean",
+			"default": true
 		}
 	}
 }

plugins/dynamiques-blocks/src/dernieres-dynamiques/edit.js

@@ -11,12 +11,16 @@ import "./editor.scss";
 import ServerSideRender from "@wordpress/server-side-render";
 
 export default function Edit({ attributes, setAttributes }) {
-	const { displayType } = attributes;
+	const { displayType, showTableOfContents = true } = attributes;
 
 	function onDisplayTypeChange(value) {
 		setAttributes({ displayType: value });
 	}
 
+	function onShowTableOfContentsChange(value) {
+		setAttributes({ showTableOfContents: !showTableOfContents });
+	}
+
 	return (
 		<>
 			<InspectorControls>
@@ -31,6 +35,11 @@ export default function Edit({ attributes, setAttributes }) {
 						<ToggleGroupControlOption label="Slider" value="slider" />
 						<ToggleGroupControlOption label="Grille" value="grid" />
 					</ToggleGroupControl>
+					<CheckboxControl
+						label="Afficher la table des matières"
+						checked={showTableOfContents}
+						onChange={onShowTableOfContentsChange}
+					/>
 				</PanelBody>
 			</InspectorControls>
 			<div {...useBlockProps({ className: "alignfull" })}>

plugins/dynamiques-blocks/src/dernieres-dynamiques/render.php

@@ -1,6 +1,13 @@
 <?php
 $displayType = $attributes['displayType'] ?? 'grid';
 $variantLocation = $attributes['variantLocation'] ?? 'carhop';
+$showTableOfContents = $attributes['showTableOfContents'] ?? true;
+$backgroundColor = $attributes['backgroundColor'] ?? null;
+$backgroundColorHex = get_color_hex_from_slug($backgroundColor) ?? null;
+
+$hasLightBackground = is_color_light($backgroundColorHex);
+$backgroundColorClass = $hasLightBackground ? 'block-dernieres-dynamiques--has-light-bg' : 'block-dernieres-dynamiques--has-dark-bg';
+
 
 $current_blog_id = get_current_blog_id();
 switch_to_blog(2);
@@ -23,7 +30,7 @@ $issue_related_articles =  get_field('articles', $last_issue->ID);
 ?>
 
 
-<section class="block-dernieres-dynamiques content-section block-dernieres-dynamiques--<?php echo $variantLocation; ?> alignfull">
+<section <?php echo get_block_wrapper_attributes(array('class' => 'block-dernieres-dynamiques content-section block-dernieres-dynamiques--' . $variantLocation . ' alignfull ' . $backgroundColorClass)); ?>>
 	<div class="block-dernieres-dynamiques__inner">
 		<div class="block-dernieres-dynamiques__header">
 			<h2 class="block-title">
@@ -84,6 +91,8 @@ $issue_related_articles =  get_field('articles', $last_issue->ID);
 			</div>
 		</div>
 
+		<?php if ($showTableOfContents) : ?>
+
 			<div class="related-articles">
 				<h3 class="related-articles__title">
 					Table des matières
@@ -157,7 +166,7 @@ $issue_related_articles =  get_field('articles', $last_issue->ID);
 
 
 			</div>
-
+		<?php endif; ?>
 
 	</div>
 </section>