• About
  • Advertise
  • Privacy & Policy
  • Contact
Tech News, Magazine & Review WordPress Theme 2017
  • ACCUEIL
    • Home – Layout 5
  • Review

    National Academy of Sciences endorses embryonic engineering

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    The Analogue Nt Mini is the perfect NES console for video game lovers

    Using a mind reading device, ‘locked-in’ patients told researchers they’re happy

    Watch Cruise’s self-driving Bolt EV navigate smoothly to SF’s Dolores Park

  • Gaming

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Analogue Nt Mini is the perfect NES console for video game lovers

    GoPro’s Karma drone is back on sale after design flaw made them fall out of the sky

  • Gear
    • All
    • Audio
    • Camera
    • Laptop
    • Smartphone

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    National Academy of Sciences endorses embryonic engineering

    Jack Dorsey says he’ll continue running both Square and Twitter

    Fujifilm X-T2 review: The definition of a great camera

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    SpaceX targets February 18 for Dragon resupply mission to ISS

  • Applications

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Jack Dorsey says he’ll continue running both Square and Twitter

  • Security

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

No Result
View All Result
  • ACCUEIL
    • Home – Layout 5
  • Review

    National Academy of Sciences endorses embryonic engineering

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    The Analogue Nt Mini is the perfect NES console for video game lovers

    Using a mind reading device, ‘locked-in’ patients told researchers they’re happy

    Watch Cruise’s self-driving Bolt EV navigate smoothly to SF’s Dolores Park

  • Gaming

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Analogue Nt Mini is the perfect NES console for video game lovers

    GoPro’s Karma drone is back on sale after design flaw made them fall out of the sky

  • Gear
    • All
    • Audio
    • Camera
    • Laptop
    • Smartphone

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    National Academy of Sciences endorses embryonic engineering

    Jack Dorsey says he’ll continue running both Square and Twitter

    Fujifilm X-T2 review: The definition of a great camera

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    Trending Tags

    • Best iPhone 7 deals
    • Apple Watch 2
    • Nintendo Switch
    • CES 2017
    • Playstation 4 Pro
    • iOS 10
    • iPhone 7
    • Sillicon Valley
  • Computers

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Fujifilm X-T2 review: The definition of a great camera

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

    SpaceX targets February 18 for Dragon resupply mission to ISS

  • Applications

    Apple Watch Series 2 Is Swimproof and Comes With Built-In GPS

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    Jack Dorsey says he’ll continue running both Square and Twitter

  • Security

    To regain advertiser trust, Facebook is tracking ads by the millisecond

    National Academy of Sciences endorses embryonic engineering

    Google has been asked to take down over a million websites

    Watch Dogs 2 Update Coming This Week, Here’s What It Does

    The Warby Parker of hair color, Madison Reed, scores new funding and a CMO

    Shopify CEO attempts to defend continued hosting of Breitbart’s online store

No Result
View All Result
Technique de pointe
No Result
View All Result
Home Générale

Construire des boîtes en vedette avec l’éditeur de blocs WordPress – WordPress Tavern

Caleb by Caleb
juin 4, 2021
142
Construire des boîtes en vedette avec l’éditeur de blocs WordPress – WordPress Tavern
Share on FacebookShare on Twitter


C’est un nouveau jour avec une autre poursuite pour ce plugin de bloc insaisissable qui apportera un peu de joie dans ma vie. L’expérience d’aujourd’hui est une gracieuseté du Plugin de boîte de fonctionnalité par Sumaiya Siddika. Il s’agit d’un simple bloc qui permet aux utilisateurs finaux de télécharger une image et d’ajouter du contenu à une boîte offset.

La sortie du plugin est un modèle typique sur le Web. Comme d’habitude, je suis ravi de voir les auteurs de plugins expérimenter pour apporter ces fonctionnalités aux utilisateurs de WordPress. Je veux en voir plus, en particulier de la part des nouveaux contributeurs de plugins.

J’ai pu rapidement mettre en place le bloc et y ajouter mon contenu personnalisé. Voici à quoi ressemblait le bloc après avoir saisi mon contenu et l’avoir personnalisé. Je me voyais comme une blogueuse de recettes pour ce test.

Plugin de bloc Feature Box dans l'éditeur WordPress, présentant une zone de texte décalée par rapport à une image d'arrière-plan.
Insertion et modification du bloc Feature Box.

