Skip to content

Commit

Permalink
Merge pull request #4 from imranhsayed/feature/add-patterns
Browse files Browse the repository at this point in the history
Add block pattern
  • Loading branch information
imranhsayed authored Jun 18, 2022
2 parents 5dddcac + e76245d commit 65bde9b
Show file tree
Hide file tree
Showing 7 changed files with 187 additions and 4 deletions.
15 changes: 12 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,19 @@
# aquila-features
Advanced WordPress Plugin Development

##setup
# Setup
How to set up the plugin.

#development
## Install Setup Packaaes.

- `npm install && composer install`
- `npm ci && composer install`

# Development

## Start Development Server.
- `npm run dev`

## Run PHPCS.

- `npm run lint:php`
- `npm run lint:php:fix`
1 change: 1 addition & 0 deletions aquila-features.php
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
* Bootstrap the plugin.
*/
require_once 'vendor/autoload.php';
require_once untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/inc/custom-functions.php';

use AquilaFeatures\Plugin;

Expand Down
42 changes: 42 additions & 0 deletions inc/custom-functions.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?php
/**
* Custom Functions.
*
* @package Aquila Features.
*/

/**
* Get plugin template.
*
* @param string $template Name or path of the template within /templates folder without php extension.
* @param array $variables pass an array of variables you want to use in template.
* @param bool $echo Whether to echo out the template content or not.
*
* @return string|void Template markup.
*/
function aquila_features_get_template( string $template, array $variables = [], bool $echo = false ) {

$template_file = sprintf( '%1$s/templates/%2$s.php', AQUILA_FEATURES_PLUGIN_PATH, $template );

if ( ! file_exists( $template_file ) ) {
return '';
}

if ( ! empty( $variables ) && is_array( $variables ) ) {
extract( $variables, EXTR_SKIP ); // phpcs:ignore WordPress.PHP.DontExtract.extract_extract -- Used as an exception as there is no better alternative.
}

ob_start();

include $template_file; // phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable

$markup = ob_get_clean();

if ( ! $echo ) {
return $markup;
}

echo $markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Output escaped already in template.

}

2 changes: 1 addition & 1 deletion phpcs.xml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<rule ref="WordPress.WP.I18n">
<properties>
<property name="text_domain" type="array">
<element value="features-plugin-v2"/>
<element value="aquila-features"/>
<element value="default"/>
</property>
</properties>
Expand Down
76 changes: 76 additions & 0 deletions src/Patterns.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<?php
/**
* Patterns Class.
*
* @package aquila-features
*/

namespace AquilaFeatures;

/**
* Class Patterns.
*/
class Patterns {

/**
* Constructor.
*/
public function __construct() {
$this->init();
}

/**
* Initialize plugin
*/
private function init() {
/**
* Actions.
*/
add_action( 'init', [ $this, 'register_block_patterns' ] );
add_action( 'init', [ $this, 'register_block_pattern_categories' ] );
}

/**
* Register Block Patterns.
*/
public function register_block_patterns() {
if ( function_exists( 'register_block_pattern' ) ) {

// Get the two column pattern content.
$two_columns_content = aquila_features_get_template( 'patterns/two-columns' );

/**
* Register Two Column Pattern
*/
register_block_pattern(
'aquila-features/two-columns',
[
'title' => __( 'Aquila Features Two Column', 'aquila-features' ),
'description' => __( 'Aquila Two Column Patterns', 'aquila-features' ),
'categories' => [ 'aquila-columns' ],
'content' => $two_columns_content,
]
);
}
}

/**
* Register Block Pattern Categories.
*/
public function register_block_pattern_categories() {

$pattern_categories = [
'aquila-columns' => __( 'Aquila Features Columns', 'aquila-features' ),
];

if ( ! empty( $pattern_categories ) ) {
foreach ( $pattern_categories as $pattern_category => $pattern_category_label ) {
register_block_pattern_category(
$pattern_category,
[ 'label' => $pattern_category_label ]
);
}
}
}
}

1 change: 1 addition & 0 deletions src/Plugin.php
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ private function init() {
define( 'AQUILA_FEATURES_PLUGIN_VERSION', '1.0.0' );

new Assets();
new Patterns();
}
}

54 changes: 54 additions & 0 deletions templates/patterns/two-columns.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<?php
/**
* Two Columns Block Patterns Template
*
* @package aquila-features
*/

?>

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"black","textColor":"white"} -->
<div class="wp-block-group has-white-color has-black-background-color has-text-color has-background"><!-- wp:heading {"textAlign":"center","textColor":"pale-cyan-blue"} -->
<h2 class="has-text-align-center has-pale-cyan-blue-color has-text-color">Heading One</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","textColor":"cyan-bluish-gray"} -->
<p class="has-text-align-center has-cyan-bluish-gray-color has-text-color">Description</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"align":"center","className":"is-style-layout-border-white-no-fill"} -->
<div class="wp-block-button aligncenter is-style-layout-border-white-no-fill"><a class="wp-block-button__link wp-element-button">CTA One</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:group {"backgroundColor":"black","textColor":"white"} -->
<div class="wp-block-group has-white-color has-black-background-color has-text-color has-background"><!-- wp:heading {"textAlign":"center","textColor":"pale-cyan-blue"} -->
<h2 class="has-text-align-center has-pale-cyan-blue-color has-text-color">Heading Two</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"align":"center","textColor":"cyan-bluish-gray"} -->
<p class="has-text-align-center has-cyan-bluish-gray-color has-text-color">Description</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"align":"center","className":"is-style-layout-border-white-no-fill"} -->
<div class="wp-block-button aligncenter is-style-layout-border-white-no-fill"><a class="wp-block-button__link wp-element-button">CTA Two</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

0 comments on commit 65bde9b

Please sign in to comment.