beapi / beapi-frontend-framework Goto Github PK

Webpack génère un fichier css dédié au wysiwyg dans dist/assets/editor-style.css
J'essaie de l'ajouter mais sans succes, mon commit : 2a67b1f

Il y a des petits ajustements à apporter pour faire tourner le serveur local sous windows 10.

Dans le package.json, dans le script "start", il faut ajouter un & entre dev et webpack :
NODE_ENV=dev & webpack

Et dans server.js, cette ligne pose problème :
proxy: 'http://[::1]:' + config.port,

Le serveur local se bloque en infinite loop. Du coup il suffit de changer pour :
proxy: 'http://localhost:' + config.port,

Je n'ai pas testé sur mac si ça fonctionnait.

Je trouve que c'est un peu la pagaille dans la mixin title dans _mixin.scss

//Title mixins
@mixin title($size: md) {
	font-weight: 700;
	line-height: $heading-line-height;
	font-family: $customfont-2;

	.fonts-loading & {
		font-family: $font-sansserif;
	}

	@if $size == XXL {
		font-size: 40px;

		@include breakpoints(sm) {
			font-size: 40px*1.5;
		}
	}
	@if $size == XL {
		font-size: 36px;

		@include breakpoints(sm) {
			font-size: 36px*1.5;
		}
	}
	@if $size == L {
		font-size: 32px;

		@include breakpoints(sm) {
			font-size: 32px*1.5;
		}
	}
	@if $size == M {
		font-size: 28px;

		@include breakpoints(sm) {
			font-size: 28px*1.5;
		}
	}
	@if $size == S {
		font-size: 24px;

		@include breakpoints(sm) {
			font-size: 24px*1.5;
		}
	}
	@if $size == XS {
		font-size: 20px;

		@include breakpoints(sm) {
			font-size: 20*1.5;
		}
	}
}

Je trouve que ça ne donne pas un résultat satisfaisant en terme de hiérarchisation et il manque le "px" pour le XS en breakpoints sm. Il faudrait je pense trouve un système plus smart pour cela.

Now bea image needs templates in order to work : https://github.com/BeAPI/beapi-frontend-framework/tree/master/src/conf-img/tpl

ACTIONS SUPPRESSION

• Suppression appel polyfill.io / + src/js/polyfill/picturefill.js (+ appel)
• Mise a jour conf browserlist / babel
• SCSS : suppression mixin polyfill object-fit

Pas d'action mais pour info :

ACTIONS AJOUT

• Team bisounours/gdp : pédagogie client + Mention non support IE11 front dans CDC (si client veut, il insiste, mais il paie)
• Build : outil orienté esbuild load au lieu de babel

POSSIBILITES CSS

• Utilisation CSS grid
• Utilisation Variables CSS
• Functions CSS natives (ex clamp, min/max, ...)
• ...

Traiter #165 au préalable

A supprimer :

• Service Sidebar
• Functions.php : suppression des require (qui ne sont utilisés que pour les helpers, qui pourraient donc passer en plugin/dépendances (cf. au-dessus)). cf #165

Les fonctions the_icon et get_the_icon ne devraient elles pas retourner une chaîne vide si l'icône est indéfinie (dans le cas d'une utilisation avec un champ acf par exemple) :

the_icon( get_field( 'icon' ) ); // -> return '<svg class="icon icon-" ...</svg>'

remove, free the title attribute in the bff template helpers.
it should be optional. see PR

https://sass-lang.com/blog/libsass-is-deprecated

After much discussion among the Sass core team, we’ve come to the conclusion that it’s time to officially declare that LibSass and the packages built on top of it, including Node Sass, are deprecated. For several years now, it’s been clear that there’s simply not enough engineering bandwidth behind LibSass to keep it up-to-date with the latest developments in the Sass language (for example, the most recent new language feature was added in November 2018). As much as we’ve hoped to see this pattern turn around, even the excellent work of long-time LibSass contributors Michael Mifsud and Marcel Greter couldn’t keep up with the fast pace of language development in both CSS and Sass.

