Antoine/carhop__plugins__PROD-DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Developping the complete component for press ressources

Browse Source
This commit is contained in:
Antoine M 2026-02-04 11:14:57 +01:00
parent 4bf7040ce4
commit 8cc1a8a8a6
8 changed files with 245 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/carhop-blocks/src/press-ressources/block.json Normal file
View File

@ -0,0 +1,20 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "carhop-blocks/press-ressources",
"version": "0.1.0",
"title": "Ressources pour la presse",
"category": "carhop-blocks",
"icon": "smiley",
"description": "Ressources pour la presse",
"example": {},
"supports": {
"html": false
},
"textdomain": "carhop-blocks",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"viewScript": "file:./view.js"
}

12
plugins/carhop-blocks/src/press-ressources/edit.js Normal file
View File

@ -0,0 +1,12 @@
import { __ } from "@wordpress/i18n";
import { useBlockProps } from "@wordpress/block-editor";
import "./editor.scss";
import ServerSideRender from "@wordpress/server-side-render";
export default function Edit() {
return (
<div {...useBlockProps({ className: "alignwide" })}>
<ServerSideRender block="carhop-blocks/press-ressources" />
</div>
);
}

9
plugins/carhop-blocks/src/press-ressources/editor.scss Normal file
View File

@ -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;
}

16
plugins/carhop-blocks/src/press-ressources/index.js Normal file
View File

@ -0,0 +1,16 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import metadata from "./block.json";
registerBlockType(metadata.name, {
icon: {
src: (
<svg width="32" height="32" viewBox="0 0 32 32">
<path d="M16 24L8 16L16 8L24 16L16 24Z" />
</svg>
),
},
edit: Edit,
});

0
plugins/carhop-blocks/src/press-ressources/press-toolbar.php Normal file
View File

147
plugins/carhop-blocks/src/press-ressources/render.php Normal file
View File

