Download the PHP package thelia/thelia-blocks-module without Composer

On this page you can find all versions of the php package thelia/thelia-blocks-module. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Example code of thelia/thelia-blocks-module

Informations about the package thelia-blocks-module

Création d'un plugin pour Thelia Blocks

Exemple : Création d'un plugin de citation

Introduction

Ce plugin devra pouvoir afficher un champ pour indiquer le nom de l'auteur, et un second champ permettant d'insérer la citation en question.

Dans cet exemple, nous allons créer le plugin depuis un module Thelia. Si vous ne connaissez pas encore le fonctionnement des modules Thelia, nous vous conseillons vivement d'aller lire la documentation officielle sur les modules Thelia.

Architecture du module

Lors de cet exemple, nous utiliserons une architecture bien spécifique. Vous êtes évidemment libre de structurer votre module comme vous le souhaitez.

Installation des dépendances :

1 - Création du composant

Commençons par créer un fichier Citation.jsx et par définir les données initiales du plugin :

Ensuite, nous allons pouvoir écrire le composant React permettant de visualiser le plugin dans l'éditeur de Thelia Blocks.

:warning: Attention : un plugin Thelia Blocks prends toujours deux props :

Prop Type Description
data any Objet contenant les données du plugin
onUpdate Function Fonction permettant de mettre à jour les données du plugin

Exemple :

2 - Combinez vos plugins

Notre plugin citation utilise un élément <textarea /> pour permettre à l'utilisateur d'insérer une citation. Cependant, il est tout à fait possible d'imbriquer certains plugins pour réutiliser des fonctionnalités déjà existantes.

Dans notre cas, le plugin Text est parfait : Celui ci embarque déjà un système rich-text et d'autres fonctionnalités qui peuvent être utiles.

Voyons comment l'utiliser dans notre plugin de citations :

Nous pouvons désormais nous servir de Text dans le plugin Citation :

Notre plugin Citation utilise désormais Text pour fonctionner.

:warning: Attention : un plugin doit obligatoirement avoir un composant React ou hériter d'un autre plugin

3 - Structure et export du plugin

Chaque plugin est représenté par un objet. Celui ci regroupe toutes les informations nécessaires à son bon fonctionnement.

Attribut Type Requis Description
type { id: string; } :white_check_mark: ID du plugin, celui ci sera utilisé par Thelia pour effectuer le rendu
component ReactElement :white_check_mark: Composant du plugin
initialData any :white_check_mark: Données par défaut du plugin
icon FunctionComponent<SVGProps<SVGElement>> Icone du plugin
title { [key: string]: string; } :white_check_mark: Titre du plugin
description { [key: string]: string; } :white_check_mark: Description du plugin

Exemple :

4 - Configuration du plugin avec Thelia

4.1 - Ajout du plugin dans Thelia Blocks

Votre plugin doit maintenant être ajouté à Thelia Blocks pour être disponible lors de la création d'un nouveau Block.

La fonction "registerPlugin" se charge de l'ajout de la liste des plugins dans Thelia Blocks.

Celle ci est exportée par le package @openstudio/blocks-editor

Exemple :

4.2 - Génération du bundle

:warning: L'exemple ci-dessous décrit une utilisation avec le bundler tsup, vous pouvez évidemment utiliser n'importe quel autre bundler.

4.3 - Création des template Smarty

4.4 - Rendu des templates avec les hooks Thelia

Thelia Blocks utilise deux principaux event pour fonctionner :

5 - Création du rendu Smarty

Votre plugin est désormais disponible dans Thelia Blocks, la dernière étape consiste à définir la structure HTML qu'il doit générer une fois que Thelia l'affichera sur votre site.

5.1 - Création de votre rendu

Pour commencer, créez un fichier nommé "[id_du_plugin].html" dans le dossier ./templates/frontOffice/default/blocks

L'ID a été défini dans la structure du plugin, il est important que votre fichier ai exactement le même nom que l'id, sinon Thelia ne trouvera pas votre plugin et rien ne sera affiché.

Exemple :

6 - Aller plus loin

Traductions

Vous pouvez également traduire vos plugins, Thelia Blocks utilise react-intl pour les traductions. Plus d'informations sur la documentation de react-intl

La traduction du titre et de la description du plugin se fait directement dans sa définition.

Exemple d'un plugin avec traductions

Styling

Il est également possible de styliser vos plugins comme vous le souhaitez. L'event thelia.blocks.plugincss permet d'injecter du CSS dans vos plugins.

Exemple d'un plugin avec styling

TypeScript

Les plugins de base de Thelia Blocks sont rédigés avec TypeScript, cependant, rien ne vous empêche de les rédiger en JavaScript classique.

All versions of thelia-blocks-module with dependencies

PHP Build Version
Package Version
Requires thelia/installer Version ~1.1
thelia/short-code-module Version ^2.0.0|dev-main
thelia/open-api-module Version ^2.1.1|dev-main
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package thelia/thelia-blocks-module contains the following files

Loading the files please wait ....