Sur le plan technique, le plugin a bien fonctionné. Je n’ai rencontré aucune erreur. Tout était simple à personnaliser. Cependant, cela n’a jamais été une expérience utilisateur idéale.

La première chose que j’ai immédiatement remarquée est que le téléchargement d’images se produit dans la barre latérale des options de bloc. Les blocs WordPress de base ont un bouton dédié dans la barre d’outils pour ajouter des images et d’autres médias. Je me suis également retrouvé à vouloir un contrôle plus direct sur les éléments individuels. Comment puis-je changer la taille de la police d’en-tête ? Où étaient les styles de boutons typiques comme Contour et Couleur unie ? Comment insérer d’autres blocs, comme une liste ?

Aucune de ces choses n’était possible. Comme beaucoup d’autres blocs, le développeur a créé un système avec des paramètres spécifiques et l’utilisateur ne peut pas en sortir. Il y a des moments où cette rigidité a du sens, comme lors de la construction de blocs personnalisés pour les clients. Cependant, le plus souvent, les plugins publiés devraient être beaucoup plus ouverts.

Ce bloc étroitement contrôlé reflète la façon dont WordPress fonctionnait dans le passé. C’était souvent inflexible, laissant les utilisateurs à ce que les développeurs de thèmes et de plugins pensaient être le mieux pour leurs sites.

Le système de blocs est sur le point de jeter ces concepts trop rigides et de donner aux utilisateurs un pouvoir sur leur contenu. Le travail des plugins et des thèmes est de définir le cadre sous lequel l’utilisateur opère. Ils ont mis en place des règles pour empêcher plus ou moins les choses de casser, mais les utilisateurs peuvent s’attacher au siège du conducteur. Leur destination est la leur.

Le bloc aurait été beaucoup plus complet si les utilisateurs pouvaient contrôler tout le contenu de la boîte. Idéalement, ils pourraient placer tous les blocs qu’ils souhaitent dans la zone « contenu » du bloc Feature Box. Le design correspondrait mieux à leur thème aussi.

Il y a quelques semaines, j’ai écrit un article intitulé Vous n’aurez peut-être pas besoin de ce bloc. Le principe était que les utilisateurs pouvaient recréer certains blocs avec l’éditeur actuel et que les themers pouvaient faciliter cela en proposant des modèles.

Je savais que la réplication de ce bloc particulier serait impossible sans au moins un petit code personnalisé. L’éditeur de WordPress n’a pas de fonctionnalité pour décaler la position d’un bloc.

Un auteur de thème pourrait facilement dupliquer cette fonctionnalité. En règle générale, je créerais un modèle personnalisé, avec toutes les pièces existantes en place. Cependant, je voulais aborder cela avec des styles de blocs personnalisés. Cela permettrait aux utilisateurs finaux de sélectionner le décalage de contenu dans la barre latérale et de le changer si nécessaire.

Noter: Pour ceux qui souhaitent apprendre à créer des styles de blocs personnalisés, Carolina Nymark’s Didacticiel est la meilleure ressource.

Le bloc Cover a fait un candidat idéal pour cela. Parce qu’il a un élément “inner wrapper” existant, cela signifiait que je pouvais le cibler avec CSS et le déplacer. Ce qui suit est une capture d’écran du style Offset Left que j’ai créé :

Bloc de couverture dans l'éditeur WordPress avec une zone de contenu décalée à gauche.
Style de bloc de couverture gauche décalé.

J’ai simplement répliqué le code et modifié quelques valeurs pour créer un style Offset Right immédiatement après. Le code est disponible sous forme de GitHub Gist. Il s’agit d’une simple preuve de concept et non d’un produit raffiné. Il existe différentes approches pour cela, et plusieurs options de bloc de couverture ne sont pas gérées. Les auteurs de thèmes sont libres de prendre le code et de l’utiliser.

Ces styles de blocs semblaient bien meilleurs car ils correspondaient à mon thème. Tout, de l’espacement au rayon de bordure en passant par le bouton, était comme il se doit.

Décaler les styles de bloc Gauche et Droite.

La grande victoire était que j’avais le contrôle de la conception sur tous les aspects de la zone de contenu. Je pouvais sélectionner le style de bouton que je voulais. Je pourrais changer mes tailles de police. L’espacement par défaut correspondait à mon thème comme il se doit.

