PHP Classes

Maniruzzaman WordPress Frontend Editor: WordPress plugin for visual front-end development

Recommend this page to a friend!
  Info   View files Documentation   View files View files (70)   DownloadInstall with Composer Download .zip   Reputation   Support forum   Blog (1)    
Last Updated Ratings Unique User Downloads Download Rankings
2023-09-25 (5 days ago) RSS 2.0 feedNot yet rated by the usersTotal: 19 This week: 19All time: 11,038 This week: 5Up
Version License PHP version Categories
maniruzzaman-fronten 1.0.0MIT/X Consortium ...7.4Content management, GUI, Blogs, PHP 7
Description 

Author

ManiruzzamanAkash


Contributor

This package provides a WordPress plugin for visual front-end development.

It provides a plugin that allows editors of WordPress posts to insert blocks of content that can be visualized immediately.

Currently, the plugin allows to insert blocks, also known as capsules, in a post and configure:

- The block text label settings

- The block color settings

- List all available blocks that can be inserted

- View the block details

- Show the mobile responsive preview

Picture of Maniruzzaman Akash
  Performance   Level  
Name: Maniruzzaman Akash <contact>
Classes: 18 packages by
Country: Bangladesh Bangladesh
Innovation award
Innovation award
Nominee: 7x

Details

Maniruzzaman-Frontend-Developer

WordPress Fullstack plugin developmennt - Gutenberg block, REST API, and so many...

Demo Video

https://youtu.be/h-BJczvJWLI

Demo Screenshots

Capsule List In Block Editor - Text label settings

Capsule List Editor-01

Capsule List In Block Editor - Color settings

Capsule List Editor-02

Frontend - Capsule List with filtering+pagination

Capsule List Editor-02

Frontend - Capsule detail popup

Capsule detail popup

Frontend - No capsuel found

Frontend - No capsuel found

Frontend - Mobile responsive view

Frontend - Mobile responsive view

Local development Setup Instruction

Requirements:

  1. Composer >= `v2`
  2. PHP >= `7.4`
  3. WordPress version >= `5.8`

Clone repository

git clone https://github.com/ManiruzzamanAkash/Maniruzzaman-Frontend-Developer.git

Go to folder and install composer

cd Maniruzzaman-Frontend-Developer
composer install

Npm dependencies

npm i
npm start

Start plugin

Active the plugin from your /wp-admin/plugins.php.

Plugin Flow

  1. Add a post from `wp-admin/post-new.php`.
  2. Search Gutenberg block `Spacex data`..
  3. Insert that block.
  4. Give some setting value, like - - Search text label - Pagination Previous text label - Pagination Next text label
  5. Change impact instantly on the editor. [For editor, set the limit to 2].
  6. Visit the post details in frontend.
  7. Check the filtering by status, type, mission.
  8. Check the pagination.
  9. Check the detail of capsule in a modal.

Testing

  1. PHPCS
  2. PHPUnit Testing
  3. Jest Unit Testing
  4. e2e Testing (Snapshot testing)

PHPCS

PHPCS Checking

composer run phpcs

Fix PHPCS

composer run phpcbf

PHP Unit test

PHPUnit test running

composer run test

PHPUnit test with PHPCS

composer run test:all

Jest Unit test

npm run test:unit

PHPUnit test result

PHPCS - Passed PHPUnit - 15 tests, 23 assertions - Passed

Run PHPUnit Test suits

Jest Unit Test Result

Jest Unit Test - 15 tests - Passed

Run Test suits

e2e Test

Requirements for e2e test

  1. Need to install docker on local machine. I've used `wp-env` package to install WordPress docker setup. You can follow this - https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/
  2. Commands to start from here - 
    npm i -g @wordpress/env --save-dev
    wp-env start
    
    If everything is successfull, you'll see something like this - 
    
    WordPress development site started at http://localhost:8888/ WordPress test site started at http://localhost:8889/ MySQL is listening on port 59087 MySQL for automated testing is listening on port 59085

Start e2e testing

npm run test:e2e

e2e Test Result

Added in Video.

Plugin zip and release commands -

# Build plugin
npm run build

# Make i18n localization
npm run makepot

# Create plugin zip
npm run zip

# Release plugin = npm run build + makepot + zip
npm run release

Known issue

For fetching capsules, use this API - https://docs.spacexdata.com/#00ac651a-8ba2-4b4c-858a-4034dd1254fa.

