From 8d630b6caae7a6ad1c85188aaaf227b6904beb15 Mon Sep 17 00:00:00 2001 From: Maggie Date: Mon, 19 Apr 2021 20:24:07 +0200 Subject: [PATCH] Revisit the bundled block patterns (#29973) * 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 * 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 --- lib/block-patterns.php | 63 +++++++++++++++++ lib/block-patterns/heading.php | 16 +++++ lib/block-patterns/large-header-left.php | 33 +++++++++ .../large-header-text-button.php | 35 ++++++++++ .../media-text-arquitecture.php | 21 ++++++ lib/block-patterns/media-text-art.php | 21 ++++++ lib/block-patterns/media-text-nature.php | 28 ++++++++ lib/block-patterns/quote.php | 30 ++++++++ .../text-two-columns-title-offset.php | 53 ++++++++++++++ lib/block-patterns/text-two-columns-title.php | 31 +++++++++ lib/block-patterns/text-two-columns.php | 44 ++++++++++++ .../three-columns-media-text.php | 69 +++++++++++++++++++ lib/block-patterns/three-columns-text.php | 43 ++++++++++++ lib/block-patterns/three-images-gallery.php | 43 ++++++++++++ lib/block-patterns/two-buttons.php | 22 ++++++ lib/block-patterns/two-images-gallery.php | 15 ++++ .../adding-patterns.test.js.snap | 8 +-- 17 files changed, 571 insertions(+), 4 deletions(-) create mode 100644 lib/block-patterns/heading.php create mode 100644 lib/block-patterns/large-header-left.php create mode 100644 lib/block-patterns/large-header-text-button.php create mode 100644 lib/block-patterns/media-text-arquitecture.php create mode 100644 lib/block-patterns/media-text-art.php create mode 100644 lib/block-patterns/media-text-nature.php create mode 100644 lib/block-patterns/quote.php create mode 100644 lib/block-patterns/text-two-columns-title-offset.php create mode 100644 lib/block-patterns/text-two-columns-title.php create mode 100644 lib/block-patterns/text-two-columns.php create mode 100644 lib/block-patterns/three-columns-media-text.php create mode 100644 lib/block-patterns/three-columns-text.php create mode 100644 lib/block-patterns/three-images-gallery.php create mode 100644 lib/block-patterns/two-buttons.php create mode 100644 lib/block-patterns/two-images-gallery.php diff --git a/lib/block-patterns.php b/lib/block-patterns.php index 789f483aea6c3..3c3695d4ac049 100644 --- a/lib/block-patterns.php +++ b/lib/block-patterns.php @@ -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' => ' @@ -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' => ' @@ -179,3 +181,64 @@ ', ) ); + +// 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' + ); + } + + } +); diff --git a/lib/block-patterns/heading.php b/lib/block-patterns/heading.php new file mode 100644 index 0000000000000..571ff91fa36c4 --- /dev/null +++ b/lib/block-patterns/heading.php @@ -0,0 +1,16 @@ + _x( 'Heading', 'Block pattern title', 'default' ), + 'categories' => array( 'text' ), + 'blockTypes' => array( 'core/heading' ), + 'content' => ' +

' . 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' ) . '

+ ', + 'description' => _x( 'Heading text', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/large-header-left.php b/lib/block-patterns/large-header-left.php new file mode 100644 index 0000000000000..6b2da58036007 --- /dev/null +++ b/lib/block-patterns/large-header-left.php @@ -0,0 +1,33 @@ + _x( 'Large header with left-aligned text', 'Block pattern title', 'default' ), + 'categories' => array( 'header' ), + 'content' => ' +
+

' . esc_html__( 'Forest.', 'default' ) . '

+ + + +
+
+ + + + +

' . 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' ) . '

+
+ + + +
+
+
+ ', + 'description' => _x( 'Cover image with quote on top', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/large-header-text-button.php b/lib/block-patterns/large-header-text-button.php new file mode 100644 index 0000000000000..6f7d4d9f5a411 --- /dev/null +++ b/lib/block-patterns/large-header-text-button.php @@ -0,0 +1,35 @@ + _x( 'Large header with text and a button.', 'Block pattern title', 'default' ), + 'categories' => array( 'header' ), + 'content' => ' +
+