https://github.com/sass/dart-sass
https://webpack.js.org/loaders/sass-loader/

Il faudrait rajouter un esc_attr() pour l'attribut title par exemple afin d'éviter d'avoir des chevrons qui se glissent et qui faussent la lecture du HTML. J'ai eu un bug d'affichage car j'ai eu ce cas.

L'idée serait de générer dans le dossier img/default/ les images par défaut à chaque fois qu'on lance la commande yarn image à partir de image-location.json.

À voir les options :

- path
- bgColor

To avoid problems with multilingual projects, set a slug.

https://github.com/BeAPI/beapi-frontend-framework/blob/master/inc/services/acf.php

Dans la même optique d'optimisation du chargement d'un site que la mise en place du "Deffer", serait-il possible de gérer le chargement conditionnel de dépendances et la minification indépendante de code métier ?

Je m'explique, sur certaines pages, il est nécessaire d'avoir Masonry, sur d'autres, Isotope, etc. Mais il n'y a aucun intérêt d'avoir le code métier systématiquement chargé dans le scripts.min.

Prenons un exemple, j'ai uniquement besoin de Masonry sur ma Homepage :

• Est-ce que charger 2 fichiers minifiés (moins lourd), uniquement sur la homepage, n'est pas moins rapide qu'un seul (script) plus lourd ?
• Mais également avoir un seul fichier minifé (script) plus léger sur toutes les autres pages, ne nécessitant pas de code métier JavaScript Masonry, ne serait pas plus rapide ?

De même, conditionner le chargement des dépendances, par exemple Mansonry uniquement sur la homepage, ce qui réduit le nombre de fichiers chargés n'améliorerait pas les temps de chargement ?

Modifier la valeur de escape par 'wp_kses_post' :

Appeler la fonction get_the_icon ici :

In order to make bea image to work, we must change path : https://github.com/BeAPI/beapi-frontend-framework/blob/master/dist/functions/_init.php.
Due to 41df1f5

Restore SVG snippet in app.js @firestar300

Les fichiers minifiés comportent un hash unique servant de cache busting.
Il est alors inutile d'ajouter la version du thème au bout des ressources CSS/JS que nous gérons.

@Rahe ,

Je suis en train de migrer le BFF sur Webpack 5, j'ai mis en place sur ma machine une instance Lando à partir du skeleton comme si j'initialisais une nouveau projet comme c'est indiqué sur Notion.

J'ai rencontré un soucis sur l'import du script app.js dans Services/Assets.php

// Async and footer
$file = ( ! defined( 'SCRIPT_DEBUG' ) || SCRIPT_DEBUG === false ) ? $this->get_min_file( 'js' ) : 'app.js';
$this->assets_tools->register_script( 'scripts', 'dist/' . $file, $scripts_dependencies, $theme->get( 'Version' ), true );

$file retourne un boolean alors qu'il devrait retourner une string.

https://bitbucket.org/beapi/bnp-leasing-solutions/src/8eaaf8b71e1a22704d5d09f18ccb8ab6bfd78712/wp-content/themes/bnp-leasing_solutions/functions/class-bea-images.php?at=master&fileviewer=file-view-default#class-bea-images.php-218

In order to reduce the node_modules/ size, @Cocola suggested to remove favicons task from BFF.

• Remove favicons dependency
• Remove scripts/favicon.js script
• Remove npm run favicon from package.json
• Remove unused <link> in src/templates/partials/header.php
• Remove unused <link> in header WordPress side

@Nkzq ⬆️

Buttons href binding is not working on dynamically added elements.

Ajouter phpcs.xml + github action

inutile avec la suppression du support IE11

Hi team,

