Geologist: Add block patterns (#4623)

* Geologist: Add block patterns

* Add pattern files

* Update styles for block patterns

* Update content for block patterns

* fix quote markup

* adding textdomain

* add paragraph block comments

* add image to repo
This commit is contained in:
Ben Dwyer 2021-09-22 11:20:13 +01:00 committed by GitHub
parent 0abf395e3e
commit e5ec33076b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 238 additions and 15 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 KiB

View file

@ -295,8 +295,12 @@ ul ul {
background-color: var(--wp--preset--color--tertiary);
}
.wp-block-pullquote.is-style-solid-color {
padding: var(--wp--custom--gap--horizontal);
.wp-block-pullquote {
text-indent: -0.5ch;
}
.wp-block-pullquote cite {
text-indent: 0.5ch;
}
.has-primary-background-color {

View file

@ -297,14 +297,16 @@
"core/pullquote": {
"typography": {
"fontStyle": "normal",
"fontSize": "var(--wp--preset--font-size--huge)",
"fontWeight": "400",
"fontSize": "var(--wp--preset--font-size--extra-large)",
"fontWeight": "500",
"lineHeight": "1.4"
},
"spacing": {
"padding": {
"left": "0px",
"right": "0px"
"bottom": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"left": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"right": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"top": "calc( var(--wp--custom--gap--horizontal) * 3 )"
}
},
"border": {

View file

@ -22,3 +22,7 @@ function newtheme_scripts() {
}
add_action( 'wp_enqueue_scripts', 'newtheme_scripts' );
/**
* Block Patterns.
*/
require get_stylesheet_directory() . '/inc/block-patterns.php';

View file

@ -0,0 +1,43 @@
<?php
/**
* Geologist Theme: Block Patterns
*
* @package Geologist
* @since 1.0.0
*/
if ( ! function_exists( 'geologist_register_block_patterns' ) ) :
function geologist_register_block_patterns() {
if ( function_exists( 'register_block_pattern_category' ) ) {
register_block_pattern_category(
'geologist',
array( 'label' => __( 'Geologist', 'geologist' ) )
);
}
if ( function_exists( 'register_block_pattern' ) ) {
$block_patterns = array(
'authors',
'image-feature',
'introduction',
'quote',
'two-featured-posts',
);
if ( class_exists( 'WP_Block_Type_Registry' ) && \WP_Block_Type_Registry::get_instance()->is_registered( 'jetpack/subscriptions' ) ) {
$block_patterns[] = 'email-updates-large';
$block_patterns[] = 'email-updates-small';
}
foreach ( $block_patterns as $block_pattern ) {
register_block_pattern(
'geologist/' . $block_pattern,
require __DIR__ . '/patterns/' . $block_pattern . '.php'
);
}
}
}
endif;
add_action( 'init', 'geologist_register_block_patterns', 9 );

View file

@ -0,0 +1,49 @@
<?php
/**
* Authors
*
* @package Geologist
*/
return array(
'title' => __( 'Authors', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/post-author' ),
'content' => '<!-- wp:paragraph -->
<p>' . esc_html__( 'About the Authors:', 'geologist' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>' . esc_html__( 'Sarah Edwards', 'geologist' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html__( 'Sarah is a geologist at Anthem State University. Her love for all things underground was sparked in Kindergarten when she unearthed a toy that someone left buried in the sandbox.', 'geologist' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#F5F0E5","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"wordpress.com","service":"wordpress"} /-->
<!-- wp:social-link {"url":"instagram.com","service":"instagram"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading -->
<h2>' . esc_html__( 'Angelo Ortiz', 'geologist' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>' . esc_html__( 'Angelo is an independent researcher and hobbyist. His collection of gemstones rivals that of some museums. Angelo is always on the lookout for a new discovery, and carries his toolkit everywhere.', 'geologist' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"iconColor":"primary","iconColorValue":"#F5F0E5","className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"instagram.com","service":"instagram"} /-->
<!-- wp:social-link {"url":"twitter.com","service":"twitter"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);

View file

@ -0,0 +1,19 @@
<?php
/**
* Email Updates (Large)
*
* @package Geologist
*/
return array(
'title' => __( 'Email Updates (Large)', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/query' ),
'content' => '<!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Our newsletter rocks! Sign up here to receive every post in your inbox.', 'geologist' ) . '</h3>
<!-- /wp:heading -->
<!-- wp:jetpack/subscriptions -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions -->',
);

View file

@ -0,0 +1,16 @@
<?php
/**
* Email Updates (Small)
*
* @package Geologist
*/
return array(
'title' => __( 'Email Updates (small)', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'jetpack/subscriptions' ),
'content' => '<!-- wp:paragraph --><p>' . esc_html__( 'Receive every post in your inbox.', 'geologist' ) . '</p><!-- /wp:paragraph -->
<!-- wp:jetpack/subscriptions -->
<div class="wp-block-jetpack-subscriptions wp-block-jetpack-subscriptions__supports-newline">[jetpack_subscription_form show_subscribers_total="false" button_on_newline="false" custom_font_size="16px" custom_border_radius="0" custom_border_weight="1" custom_padding="15" custom_spacing="10" submit_button_classes="" email_field_classes="" show_only_email_and_button="true"]</div>
<!-- /wp:jetpack/subscriptions -->',
);

View file

@ -0,0 +1,29 @@
<?php
/**
* Two posts with features images in a query block.
*
* @package Geologist
*/
return array(
'title' => __( 'Image feature', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/image', 'core/columns' ),
'content' => '<!-- wp:image {"align":"wide","sizeSlug":"large"} -->
<figure class="wp-block-image alignwide size-large"><img src="/assets/images/gem.jpeg" alt=""/></figure>
<!-- /wp:image -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Geologist', 'geologist' ) . '</h3>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p>' . esc_html__( "Geologist is a blog dedicated to everything buried under the earth's surface.", 'geologist' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);

View file

@ -0,0 +1,15 @@
<?php
/**
* Two posts with features images in a query block.
*
* @package Geologist
*/
return array(
'title' => __( 'Introduction', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/cover', 'core/header' ),
'content' => '<!-- wp:heading {"level":3} -->
<h3>' . esc_html__( "Geologist is a blog dedicated to everything buried under the earth's surface.", 'geologist' ) . '</h3>
<!-- /wp:heading -->',
);

View file

@ -0,0 +1,15 @@
<?php
/**
* Two posts with features images in a query block.
*
* @package Geologist
*/
return array(
'title' => __( 'Quote', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/pullquote' ),
'content' => '<!-- wp:pullquote {"textColor":"background","className":"has-background-color has-primary-background-color has-text-color has-background"} -->
<figure class="wp-block-pullquote has-background-color has-primary-background-color has-text-color has-background"><blockquote class="has-text-color has-background-color"><p>' . esc_html__( 'Amazonite, Ametrine, Beryl, Dioptase, Howlite, Jade, and Ruby.', 'geologist' ) . '</p><cite>' . esc_html__( 'Sarah Edwards', 'geologist' ) . '</cite></blockquote></figure>
<!-- /wp:pullquote -->'
);

View file

@ -0,0 +1,23 @@
<?php
/**
* Two posts with features images in a query block.
*
* @package Geologist
*/
return array(
'title' => __( 'Two featured posts', 'geologist' ),
'categories' => array( 'geologist' ),
'blockTypes' => array( 'core/query' ),
'content' => '<!-- wp:query {"queryId":14,"query":{"perPage":2,"pages":0,"offset":0,"postType":"post","categoryIds":[],"tagIds":[],"order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"exclude","inherit":false},"displayLayout":{"type":"flex","columns":2}} -->
<div class="wp-block-query"><!-- wp:post-template -->
<!-- wp:post-featured-image {"isLink":true} /-->
<!-- wp:post-title {"isLink":true} /-->
<!-- wp:post-excerpt /-->
<!-- wp:post-date /-->
<!-- /wp:post-template --></div>
<!-- /wp:query -->',
);

View file

@ -1,3 +1,7 @@
.wp-block-pullquote.is-style-solid-color {
padding: var(--wp--custom--gap--horizontal);
}
.wp-block-pullquote {
text-indent: -0.5ch;
cite {
text-indent: 0.5ch;
}
}

View file

@ -462,16 +462,16 @@
},
"typography": {
"fontStyle": "normal",
"fontSize": "var(--wp--preset--font-size--huge)",
"fontWeight": "400",
"fontSize": "var(--wp--preset--font-size--extra-large)",
"fontWeight": "500",
"lineHeight": "1.4"
},
"spacing": {
"padding": {
"left": "0px",
"right": "0px",
"top": "var(--wp--custom--gap--horizontal)",
"bottom": "var(--wp--custom--gap--horizontal)"
"left": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"right": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"top": "calc( var(--wp--custom--gap--horizontal) * 3 )",
"bottom": "calc( var(--wp--custom--gap--horizontal) * 3 )"
}
}
},