How to use @wordpress/data - 10 common examples

dispatch('core/block-editor').updateBlockAttributes('foo', { foo: 'bar' });

// $ExpectType void
dispatch('core/block-editor').updateBlockListSettings('foo', { allowedBlocks: ['core/paragraph'] });

// $ExpectType void
dispatch('core/block-editor').updateSettings({
    focusMode: true,
    codeEditingEnabled: false,
    maxUploadFileSize: 500,
    richEditingEnabled: false,
});

// $ExpectType boolean
select('core/block-editor').canInsertBlockType('core/paragraph');
select('core/block-editor').canInsertBlockType('core/paragraph', 'foo');

// $ExpectType string | null
select('core/block-editor').getAdjacentBlockClientId();
select('core/block-editor').getAdjacentBlockClientId('foo');
select('core/block-editor').getAdjacentBlockClientId('foo', -1);
select('core/block-editor').getAdjacentBlockClientId('foo', 1);

function* toggleEntity({ entity }) {
  // Get the supported blocks.
  const blocks = Blocks.create(data.select(EDITOR_STORE).getBlocks(), data.dispatch(EDITOR_STORE));

  const mainType = entity.mainType || "thing";
  const onClassNames = ["disambiguated", `wl-${mainType.replace(/\s/, "-")}`];

  // Build a css selector to select all the annotations for the provided entity.
  const annotationSelector = makeEntityAnnotationsSelector(entity);

  // Collect the annotations that have been switch on/off.
  const occurrences = [];

  if (0 === entity.occurrences.length) {
    // Switch on.
    blocks.replace(
      new RegExp(``, "gi"),
      (match, annotationId, classNames) => {
        const newClassNames = mergeArray(classNames.split(/\s+/), onClassNames);

function transmitDraftId( calypsoPort ) {
	// Bail if we are not writing a new post.
	if ( ! /wp-admin\/post-new.php/.test( location.href ) ) {
		return;
	}

	const unsubscribe = subscribe( () => {
		const currentPost = select( 'core/editor' ).getCurrentPost();

		if ( currentPost && currentPost.id && currentPost.status !== 'auto-draft' ) {
			calypsoPort.postMessage( {
				action: 'draftIdSet',
				payload: { postId: currentPost.id },
			} );

			unsubscribe();
		}
	} );
}

/* eslint-disable import/no-extraneous-dependencies */
/* global wpcomGutenberg */

/**
 * External dependencies
 */
import { compose, ifCondition } from '@wordpress/compose';
import { withSelect, withDispatch, select, subscribe } from '@wordpress/data';
import { RichTextToolbarButton } from '@wordpress/editor';
import { toggleFormat, registerFormatType, unregisterFormatType } from '@wordpress/rich-text';
import { get } from 'lodash';

const unsubscribe = subscribe( () => {
	const underlineFormat = select( 'core/rich-text' ).getFormatType( 'core/underline' );
	if ( ! underlineFormat ) {
		return;
	}
	unsubscribe();
	const settings = unregisterFormatType( 'core/underline' );
	registerFormatType( 'wpcom/underline', {
		...settings,
		name: 'wpcom/underline',
		edit( { isActive, value, onChange } ) {
			const onToggle = () =>
				onChange(
					toggleFormat( value, {
						type: 'wpcom/underline',
						attributes: {
							style: 'text-decoration: underline;',

function theImageUrl(props) {

    let fallback = props.meta.cardImage || tcData.defaultImage;
    const {getPostType} = select('core');
    let postTypeCheck = getPostType(select('core/editor').getEditedPostAttribute('type'));// no use if no support for thumbnail

    if (!postTypeCheck || !postTypeCheck.supports['thumbnail']) {
        return fallback;
    }
    let featuredImageId = select('core/editor').getEditedPostAttribute('featured_media');

    if (featuredImageId === 0) {
        return fallback;
    }

    let media = select('core').getMedia(featuredImageId);

    if (typeof(media) !== 'undefined') {
        return props.meta.cardImage || media.source_url;
    }

    return fallback;

}

} ).then( ( body ) => {
		// Prevent responses from old searches to be stored.
		const current = select( STORE_NAME ).getSearch( id );
		if ( current.trim() !== search.trim() ) {
			return;
		}

		store.dispatch( {
			type: 'SET_RESULTS',
			id,
			payload: {
				results: body,
				search,
			},
		} );
	} );

// Only do this when there's a change in column number.
	if ( typeof attributes.columns !== 'undefined' ) {
		if ( attributes.columns !== blockProps.attributes.columns ) {
			columns = attributes.columns
		}
	}

	// Only do this when there's a change in the design.
	if ( typeof attributes.design !== 'undefined' ) {
		if ( blockProps.attributes.design === 'grid' && attributes.design !== 'grid' && blockProps.attributes.columns > 6 ) {
			columns = 6
		}
	}

	// Form the new innerBlock list.
	const currentInnerBlocks = select( 'core/block-editor' ).getBlock( blockProps.clientId ).innerBlocks
	const newInnerBlocks = range( columns || 2 ).map( i => {
		return currentInnerBlocks[ i ] || createBlock( 'ugb/column', {}, [] )
	} )

	// Replace the current list of inner blocks.
	dispatch( 'core/block-editor' ).replaceInnerBlocks( blockProps.clientId, newInnerBlocks, false )

	return attributes
} )

saveProduct() {
		if ( this.state.isSavingProduct ) {
			return;
		}

		const { attributes, setAttributes } = this.props;
		const { email } = attributes;
		const { saveEntityRecord } = dispatch( 'core' );

		this.setState( { isSavingProduct: true }, () => {
			saveEntityRecord( 'postType', SIMPLE_PAYMENTS_PRODUCT_POST_TYPE, this.toApi() )
				.then( record => {
					if ( record ) {
						setAttributes( { productId: record.id } );
					}

					return record;
				} )
				.catch( error => {
					// Nothing we can do about errors without details at the moment
					if ( ! error || ! error.data ) {
						return;
					}

.forEach(({ clientId }) => {
			dispatch("core/editor").selectBlock(clientId);
		});
	// Reselect whatever was selected in the beginning.

disabled={ isEmpty( previewedTemplate ) || isLoading }
						onClick={ this.handleConfirmation }
					>
						{ sprintf(
							__( 'Use %s layout', 'full-site-editing' ),
							this.getTitleByTemplateSlug( previewedTemplate )
						) }
					
				
			
		);
	}
}

export const PageTemplatesPlugin = compose(
	withSelect( select => {
		const getMeta = () => select( 'core/editor' ).getEditedPostAttribute( 'meta' );
		const { _starter_page_template } = getMeta();
		return {
			getMeta,
			_starter_page_template,
			postContentBlock: select( 'core/editor' )
				.getBlocks()
				.find( block => block.name === 'a8c/post-content' ),
		};
	} ),
	withDispatch( ( dispatch, ownProps ) => {
		// Disable tips right away as the collide with the modal window.
		dispatch( 'core/nux' ).disableTips();

		const editorDispatcher = dispatch( 'core/editor' );
		return {