The FacetWP plugin loads at wp_footer () but our main script (scripts.min.js // app.min.js) loads before.
As a result, we do not have access to the FW object and therefore cause an error in the loading of the pages.

Should not we, load our scripts to wp_footer ()?

Thanks

J'ai commencé à bosser sur une base thème BFF Front+Back avec autoload et modernisation.
Je suis passé sur les projets récents pour récupérer et isoler les composants récurrents et leur intégration.
Je suis sur une branchz du bff et c'st un gros BROUILLON donc faudra potentiellement refactor, commenter et remplir le readme/wiki pour l'utilisation de celui-ci.

Si jamais vous voyez des composants manquants, listez les que l'on puisse les ajouter.

https://github.com/BeAPI/beapi-frontend-framework/tree/feature/starter-php

Support gutenberg custom CSS files from theme :

<?php 

add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' );

Forgot to target a element.

Bilal tells me that we don't need anymore this following properties :

• itemprop
• itemscope
• itemtype

Hello,

We can add automatic assigned people to issues based on the folders/file types like Gutenberg project have one

• Gutenberg : https://github.com/WordPress/gutenberg/blob/master/.github/CODEOWNERS
• Documentation : https://help.github.com/en/articles/about-code-owners

We can in this case associate .php files to the backend dev and .scss, .js etc. to the frontend dev.

Ideas on this ?
File types to be automatically associated with ?

Actuellement le preload CSS ne fonctionne pas sur Firefox ce qui nous oblige à le désactiver sur les projets. L'action se trouve dans assets-css-async.php au même endroit que le chargement du script JS de chargements des fonts.

Soit on désactive le preload CSS en retirant l'action : add_action( 'wp_head', [ $this, 'load_css' ], 0 );

Soit on trouve une alternative pour le preload CSS : https://www.filamentgroup.com/lab/load-css-simpler/

C'est quelque chose que l'on met systématiquement sur nos projets. Il faudrait le remettre.

Je peux m'en occuper.

Une solution du type Fractal : https://fractal.build/

Avantages :

• orienté composants
• qualité ++
• pratique ++ (on peut faire des variantes de composants)
• construction d'un guide de styles qui pourra être utilisé par n'importe quel dév arrivant sur le projet (bibliothèque de composants)
• outil final peut être vendu au client au besoin
• intégration dans les VRAIS fichiers du thème wordpress (pas de dossier SRC) qui évite la copie/doublonnage en passage back

ACF est obligatoire pour faire fonctionner le thème.Pouvons nous rendre la dépendance à ce plugin facultative ? Cela permettrait d'avoir un starter plus accessible à la communauté.

Hello,

Afin de capitaliser sur les fonctions écrites dans les projets, il est nécessaire d'intégrer les helpers de templating dans le BFF afin d'éviter tout copier/coller.
Mais aussi de créer des tests exhaustifs de ces mêmes fonctions :

1. Affichage de liens complexes
2. Affichage d'images
3. Affichage de textes divers (échapés, kses etc.)
4. etc.

L'intérêt de ces fonctions est :

• Avoir un comportement par défaut, exemple sur les liens d'avoir le target noopener
• Gérer du before/after pourl'affichage conditionnel de l'entité englobante
• Echapper au plus tard la donnée dans le thème (late escape)

Exemple sur les liens :

Theme\helpers\links\the_link(
	[
		'href'   => '#' . $testimony_id,
		'title' => 'My title',
		'data-seo-target' => null,
		'target' => 'no-noop',
		'class' => '..',
	],
	[
		'before'    => '<h3 class="card__title title-h4">',
		'after' => '</h3>',
	]
);

Le premier argument est tous les attributs du lien à avoir, le null sur le data-seo-target permet de dire que l'on veut uniquement l'attribut d'affiché.
Le second argument permet de passer de la configuration comme un before/after.
Toutes les données sont échappées en interne sur du esc_attr, le href sur du esc_url.
Puis créer une fonction pour gérer les liens ACF en particulier

Theme\Helpers\Links\the_acf_link(
	[
		'field => 'my_field',
		'data-seo-target' => null,
		'target' => 'no-noop',
		'class' => '..',
	],
	[
		'before'    => '<h3 class="card__title title-h4">',
		'after' => '</h3>',
	]
);

Le but étant d'avoir la même structure que l'on peut avoir avec les SVG :

1. Un service pour implémenter les méthodes
2. Des fonctions helpers pour les exploiter facilement

Nécessaire pour chaque fonction, être :

• Filtrable : possibilité de filter les arguments et rendu avant utilisation (exemple: gestion des "BBcodes") avec des hooks
• Spécifique : pas de fonction qui fait tout ou essaye de gérer tous les cas seule
• Securisée : toute donnée est échapée/filtrée (esc_html, esc_attr, esc_url etc.)
• Performante : ne doit pas introduire de problème de performance

Du coup, quels sont vos retours ? quelles fonctions peuvent être implémentées dans le BFF ?
Je pense notamment à la fonction qui permet de récupérer une page en fonction de son template.

@petitphp @francoistibo @ptesei @asadowski10 @firestar300 @n-langle @samikerb @ecorica @lphoumpakka

Hello,

Voir pour retirer le bundle analyzer lors de la compilation prod.

Avoir une méthode pour deregister des blocs en PHP
Avoir une méthode pour deregister des varations de blocs en JS par un script général et déclartion par PHP

Hi there!

I'm testing your framework to see how you works on your projects, by curiosity. Everything works fine, and the install guide was perfect.

Now i'm trying to build a little theme based on BFF, but I don't see how you works with the template files. If I understand, you have a /html folder with the basics files (header.php, style.css + your custom hierarchy).

But, when you start a theme, you flush the index.php file with the File Directory Listing Script and you start your front-end work on this /html folder? Do you drop the files that you don't use, and you make all the dynamic parts (template tags, ACF, Gravity Forms...) after all html work?

Can I have more details on your Workflow?

This is not a real issue, it's more a question to understand how you use it on the pure templating part.

Thanks for you help, and your share!

Support new wp_body_open : https://make.wordpress.org/themes/2019/03/29/addition-of-new-wp_body_open-hook/

Le manifest est généré dans le dossier dist/assets/img/favions, et le manifest va chercher les icones ici par exemple : dist/assets/img/favicons/android-chrome-36x36.png.

Il faut soit générer le manifest à la racine, soit changer le path des icones.

• Supprimer card.scss, appearance.scss
• Remettre appearance: none; sur la mixin button

[A discuter]

• feuille de style dédiée dans BFF, dans le dossier src/scss (stylesheet minifiée toute seule via webpack (l'inclure dans les settings webpack) dans dist pour l'appeler via le hook add_action('login_head') dans le service assets
• logo (SVG dans l'idéal) dédié à la page login stocké dans src/img/static

Evite les conflits avec classe .button native dans le BO WordPress.
On peut alors importer la feuille de styles projet des boutons dans le BO sans etre sur de ne rien casser au niveau des boutons

On n'en n'a plus besoin

https://make.wordpress.org/core/2020/06/29/updating-jquery-version-shipped-with-wordpress/

Prepare this change for future project :)

@Rahe je vois pas d'attributs async/defer en front

Tout est dans le titre.

Voir :

• https://github.com/WordPress/WordPress/blob/2d20fd7cc1d4625190f5bbb8baeefa92447bb73b/wp-includes/script-loader.php#L2287
• https://www.notion.so/beapi/65a4a7f4074449168dfe294f1ccaed72?v=9c8dd52b4e4a43c1988c4d6e8b577551&p=e9579df3fd5040a184418bb4efa23385

Hello @asadowski10,

Il faudrait qu'on voit ensemble pour faire en sorte de gérer le crop au niveau du location.
Du coup pouvoir avoir 2 images sizes similaires mais avec un clé différente si la valeur du crop est différente.