Le problème que j’ai rencontré avec la méthode de style de bloc permet aux utilisateurs de contrôler la couleur d’arrière-plan de la zone de contenu. Le plugin Feature Box gagne ici dans la catégorie expérience utilisateur car il a une option pour cela. Le style de bloc que j’ai créé hérite de son arrière-plan du parent du bloc Couverture. Il peut ne pas être immédiatement évident de savoir comment le changer.

L’autre “problème” avec le style de bloc est qu’il ne gère pas les alignements larges et complets pour le bloc Cover. C’est parce que je n’ai pas poussé l’expérience aussi loin, ne reproduisant que la disposition du plugin. Je laisserai aux concepteurs de thèmes le soin de bricoler. Il existe de nombreuses possibilités à explorer; n’attendez pas que je fournisse toutes les idées.

Mon objectif avec cet article et d’autres similaires est de montrer comment j’aborderais ces choses en tant qu’utilisateur et développeur. En tant qu’utilisateur, je veux de la flexibilité en toutes choses. En tant que développeur, je souhaite apporter les solutions que je souhaite en tant qu’utilisateur.

Je veux également voir les auteurs de plugins et de thèmes penser au-delà de leur cas d’utilisation initial lors de la construction de blocs, de modèles, de styles, etc. Posez les bases. Ensuite, développez cette idée initiale en pensant à toutes les façons dont les utilisateurs pourraient vouloir personnaliser ce que vous avez construit.

Comme ça:

Comme Chargement…

— to wptavern.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Recommended.

Principales technologies Web à utiliser dès maintenant

Principales technologies Web à utiliser dès maintenant

mai 27, 2021
Peter Wegner autoportrait à 100 ans

Peter Wegner autoportrait à 100 ans

octobre 29, 2021

Subscribe.

Trending.

10 problèmes courants de l’iPhone 13 et comment les résoudre

10 problèmes courants de l’iPhone 13 et comment les résoudre

décembre 24, 2021
Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

novembre 25, 2021
Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

Comment créer une calculatrice simple à l’aide de HTML, CSS et JavaScript

juin 19, 2022
Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

Avantages et inconvénients des concepteurs et créateurs de jeux vidéo

septembre 17, 2021
Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

mai 15, 2022

Catégories de produits

  • Non classé (2)
Technique de pointe

We bring you the best Premium WordPress Themes that perfect for news, magazine, personal blog, etc. Check our landing page for details.

Follow Us

Catégories

  • Apple
  • Applications
  • Audio
  • Camera
  • Computers
  • Gaming
  • Gear
  • Générale
  • Laptop
  • Microsoft
  • Photography
  • portrait
  • Review
  • Security
  • Smartphone

Étiquettes

actualités industrielles actualité économique affaires ailette AMERS ASIE ASXPAC BACT Buying Guides CMPNY Commerce courrier quotidien CYCS CYCS08 des sports Divertissement EMRG Entreprise GEN Inc. ITSE ITSE08 jeu vidéo jeux vidéo l'informatique l'Internet La technologie Logiciel Microsoft MTPIX NOM nous nouvelles Playstation 4 Pro politique Sillicon Valley SWIT TECH08 technologie TMT TOPCMB TOPNWS Types de contenu Éducation économie

Recent News

La National Portrait Gallery n’a levé que la moitié de la somme pour acheter un portrait classique de Joshua Reynolds.  Alors le Getty Museum a apporté le reste

La National Portrait Gallery n’a levé que la moitié de la somme pour acheter un portrait classique de Joshua Reynolds. Alors le Getty Museum a apporté le reste

mars 31, 2023
RocketCake 5.0 |  Néowin

RocketCake 5.0 | Néowin

mars 31, 2023
  • About
  • Advertise
  • Privacy & Policy
  • Contact

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Accueil
  • high tech
  • Jeu Vidéo
  • Tutoriel
    • HTML5 / CSS
    • Java Script
    • PHP / MySQL
  • Microsoft
  • Apple
  • Review
  • Applications
  • Photography
  • Security

© 2023 JNews - Premium WordPress news & magazine theme by Jegtheme.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist

Nous avons découvert un nouveau système qui génère des revenus 100% passifs... Ignorer