' . esc_html__( 'Overseas:', 'default' ) . '
' . esc_html__( '1500 — 1960', 'default' ) . '

+ + + +
+
+

' . 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 Floor 2.', 'default' ) ) . '

+ + + +
+
' . esc_html__( 'Visit', 'default' ) . '
+
+
+ + + +
+
+
+ ', + 'description' => _x( 'Large header with background image and text and button on top', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/media-text-arquitecture.php b/lib/block-patterns/media-text-arquitecture.php new file mode 100644 index 0000000000000..ba7cf9521e7e5 --- /dev/null +++ b/lib/block-patterns/media-text-arquitecture.php @@ -0,0 +1,21 @@ + _x( 'Media and text with image on the right', 'Block pattern title', 'default' ), + 'categories' => array( 'header' ), + 'content' => ' +
' . esc_attr__( 'Close-up, abstract view of architecture.', 'default' ) . '
+

' . esc_html__( 'Open Spaces', 'default' ) . '

+ + + +

' . esc_html__( 'See case study ↗', 'default' ) . '

+
+ ', + 'description' => _x( 'Media and text block with image to the left and text to the right', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/media-text-art.php b/lib/block-patterns/media-text-art.php new file mode 100644 index 0000000000000..85ed71d41a6f1 --- /dev/null +++ b/lib/block-patterns/media-text-art.php @@ -0,0 +1,21 @@ + _x( 'Media & text with image on the right', 'Block pattern title', 'default' ), + 'categories' => array( 'header' ), + 'content' => ' +
' . esc_attr__( 'A green and brown rural landscape leading into a bright blue ocean and slightly cloudy sky, done in oil paints.', 'default' ) . '
+

' . esc_html__( 'Shore with Blue Sea', 'default' ) . '

+ + + +

' . esc_html__( 'Eleanor Harris (American, 1901-1942)', 'default' ) . '

+
+ ', + 'description' => _x( 'Media and text block with image to the right and text to the left', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/media-text-nature.php b/lib/block-patterns/media-text-nature.php new file mode 100644 index 0000000000000..e51f8514531b7 --- /dev/null +++ b/lib/block-patterns/media-text-nature.php @@ -0,0 +1,28 @@ + _x( 'Media & text in a full height container', 'Block pattern title', 'default' ), + 'categories' => array( 'header' ), + 'content' => ' +
+
' . esc_attr__( 'Close-up of dried, cracked earth.', 'default' ) . '
+

' . esc_html__( "What's the problem?", 'default' ) . '

+ + + +

' . 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' ) . '

+ + +
+
' . esc_html__( 'Learn more', 'default' ) . '
+
+
+
+ ', + 'description' => _x( 'Media and text block with image to the left and text and button to the right', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/quote.php b/lib/block-patterns/quote.php new file mode 100644 index 0000000000000..bbb844472f05c --- /dev/null +++ b/lib/block-patterns/quote.php @@ -0,0 +1,30 @@ + _x( 'Quote', 'Block pattern title', 'default' ), + 'categories' => array( 'text' ), + 'blockTypes' => array( 'core/quote' ), + 'content' => ' +
+
+ + + +
' . esc_attr__( 'A side profile of a woman in a russet-colored turtleneck and white bag. She looks up with her eyes closed.', 'default' ) . '
+ + + +

' . esc_html__( "\"Contributing makes me feel like I'm being useful to the planet.\"", 'default' ) . '

' . wp_kses_post( __( '— Anna Wong, Volunteer', 'default' ) ) . '
+ + + +
+
+ ', + 'description' => _x( 'Testimonial quote with portrait', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/text-two-columns-title-offset.php b/lib/block-patterns/text-two-columns-title-offset.php new file mode 100644 index 0000000000000..e080234ef3af0 --- /dev/null +++ b/lib/block-patterns/text-two-columns-title-offset.php @@ -0,0 +1,53 @@ + _x( 'Two columns of text with offset heading', 'Block pattern title', 'default' ), + 'categories' => array( 'columns', 'text' ), + 'content' => ' +
+ + + + +
+
+

' . esc_html__( 'Oceanic Inspiration', 'default' ) . '

