How to use the @wordpress/blocks.getPhrasingContentSchema function in @wordpress/blocks

keywords: [ __( 'text' ) ],

	supports,

	attributes: schema,

	transforms: {
		from: [
			{
				type: 'raw',
				// Paragraph is a fallback and should be matched last.
				priority: 20,
				selector: 'p',
				schema: {
					p: {
						children: getPhrasingContentSchema(),
					},
				},
			},
		],
	},

	deprecated: [
		{
			supports,
			attributes: {
				...schema,
				width: {
					type: 'string',
				},
			},
			save( { attributes } ) {

/**
 * WordPress dependencies
 */
import { getPhrasingContentSchema } from '@wordpress/blocks';

const transforms = {
	from: [
		{
			type: 'raw',
			// Paragraph is a fallback and should be matched last.
			priority: 20,
			selector: 'p',
			schema: {
				p: {
					children: getPhrasingContentSchema(),
				},
			},
		},
	],
};

export default transforms;

attributes: [ 'src', 'alt' ],
		classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
	},
};

const schema = {
	figure: {
		require: [ 'img' ],
		children: {
			...imageSchema,
			a: {
				attributes: [ 'linkClass', 'href', 'rel', 'target' ],
				children: imageSchema,
			},
			figcaption: {
				children: getPhrasingContentSchema(),
			},
		},
	},
};

export const settings = {
	title: __( 'Image' ),

	description: __( 'They’re worth 1,000 words! Insert a single image.' ),

	icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"></path><path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z"></path><path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z"></path></svg>,

	category: 'common',

	keywords: [
		'img', // "img" is not translated as it is intended to reflect the HTML <img> tag.

attributes: [ 'src', 'alt' ],
    classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
  },
};

const schema = {
  figure: {
    require: [ 'img' ],
    children: {
      ...imageSchema,
      a: {
        attributes: [ 'href', 'target' ],
        children: imageSchema,
      },
      figcaption: {
        children: getPhrasingContentSchema(),
      },
    },
  },
};

export const settings = {
  title: __('Image'),

  description: __('Insert an image to make a visual statement.'),

  icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0,0h24v24H0V0z"></path><path d="m19 5v14h-14v-14h14m0-2h-14c-1.1 0-2 0.9-2 2v14c0 1.1 0.9 2 2 2h14c1.1 0 2-0.9 2-2v-14c0-1.1-0.9-2-2-2z"></path><path d="m14.14 11.86l-3 3.87-2.14-2.59-3 3.86h12l-3.86-5.14z"></path></svg>,

  category: 'common',

  keywords: [
    'img', // "img" is not translated as it is intended to reflect the HTML <img> tag.

},

	transforms: {
		from: [
			{
				type: 'raw',
				isMatch: ( node ) => node.nodeName === 'FIGURE' && !! node.querySelector( 'iframe' ),
				schema: {
					figure: {
						require: [ 'iframe' ],
						children: {
							iframe: {
								attributes: [ 'src', 'allowfullscreen', 'height', 'width' ],
							},
							figcaption: {
								children: getPhrasingContentSchema(),
							},
						},
					},
				},
			},
		],
	},

	edit: withState( {
		isPreview: false,
	} )( ( { attributes, setAttributes, setState, isSelected, toggleSelection, isPreview } ) => (
		<div>
			
				<div>
					</div></div>

/**
 * Internal dependencies
 */
import './editor.scss';
import './style.scss';
import TableBlock from './table-block';

const tableContentSchema = {
	tr: {
		children: {
			th: {
				children: getPhrasingContentSchema(),
			},
			td: {
				children: getPhrasingContentSchema(),
			},
		},
	},
};

const tableSchema = {
	table: {
		children: {
			thead: {
				children: tableContentSchema,
			},
			tfoot: {
				children: tableContentSchema,
			},
			tbody: {
				children: tableContentSchema,

},

	transforms: {
		from: [
			{
				type: 'raw',
				isMatch: ( node ) => node.nodeName === 'FIGURE' && !! node.querySelector( 'iframe' ),
				schema: {
					figure: {
						require: [ 'iframe' ],
						children: {
							iframe: {
								attributes: [ 'src', 'allowfullscreen', 'height', 'width' ],
							},
							figcaption: {
								children: getPhrasingContentSchema(),
							},
						},
					},
				},
			},
		],
	},

	edit: edit,

	save( { attributes } ) {
		return { attributes.content };
	},
};

type: 'block',
			blocks: [ 'core/paragraph' ],
			transform: ( { content } ) => {
				return createBlock( metadata.name, {
					content,
				} );
			},
		},
		{
			type: 'raw',
			selector: 'p.wp-block-coblocks-highlight',
			schema: {
				p: {
					children: {
						mark: {
							children: getPhrasingContentSchema(),
						},
					},
				},
			},
		},
		{
			type: 'prefix',
			prefix: ':highlight',
			transform: function( content ) {
				return createBlock( metadata.name, {
					content,
				} );
			},
		},
	],
	to: [

},

	transforms: {
		from: [
			{
				type: 'raw',
				isMatch: ( node ) => node.nodeName === 'FIGURE' && !! node.querySelector( 'iframe' ),
				schema: {
					figure: {
						require: [ 'iframe' ],
						children: {
							iframe: {
								attributes: [ 'src', 'allowfullscreen', 'height', 'width' ],
							},
							figcaption: {
								children: getPhrasingContentSchema(),
							},
						},
					},
				},
			},
		],
	},

	edit: withState( {
		isPreview: false,
	} )( ( { attributes, setAttributes, setState, isSelected, toggleSelection, isPreview } ) => (
		<div>
			
				<div>
					</div></div>

const transforms = {
	from: [
		{
			type: 'block',
			blocks: [ 'core/paragraph' ],
			transform: ( { content } ) => {
				return createBlock( 'core/heading', {
					content,
				} );
			},
		},
		{
			type: 'raw',
			selector: 'h1,h2,h3,h4,h5,h6',
			schema: {
				h1: { children: getPhrasingContentSchema() },
				h2: { children: getPhrasingContentSchema() },
				h3: { children: getPhrasingContentSchema() },
				h4: { children: getPhrasingContentSchema() },
				h5: { children: getPhrasingContentSchema() },
				h6: { children: getPhrasingContentSchema() },
			},
			transform( node ) {
				return createBlock( 'core/heading', {
					...getBlockAttributes(
						'core/heading',
						node.outerHTML
					),
					level: getLevelFromHeadingNodeName( node.nodeName ),
				} );
			},
		},