Bloc de navigation responsive

This Plugin allows you to display and apply alternative styling to different navigation menus based on the screen size using the WordPress Navigation block.

Vidéo de démonstration

Fonctionnalités

• Two new Navigation Block (variations) for:
  • Mobile
  • Ordinateur
• Style your menu differently depending on screen size.
• Utilise un menu différent pour chaque taille d’écran.
• Customize the « breakpoint » (where you switch between mobile and desktop).
• Bascule automatiquement l’éditeur vers un aperçu « mobile » lors de la modification de la navigation mobile.

Utilisation

Cette extension crée deux variations de bloc à partir du bloc navigation qui sera automatiquement masqué/affiché à la taille d’écran configurée (point de rupture) :

• Navigation (Mobile) – sera affichée uniquement sur les écrans de petite taille.
• Navigation (Ordinateur) – sera affichée uniquement sur les écrans de grande taille.

Cela offre la possibilité de styliser indépendamment la navigation mobile et celle de d’ordinateur de bureau et permet même d’utiliser des menus complètement différents.

The Plugin should be used as follows:

• Install and Activate the plugin – two new block variations will be automatically registered for « Mobile » and « Desktop ».
• Go to the Editor and remove any existing Navigation block.
• Add the « Desktop Navigation » block – style and configure the menu for « desktop » as required.
• Add the « Mobile Navigation » block – style and configure the menu for « mobile » as required.
• View the front of your website and resize your browser to see the navigations swap out at the appropriate breakpoint/screensize.

Vous pouvez également transformer le bloc Navigation par défaut en une variante mobile ou ordinateur via l’interface du bloc.

Support

Please see FAQs. If you still have an issue please:

• check Github for existing Issue reports.
• (if none) then file a new Issue on Github

Déclaration de confidentialité

Responsive Navigation does not:

• use cookies.
• send data to any third party.
• include any third party resources.

Contributing

Contributions to this Plugin are welcome. Please fork the Github repository and submit a PR for review.

Configuration de développement

This Plugin uses the @wordpress/scripts package.

• Check out the Github repo into the wp-content/plugins directory of a WordPress installation.
• cd into the Plugin’s directory install the dependencies with npm i.
• Running npm start will start the @wordpress/scripts package in watch mode ready to compile the JavaScript on modification.
• PHP files can be edited in the usual manner.

Testing

The Plugin has e2e test coverage for the key features courtesey of @wordpress/scripts and Playwright.

To run the tests – in your terminal of choice:

• npm run build.
• npm run wp-env start.
• Run the tests: npm run test:e2e

Releasing

La publication de l’extension dans le dépôt des extensions de WordPress.org est la prérogative du propriétaire de l’extension (@get_dave). Le processus est le suivant :

Testez le Plugin.

• Commit all changes to trunk branch.
• Poussez les modifications vers la branche principale (uniquement) – git push origin trunk.
• In Github:
  • Actions
  • Select the Build Release Zip action.
  • Select the Run workflow dropdown and run the workflow to generate a zip file.
  • Lorsque l’action est terminée, téléchargez le fichier zip généré par l’extension.
  • Installez et testez manuellement le fichier .zip.

Déployez sur WP.org

• Lorsque vous êtes prêt à déployer.
• Bump Plugin version and tag release – npm run bump-version.
• Push trunk and tags – git push origin trunk --tags
• Le déploiement sur WP.org sera géré automatiquement.