manifest / editor / gutenburg-block-effects

Block Effects

A simple and lightweight plugin for Block Effects on WordPress Gutenberg.

by Future Wordpress · github.com/mahmudremal/gutenburg-block-effects · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/mahmudremal/gutenburg-block-effects/archive/refs/heads/master.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/mahmudremal/gutenburg-block-effects ↗

WordPress Plugin - Gutenberg Block Effect 🎨

A WordPress Plugin Project for Appling animations on Gutenberg and those Blocks whos uses Gutenberg system. This Plugin uses WordPress default functionality with JAVASCRIPT, and SCSS to build an Gutenberg Block Effect from scratch.

Features

Apply animtion on Gutenberg blocks.
Height Customizable from Dashboard.

Maintainer

Name	Github Username	Fiverr Username
Remal Mahmud	@mahmudremal	@mahmud_remal

Usage

Clone the WordPress Plugin AJO in your WordPress Plugin directory and activate it.

Dashboard Setup.

Setup plugin from Settings > Block Effect and setup what you actually need.

Development ( To be added )

Install

Clone the repo and run

cd gutenburg-block-effects/assets
npm install

During development

npm run dev

Run precommit from assets directory before pushing the code for development/contribution.

cd assets && npm run precommit

Production

npm run prod

Linting & Formatting

The following command will fix most errors and show and remaining ones which cannot be fixed automatically.

npm run lint:fix

We follow the stylelint configuration used in WordPress Gutenberg, run the following command to lint and fix styles.

npm run stylelint:fix

Format code with prettier ( TO BE ADDED )

npm run format-js

Directory Structure

GBE:
│   .gitignore
│   block-effects.php
│   README.md
│   
├───assets
│   │   .babelrc
│   │   .eslintignore
│   │   .eslintrc.json
│   │   .nvmrc
│   │   .stylelintrc.json
│   │   hash.js
│   │   package-lock.json
│   │   package.json
│   │   postcss.config.js
│   │   tailwind.config.js
│   │   webpack.config.js
│   │   
│   ├───build
│   │   │   assets.php
│   │   │   
│   │   ├───css
│   │   │       frontend.css
│   │   │       
│   │   ├───js
│   │   │       frontend.js
│   │   │       
│   │   └───library
│   │       ├───css
│   │       │   │   ace-responsive-menu.css
│   │       │   │   admin.css
│   │       │   │   animate.css
│   │       │   │   bootstrap-grid.css
│   │       │   │   bootstrap-grid.min.css
│   │       │   │   bootstrap-select.min.css
│   │       │   │   bootstrap.min.css
│   │       │   │   fancyBox.css
│   │       │   │   flaticon.css
│   │       │   │   frontend-base.css
│   │       │   │   invoice.css
│   │       │   │   jquery-ui.min.css
│   │       │   │   menu.css
│   │       │   │   owl.css
│   │       │   │   progressbar.css
│   │       │   │   simplebar.min.css
│   │       │   │   slick-theme.css
│   │       │   │   slick.css
│   │       │   │   slider.css
│   │       │   │   timecounter.css
│   │       │   │   
│   │       │   └───map-css
│   │       │           info-box.css
│   │       │           maps.css
│   │       │           searcher.css
│   │       │           
│   │       └───js
│   │               bootstrap-select.min.js
│   │               bootstrap.min.js
│   │               jquery.counterup.js
│   │               progressbar.js
│   │               simplebar.js
│   │               timepicker.js
│   │               
│   └───src
│       ├───icons
│       ├───img
│       ├───js
│       │   │   backend.js
│       │   │   frontend.js
│       │   │   
│       │   ├───backend
│       │   │       index.js
│       │   │       
│       │   └───frontend
│       │           index.js
│       │           
│       ├───library
│       │   ├───css
│       │   │   │   ace-responsive-menu.css
│       │   │   │   admin.css
│       │   │   │   animate.css
│       │   │   │   bootstrap-grid.css
│       │   │   │   bootstrap-grid.min.css
│       │   │   │   bootstrap-select.min.css
│       │   │   │   bootstrap.min.css
│       │   │   │   fancyBox.css
│       │   │   │   flaticon.css
│       │   │   │   frontend-base.css
│       │   │   │   invoice.css
│       │   │   │   jquery-ui.min.css
│       │   │   │   menu.css
│       │   │   │   owl.css
│       │   │   │   progressbar.css
│       │   │   │   simplebar.min.css
│       │   │   │   slick-theme.css
│       │   │   │   slick.css
│       │   │   │   slider.css
│       │   │   │   timecounter.css
│       │   │   │   
│       │   │   └───map-css
│       │   │           info-box.css
│       │   │           maps.css
│       │   │           searcher.css
│       │   │           
│       │   ├───fonts
│       │   └───js
│       │           bootstrap-select.min.js
│       │           bootstrap.min.js
│       │           jquery.counterup.js
│       │           progressbar.js
│       │           simplebar.js
│       │           timepicker.js
│       │           
│       └───sass
│           │   backend.scss
│           │   frontend.scss
│           │   
│           ├───backend
│           │       _settings.scss
│           │       
│           └───frontend
│                   _settings.scss
│                   
├───inc
│   ├───classes
│   │       class-assets.php
│   │       class-dashboard.php
│   │       class-hooks.php
│   │       class-menus.php
│   │       class-option.php
│   │       class-project.php
│   │       class-translate.php
│   │       class-update.php
│   │       
│   ├───helpers
│   │       autoloader.php
│   │       template-tags.php
│   │       
│   ├───loader
│   │       class-metabox.php
│   │       class-option.php
│   │       
│   └───traits
│           trait-singleton.php
│           
├───languages
│       fwp-gbe-it_IT.mo
│       fwp-gbe-it_IT.po
│       fwp-gbe.pot
│       README.md
│       
└───template-parts

Fixing Errors

Error: Node Sass does not yet support your current environment Solution :
```
cd assets
npm rebuild node-sass
```