Sélectionner une page


Gutenberg, la nouvelle expérience d’édition WordPress basée sur des blocs, était très excitante. L’une des fonctionnalités les plus intéressantes est la possibilité pour les développeurs de créer leurs propres types de blocs personnalisés. Cela ouvre des possibilités infinies de personnalisation.

Il n’y a qu’un seul petit problème. Il y a beaucoup de construction de blocs personnalisés extrêmement compliqué. C’est compliqué? Eh bien, même simple Bloquer les témoignages nécessite une grande quantité de code.

L’ensemble du processus est à la fois gourmand en temps et en code. Le résultat est que de nombreux développeurs trouvent la fonctionnalité de blocage personnalisée inaccessible.

Alors que nous travaillions dur pour assurer la compatibilité de la Metabox avec Gutenberg, une idée est venue. Et si nous pouvions faciliter la création de types de blocs personnalisés pour Gutenberg? Des blocs pour vous aider à créer un contenu dynamique époustouflant avec ACF + PHP!

Eh bien, ce n’était pas facile, mais nous sommes heureux d’annoncer que notre fonction de bloc ACF prend lentement forme! En fait, vous pouvez maintenant le faire tourner! ACF version 5.8.0-beta1 est maintenant disponible au téléchargement et inclut une première phase de notre fonction de bloc ACF qui vous permet de créer facilement des types de blocs personnalisés.

Examinons de plus près ce nouvel ajout à ACF.

Créez des blocs personnalisés en quelques minutes, pas en quelques heures ⚡️

Créer manuellement des blocs personnalisés signifie creuser des monticules infinis de JavaScript. ACF Blocks, d’autre part, fait tout le travail pour vous, vous pouvez donc vous asseoir, vous détendre et continuer à écrire du PHP et du HTML simples.

Nous avons simplifié le processus en seulement trois étapes:

1. Enregistrer un bloc

Similaire à l’enregistrement d’un type de publication dans WP, le acf_register_block() Cette fonction vous permet d’enregistrer un type de bloc personnalisé à partir de votre fichier functions.php. Cette fonctionnalité accepte un certain nombre de paramètres qui vous permettent de personnaliser votre bloc, y compris un nom, une description, etc.

💡 Ces paramètres sont étroitement liés au JavaScript WordPress registerBlockType () Une fonction.

Vous devrez également ajouter le nom de votre fonction de rappel, qui est détaillé ci-dessous.

functions.php

add_action('acf/init', 'my_acf_init');
function my_acf_init() {
	
	// check function exists
	if( function_exists('acf_register_block') ) {
		
		// register a testimonial block
		acf_register_block(array(
			'name'				=> 'testimonial',
			'title'				=> __('Testimonial'),
			'description'		=> __('A custom testimonial block.'),
			'render_callback'	=> 'my_acf_block_render_callback',
			'category'			=> 'formatting',
			'icon'				=> 'admin-comments',
			'keywords'			=> array( 'testimonial', 'quote' ),
		));
	}
}

2. Créez un groupe de champs

Ensuite, créez un groupe de champs. Notez que tous les champs ACF de votre bloc peuvent être utilisés – il n’y a aucune restriction.

Utilisez la règle « Bloquer » des règles de localisation pour sélectionner votre type de bloc nouvellement enregistré.

3. Rendre le bloc

La dernière chose que vous devez faire est d’indiquer à ACF comment vous voulez que votre bloc soit rendu. C’est essentiellement le même processus que vous avez l’habitude de voir les champs personnalisés – seulement que votre HTML + PHP est enveloppé dans une fonction.

Souviens toi render_callback Réglage mentionné plus tôt? C’est la fonction PHP qui rendra le HTML de votre bloc et dans laquelle vous pourrez écrire votre code personnalisé. Nous recommandons une approche « modulaire » dans laquelle vous utilisez une fonction de rappel générique pour inclure une « partie maître » pour votre bloc. Ceci est possible en utilisant le paramètre $ block.

functions.php

function my_acf_block_render_callback( $block ) {
	
	// convert name ("acf/testimonial") into path friendly slug ("testimonial")
	$slug = str_replace('acf/', '', $block['name']);
	
	// include a template part from within the "template-parts/block" folder
	if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
		include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
	}
}

template-parts / block / content-Testimonial.php

<?php
/**
 * Block Name: Testimonial
 *
 * This is the template that displays the testimonial block.
 */

// get image field (array)
$avatar = get_field('avatar');

// create id attribute for specific styling
$id = 'testimonial-' . $block['id'];

// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';

?>
<blockquote id="<?php echo $id; ?>" class="testimonial <?php echo $align_class; ?>">
    <p><?php the_field('testimonial'); ?></p>
    <cite>
    	<img src="https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/<?php echo $avatar["url']; ?>" alt="https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/<?php echo $avatar["alt']; ?>" />
    	<span><?php the_field('author'); ?></span>
    </cite>