+
+ + + +
+
+
+
+ + + +
+
+ + + +
+

' . 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' ) . '

+
+ + + +
+

' . 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' ) . '

+
+
+ + + + +
+ ', + 'description' => _x( 'Two columns of text with offset heading', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/text-two-columns-title.php b/lib/block-patterns/text-two-columns-title.php new file mode 100644 index 0000000000000..c21f8f220ed50 --- /dev/null +++ b/lib/block-patterns/text-two-columns-title.php @@ -0,0 +1,31 @@ + _x( 'Two columns text and title', 'Block pattern title', 'default' ), + 'categories' => array( 'columns', 'text' ), + 'content' => ' +
+

' . esc_html__( 'The voyage had begun, and had begun happily with a soft blue sky, and a calm sea.', 'default' ) . '

+ + + +
+
+

' . esc_html__( 'They followed her on to the deck. All the smoke and the houses had disappeared, and the ship was out in a wide space of sea very fresh and clear though pale in the early light. They had left London sitting on its mud. A very thin line of shadow tapered on the horizon, scarcely thick enough to stand the burden of Paris, which nevertheless rested upon it. They were free of roads, free of mankind, and the same exhilaration at their freedom ran through them all.', 'default' ) . '

+
+ + + +
+

' . esc_html__( "The ship was making her way steadily through small waves which slapped her and then fizzled like effervescing water, leaving a little border of bubbles and foam on either side. The colourless October sky above was thinly clouded as if by the trail of wood-fire smoke, and the air was wonderfully salt and brisk. Indeed it was too cold to stand still. Mrs. Ambrose drew her arm within her husband's, and as they moved off it could be seen from the way in which her sloping cheek turned up to his that she had something private to communicate.", 'default' ) . '

+
+
+
+ ', + 'description' => _x( 'Two columns text and title', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/text-two-columns.php b/lib/block-patterns/text-two-columns.php new file mode 100644 index 0000000000000..7ab157d8ca1ae --- /dev/null +++ b/lib/block-patterns/text-two-columns.php @@ -0,0 +1,44 @@ + _x( 'Two columns of text', 'Block pattern title', 'default' ), + 'categories' => array( 'columns', 'text' ), + 'content' => ' +
+
+ + + +

' . esc_html__( 'We have worked with:', 'default' ) . '

+ + + +

' . wp_kses_post( __( 'EARTHFUND™
ARCHWEEKLY
FUTURE ROADS
BUILDING NY', 'default' ) ) . '

+ + + + +
+ + + +
+ + + + +

' . wp_kses_post( __( 'DUBAI ROOFS
MAY WATSON STUDIO
Y.O.L
RUDIMENTAR', 'default' ) ) . '

+ + + + +
+
+ ', + 'description' => _x( 'Two columns of text', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/three-columns-media-text.php b/lib/block-patterns/three-columns-media-text.php new file mode 100644 index 0000000000000..e1636e451d98b --- /dev/null +++ b/lib/block-patterns/three-columns-media-text.php @@ -0,0 +1,69 @@ + _x( 'Three columns with images and text', 'Block pattern title', 'default' ), + 'categories' => array( 'columns' ), + 'content' => ' +
+
+
+ + + + +
' . esc_html__( 'ECOSYSTEM', 'default' ) . '
+ + + +

' . esc_html__( 'Positive growth.', 'default' ) . '

+ + +
+
+ + + +
+
+

' . wp_kses_post( __( 'Nature, in the common sense, refers to essences unchanged by man; space, the air, the river, the leaf. Art is applied to the mixture of his will with the same things, as in a house, a canal, a statue, a picture. But his operations taken together are so insignificant, a little chipping, baking, patching, and washing, that in an impression so grand as that of the world on the human mind, they do not vary the result.', 'default' ) ) . '

+
+ + + +
+ + + + +
' . esc_attr__( 'The sun setting through a dense forest of trees.', 'default' ) . '
+
+ + + +
+
' . esc_attr__( 'Wind turbines standing on a grassy plain, against a blue sky.', 'default' ) . '
+
+
+ + + +
+
+
' . esc_attr__( 'The sun shining over a ridge leading down into the shore. In the distance, a car drives down a road.', 'default' ) . '
+
+ + + +
+

