Skip to content

Commit

Permalink
Revisit the bundled block patterns (#29973)
Browse files Browse the repository at this point in the history 
* added new block patterns

* changed background colors to group block

* Switch large text to use viewport width font sizes.

* Make "Overseas" font size slightly smaller so it sits on one line.

* renaming and pattern adjustments

* linting

* buttons block pattern

* Remove URL links.

* Adjust categories.

* Ensure "Columns" category is registered.

* alt text for images

* added missing alt text

* Revise patterns for wider theme support.

Plus some minor code cleanup.

* Replace images with optimized versions

* Fix line height and block markup error.

* Remove extra space from text.

* Add "Three columns of text" to the columns category.

* Update text for three columns pattern.

* Set line height for three columns pattern.

* Update copy for Offset Title direction.

* Simplify the Two columns of text with offset heading pattern.

* Add a small spacer to the "Three columns with images and text" pattern.

* change color values to use hexadecimal

* fixed syntax

* Update images to the final WP.org CDN URLs

* renamed patterns and unregistered duplicates

* added context and domain to translations, escaped strings

* unregistered all the old default patterns

* escape attributes with esc_attr__

* escaped strings with html tags using wp_kses_post

* linting

* Update lib/block-patterns/media-text-arquitecture.php

Co-authored-by: Kjell Reigstad <[email protected]>

* Add blockTypes prop for compatibility with #30469.

* Add categories for uncategorized patterns.

* Add code comment.

* linting

* more linting

* updated snapshot related to 2 buttons block

* fixed conflict

* fixed adding patterns snapshot

* removed IDs from gallery to fix e2e tests

* removed unnecesary data attributes

* removed unnecesary ids

* changed ids to null

Co-authored-by: Kjell Reigstad <[email protected]>
  • Loading branch information
@MaggieCabrera @kjellr
MaggieCabrera and kjellr authored Apr 19, 2021
1 parent fd2a138 commit 8d630b6
Show file tree
Hide file tree
Showing 17 changed files with 571 additions and 4 deletions.
63 changes: 63 additions & 0 deletions lib/block-patterns.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,7 @@
'paragraph/large-with-background-color',
array(
'title' => __( 'Large Paragraph with background color', 'gutenberg' ),
'categories' => array( 'Text' ),
'blockTypes' => array( 'core/paragraph' ),
'viewportWidth' => 500,
'content' => '<!-- wp:paragraph {"style":{"color":{"link":"#FFFFFF","text":"#FFFFFF","background":"#000000"},"typography":{"lineHeight":"1.3","fontSize":"26px"}}} -->
Expand All @@ -170,6 +171,7 @@
'social-links/shared-background-color',
array(
'title' => __( 'Social links with a shared background color', 'gutenberg' ),
'categories' => array( 'Buttons' ),
'blockTypes' => array( 'core/social-links' ),
'viewportWidth' => 500,
'content' => '<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
Expand All @@ -179,3 +181,64 @@
<!-- /wp:social-links -->',
)
);

// Deactivate the legacy patterns bundled with WordPress, and add new block patterns for testing.
// More details in the trac issue (https://core.trac.wordpress.org/ticket/52846).
add_action(
'init',
function() {

$core_block_patterns = array(
'text-two-columns',
'two-buttons',
'two-images',
'text-two-columns-with-images',
'text-three-columns-buttons',
'large-header',
'large-header-button',
'three-buttons',
'heading-paragraph',
'quote',
);

$new_core_block_patterns = array(
'media-text-nature',
'two-images-gallery',
'three-columns-media-text',
'quote',
'large-header-left',
'large-header-text-button',
'media-text-art',
'text-two-columns-title',
'three-columns-text',
'text-two-columns-title-offset',
'heading',
'three-images-gallery',
'text-two-columns',
'media-text-arquitecture',
'two-buttons',
);

if ( ! function_exists( 'unregister_block_pattern' ) ) {
return;
}

foreach ( $core_block_patterns as $core_block_pattern ) {
unregister_block_pattern( 'core/' . $core_block_pattern );
}

register_block_pattern_category( 'buttons', array( 'label' => _x( 'Buttons', 'Block pattern category', 'default' ) ) );
register_block_pattern_category( 'columns', array( 'label' => _x( 'Columns', 'Block pattern category', 'default' ) ) );
register_block_pattern_category( 'header', array( 'label' => _x( 'Headers', 'Block pattern category', 'default' ) ) );
register_block_pattern_category( 'gallery', array( 'label' => _x( 'Gallery', 'Block pattern category', 'default' ) ) );
register_block_pattern_category( 'text', array( 'label' => _x( 'Text', 'Block pattern category', 'default' ) ) );

foreach ( $new_core_block_patterns as $core_block_pattern ) {
register_block_pattern(
'core/' . $core_block_pattern,
require __DIR__ . '/block-patterns/' . $core_block_pattern . '.php'
);
}

}
);
16 changes: 16 additions & 0 deletions lib/block-patterns/heading.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<?php
/**
* Heading.
*
* @package WordPress
*/

return array(
'title' => _x( 'Heading', 'Block pattern title', 'default' ),
'categories' => array( 'text' ),
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"align":"wide","style":{"typography":{"fontSize":"48px","lineHeight":"1.1"}}} -->
<h2 class="alignwide" style="font-size:48px;line-height:1.1">' . esc_html__( "We're a studio in Berlin with an international practice in architecture, urban planning and interior design. We believe in sharing knowledge and promoting dialogue to increase the creative potential of collaboration.", 'default' ) . '</h2>
<!-- /wp:heading -->',
'description' => _x( 'Heading text', 'Block pattern description', 'default' ),
);
33 changes: 33 additions & 0 deletions lib/block-patterns/large-header-left.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<?php
/**
* Large header with left-aligned text.
*
* @package WordPress
*/

