Portfolio

Weekly Meetings Block WordPress Plugin using React

I created a Weekly Meetings List Block WordPress plugin which heavily uses React and SCSS to add a Weekly Meeting Table Row Block WordPress block which shows a table of on-going weekly meetings. 

Please note that according to the GitHub repo I created for this project, the languges this plugin uses include:

  • Over 85% JavaScript (including React)
  • Over 10% SCSS
  • Minimal boilerplate PHP (just over 3 %)

Some examples could be for a book club, 12 Step group, meditation group, or another type of religious studies group. Additionally, this block includes:

  • A table tag that is accessible to people with disabilities that use screen readers to read it
  • Print Meeting Schedule button on the frontend so that you can print the meeting schedule or save it as a PDF
  • Filter drop-downs (select tags) to only show meetings by such categories as Day of Week and Meeting City 

The technologies I used include:

  • Create block npm package, (the officially supported tool for scaffolding a WordPress plugin that registers a block and generates files and build tools) to use React, JavaScript, SCSS (a type of Sass), and PHP
  • Other useful npm package like sort-es for sorting arrays

See more details at:

Weekly Meetings Block Demo >>

WordPress Plugin: using React

Technologies Used:

Create block npm package (the officially supported tool for scaffolding a WordPress plugin that registers a block and generates files), React, JavaScript, SCSS (a type of Sass), and PHP.

Weekly Meetings Block without filters activated

Weekly Meetings Block with a filter activated

Printing a Weekly Meetings Block on the frontend