Commit 7bb013f

'backgroundGradient',

'backgroundImage',

'backgroundSize',

'borderColor',

'borderRadius',

'borderStyle',

'borderWidth',

'margin',

'shadow',

'writingMode',

'backgroundGradient',

'backgroundImage',

'backgroundSize',

'borderColor',

'borderRadius',

'borderStyle',

'borderWidth',

'margin',

'shadow',

'writingMode',

( path !== '/blocks' && ! path.startsWith( '/blocks/' ) ) ||

path.startsWith( '/blocks/elements/' )

} else if (

section.includes( '/typography' ) ||

// Element screens show the Text category, as they did when they

// lived under Typography.

section.startsWith( '/blocks/elements/' )

) {

- List elements alongside blocks in one Blocks & Elements screen, grouped under Elements, Headings and Form controls, instead of splitting them between Typography and Colors ([#81645](https://github.com/WordPress/gutenberg/pull/81645)).

- Offer every element the background, dimensions, border, shadow and custom CSS controls that `theme.json` already accepts, instead of typography and color alone ([#81645](https://github.com/WordPress/gutenberg/pull/81645)).

- Preview an element as a sample of the markup it applies to, rendered with the site's own styles, so the preview reflects every panel rather than typography and color alone ([#81645](https://github.com/WordPress/gutenberg/pull/81645)).

import { __ } from '@wordpress/i18n';

import { useMemo } from '@wordpress/element';

import { useSelect } from '@wordpress/data';

import { getBlockType } from '@wordpress/blocks';

import {

__unstableIframe as Iframe,

__unstableEditorStyles as EditorStyles,

store as blockEditorStore,

// @ts-expect-error: Not typed yet.

} from '@wordpress/block-editor';

interface ElementPreviewProps {

element: string;

const PREVIEW_CSS = `

export default function ElementPreview( { element }: ElementPreviewProps ) {

const styles = useSelect(

( select ) => select( blockEditorStore ).getSettings().styles,

[]

);

const editorStyles = useMemo(

() => [ ...( styles ?? [] ), { css: PREVIEW_CSS } ],

[ styles ]

);

// Show a caption on the image the Image block uses for its own example,

// rather than keeping a second copy of that URL here.

const imageUrl = getBlockType( 'core/image' )?.example?.attributes?.url as

string | undefined;

let sample;

switch ( element ) {

case 'button':

// The class is half of the element's selector, so a button only

// picks up the element's styles when it carries it.

sample = (

<button className="wp-element-button" type="button">

{ __( 'Call to action' ) }

</button>

);

break;

case 'textInput':

sample = (

<input type="text" defaultValue={ __( 'Text' ) } readOnly />

);

break;

case 'select':

sample = (

<select>

<option>{ __( 'Select an option' ) }</option>

</select>

);

break;

case 'caption':

sample = (

<figure className="wp-block-image">

{ imageUrl && (

<img

className="global-styles-ui-element-preview__media"

src={ imageUrl }

alt=""

/>

) }

<figcaption className="wp-element-caption">

{ __( 'A caption for the image above' ) }

</figcaption>

</figure>

);

break;

case 'cite':

sample = (

<blockquote>

<p>{ __( 'In quoting others, we cite ourselves.' ) }</p>

<cite>{ __( 'Julio Cortázar' ) }</cite>

</blockquote>

);

break;

case 'link':

sample = <a href="#anchor">{ __( 'A link' ) }</a>;

break;

case 'heading':

// The shared heading entry has no tag of its own; any level shows

// what it sets, and h2 is the most common in content.

sample = <h2>{ __( 'Aa' ) }</h2>;

break;

default: {

// The heading level elements are named after their tag.

const Tag = ( /^h[1-6]$/.test( element ) ? element : 'p' ) as

'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';

sample = <Tag>{ __( 'Aa' ) }</Tag>;

}

}

return (

<div className="global-styles-ui-element-preview">

<Iframe

tabIndex={ -1 }

readonly

title={ __( 'Element preview' ) }

aria-hidden="true"

>

<EditorStyles styles={ editorStyles } />

{ sample }

</Iframe>

</div>

);

import ScreenElement from './screen-element';

<GlobalStylesNavigationScreen path="/typography/text">

<ScreenElement element="text" />

</GlobalStylesNavigationScreen>

<GlobalStylesNavigationScreen path="/blocks/elements/:element">

<ScreenElement

showStateControls={ showBlockStateControls }

/>

</GlobalStylesNavigationScreen>

export function useCanEditCSS(): boolean {

return useSelect( ( select ) => {

const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =

select( coreStore );

const globalStylesId = __experimentalGetCurrentGlobalStylesId();

const globalStyles = globalStylesId

? getEntityRecord( 'root', 'globalStyles', globalStylesId )

: undefined;

return !! ( globalStyles as GlobalStylesConfig )?._links?.[

'wp:action-edit-css'

];

}, [] );