Snippets

Joseph Dickson Joseph's Block Patterns

Created by Joseph Dickson

File index.php Added

  • Ignore whitespace
  • Hide word diff
+<?php
+/**
+ * Plugin Name: Joseph's Block Patterns 
+ * Description: A custom Block Pattern library.
+ * Author: Joseph Dickson
+ * Author URI: https://joseph-dickson.com
+ * Version: 0.2
+ * License: GPL2
+ */
+
+function josephd_register_block_patterns() {
+
+// Directory Example: /home/user/var/www/html/wordpress/wp-content/plugins/my-plugin/
+$dir = plugin_dir_url( __FILE__ ) . 'images/camera-icon.png';
+
+	// A block pattern for image tiles and buttons in a single row
+	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
+
+		register_block_pattern(
+			'josephd-patterns/call-to-action-tiles',
+			array(
+				'title'       => __( 'Call to Action Tiles', 'textdomain' ),
+				'categories'  => array( 'josephd-patterns' ), // use the category slug
+				'description' => _x( 'A column row of images and buttons.', 'A column row using images and buttons', 'textdomain' ),
+				'content'     => implode(
+					'', array(
+						'<!-- wp:columns -->',
+						'<div class="wp-block-columns"><!-- wp:column -->',
+						'<div class="wp-block-column"><!-- wp:group -->',
+						'<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:image  -->',
+						'<figure class="wp-block-image"><img src="' . $dir  . '" alt="camera icon" /></figure>',
+						'<!-- /wp:image -->',
+
+						'<!-- wp:buttons -->',
+						'<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"width":100} -->',
+						'<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link no-border-radius">Button Text</a></div>',
+						'<!-- /wp:button --></div>',
+						'<!-- /wp:buttons --></div></div>',
+						'<!-- /wp:group --></div>',
+						'<!-- /wp:column -->',
+
+						'<!-- wp:column -->',
+						'<div class="wp-block-column"><!-- wp:image -->',
+						'<figure class="wp-block-image"><img src="' . $dir  . '" alt="camera icon" /></figure>',
+						'<!-- /wp:image -->',
+
+						'<!-- wp:buttons -->',
+						'<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"width":100} -->',
+						'<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link no-border-radius">Button Text</a></div>',
+						'<!-- /wp:button --></div>',
+						'<!-- /wp:buttons --></div>',
+						'<!-- /wp:column -->',
+
+						'<!-- wp:column -->',
+						'<div class="wp-block-column"><!-- wp:image -->',
+						'<figure class="wp-block-image"><img src="' . $dir  . '" alt="camera icon" /></figure>',
+						'<!-- /wp:image -->',
+
+						'<!-- wp:buttons -->',
+						'<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"width":100} -->',
+						'<div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link no-border-radius">Button Text</a></div>',
+						'<!-- /wp:button --></div>',
+						'<!-- /wp:buttons --></div>',
+						'<!-- /wp:column --></div>',
+						'<!-- /wp:columns -->',
+					)
+				),
+
+			)
+		);
+
+		register_block_pattern(
+			'josephd-patterns/youtube-video-embed',
+			array(
+				'title'       => __( 'YouTube Video', 'textdomain' ),
+				'categories'  => array( 'josephd-patterns' ), // use the category slug
+				'description' => _x( 'A video and supporting text', 'A YouTube embed, text and, buttons', 'textdomain' ),
+				'content'     => implode(
+					'', array(					
+						'<!-- wp:cover {"url":"' . $dir . '","dimRatio":50,"focalPoint":{"x":"0.50","y":"1.00"},"contentPosition":"center center","align":"full","className":"is-style-default"} -->',
+						'<div class="wp-block-cover alignfull has-background-dim-50 has-background-dim is-style-default"><img class="wp-block-cover__image-background" alt="" src="' . $dir . '" style="object-position:50% 100%" data-object-fit="cover" data-object-position="50% 100%"/><div class="wp-block-cover__inner-container"><!-- wp:columns {"align":"full"} -->',
+						'<div class="wp-block-columns alignfull"><!-- wp:column -->',
+						'<div class="wp-block-column"><!-- wp:embed {"url":"https://www.youtube.com/watch?v=JL7DJay1xtA","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=JL7DJay1xtA',
+						'</div></figure>',
+						'<!-- /wp:embed --></div>',
+						'<!-- /wp:column -->',
+
+						'<!-- wp:column -->',
+						'<div class="wp-block-column"><!-- wp:heading -->',
+						'<h2>Lorem Ipsum</h2>',
+						'<!-- /wp:heading -->',
+
+						'<!-- wp:paragraph -->',
+						'<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras auctor id odio ut feugiat. In vitae metus libero. Curabitur nulla mi, ultrices ut maximus non, pellentesque non erat. Nam accumsan sapien sodales augue tempus iaculis. Etiam interdum vestibulum eleifend. Ut ornare dignissim lacus sit amet placerat. Mauris et diam pulvinar orci consectetur malesuada non nec libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>',
+						'<!-- /wp:paragraph -->',
+
+						'<!-- wp:buttons {"contentJustification":"center"} -->',
+						'<div class="wp-block-buttons is-content-justification-center"><!-- wp:button {"backgroundColor":"black","textColor":"white"} -->',
+						'<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background">Call to Action</a></div>',
+						'<!-- /wp:button -->',
+
+						'<!-- wp:button {"textColor":"white","className":"is-style-outline"} -->',
+						'<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color">Supporting Action</a></div>',
+						'<!-- /wp:button --></div>',
+						'<!-- /wp:buttons --></div>',
+						'<!-- /wp:column --></div>',
+						'<!-- /wp:columns --></div></div>',
+						'<!-- /wp:cover -->',
+						
+					)
+				),
+
+			)
+		);
+
+		register_block_pattern(
+			'josephd-patterns/image-quote',
+			array(
+				'title'       => __( 'Image & Quote', 'textdomain' ),
+				'categories'  => array( 'josephd-patterns' ), // use the category slug
+				'description' => _x( 'An image and quote', 'A portrait alongside the quote', 'textdomain' ),
+				'content'     => implode(
+						'', array(					
+						'<!-- wp:columns -->',
+						'<div class="wp-block-columns"><!-- wp:column {"width":"33.33%"} -->',
+						'<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:image {"large","linkDestination":"none"} -->',
+						'<figure class="wp-block-image"><img src="' . $dir  . '" alt="camera icon" /></figure>',
+						'<!-- /wp:image --></div>',
+						'<!-- /wp:column -->',
+
+						'<!-- wp:column {"width":"66.66%"} -->',
+						'<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:quote {"className":"is-style-large"} -->',
+						'<blockquote class="wp-block-quote is-style-large"><p>Inspiring Quote"</p><cite>Citation </cite></blockquote>',
+						'<!-- /wp:quote --></div>',
+						'<!-- /wp:column --></div>',
+						'<!-- /wp:columns -->',
+					)
+				),
+
+			)
+		);
+	
+	}
+}
+add_action( 'init', 'josephd_register_block_patterns' );
+
+function josephd_register_block_categories() {
+	if ( class_exists( 'WP_Block_Patterns_Registry' ) ) {
+
+		register_block_pattern_category(
+			'josephd-patterns', // category slug
+			array( 'label' => _x( 'Joseph\'s Patterns', 'Block pattern category', 'textdomain' ) )
+		);
+
+	}
+}
+add_action( 'init', 'josephd_register_block_categories' );
+?>
HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.