Skip to content

Commit

Permalink
spin off from #29890 for simple blocks without InnerBlocks
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Apr 13, 2021
1 parent 3e8ac5a commit 78cf567
Show file tree
Hide file tree
Showing 10 changed files with 618 additions and 12 deletions.
1 change: 1 addition & 0 deletions lib/load.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ function gutenberg_is_experiment_enabled( $name ) {

require __DIR__ . '/blocks.php';
require __DIR__ . '/block-patterns.php';
require __DIR__ . '/test-block-patterns.php';
require __DIR__ . '/client-assets.php';
require __DIR__ . '/demo.php';
require __DIR__ . '/widgets.php';
Expand Down
204 changes: 204 additions & 0 deletions lib/test-block-patterns.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<?php
/**
* Block patterns registration.
*
* @package gutenberg
*/

// Test patterns for transform scope. This file will be deleted before merge.

// Single block pattens with different attributes.
// Paragraph patterns.
register_block_pattern(
'paragraph/v1',
array(
'title' => __( 'Paragraph version 1', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/paragraph' ),
),
'content' => '<!-- wp:paragraph {"dropCap":true,"backgroundColor":"orange"} -->
<p class="has-drop-cap has-orange-background-color has-background">Hello my paragraph!</p>
<!-- /wp:paragraph -->',
)
);
register_block_pattern(
'paragraph/v2',
array(
'title' => __( 'Paragraph version 2', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/paragraph' ),
),
'content' => '<!-- wp:paragraph {"align":"center","backgroundColor":"gray","textColor":"green","fontSize":"extra-large"} -->
<p class="has-text-align-center has-green-color has-gray-background-color has-text-color has-background has-extra-large-font-size">Hello my paragraph!</p>
<!-- /wp:paragraph -->',
)
);

// Multi block transform patterns.
register_block_pattern(
'multi/v2',
array(
'title' => __( 'Multi blocks v2 - deep nesting', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/paragraph', 'core/heading' ),
),
'content' => '<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<!-- wp:heading {"fontSize":"large"} -->
<h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color"><strong>2</strong>.</span>Which treats of the first sally the ingenious Don Quixote made from home</h2>
<!-- /wp:heading -->
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container">
<!-- wp:paragraph -->
<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>
<!-- /wp:paragraph -->
</div></div>
<!-- /wp:group -->
<!-- wp:heading {"backgroundColor":"purple"} -->
<h2 class="has-purple-background-color has-background">Pattern Heading</h2>
<!-- /wp:heading -->
</div></div>
<!-- /wp:group -->',
)
);
register_block_pattern(
'multi/v1',
array(
'title' => __( 'Multi blocks v1', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/paragraph', 'core/heading' ),
),
'content' => '<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:heading {"fontSize":"large"} -->
<h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color"><strong>2</strong>.</span>Which treats of the first sally the ingenious Don Quixote made from home</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>These preliminaries settled, he did not care to put off any longer the execution of his design, urged on to it by the thought of all the world was losing by his delay, seeing what wrongs he intended to right, grievances to redress, injustices to repair, abuses to remove, and duties to discharge.</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->',
)
);

// Template Parts Patterns.
// Headers.
register_block_pattern(
'header/v1',
array(
'title' => __( 'Header v1', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/template-part/header' ),
),
'content' => '
<!-- wp:navigation {"orientation":"horizontal","itemsJustification":"center"} -->
<!-- wp:page-list /-->
<!-- /wp:navigation -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide">
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-tagline /--></div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->',
)
);
register_block_pattern(
'header/v2',
array(
'title' => __( 'Header v2', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/template-part/header' ),
),
'content' => '
<!-- wp:heading {"textAlign":"center","backgroundColor":"gray","textColor":"yellow"} -->
<h2 class="has-text-align-center has-yellow-color has-gray-background-color has-text-color has-background">This is the Header</h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:site-title /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:site-tagline /-->
</div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
)
);
register_block_pattern(
'footer/v1',
array(
'title' => __( 'Footer v1', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/template-part/footer' ),
),
'content' => '
<!-- wp:heading {"textAlign":"center","backgroundColor":"gray","textColor":"yellow"} -->
<h2 class="has-text-align-center has-yellow-color has-gray-background-color has-text-color has-background">This is a Footer</h2>
<!-- /wp:heading -->
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><a href="mailto:#">[email protected]<br></a>T. +00 (0)1 22 33 44 55</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">2, Rue Losuis-Boilly<br>Paris, France</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:social-links {"align":"right","className":"is-style-twentytwentyone-social-icons-color"} -->
<ul class="wp-block-social-links alignright is-style-twentytwentyone-social-icons-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
<!-- wp:social-link {"url":"https://www.facebook.com/WordPress/","service":"facebook"} /-->
<!-- wp:social-link {"url":"https://twitter.com/WordPress","service":"twitter"} /-->
<!-- wp:social-link {"url":"https://www.youtube.com/wordpress","service":"youtube"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
)
);


// Tests with InnerBlocks like Buttons.
register_block_pattern(
'buttons/rigas',
array(
'title' => __( 'Buttons v1', 'gutenberg' ),
'scope' => array(
'inserter' => false,
'transform' => array( 'core/buttons' ),
),
'content' => '<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:buttons {"contentJustification":"center","orientation":"vertical"} -->
<div class="wp-block-buttons is-content-justification-center is-vertical"><!-- wp:button -->
<div class="wp-block-button"><a class="wp-block-button__link">Hello</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#4acbc3"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background-color:#4acbc3">Buttons</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:buttons {"contentJustification":"center","orientation":"vertical"} -->
<div class="wp-block-buttons is-content-justification-center is-vertical"><!-- wp:button {"style":{"color":{"background":"#229fd5"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background-color:#229fd5">Scoped</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"#ce9ddf"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background" style="background-color:#ce9ddf">Pattern</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
)
);
47 changes: 38 additions & 9 deletions packages/block-editor/src/components/block-switcher/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import BlockIcon from '../block-icon';
import BlockTitle from '../block-title';
import BlockTransformationsMenu from './block-transformations-menu';
import BlockStylesMenu from './block-styles-menu';
import PatternTransformationsMenu from './pattern-transformations-menu';

export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
const { replaceBlocks } = useDispatch( blockEditorStore );
Expand All @@ -40,12 +41,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
hasBlockStyles,
icon,
blockTitle,
patterns,
} = useSelect(
( select ) => {
const { getBlockRootClientId, getBlockTransformItems } = select(
blockEditorStore
);

const {
getBlockRootClientId,
getBlockTransformItems,
__experimentalGetPatternTransformItems,
} = select( blockEditorStore );
const { getBlockStyles, getBlockType } = select( blocksStore );
const rootClientId = getBlockRootClientId(
castArray( clientIds )[ 0 ]
Expand All @@ -66,7 +69,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
? getBlockType( firstBlockName )?.icon
: stack;
}

const _patterns = __experimentalGetPatternTransformItems(
blocks,
rootClientId
);
return {
possibleBlockTransformations: getBlockTransformItems(
blocks,
Expand All @@ -75,6 +81,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
hasBlockStyles: !! styles?.length,
icon: _icon,
blockTitle: getBlockType( firstBlockName ).title,
patterns: _patterns,
};
},
[ clientIds, blocks, blockInformation?.icon ]
Expand All @@ -83,9 +90,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );

const onTransform = ( name ) =>
// Simple block tranformation based on the `Block Transforms` API.
const onBlockTransform = ( name ) =>
replaceBlocks( clientIds, switchToBlockType( blocks, name ) );
// Pattern transformation through the `Patterns` API.
const onPatternTransform = ( transformedBlocks ) =>
replaceBlocks( clientIds, transformedBlocks );
const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
const hasPatternTransformation = !! patterns?.length;
if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
return (
<ToolbarGroup>
Expand Down Expand Up @@ -114,6 +126,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
blocks.length
);

const showDropDown =
hasBlockStyles ||
hasPossibleBlockTransformations ||
hasPatternTransformation;
return (
<ToolbarGroup>
<ToolbarItem>
Expand Down Expand Up @@ -147,9 +163,22 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
menuProps={ { orientation: 'both' } }
>
{ ( { onClose } ) =>
( hasBlockStyles ||
hasPossibleBlockTransformations ) && (
showDropDown && (
<div className="block-editor-block-switcher__container">
{ hasPatternTransformation && (
<PatternTransformationsMenu
blocks={ blocks }
patterns={ patterns }
onSelect={ (
transformedBlocks
) => {
onPatternTransform(
transformedBlocks
);
onClose();
} }
/>
) }
{ hasPossibleBlockTransformations && (
<BlockTransformationsMenu
className="block-editor-block-switcher__transforms__menugroup"
Expand All @@ -158,7 +187,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
}
blocks={ blocks }
onSelect={ ( name ) => {
onTransform( name );
onBlockTransform( name );
onClose();
} }
/>
Expand Down
Loading

0 comments on commit 78cf567

Please sign in to comment.