diff --git a/plugins/carhop-blocks/src/tab-group/block.json b/plugins/carhop-blocks/src/tab-group/block.json new file mode 100644 index 0000000..1a8dfff --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/block.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "carhop-blocks/tab-group", + "version": "0.1.0", + "title": "Tab Group", + "category": "carhop-blocks", + "icon": "smiley", + "description": "Tab Group pour la mise en forme supérieure d'éléments de contenu", + "example": {}, + "supports": { + "html": false, + "color": { + "text": true, + "background": false, + "link": false + } + }, + "textdomain": "tab-group", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js", + "render": "file:./render.php" +} \ No newline at end of file diff --git a/plugins/carhop-blocks/src/tab-group/edit.js b/plugins/carhop-blocks/src/tab-group/edit.js new file mode 100644 index 0000000..a04c442 --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/edit.js @@ -0,0 +1,54 @@ +import { __ } from "@wordpress/i18n"; +import { useBlockProps, InnerBlocks } from "@wordpress/block-editor"; +import { useSelect } from "@wordpress/data"; +import "./editor.scss"; + +export default function Edit({ attributes, setAttributes, clientId }) { + const blockProps = useBlockProps({ + className: "tab-group", + }); + + const tabs = useSelect( + (select) => { + const block = select("core/block-editor").getBlock(clientId); + if (!block?.innerBlocks) return []; + return block.innerBlocks.map((innerBlock, index) => ({ + id: `tab-${index + 1}`, + panelId: `tabpanel-${index + 1}`, + title: innerBlock.attributes?.title || __("Sans titre", "tab-group"), + iconUrl: innerBlock.attributes?.iconUrl || "", + })); + }, + [clientId], + ); + + return ( +
+
+
+ {tabs.map((tab, index) => ( + + ))} +
+
+ +
+ ); +} diff --git a/plugins/carhop-blocks/src/tab-group/editor.scss b/plugins/carhop-blocks/src/tab-group/editor.scss new file mode 100644 index 0000000..42e1d80 --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/editor.scss @@ -0,0 +1,9 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-chapo { + border: 1px dotted #f00; +} diff --git a/plugins/carhop-blocks/src/tab-group/index.js b/plugins/carhop-blocks/src/tab-group/index.js new file mode 100644 index 0000000..f7e73bf --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/index.js @@ -0,0 +1,26 @@ +import { registerBlockType } from "@wordpress/blocks"; +import "./style.scss"; + +import Edit from "./edit"; +import save from "./save"; +import metadata from "./block.json"; + +registerBlockType(metadata.name, { + icon: { + src: ( + + + + ), + }, + edit: Edit, + save, +}); diff --git a/plugins/carhop-blocks/src/tab-group/render.php b/plugins/carhop-blocks/src/tab-group/render.php new file mode 100644 index 0000000..1cfaabc --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/render.php @@ -0,0 +1,48 @@ + 'tab-group']); +$inner_blocks = $block->parsed_block['innerBlocks'] ?? []; + +// Extraire les titres et icônes des blocs tab pour les boutons +$tabs = array_map(function ($inner_block) { + return [ + 'title' => $inner_block['attrs']['title'] ?? __('Sans titre', 'tab-group'), + 'iconUrl' => $inner_block['attrs']['iconUrl'] ?? '', + ]; +}, array_filter($inner_blocks, fn($b) => ($b['blockName'] ?? '') === 'carhop-blocks/tab')); + + + +?> + + + + + +
> +
+
+ $tab) : ?> + + +
+
+
+ $inner_block) : ?> +
+ +
+ +
+
\ No newline at end of file diff --git a/plugins/carhop-blocks/src/tab-group/save.js b/plugins/carhop-blocks/src/tab-group/save.js new file mode 100644 index 0000000..8c206f3 --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/save.js @@ -0,0 +1,6 @@ +import { useBlockProps } from "@wordpress/block-editor"; +import { InnerBlocks } from "@wordpress/block-editor"; + +export default function save() { + return ; +} diff --git a/plugins/carhop-blocks/src/tab-group/style.scss b/plugins/carhop-blocks/src/tab-group/style.scss new file mode 100644 index 0000000..90a4931 --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/style.scss @@ -0,0 +1,36 @@ +.tab__title { + margin-bottom: 2rem; +} + +.tablist { + button { + gap: 10px !important; + } + button[aria-selected="false"] { + img { + filter: grayscale(100%); + } + } +} + +.tab-group__toolbar { + margin-bottom: 2rem; +} + +.tablist .tab__icon { + --iconSize: 1.5rem; + + width: var(--iconSize); + height: var(--iconSize); + // background: blue; + object-fit: contain; + object-position: center; + vertical-align: middle; +} + +.wp-block-carhop-blocks-tab[data-active="false"] { + display: none; +} +.wp-block-carhop-blocks-tab[data-active="true"] { + display: block !important; +} diff --git a/plugins/carhop-blocks/src/tab-group/view.js b/plugins/carhop-blocks/src/tab-group/view.js new file mode 100644 index 0000000..9f696b2 --- /dev/null +++ b/plugins/carhop-blocks/src/tab-group/view.js @@ -0,0 +1,34 @@ +document.addEventListener("DOMContentLoaded", () => { + document.querySelectorAll(".tab-group").forEach((TabGroup) => { + const toolbar = TabGroup.querySelector(".tab-group__toolbar"); + const tabs = toolbar.querySelectorAll("button"); + + function setActiveTab(currentTab) { + tabs.forEach((tab) => { + tab.setAttribute("aria-selected", "false"); + }); + currentTab.setAttribute("aria-selected", "true"); + } + function setActiveTabPanel(currentTabButton) { + const currentTabPanelId = currentTabButton.getAttribute("aria-controls"); + const currentTabPanel = TabGroup.querySelector(`#${currentTabPanelId}`); + console.log(currentTabPanel); + hideAllTabPanels(); + currentTabPanel.setAttribute("data-active", "true"); + } + function hideAllTabPanels() { + const tabPanels = TabGroup.querySelectorAll( + ".tab-group__innerblocks .tab", + ); + tabPanels.forEach((tabPanel) => { + tabPanel.setAttribute("data-active", "false"); + }); + } + tabs.forEach((tab) => { + tab.addEventListener("click", () => { + setActiveTab(tab); + setActiveTabPanel(tab); + }); + }); + }); +}); diff --git a/plugins/carhop-blocks/src/tab/block.json b/plugins/carhop-blocks/src/tab/block.json new file mode 100644 index 0000000..289df48 --- /dev/null +++ b/plugins/carhop-blocks/src/tab/block.json @@ -0,0 +1,30 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 3, + "name": "carhop-blocks/tab", + "version": "0.1.0", + "title": "Tab", + "category": "carhop-blocks", + "icon": "smiley", + "description": "Tab pour la mise en forme supérieure d'éléments de contenu", + "example": {}, + "supports": { + "html": false, + "color": { + "text": true, + "background": false, + "link": false + } + }, + "textdomain": "tab", + "editorScript": "file:./index.js", + "editorStyle": "file:./index.css", + "style": "file:./style-index.css", + "viewScript": "file:./view.js", + "attributes": { + "title": { + "type": "string", + "default": "" + } + } +} \ No newline at end of file diff --git a/plugins/carhop-blocks/src/tab/edit.js b/plugins/carhop-blocks/src/tab/edit.js new file mode 100644 index 0000000..6561cfa --- /dev/null +++ b/plugins/carhop-blocks/src/tab/edit.js @@ -0,0 +1,109 @@ +import { __ } from "@wordpress/i18n"; +import { + useBlockProps, + RichText, + InnerBlocks, + InspectorControls, + MediaUpload, + MediaUploadCheck, +} from "@wordpress/block-editor"; +import "./editor.scss"; +import { PanelBody, TextControl, Button } from "@wordpress/components"; + +export default function Edit({ attributes, setAttributes }) { + const { title, iconId, iconUrl } = attributes; + + const blockProps = useBlockProps({ + className: "block-chapo", + }); + + return ( + <> + + + setAttributes({ title: value })} + /> + + + + + setAttributes({ + iconId: media.id, + iconUrl: media.url, + }) + } + allowedTypes={["image"]} + value={iconId} + render={({ open }) => ( + <> + {iconUrl ? ( +
+ +
+ + +
+
+ ) : ( + + )} + + )} + /> + + + +
+ setAttributes({ title: value })} + /> + +
+ + ); +} diff --git a/plugins/carhop-blocks/src/tab/editor.scss b/plugins/carhop-blocks/src/tab/editor.scss new file mode 100644 index 0000000..42e1d80 --- /dev/null +++ b/plugins/carhop-blocks/src/tab/editor.scss @@ -0,0 +1,9 @@ +/** + * The following styles get applied inside the editor only. + * + * Replace them with your own styles or remove the file completely. + */ + +.wp-block-create-block-chapo { + border: 1px dotted #f00; +} diff --git a/plugins/carhop-blocks/src/tab/index.js b/plugins/carhop-blocks/src/tab/index.js new file mode 100644 index 0000000..e0eebbd --- /dev/null +++ b/plugins/carhop-blocks/src/tab/index.js @@ -0,0 +1,26 @@ +import { registerBlockType } from "@wordpress/blocks"; +import "./style.scss"; + +import Edit from "./edit"; +import save from "./save"; +import metadata from "./block.json"; + +registerBlockType(metadata.name, { + icon: { + src: ( + + + + ), + }, + edit: Edit, + save, +}); diff --git a/plugins/carhop-blocks/src/tab/save.js b/plugins/carhop-blocks/src/tab/save.js new file mode 100644 index 0000000..ad3e61e --- /dev/null +++ b/plugins/carhop-blocks/src/tab/save.js @@ -0,0 +1,17 @@ +import { useBlockProps } from "@wordpress/block-editor"; +import { InnerBlocks } from "@wordpress/block-editor"; +import { RichText } from "@wordpress/block-editor"; + +export default function save({ attributes }) { + const { title } = attributes; + const blockProps = useBlockProps.save({ + className: "tab", + }); + + return ( + <> + + + + ); +} diff --git a/plugins/carhop-blocks/src/tab/style.scss b/plugins/carhop-blocks/src/tab/style.scss new file mode 100644 index 0000000..39c7cda --- /dev/null +++ b/plugins/carhop-blocks/src/tab/style.scss @@ -0,0 +1,12 @@ +/** + * 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-create-block-chapo { + background-color: #21759b; + color: #fff; + padding: 2px; +} diff --git a/plugins/carhop-blocks/src/tab/view.js b/plugins/carhop-blocks/src/tab/view.js new file mode 100644 index 0000000..0146b12 --- /dev/null +++ b/plugins/carhop-blocks/src/tab/view.js @@ -0,0 +1,25 @@ +/** + * Use this file for JavaScript code that you want to run in the front-end + * on posts/pages that contain this block. + * + * When this file is defined as the value of the `viewScript` property + * in `block.json` it will be enqueued on the front end of the site. + * + * Example: + * + * ```js + * { + * "viewScript": "file:./view.js" + * } + * ``` + * + * If you're not making any changes to this file because your project doesn't need any + * JavaScript running in the front-end, then you should delete this file and remove + * the `viewScript` property from `block.json`. + * + * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script + */ + +/* eslint-disable no-console */ +console.log( 'Hello World! (from create-block-chapo block)' ); +/* eslint-enable no-console */