diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 49d89ff9e7c3f9..b813152d2f1900 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -36,6 +36,8 @@ @import "./separator/editor.scss"; @import "./shortcode/editor.scss"; @import "./site-logo/editor.scss"; +@import "./site-tagline/editor.scss"; +@import "./site-title/editor.scss"; @import "./social-link/editor.scss"; @import "./social-links/editor.scss"; @import "./spacer/editor.scss"; diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json index d18b9517241349..13ba84c9688c89 100644 --- a/packages/block-library/src/site-tagline/block.json +++ b/packages/block-library/src/site-tagline/block.json @@ -26,5 +26,6 @@ "__experimentalFontFamily": true, "__experimentalTextTransform": true } - } + }, + "editorStyle": "wp-block-site-tagline-editor" } diff --git a/packages/block-library/src/site-tagline/edit.js b/packages/block-library/src/site-tagline/edit.js index 33c4c72aad9e98..209f110311bc0f 100644 --- a/packages/block-library/src/site-tagline/edit.js +++ b/packages/block-library/src/site-tagline/edit.js @@ -6,7 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useEntityProp } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { AlignmentControl, useBlockProps, @@ -22,11 +23,36 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) { 'site', 'description' ); + const { canUserEdit, readOnlySiteTagLine } = useSelect( ( select ) => { + const { canUser, getEntityRecord } = select( coreStore ); + const siteData = getEntityRecord( 'root', '__unstableBase' ); + return { + canUserEdit: canUser( 'update', 'settings' ), + readOnlySiteTagLine: siteData?.description, + }; + }, [] ); const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, + 'wp-block-site-tagline__placeholder': + ! canUserEdit && ! readOnlySiteTagLine, } ), } ); + const siteTaglineContent = canUserEdit ? ( + + ) : ( +

+ { readOnlySiteTagLine || __( 'Site Tagline placeholder' ) } +

+ ); return ( <> @@ -37,16 +63,7 @@ export default function SiteTaglineEdit( { attributes, setAttributes } ) { value={ textAlign } /> - - + { siteTaglineContent } ); } diff --git a/packages/block-library/src/site-tagline/editor.scss b/packages/block-library/src/site-tagline/editor.scss new file mode 100644 index 00000000000000..44dd1a05dc006e --- /dev/null +++ b/packages/block-library/src/site-tagline/editor.scss @@ -0,0 +1,4 @@ +.wp-block-site-tagline__placeholder { + padding: 1em 0; + border: 1px dashed; +} diff --git a/packages/block-library/src/site-tagline/index.php b/packages/block-library/src/site-tagline/index.php index e248d51011e761..75375e5bb1e792 100644 --- a/packages/block-library/src/site-tagline/index.php +++ b/packages/block-library/src/site-tagline/index.php @@ -13,13 +13,17 @@ * @return string The render. */ function render_block_core_site_tagline( $attributes ) { + $site_tagline = get_bloginfo( 'description' ); + if ( ! $site_tagline ) { + return; + } $align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}"; $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) ); return sprintf( '

%2$s

', $wrapper_attributes, - get_bloginfo( 'description' ) + $site_tagline ); } diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 3e16e62071a32e..c43f078daca445 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -34,5 +34,6 @@ "__experimentalFontStyle": true, "__experimentalFontWeight": true } - } + }, + "editorStyle": "wp-block-site-title-editor" } diff --git a/packages/block-library/src/site-title/edit/index.js b/packages/block-library/src/site-title/edit/index.js index c93b4287cdbf27..f666166da87886 100644 --- a/packages/block-library/src/site-title/edit/index.js +++ b/packages/block-library/src/site-title/edit/index.js @@ -6,7 +6,8 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { useEntityProp } from '@wordpress/core-data'; +import { useSelect } from '@wordpress/data'; +import { useEntityProp, store as coreStore } from '@wordpress/core-data'; import { __ } from '@wordpress/i18n'; import { RichText, @@ -28,12 +29,48 @@ export default function SiteTitleEdit( { } ) { const { level, textAlign } = attributes; const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' ); + const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => { + const { canUser, getEntityRecord } = select( coreStore ); + const siteData = getEntityRecord( 'root', '__unstableBase' ); + return { + canUserEdit: canUser( 'update', 'settings' ), + readOnlyTitle: siteData?.name, + }; + }, [] ); const TagName = level === 0 ? 'p' : `h${ level }`; const blockProps = useBlockProps( { className: classnames( { [ `has-text-align-${ textAlign }` ]: textAlign, + 'wp-block-site-title__placeholder': + ! canUserEdit && ! readOnlyTitle, } ), } ); + const siteTitleContent = canUserEdit ? ( + + + insertBlocksAfter( createBlock( getDefaultBlockName() ) ) + } + /> + + ) : ( + + event.preventDefault() } + > + { readOnlyTitle || __( 'Site Title placeholder' ) } + + + ); return ( <> @@ -50,23 +87,7 @@ export default function SiteTitleEdit( { } } /> - - - insertBlocksAfter( - createBlock( getDefaultBlockName() ) - ) - } - /> - + { siteTitleContent } ); } diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss new file mode 100644 index 00000000000000..372a85db2f4b13 --- /dev/null +++ b/packages/block-library/src/site-title/editor.scss @@ -0,0 +1,4 @@ +.wp-block-site-title__placeholder { + padding: 1em 0; + border: 1px dashed; +} diff --git a/packages/block-library/src/site-title/index.php b/packages/block-library/src/site-title/index.php index 6cbd6988f9c102..079187f50035c7 100644 --- a/packages/block-library/src/site-title/index.php +++ b/packages/block-library/src/site-title/index.php @@ -13,6 +13,11 @@ * @return string The render. */ function render_block_core_site_title( $attributes ) { + $site_title = get_bloginfo( 'name' ); + if ( ! $site_title ) { + return; + } + $tag_name = 'h1'; $align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}"; @@ -20,7 +25,7 @@ function render_block_core_site_title( $attributes ) { $tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level']; } - $link = sprintf( '%2$s', get_bloginfo( 'url' ), get_bloginfo( 'name' ) ); + $link = sprintf( '%2$s', get_bloginfo( 'url' ), $site_title ); $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) ); return sprintf( 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 9d08ad2adf3910..357b0967197c96 100644 --- a/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js +++ b/packages/e2e-tests/specs/experiments/multi-entity-saving.test.js @@ -178,12 +178,21 @@ describe( 'Multi-entity save flow', () => { await insertBlock( 'Site Title' ); // Ensure title is retrieved before typing. await page.waitForXPath( '//a[contains(text(), "gutenberg")]' ); + const editableSiteTitleSelector = + '.wp-block-site-title a[contenteditable="true"]'; + await page.waitForSelector( editableSiteTitleSelector ); + await page.focus( editableSiteTitleSelector ); await page.keyboard.type( '...' ); + await insertBlock( 'Site Tagline' ); // Ensure tagline is retrieved before typing. await page.waitForXPath( '//p[contains(text(), "Just another WordPress site")]' ); + const editableSiteTagLineSelector = + '.wp-block-site-tagline[contenteditable="true"]'; + await page.waitForSelector( editableSiteTagLineSelector ); + await page.focus( editableSiteTagLineSelector ); await page.keyboard.type( '...' ); await clickButton( 'Publish' );