</blockquote>
<style type="text/css">
	#<?php echo $id; ?> {
		background: <?php the_field('background_color'); ?>;
		color: <?php the_field('text_color'); ?>;
	}
</style>

La seule chose que nous n’avons pas incluse est la mise en file d’attente des styles, ce qui est simplement possible via cela admin_enqueue_scripts et wp_enqueue_scripts Actions.

C’est tout ce qu’on peut en dire! Vous pouvez immédiatement utiliser votre nouveau bloc dans Gutenberg et le placer n’importe où dans votre contenu 💯.

La portée des blocs ACF 👀

Vous vous demandez peut-être si les blocs ACF sont un substitut aux métaboxes, auxquelles la réponse est non. Les métabox sont toujours une partie importante du processus d’édition et de développement. En fait, ACF continuera à les utiliser comme principal outil de stockage de contenu.

La principale différence entre les blocs et les métaboxes est la taille.

Métaboxes Enregistrer les données en tant que «méta» (bits de données individuels liés à la publication via la table wp_postmeta) développeur Contrôle total sur quand et où ils apparaissent dans les fichiers de modèle de thème – parfait pour les sites Web sur mesure.

blocs Enregistrez vos données dans la valeur post_content (sous forme de JSON dans les commentaires HTML), que le utilisateur Contrôle total sur le moment et l’endroit où ils apparaissent dans le contenu de l’article – parfait pour les articles de blog ou de vastes zones de contenu.

Aimez-le ou détestez-le, la façon dont Gutenberg stocke ses données permet une grande flexibilité. Les blocs ACF peuvent être insérés, réorganisés, modifiés et supprimés plusieurs fois dans le même article sans gonfler la table Postmeta!

Propriétés notables 🎤

Aperçu

Le plus grand cadeau de Gutenberg aux créateurs de contenu est que les blocs reflètent mieux la conception frontale. Avec l’éditeur classique, le style et la mise en page du contenu ne correspondent pas toujours. Le nouvel éditeur résout intelligemment ce problème.

Pour rester synchronisé avec Gutenberg, ACF Blocks propose un mode aperçu! Sélectionnez simplement un bloc et cliquez sur le bouton « Passer à l’aperçu » dans les paramètres du bloc. Une fois activé, votre bloc HTML sera affiché et vos champs seront déplacés vers la barre latérale – tout comme avec les autres blocs Gutenberg. De plus, les modifications sont continuellement mises à jour en temps réel!

Si vous travaillez sur quelque chose de plus complexe, vous devez rester en mode édition. Cela vous donne plus d’espace sur l’écran pour créer la page parfaite.

Alignement

Pour vous donner encore plus de contrôle sur votre contenu, ACF Blocks prend en charge la barre d’outils d’alignement de Gutenberg. Utilisez cette option pour aligner les blocs exactement là où vous le souhaitez.

De plus, vous pouvez également utiliser les orientations «large» et «complet» de Gutenberg pour sortir de la boîte!

Avez-vous un commentaire ou une idée pour améliorer ces fonctionnalités? Nous aimerions recevoir de vos nouvelles!

Apportez tous les blocs 💪

Nous pensons que les blocs ACF sont l’une des fonctionnalités les plus importantes jamais ajoutées à notre plugin. Il nivelle les règles du jeu et permet à davantage de développeurs d’utiliser la fonction principale de Gutenberg.

Vous n’avez pas besoin d’être un expert JavaScript pour créer des blocs personnalisés. Et vous n’avez pas à changer radicalement votre flux de travail. Avec les blocs ACF, vous pouvez faire plus tout en évitant le chaos de la création manuelle de blocs.

Nous prévoyons d’inclure la fonction de blocs ACF à la fois avec la version gratuite et avec la version PRO d’ACF 5.8 dans ACF PRO version 5.8. Vous pouvez vous attendre à ce que cette version soit publiée en novembre.

Si vous êtes un client ACF PRO, vous pouvez essayer ACF Blocks dès aujourd’hui en téléchargeant la dernière version bêta! Pour tester ACF PRO 5.8.0-beta1, veuillez Connectez-vous à votre compte professionnel et cliquez sur Afficher toutes les versions Lien à côté de votre licence. Téléchargez, extrayez et remplacez le contenu du dossier du plugin ‘advanced-custom-fields-pro’.

Merci d’avoir pris le temps de lire cet article. Nous avons hâte de recevoir vos commentaires sur notre fonctionnalité de blocs ACF! Si vous avez des commentaires, veuillez utiliser notre Formulaire de contact contactez-nous en ligne!



Source link

Recent Posts