return array(
'title' => _x( 'Large header with left-aligned text', 'Block pattern title', 'default' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:cover {"url":"https://s.w.org/images/core/5.8/forest.jpg","id":null,"dimRatio":60,"minHeight":800,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-60 has-background-dim" style="min-height:800px"><img class="wp-block-cover__image-background " alt="" src="https://s.w.org/images/core/5.8/forest.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:heading {"align":"wide","style":{"color":{"text":"#ffe074"},"typography":{"fontSize":"64px"}}} -->
<h2 class="alignwide has-text-color" style="color:#ffe074;font-size:64px">' . esc_html__( 'Forest.', 'default' ) . '</h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:spacer {"height":330} -->
<div style="height:330px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"style":{"color":{"text":"#ffe074"},"typography":{"lineHeight":"1.3","fontSize":"12px"}}} -->
<p class="has-text-color" style="color:#ffe074;font-size:12px;line-height:1.3"><em>' . esc_html__( 'Even a child knows how valuable the forest is. The fresh, breathtaking smell of trees. Echoing birds flying above that dense magnitude. A stable climate, a sustainable diverse life and a source of culture. Yet, forests and other ecosystems hang in the balance, threatened to become croplands, pasture, and plantations.', 'default' ) . '</em></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->',
'description' => _x( 'Cover image with quote on top', 'Block pattern description', 'default' ),
);
35 changes: 35 additions & 0 deletions lib/block-patterns/large-header-text-button.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<?php
/**
* Large header with text and a button.
*
* @package WordPress
*/

return array(
'title' => _x( 'Large header with text and a button.', 'Block pattern title', 'default' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:cover {"url":"https://s.w.org/images/core/5.8/art-01.jpg","id":null,"hasParallax":true,"dimRatio":40,"customOverlayColor":"#000000","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-40 has-background-dim has-parallax" style="background-color:#000000;background-image:url(https://s.w.org/images/core/5.8/art-01.jpg);min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:heading {"style":{"typography":{"fontSize":"48px","lineHeight":"1.2"}},"className":"alignwide has-white-color has-text-color"} -->
<h2 class="alignwide has-white-color has-text-color" style="font-size:48px;line-height:1.2"><strong><em>' . esc_html__( 'Overseas:', 'default' ) . '</em></strong><br><strong><em>' . esc_html__( '1500 — 1960', 'default' ) . '</em></strong></h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%"} -->
<div class="wp-block-column" style="flex-basis:60%"><!-- wp:paragraph {"style":{"color":{"text":"#ffffff"}}} -->
<p class="has-text-color" style="color:#ffffff">' . wp_kses_post( __( 'An exhibition about the different representations of the ocean throughout time, between the sixteenth and the twentieth century. Taking place in our Open Room in <em>Floor 2</em>.', 'default' ) ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"borderRadius":0,"style":{"color":{"text":"#ffffff","background":"#000000"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background no-border-radius" style="background-color:#000000;color:#ffffff">' . esc_html__( 'Visit', 'default' ) . '</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div></div>
<!-- /wp:cover -->',
'description' => _x( 'Large header with background image and text and button on top', 'Block pattern description', 'default' ),
);
21 changes: 21 additions & 0 deletions lib/block-patterns/media-text-arquitecture.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<?php
/**
* Media and text with image on the right.
*
* @package WordPress
*/

return array(
'title' => _x( 'Media and text with image on the right', 'Block pattern title', 'default' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:media-text {"align":"full","mediaId":null,"mediaType":"image","verticalAlignment":"center"} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/core/5.8/architecture-04.jpg" alt="' . esc_attr__( 'Close-up, abstract view of architecture.', 'default' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"textAlign":"center","level":3,"style":{"color":{"text":"#000000"}}} -->
<h3 class="has-text-align-center has-text-color" style="color:#000000"><strong>' . esc_html__( 'Open Spaces', 'default' ) . '</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"extra-small"} -->
<p class="has-text-align-center has-extra-small-font-size"><a href="#">' . esc_html__( 'See case study ↗', 'default' ) . '</a></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->',
'description' => _x( 'Media and text block with image to the left and text to the right', 'Block pattern description', 'default' ),
);
21 changes: 21 additions & 0 deletions lib/block-patterns/media-text-art.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<?php
/**
* Media & text with image on the right.
*
* @package WordPress
*/

return array(
'title' => _x( 'Media & text with image on the right', 'Block pattern title', 'default' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:media-text {"align":"full","mediaPosition":"right","mediaId":null,"mediaLink":"#","mediaType":"image","mediaWidth":56,"verticalAlignment":"center","className":"is-style-default"} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center is-style-default" style="grid-template-columns:auto 56%"><figure class="wp-block-media-text__media"><img src="https://s.w.org/images/core/5.8/art-02.jpg" alt="' . esc_attr__( 'A green and brown rural landscape leading into a bright blue ocean and slightly cloudy sky, done in oil paints.', 'default' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"style":{"color":{"text":"#000000"}}} -->
<h2 class="has-text-color" style="color:#000000"><strong>' . esc_html__( 'Shore with Blue Sea', 'default' ) . '</strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.1","fontSize":"17px"},"color":{"text":"#636363"}}} -->
<p class="has-text-color" style="color:#636363;font-size:17px;line-height:1.1">' . esc_html__( 'Eleanor Harris&nbsp;(American, 1901-1942)', 'default' ) . '</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:media-text -->',
'description' => _x( 'Media and text block with image to the right and text to the left', 'Block pattern description', 'default' ),
);
28 changes: 28 additions & 0 deletions lib/block-patterns/media-text-nature.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<?php
/**
* Media & text in a full height container.
*
* @package WordPress
*/

return array(
'title' => _x( 'Media & text in a full height container', 'Block pattern title', 'default' ),
'categories' => array( 'header' ),
'content' => '<!-- wp:cover {"customOverlayColor":"#ffffff","minHeight":100,"minHeightUnit":"vh","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#ffffff;min-height:100vh"><div class="wp-block-cover__inner-container"><!-- wp:media-text {"mediaId":null,"mediaLink":"https://s.w.org/images/core/5.8/soil.jpg","mediaType":"image","mediaWidth":56,"verticalAlignment":"center","imageFill":true} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-vertically-aligned-center is-image-fill" style="grid-template-columns:56% auto"><figure class="wp-block-media-text__media" style="background-image:url(https://s.w.org/images/core/5.8/soil.jpg);background-position:50% 50%"><img src="https://s.w.org/images/core/5.8/soil.jpg" alt="' . esc_attr__( 'Close-up of dried, cracked earth.', 'default' ) . '"/></figure><div class="wp-block-media-text__content"><!-- wp:heading {"style":{"typography":{"fontSize":"32px"},"color":{"text":"#000000"}}} -->
<h2 class="has-text-color" style="color:#000000;font-size:32px"><strong>' . esc_html__( "What's the problem?", 'default' ) . '</strong></h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"17px"},"color":{"text":"#000000"}}} -->
<p class="has-text-color" style="color:#000000;font-size:17px">' . esc_html__( 'Trees are more important today than ever before. More than 10,000 products are reportedly made from trees. Through chemistry, the humble woodpile is yielding chemicals, plastics and fabrics that were beyond comprehension when an axe first felled a Texas tree.', 'default' ) . '</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link">' . esc_html__( 'Learn more', 'default' ) . '</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div></div>
<!-- /wp:media-text --></div></div>
<!-- /wp:cover -->',
'description' => _x( 'Media and text block with image to the left and text and button to the right', 'Block pattern description', 'default' ),
);
30 changes: 30 additions & 0 deletions lib/block-patterns/quote.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<?php
/**
* Quote.
*
* @package WordPress
*/

return array(
'title' => _x( 'Quote', 'Block pattern title', 'default' ),
'categories' => array( 'text' ),
'blockTypes' => array( 'core/quote' ),
'content' => '<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator -->
<!-- wp:image {"align":"center","id":null,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} -->
<div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://s.w.org/images/core/5.8/portrait.jpg" alt="' . esc_attr__( 'A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed.', 'default' ) . '" width="150" height="150"/></figure></div>
<!-- /wp:image -->
<!-- wp:quote {"align":"center","className":"is-style-large"} -->
<blockquote class="wp-block-quote has-text-align-center is-style-large"><p>' . esc_html__( "\"Contributing makes me feel like I'm being useful to the planet.\"", 'default' ) . '</p><cite>' . wp_kses_post( __( '— Anna Wong, <em>Volunteer</em>', 'default' ) ) . '</cite></blockquote>
<!-- /wp:quote -->
<!-- wp:separator {"className":"is-style-default"} -->
<hr class="wp-block-separator is-style-default"/>
<!-- /wp:separator --></div></div>
<!-- /wp:group -->',
'description' => _x( 'Testimonial quote with portrait', 'Block pattern description', 'default' ),
);
53 changes: 53 additions & 0 deletions lib/block-patterns/text-two-columns-title-offset.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<?php
/**
* Two columns of text with offset heading.
*
* @package WordPress
*/

return array(
'title' => _x( 'Two columns of text with offset heading', 'Block pattern title', 'default' ),
'categories' => array( 'columns', 'text' ),
'content' => '<!-- wp:group {"align":"full","style":{"color":{"background":"#f2f0e9"}}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f2f0e9"><!-- wp:spacer {"height":70} -->
<div style="height:70px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.1","fontSize":"30px"},"color":{"text":"#000000"}}} -->
<p class="has-text-color" style="color:#000000;font-size:30px;line-height:1.1"><strong>' . esc_html__( 'Oceanic Inspiration', 'default' ) . '</strong></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"50%"} -->
<div class="wp-block-column" style="flex-basis:50%"><!-- wp:separator {"customColor":"#000000","className":"is-style-wide"} -->
<hr class="wp-block-separator has-text-color has-background is-style-wide" style="background-color:#000000;color:#000000"/>
<!-- /wp:separator --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#000000"}},"fontSize":"extra-small"} -->
<p class="has-text-color has-extra-small-font-size" style="color:#000000">' . esc_html__( 'Winding veils round their heads, the women walked on deck. They were now moving steadily down the river, passing the dark shapes of ships at anchor, and London was a swarm of lights with a pale yellow canopy drooping above it. There were the lights of the great theatres, the lights of the long streets, lights that indicated huge squares of domestic comfort, lights that hung high in air.', 'default' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"style":{"color":{"text":"#000000"}},"fontSize":"extra-small"} -->
<p class="has-text-color has-extra-small-font-size" style="color:#000000">' . esc_html__( 'No darkness would ever settle upon those lamps, as no darkness had settled upon them for hundreds of years. It seemed dreadful that the town should blaze for ever in the same spot; dreadful at least to people going away to adventure upon the sea, and beholding it as a circumscribed mound, eternally burnt, eternally scarred. From the deck of the ship the great city appeared a crouched and cowardly figure, a sedentary miser.', 'default' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":40} -->
<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->',
'description' => _x( 'Two columns of text with offset heading', 'Block pattern description', 'default' ),
);
Loading

0 comments on commit 8d630b6

Please sign in to comment.