FEATURE Developping the complete component for press ressources
This commit is contained in:
Antoine M
parent
4bf7040ce4
commit
8cc1a8a8a6
20
plugins/carhop-blocks/src/press-ressources/block.json
Normal file
20
plugins/carhop-blocks/src/press-ressources/block.json
Normal 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
12
plugins/carhop-blocks/src/press-ressources/edit.js
Normal 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
9
plugins/carhop-blocks/src/press-ressources/editor.scss
Normal 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
16
plugins/carhop-blocks/src/press-ressources/index.js
Normal 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,
|
||||||
|
});
|
||||||
147
plugins/carhop-blocks/src/press-ressources/render.php
Normal file
147
plugins/carhop-blocks/src/press-ressources/render.php
Normal 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
12
plugins/carhop-blocks/src/press-ressources/style.scss
Normal 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
29
plugins/carhop-blocks/src/press-ressources/view.js
Normal 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();
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user