diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json index bb5146843f7b77..839fe03f0759c7 100644 --- a/packages/block-library/src/template-part/block.json +++ b/packages/block-library/src/template-part/block.json @@ -10,10 +10,19 @@ }, "theme": { "type": "string" + }, + "tagName": { + "type": "string", + "default": "div" } }, "supports": { "align": true, - "html": false + "html": false, + "lightBlockWrapper": true, + "__experimentalColor": { + "gradients": true, + "linkColor": true + } } } diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 891bd30b53b70f..64aaeaac2f9d1f 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -3,7 +3,10 @@ */ import { useRef, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; -import { BlockControls } from '@wordpress/block-editor'; +import { + BlockControls, + __experimentalBlock as Block, +} from '@wordpress/block-editor'; /** * Internal dependencies @@ -14,7 +17,7 @@ import TemplatePartInnerBlocks from './inner-blocks'; import TemplatePartPlaceholder from './placeholder'; export default function TemplatePartEdit( { - attributes: { postId: _postId, slug, theme }, + attributes: { postId: _postId, slug, theme, tagName }, setAttributes, clientId, } ) { @@ -57,10 +60,12 @@ export default function TemplatePartEdit( { } }, [ innerBlocks ] ); + const BlockWrapper = Block[ tagName ]; + if ( postId ) { // Part of a template file, post ID already resolved. return ( - <> + 0 } /> - + ); } if ( ! initialSlug.current && ! initialTheme.current ) { // Fresh new block. - return ; + return ( + + + + ); } // Part of a template file, post ID not resolved yet. return null; diff --git a/packages/block-library/src/template-part/edit/inner-blocks.js b/packages/block-library/src/template-part/edit/inner-blocks.js index 789efb2e24689b..fa26416f125d3a 100644 --- a/packages/block-library/src/template-part/edit/inner-blocks.js +++ b/packages/block-library/src/template-part/edit/inner-blocks.js @@ -19,6 +19,7 @@ export default function TemplatePartInnerBlocks( { value={ blocks } onInput={ onInput } onChange={ onChange } + __experimentalTagName="div" renderAppender={ hasInnerBlocks ? undefined : renderAppender } /> ); diff --git a/packages/block-library/src/template-part/index.php b/packages/block-library/src/template-part/index.php index 862a7de3c85417..29e3668170f2f4 100644 --- a/packages/block-library/src/template-part/index.php +++ b/packages/block-library/src/template-part/index.php @@ -63,7 +63,8 @@ function render_block_core_template_part( $attributes ) { } $content = do_shortcode( $content ); - return '
' . str_replace( ']]>', ']]>', $content ) . '
'; + $html_tag = esc_attr( $attributes['tagName'] ); + return "<$html_tag>" . str_replace( ']]>', ']]>', $content ) . ""; } /** diff --git a/packages/block-library/src/template-part/theme.scss b/packages/block-library/src/template-part/theme.scss new file mode 100644 index 00000000000000..e2480154a14c59 --- /dev/null +++ b/packages/block-library/src/template-part/theme.scss @@ -0,0 +1,10 @@ +// Same as the group block styles. +.wp-block-template-part { + &.has-background { + // Matches paragraph Block padding + // Todo: normalise with variables + padding: 20px 30px; + margin-top: 0; + margin-bottom: 0; + } +} diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss index 88adf3fe3be9bd..e5c09a2bdf4ce9 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -16,6 +16,7 @@ @import "./separator/theme.scss"; @import "./table/theme.scss"; @import "./video/theme.scss"; +@import "./template-part/theme.scss"; // This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. #end-resizable-editor-section { diff --git a/packages/e2e-tests/fixtures/blocks/core__template-part.json b/packages/e2e-tests/fixtures/blocks/core__template-part.json index c8a1b7373a6a61..d69e90cef72642 100644 --- a/packages/e2e-tests/fixtures/blocks/core__template-part.json +++ b/packages/e2e-tests/fixtures/blocks/core__template-part.json @@ -5,7 +5,8 @@ "isValid": true, "attributes": { "slug": "header", - "theme": "twentytwenty" + "theme": "twentytwenty", + "tagName": "div" }, "innerBlocks": [], "originalContent": "" diff --git a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js index cd36641824a873..df8aa129a8e7d7 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-editing.test.js @@ -27,7 +27,7 @@ const visitSiteEditor = async () => { await visitAdminPage( 'admin.php', query ); // Waits for the template part to load... await page.waitForSelector( - '.wp-block[data-type="core/template-part"] .block-editor-inner-blocks' + '.wp-block[data-type="core/template-part"] .block-editor-block-list__layout' ); }; @@ -59,8 +59,8 @@ const createTemplatePart = async ( await createNewButton.click(); await page.waitForSelector( isNested - ? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-inner-blocks' - : '.wp-block[data-type="core/template-part"] .block-editor-inner-blocks' + ? '.wp-block[data-type="core/template-part"] .wp-block[data-type="core/template-part"] .block-editor-block-list__layout' + : '.wp-block[data-type="core/template-part"] .block-editor-block-list__layout' ); await page.focus( '.wp-block-template-part__name-panel input' ); await page.keyboard.type( templatePartName ); diff --git a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js index b4457ff8450522..4acdae098a2264 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -21,7 +21,7 @@ describe( 'Multi-entity save flow', () => { const checkboxInputSelector = '.components-checkbox-control__input'; const entitiesSaveSelector = '.editor-entities-saved-states__save-button'; const templatePartSelector = '*[data-type="core/template-part"]'; - const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`; + const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-block-list__layout`; const savePanelSelector = '.entities-saved-states__panel'; const closePanelButtonSelector = 'button[aria-label="Close panel"]'; const createNewButtonSelector = diff --git a/packages/e2e-tests/specs/experiments/template-part.test.js b/packages/e2e-tests/specs/experiments/template-part.test.js index cb788345bea1ed..835ea93a0a7c06 100644 --- a/packages/e2e-tests/specs/experiments/template-part.test.js +++ b/packages/e2e-tests/specs/experiments/template-part.test.js @@ -88,7 +88,7 @@ describe( 'Template Part', () => { '.editor-entities-saved-states__save-button'; const savePostSelector = '.editor-post-publish-button__button'; const templatePartSelector = '*[data-type="core/template-part"]'; - const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-inner-blocks`; + const activatedTemplatePartSelector = `${ templatePartSelector } .block-editor-block-list__layout`; const testContentSelector = `//p[contains(., "${ testContent }")]`; const createNewButtonSelector = '//button[contains(text(), "New template part")]';