Résumé de véhicule
This WordPress plugin enables the display of technical specifications for vehicles directly within the Gutenberg editor. Leveraging an external database, it seamlessly retrieves and showcases this information.
by Hippolyte KENGNI · github.com/aziguy/resume-de-vehicule · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/aziguy/resume-de-vehicule/archive/refs/heads/master.zipReadme
=== Vehicle Summary Gutenberg Block ===
Contributors: Aziguy, F7b5
Tags: block, Gutenberg, vehicle
Tested up to: 6.4.3
Stable tag: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
This WordPress plugin enables the display of technical specifications for vehicles directly within the Gutenberg editor. Leveraging an external database, it seamlessly retrieves and showcases this information.
=== Features ===
- Display vehicle technical specifications within the Gutenberg editor.
- Integration of a new Gutenberg block named "Vehicle Summary".
- Customization options for block appearance and displayed information.
- Addition of a new Gutenberg block category named "Brakson Gutenberg blocks".
=== Requirements ===
- WordPress version 6.4.3 or later.
- PHP version 7.0 or later.
=== Installation ===
- Download the plugin from the plugin's URL on the Brakson website.
- Upload the ZIP file to your WordPress installation.
- Activate the plugin through the WordPress "Plugins" page.
=== Usage ===
Once activated, you can utilize the "Vehicle Summary" block within the Gutenberg editor. Customize the displayed information according to the external database utilized.
=== Tailwind Configuration ===
This project utilizes Tailwind CSS for style management. To compile CSS files, execute the following command:
npm run build
This command compiles the tailwind.css file located in the src/assets/css directory into a style.css file within the build directory.
=== npm Dependencies ===
This project uses npm for dependency management. Below are the project's devDependencies:
@wordpress/scripts: WordPress script collection for development.autoprefixer: PostCSS tool for automatically adding CSS browser prefixes.postcss: CSS post-processing tool.tailwindcss: Utility-first CSS framework.
And here are the project's dependencies:
@wordpress/block-editor: WordPress block editor module.@wordpress/blocks: API for registering and managing WordPress blocks.@wordpress/components: WordPress UI components.@wordpress/compose: Library for creating functional React components in WordPress.@wordpress/data: Data management in WordPress applications.@wordpress/element: API for creating React elements in WordPress.axios: Promise-based HTTP client for browsers and node.js.
=== Support ===
If you encounter any issues or have questions regarding the usage of this plugin, please contact us.
=== Contributions ===
Contributions are welcome! If you'd like to contribute to the improvement of this plugin, please submit a pull request on GitHub.
=== Development Setup ===
To continue development on this Gutenberg block, follow these steps:
- Clone the repository from GitHub.
- Navigate to the project directory in your terminal.
- Run
npm installto install the project dependencies. - Use
npm startto start the development . - Make changes to the block code as needed. The block files are located in the
srcdirectory. - After making changes, use
npm run buildto compile the CSS and JavaScript files. This will update thebuilddirectory with the latest changes. - Test your changes within the WordPress editor to ensure everything works as expected.
- Commit your changes and push them.
- If you would like to contribute your changes to the main repository, submit a pull request on GitHub.
By following these steps, you can easily continue development on this Gutenberg block and contribute improvements to our amazing ( ͡° ͜ʖ ͡° )resume-vehicule block.
=== Future Improvements ===
While the current version of the Vehicle Summary Gutenberg block provides essential functionality, there are several areas for potential improvement and enhancement:
-
Automated Testing with GitHub Actions: Implement automated end-to-end (E2E) tests using the
@wordpress/e2e-test-utilspackage and GitHub Actions. -
Customization Options for Administrators: Allow administrators (journalists) to customize the appearance of the block by providing options for changing colors, typography, and other styling attributes. This can be achieved through additional block setting attributes.o
-
Enhanced Vehicle Selection: Instead of using a dropdown selector, provide a more user-friendly interface for selecting vehicles. For example, implement a search field where users can enter the name or model of the vehicle they want to display. This will improve the user experience and make it easier to find specific vehicles, especially in cases where the list of vehicles is extensive.
-
Block Content Reordering: Enable users to rearrange the elements within the block according to their preferences. Implement drag-and-drop functionality or other intuitive interfaces that allow for easy reordering of content elements. This flexibility will empower users to structure the block layout in a way that best suits their needs.
By incorporating these enhancements, we can further improve the functionality, usability, and versatility of the Vehicle Summary Gutenberg block, providing a more robust solution for displaying vehicle information within the WordPress editor. With all that in place, I'm sure that our block could be ready for production. ( ͡° ͜ʖ ͡° )
=== Screenshots ===
Below are screenshots demonstrating the Vehicle Summary Gutenberg block in action within the WordPress editor:
-
Block from editor:

-
Block from front-End:

These screenshots showcase the appearance and functionality of the block, illustrating how vehicle information is displayed and how users interact with the block within the Gutenberg editor.
=== License ===
This plugin is distributed under the GPL-2.0-or-later license. Refer to the LICENSE file for more details.