Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erikyo/confetti-block


https://github.com/erikyo/confetti-block

Last synced: 2 months ago
JSON representation

Awesome Lists containing this project

README 

        
# Gutenberg Block Recipe 1 - Confetti Edition 🎉



Welcome to the Confetti block recipe, where we mix code and celebration to spice up your WordPress experience! 



🥳 Ever wanted to add a sprinkle of joy to your Gutenberg editor? Look no further!



With this repository, we are going to create a Gutenberg block that showers your content with confetti whenever you feel like celebrating.



This README will guide you through the setup and usage of the Confetti block.



## 🧾 Ingredients



To prepare the Confetti block, you'll need the following ingredients:



- **confetti**: Our star ingredient! Sprinkle it generously for maximum fun.

- **blocks**: Think of them as the building blocks (pun intended) of your Gutenberg editor.

- **script**: The secret sauce behind the confetti magic. Click the block, and watch the confetti fly!

- **style**: Because even confetti needs to look stylish.

- **index.js**: The conductor orchestrating the confetti symphony.

- **package.json**: Where we keep our party supplies (dependencies and project info).



### 👨‍🍳 Cooking Instructions



Ready to whip up some digital confetti and sprinkle joy all over your WordPress site? Follow these step-by-step instructions:



1. **Installation**:

    - Start by cloning this repository to your local machine using the `git clone` command followed by the repository URL.

    - Once cloned, navigate to the repository directory using your command line interface.

    - Now, upload the `confetti` folder to the `wp-content/plugins/` directory of your WordPress installation. You can do this via FTP or by copying the folder directly into the directory.

    - Head over to your WordPress admin dashboard and navigate to the "Plugins" section. You should see the Confetti plugin listed there. Click on "Activate" to bring the party to life!



2. **Block Registration**:

    - Open the `index.php` file in your code editor. This is where the magic begins! The `register_block_type` function is used to register our Confetti block type, ensuring it's available for use in the Gutenberg editor.



3. **Block Functionality**:

    - Now, let's dive into `index.js` where the real fun happens! This file defines the behavior of our Confetti block in the editor. We've got an `Edit` function that creates the block interface and an `onClick` event that triggers a confetti explosion whenever the block is clicked. Talk about interactive content!



4. **Frontend Integration**:

    - But wait, the party doesn't stop at the editor! In `script.js`, we extend the celebration to the frontend. By adding an event listener to the Confetti block, we ensure that clicking it on the live site triggers the same confetti extravaganza. Your visitors won't be able to resist joining the fun!



5. **Customization and Exploration**:

    - Now that you've got the basics down, feel free to explore and customize the code to suit your taste. Want to change the confetti colors? Add some music to accompany the celebration? The possibilities are endless!

    - Don't forget to check out the `style.css` file to add your own flair to the block's appearance. After all, every party needs some style!



## Usage



With the Confetti block, every day is a celebration on your WordPress website. 



So go ahead, add some sparkle to your content, and let the good times roll! Get ready to dazzle your visitors and make your website the life of the party. 



Happy coding, and may your days be filled with confetti and joy! 🎉