Plugin Structure

The plugin uses the WPPB boilerplate's structure and is OOP.

There are four main folders in the structure admin, common, public and includes.

Here is the root level structure

├── LICENSE.txt
├── README.txt
├── admin
├── common
├── dslp.php
├── includes
├── index.php
├── languages
├── package.json
├── public
├── uninstall.php
├── yarn-error.log
└── yarn.lock

dslp.php

This file is the plugin entry point. This file contains the plugin header information, version, and the main class initialization.

includes

In the includes folder, we can find the ACF (Advanced Custom Fields) required plugin and the class-dslp.php file that includes all the needed includes and the attributes and functions used across both the public-facing side of the site and the admin area.

The main functions on this class are define_admin_hooks and define_public_hooks, in this function we add all the hooks and actions needed.

admin

This folder contains all the files needed to add the plugin logic used only on the admin side.

class-dslp-admin.php

This class handles all the logic for the filters and actions added in the class-dslp.php class, like the block and patterns registration, and the page template assignation, to name a few.

acf.php

In this file, all the Blocks settings are registered. As the name indicates, we use the Advanced Custom Fields to add these block settings.

partial/block

Here you can find all the logic and markups for each block created on the plugin, inside you'll find a file for each block.

partial/patterns

Pretty much the same as the blocks folder, this folder contains all the patterns used for the plugin. Please note that these patterns are Gutenberg patterns, and this is a sample of how it looks:

<!-- wp:cover {"overlayColor":"white","isDark":false,"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"100px"}}}} -->
<div class="wp-block-cover alignfull is-light" style="padding-top:100px;padding-bottom:100px"><span aria-hidden="true" class="wp-block-cover__background has-white-background-color has-background-dim-100 has-background-dim"></span>
	<div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"2.5rem"}},"textColor":"black"} -->
		<h2 class="has-text-align-center has-black-color has-text-color" style="font-size:2.5rem">Why do we stand out? We’re certified and care about our customers.</h2>
		<!-- /wp:heading -->

		<!-- wp:spacer {"height":"20px"} -->
		<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:heading {"textAlign":"center","level":4,"style":{"typography":{"fontSize":"2.01rem"}},"textColor":"black"} -->
		<h4 class="has-text-align-center has-black-color has-text-color" style="font-size:2.01rem">Having served over 50,000 happy customers in the last 35+ years, our experience is proven and vouched
			for. Our commitment makes us the go-to HVAC option for many in Phoenix, Arizona.</h4>
		<!-- /wp:heading -->

		<!-- wp:spacer {"height":"20px"} -->
		<div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div>
		<!-- /wp:spacer -->

		<!-- wp:embed {"url":"https://www.youtube.com/watch?v=nykrOuwA5Nw","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
		<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio">
			<div class="wp-block-embed__wrapper">
				https://www.youtube.com/watch?v=nykrOuwA5Nw
			</div>
		</figure>
		<!-- /wp:embed --></div>
</div>
<!-- /wp:cover -->

public

This folder contains all the files needed to add the plugin logic used only on the public side.

class-dslp-public.php

This class handles all the logic for the filters and actions added in the class-dslp.php class, like the API endpoints registration and handlers, the page scripts and styles enqueues, to name a few.

partials/templates/dslp.php

This is the main template structure, as you can see the file is a empty wrapper without any other element, all the contents should be added via the Gutenberg editor.