Here, there is a property called limit which doesn't work as expected and so some inconsitance with Pagination coud be found. But it's totally depend on the Spacex server.

  Files folder image Files  
File Role Description
Files folder imageassets (2 directories)
Files folder imageincludes (4 directories)
Files folder imagelanguages (1 file)
Files folder imagesrc (1 file, 6 directories)
Files folder imagetemplates (1 directory)
Files folder imagetests (3 directories)
Accessible without login Plain text file .babelrc.js Data Auxiliary data
Accessible without login Plain text file .eslintignore Data Auxiliary data
Accessible without login Plain text file .eslintrc Data Auxiliary data
Accessible without login Plain text file .php_cs Example Example script
Plain text file bsf-spacex.php Class Class source
Accessible without login Plain text file composer.json Data Auxiliary data
Accessible without login Plain text file composer.lock Data Auxiliary data
Accessible without login Plain text file jest-unit.config.js Data Auxiliary data
Accessible without login Plain text file LICENSE.txt Doc. Documentation
Accessible without login Plain text file package-lock.json Data Auxiliary data
Accessible without login Plain text file package.json Data Auxiliary data
Accessible without login Plain text file phpcs.xml Data Auxiliary data
Accessible without login Plain text file phpunit.xml.dist Data Auxiliary data
Accessible without login Plain text file postcss.config.js Data Auxiliary data
Accessible without login Plain text file README.md Doc. Documentation
Accessible without login Plain text file tailwind.config.js Data Auxiliary data
Accessible without login Plain text file tsconfig.json Data Auxiliary data
Accessible without login Plain text file webpack.config.js Data Auxiliary data

  Files folder image Files  /  assets  
File Role Description
Files folder imagecss (1 file)
Files folder imagejs (1 file)

  Files folder image Files  /  assets  /  css  
File Role Description
  Accessible without login Plain text file main.css Data Auxiliary data

  Files folder image Files  /  assets  /  js  
File Role Description
  Accessible without login Plain text file zip.js Data Auxiliary data

  Files folder image Files  /  includes  
File Role Description
Files folder imageAbstracts (1 file)
Files folder imageAssets (2 files)
Files folder imageRepository (1 file)
Files folder imageREST (2 files)

  Files folder image Files  /  includes  /  Abstracts  
File Role Description
  Plain text file BaseRestController.php Class Class source

  Files folder image Files  /  includes  /  Assets  
File Role Description
  Plain text file Asset.php Class Class source
  Plain text file BlockAsset.php Class Class source

  Files folder image Files  /  includes  /  Repository  
File Role Description
  Plain text file CapsulesRepository.php Class Class source

  Files folder image Files  /  includes  /  REST  
File Role Description
  Plain text file Api.php Class Class source
  Plain text file CapsulesController.php Class Class source

  Files folder image Files  /  languages  
File Role Description
  Accessible without login Plain text file bsf-spacex.pot Data Auxiliary data

  Files folder image Files  /  src  
File Role Description
Files folder imageblocks (1 directory)
Files folder imagecomponents (6 directories)
Files folder imagehooks (1 file)
Files folder imageinterfaces (1 file)
Files folder imagestyle (2 files)
Files folder imageutils (2 files)
  Accessible without login Plain text file index.tsx Data Auxiliary data

  Files folder image Files  /  src  /  blocks  
File Role Description
Files folder imagespacex-data (7 files)

  Files folder image Files  /  src  /  blocks  /  spacex-data  
File Role Description
  Accessible without login Plain text file block.json Data Auxiliary data
  Accessible without login Plain text file edit.tsx Data Auxiliary data
  Accessible without login Plain text file editor.scss Data Auxiliary data
  Accessible without login Plain text file index.ts Data Auxiliary data
  Accessible without login Plain text file save.tsx Data Auxiliary data
  Accessible without login Plain text file style.scss Data Auxiliary data
  Accessible without login Plain text file view.tsx Data Auxiliary data

  Files folder image Files  /  src  /  components  
File Role Description
Files folder imagebadge (1 file)
Files folder imagecapsule (3 files)
Files folder imagemodal (3 files)
Files folder imagepagination (2 files)
Files folder imagespacex-data-search (2 files)
Files folder imagespinner (2 files)

  Files folder image Files  /  src  /  components  /  badge  
File Role Description
  Accessible without login Plain text file index.tsx Data Auxiliary data

  Files folder image Files  /  src  /  components  /  capsule  