' . esc_html__( "Undoubtedly we have no questions to ask which are unanswerable. We must trust the perfection of the creation so far, as to believe that whatever curiosity the order of things has awakened in our minds, the order of things can satisfy. Every man's condition is a solution in hieroglyphic to those inquiries he would put.", 'default' ) . '

+
+
+
+ ', + 'description' => _x( 'Three columns with images and text', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/three-columns-text.php b/lib/block-patterns/three-columns-text.php new file mode 100644 index 0000000000000..8d6b14b8ba467 --- /dev/null +++ b/lib/block-patterns/three-columns-text.php @@ -0,0 +1,43 @@ + _x( 'Three columns of text', 'Block pattern title', 'default' ), + 'categories' => array( 'columns', 'text' ), + 'content' => ' +
+
+

' . esc_html__( 'Virtual Tour ↗', 'default' ) . '

+ + + +

' . esc_html__( 'Get a virtual tour of the museum. Ideal for schools and events.', 'default' ) . '

+
+ + + +
+

' . esc_html__( 'Current Shows ↗', 'default' ) . '

+ + + +

' . esc_html__( 'Stay updated and see our current exhibitions here.', 'default' ) . '

+
+ + + +
+

' . esc_html__( 'Useful Info ↗', 'default' ) . '

+ + + +

' . esc_html__( 'Get to know our opening times, ticket prices and discounts.', 'default' ) . '

+
+
+ ', + 'description' => _x( 'Three columns of text', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/three-images-gallery.php b/lib/block-patterns/three-images-gallery.php new file mode 100644 index 0000000000000..8b5d9be1bbc4a --- /dev/null +++ b/lib/block-patterns/three-images-gallery.php @@ -0,0 +1,43 @@ + _x( 'Three columns with offset images', 'Block pattern title', 'default' ), + 'categories' => array( 'gallery' ), + 'content' => ' +
+
+
' . esc_attr__( 'Close-up, abstract view of geometric architecture.', 'default' ) . '
+
+ + + +
+ + + + + + + + +
' . esc_attr__( 'Close-up, angled view of a window on a white building.', 'default' ) . '
+
+ + + +
+
' . esc_attr__( 'Close-up of the corner of a white, geometric building with both sharp points and round corners.', 'default' ) . '
+ + + + +
+
+ ', + 'description' => _x( 'Three columns with offset images', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/two-buttons.php b/lib/block-patterns/two-buttons.php new file mode 100644 index 0000000000000..b369fd31ff2ba --- /dev/null +++ b/lib/block-patterns/two-buttons.php @@ -0,0 +1,22 @@ + _x( 'Two buttons', 'Block pattern title', 'default' ), + 'content' => ' +
+
' . esc_html__( 'Our Work', 'default' ) . '
+ + + +
' . esc_html__( 'Where We Are', 'default' ) . '
+
+ ', + 'viewportWidth' => 500, + 'categories' => array( 'buttons' ), + 'description' => _x( 'Two buttons, one filled and one outlined, side by side.', 'Block pattern description', 'default' ), +); diff --git a/lib/block-patterns/two-images-gallery.php b/lib/block-patterns/two-images-gallery.php new file mode 100644 index 0000000000000..ec9e413ee3120 --- /dev/null +++ b/lib/block-patterns/two-images-gallery.php @@ -0,0 +1,15 @@ + _x( 'Two images side by side', 'Block pattern title', 'default' ), + 'categories' => array( 'gallery' ), + 'content' => ' +
  • ' . esc_attr__( 'An aerial view of waves crashing against a shore.', 'default' ) . '
  • ' . esc_attr__( 'An aerial view of a field. A road runs through the upper right corner.', 'default' ) . '
+ ', + 'description' => _x( 'Two images side by side', 'Block pattern description', 'default' ), +); diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap index 85eaf50e88cea..27ddbf03e863d 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/adding-patterns.test.js.snap @@ -2,12 +2,12 @@ exports[`adding patterns should insert a block pattern 1`] = ` " -
-
Download now
+
+
Our Work
- -
About Cervantes
+ +
Where We Are
" `;