Skip to content

Commit

Permalink
poc - part 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Mar 16, 2021
1 parent 13eb6f9 commit b791d26
Show file tree
Hide file tree
Showing 7 changed files with 616 additions and 9 deletions.
1 change: 1 addition & 0 deletions lib/load.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,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
179 changes: 179 additions & 0 deletions lib/test-block-patterns.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,179 @@
<?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 -->',
)
);
59 changes: 51 additions & 8 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,11 +41,15 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
hasBlockStyles,
icon,
blockTitle,
patterns,
replaceMode,
} = useSelect(
( select ) => {
const { getBlockRootClientId, getBlockTransformItems } = select(
blockEditorStore
);
const {
getBlockRootClientId,
getBlockTransformItems,
__experimentalGetPatternTransformItems,
} = select( blockEditorStore );

const { getBlockStyles, getBlockType } = select( blocksStore );
const rootClientId = getBlockRootClientId(
Expand All @@ -66,7 +71,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
? getBlockType( firstBlockName )?.icon
: stack;
}

const _patterns = __experimentalGetPatternTransformItems(
blocks,
rootClientId
);
return {
possibleBlockTransformations: getBlockTransformItems(
blocks,
Expand All @@ -75,6 +83,11 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
hasBlockStyles: !! styles?.length,
icon: _icon,
blockTitle: getBlockType( firstBlockName ).title,
patterns: _patterns,
// Need more thought here.
replaceMode:
_isSingleBlockSelected &&
firstBlockName === 'core/template-part',
};
},
[ clientIds, blocks, blockInformation?.icon ]
Expand All @@ -83,9 +96,21 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );

const onTransform = ( name ) =>
const onBlockTransform = ( name ) =>
replaceBlocks( clientIds, switchToBlockType( blocks, name ) );
// TODO comments (for the above too).
const onPatternTransform = ( transformedBlocks ) => {
// If on replaceMode (currently single Template Part block selected)
// we probably have to create a new Template part.
// This is not implemented yet!!
if ( ! replaceMode ) {
replaceBlocks( clientIds, transformedBlocks );
} else {
// Handle Template Parts change/creation flow.
}
};
const hasPossibleBlockTransformations = !! possibleBlockTransformations.length;
const hasPatternTransformation = !! patterns?.length;
if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
return (
<ToolbarGroup>
Expand Down Expand Up @@ -114,6 +139,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
blocks.length
);

const showDropDown =
hasBlockStyles ||
hasPossibleBlockTransformations ||
hasPatternTransformation;
return (
<ToolbarGroup>
<ToolbarItem>
Expand Down Expand Up @@ -147,9 +176,23 @@ 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();
} }
replaceMode={ replaceMode }
/>
) }
{ hasPossibleBlockTransformations && (
<BlockTransformationsMenu
className="block-editor-block-switcher__transforms__menugroup"
Expand All @@ -158,7 +201,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
}
blocks={ blocks }
onSelect={ ( name ) => {
onTransform( name );
onBlockTransform( name );
onClose();
} }
/>
Expand Down
Loading

0 comments on commit b791d26

Please sign in to comment.