File Role Description
  Accessible without login Plain text file CapsuleItem.tsx Data Auxiliary data
  Accessible without login Plain text file NoCapsule.tsx Data Auxiliary data
  Accessible without login Plain text file style.scss Data Auxiliary data

  Files folder image Files  /  src  /  components  /  modal  
File Role Description
  Accessible without login Plain text file Modal.tsx Data Auxiliary data
  Accessible without login Plain text file Overlay.tsx Data Auxiliary data
  Accessible without login Plain text file style.scss Data Auxiliary data

  Files folder image Files  /  src  /  components  /  pagination  
File Role Description
  Accessible without login Plain text file index.tsx Data Auxiliary data
  Accessible without login Plain text file style.scss Data Auxiliary data

  Files folder image Files  /  src  /  components  /  spinner  
File Role Description
  Accessible without login Plain text file LoadingSpinner.tsx Data Auxiliary data
  Accessible without login Plain text file style.scss Data Auxiliary data

  Files folder image Files  /  src  /  hooks  
File Role Description
  Accessible without login Plain text file use-capsule-fetch-data.ts Data Auxiliary data

  Files folder image Files  /  src  /  interfaces  
File Role Description
  Accessible without login Plain text file index.ts Data Auxiliary data

  Files folder image Files  /  src  /  style  
File Role Description
  Accessible without login Plain text file main.scss Data Auxiliary data
  Accessible without login Plain text file tailwind.css Data Auxiliary data

  Files folder image Files  /  src  /  utils  
File Role Description
  Accessible without login Plain text file spacex-data-helper.ts Data Auxiliary data
  Accessible without login Plain text file url-generator.ts Data Auxiliary data

  Files folder image Files  /  templates  
File Role Description
Files folder imageblocks (1 directory)

  Files folder image Files  /  templates  /  blocks  
File Role Description
Files folder imagespacex-data (1 file)

  Files folder image Files  /  templates  /  blocks  /  spacex-data  
File Role Description
  Accessible without login Plain text file markup.php Aux. Auxiliary script

  Files folder image Files  /  tests  
File Role Description
Files folder imagee2e (1 directory)
Files folder imagephpunit (3 files, 4 directories)
Files folder imageunit (3 directories)

  Files folder image Files  /  tests  /  e2e  
File Role Description
Files folder imagespecs (2 files)

  Files folder image Files  /  tests  /  e2e  /  specs  
File Role Description
  Accessible without login Plain text file env.spec.tsx Data Auxiliary data
  Accessible without login Plain text file spacex-data.spec.tsx Data Auxiliary data

  Files folder image Files  /  tests  /  phpunit  
File Role Description
Files folder imageApi (1 file)
Files folder imageBlock (1 file)
Files folder imageInstall (1 file)
Files folder imageRepository (1 file)
  Plain text file BaseTest.php Class Class source
  Accessible without login Plain text file bootstrap.php Aux. Auxiliary script
  Accessible without login Plain text file wp-config.php Aux. Auxiliary script

  Files folder image Files  /  tests  /  phpunit  /  Api  
File Role Description
  Plain text file CapsulesControllerTest.php Class Class source

  Files folder image Files  /  tests  /  phpunit  /  Block  
File Role Description
  Plain text file SpacexDataBlockTest.php Class Class source

  Files folder image Files  /  tests  /  phpunit  /  Install  
File Role Description
  Plain text file RunnerTest.php Class Class source

  Files folder image Files  /  tests  /  phpunit  /  Repository  
File Role Description
  Plain text file CapsuleRepositoryTest.php Class Class source

  Files folder image Files  /  tests  /  unit  
File Role Description
Files folder imagecomponents (4 files)
Files folder imageconfig (1 file)
Files folder imageutils (1 file)

  Files folder image Files  /  tests  /  unit  /  components  
File Role Description
  Accessible without login Plain text file Badge.test.tsx Data Auxiliary data
  Accessible without login Plain text file CapsuleItem.test.tsx Data Auxiliary data
  Accessible without login Plain text file Pagination.test.tsx Data Auxiliary data
  Accessible without login Plain text file Search.test.tsx Data Auxiliary data

  Files folder image Files  /  tests  /  unit  /  config  
File Role Description
  Accessible without login Plain text file testing-library.js Data Auxiliary data

  Files folder image Files  /  tests  /  unit  /  utils  
File Role Description
  Accessible without login Plain text file url-generator.test.ts Data Auxiliary data

 Version Control Unique User Downloads Download Rankings  
 100%
Total:19
This week:19
All time:11,038
This week:5Up