@ -0,0 +1,147 @@
<?php
$wrapper_attributes = get_block_wrapper_attributes(['class' => 'press-ressources alignwide']);
$contact_persons = get_field('contact_persons', 'option');
$ressources_graphiques = get_field('ressources_graphiques', 'option');
?>
<section <?php echo $wrapper_attributes; ?>>
<div class="contact-persons">
<div class="contact-persons__content">
<ul class="contact-persons__list">
<?php foreach ($contact_persons as $person) : ?>
<?php get_template_part('template-parts/cards/author-card', '', array('member_id' => $person->ID)); ?>
<?php endforeach; ?>
</ul>
</div>
</div>
<div id="press-toolbar" class="press-toolbar">
<div role="tablist" aria-labelledby="tablist-1" class="tablist">
<button id="tab-1" type="button" role="tab" aria-selected="true" aria-controls="tabpanel-1" data-tab="communiques">
<img class="icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-plan.svg" alt="">
<span>Communiqués de presse</span>
</button>
<button id="tab-2" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1" data-tab="ressources-graphiques">
<img class="icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-plume.svg" alt="">
<span>Ressources graphiques</span>
</button>
<button id="tab-3" type="button" role="tab" aria-selected="false" aria-controls="tabpanel-3" tabindex="-1" data-tab="presse-reviews">
<img class="icon" src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-note-biographique.svg" alt="">
<span>Ce que la presse dit de nous</span>
</button>
</div>
</div>
<div class="ressources-tabs-grid ressources-grid-content-wrapper" data-active-tab="communiques">
<div class="communiques-de-presse">
<?php
$communiques_de_presse = get_posts(array(
'post_type' => 'communique-presse',
'posts_per_page' => 10,
));
?>
<h2 class="communiques-de-presse__title">Nos Communiqués de presse</h2>
<div class="communiques-de-presse__list">
<?php foreach ($communiques_de_presse as $communique) : ?>
<div class="communique-card">
<h3><?php echo get_the_title($communique->ID); ?></h3>
<p><?php echo get_the_date('d F Y', $communique->ID); ?></p>
<a href="<?php echo get_permalink($communique->ID); ?>" class="button">Voir le communiqué</a>
</div>
<?php endforeach; ?>
</div>
</div>
<div class="ressources-graphiques">
<h2 class="ressources-graphiques__title">Ressources</h2>
<ul class="contact-datas">
<li class="contact-datas__item">
<h3>contact direct</h3>
<a href="mailto:info@carhop.be">info@carhop.be</a>
<a href="tel:+3267485861">+32 67 48 58 61</a>
</li>
<li class="contact-datas__item">
<h3>Adresse postale</h3>
<p>Avenue de la Houssière, 80
<br>7090 Braine-le-Comte
</p>
</li>
<li class="contact-datas__item socials">
<h3>Réseaux sociaux</h3>
<?php echo carhop_display_social_links(); ?>
</li>
</ul>
<h2 class="ressources-graphiques__title is-style-stroked-after">Ressources graphiques</h2>
<?php if (isset($ressources_graphiques) && !empty($ressources_graphiques)) : ?>
<ul class="download-list">
<div class="list-heading" aria-hidden="true">
<span>Type de fichier</span>
<span>Format</span>
<span>Poids</span>
</div>
<?php foreach ($ressources_graphiques as $ressource) : ?>
<?php if (!isset($ressource['file']) || empty($ressource['file'])) continue; ?>
<li class="download-list__item">
<a href="<?php echo esc_url($ressource['file']['url']); ?>" download>
<span class="file-name"><?php echo $ressource['file']['title']; ?></span>
<span class="file-format"><?php echo $ressource['file']['subtype']; ?></span>
<span class="file-size"><?php echo size_format($ressource['file']['filesize']); ?></span>
<span class="download-link">Télécharger</span>
</a>
</li>
<?php endforeach; ?>
<li class="download-list__item">
<a href="/assets/carhop-logo-couleurs.jpg" download>
<span class="file-name">Logo CARHOP (couleurs) en JPG</span>
<span class="file-format">JPG</span>
<span class="file-size">124 ko</span>
<span class="download-link">Télécharger</span>
</a>
</li>
</ul>
<?php endif; ?>
<div class="sr-only">
Liste des fichiers disponibles au téléchargement, avec leur format et leur poids.
</div>
</div>
<div class="presse-reviews">
<h2 class="presse-reviews__title"><?php echo get_the_title(1135); ?> </h2>
<?php
// Récupérer la page et simuler son contexte pour charger les scripts des blocs
$page_1135 = get_post(1135);
if ($page_1135) {
global $post;
$original_post = $post;
$post = $page_1135;
setup_postdata($post);
// Utiliser do_blocks() pour parser et rendre les blocs correctement
// Cela déclenche le chargement des scripts view.js des blocs
echo do_blocks($page_1135->post_content);
wp_reset_postdata();
$post = $original_post;
}
?>
</div>
</div>
</section>

12
plugins/carhop-blocks/src/press-ressources/style.scss Normal file
View File

@ -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;
}

29
plugins/carhop-blocks/src/press-ressources/view.js Normal file
View File

@ -0,0 +1,29 @@
document.addEventListener("DOMContentLoaded", function () {
const toolbar = document.querySelector("#press-toolbar");
if (!toolbar) return;
const toolbarButtons = toolbar.querySelectorAll("button");
const ressourcesGridContentWrapper = document.querySelector(
".ressources-grid-content-wrapper"
);
function setActiveTab(currentButton) {
toolbarButtons.forEach((button) => {
button.setAttribute("aria-selected", "false");
});
currentButton.setAttribute("aria-selected", "true");
ressourcesGridContentWrapper.setAttribute(
"data-active-tab",
currentButton.getAttribute("data-tab")
);
}
function initToolbar() {
toolbarButtons.forEach((button) => {
button.addEventListener("click", function () {
setActiveTab(button);
});
});
}
initToolbar();
});