How to use the @wordpress/data.subscribe function in @wordpress/data

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;',

/**
 * External dependencies
 */
import { select, dispatch, subscribe } from '@wordpress/data';
import { get } from 'lodash';

/**
 * Removes the block settings panel if the template or post content blocks are selected.
 * Since it is not possible to disable the block settings entirely through Gutenberg state,
 * we use a hack to deselect the block, which removes the option to change its settings.
 * This is also done officially in the core PostTitle block, so there is prior art.
 *
 * @see https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-title/index.js
 */
const unsubscribe = subscribe( () => {
	// We don't care about this on the template or post editor
	if ( 'page' !== fullSiteEditing.editorPostType ) {
		return unsubscribe();
	}

	// Determine which block we have selected:
	const selectedBlock = select( 'core/editor' ).getSelectedBlock();
	const blockName = get( selectedBlock, 'name', null );

	// If we have selected a template block, deselect it.
	// Note: this does not work for post content because you can't
	// edit inner blocks if the outer block is deselected.
	if ( 'a8c/template' === blockName ) {
		dispatch( 'core/block-editor' ).clearSelectedBlock( blockName );
	}
} );

INIT( _, store ) {
		// Select the block settings tab when the selected block changes
		subscribe( onChangeListener(
			() => !! select( 'core/editor' ).getBlockSelectionStart(),
			( hasBlockSelection ) => {
				if ( ! select( 'core/edit-post' ).isEditorSidebarOpened() ) {
					return;
				}
				if ( hasBlockSelection ) {
					store.dispatch( openGeneralSidebar( 'edit-post/block' ) );
				} else {
					store.dispatch( openGeneralSidebar( 'edit-post/document' ) );
				}
			} )
		);

		// Collapse sidebar when viewport shrinks.
		subscribe( onChangeListener(
			() => select( 'core/viewport' ).isViewportMatch( '< medium' ),

function onPressThis( message ) {
		const action = get( message, 'data.action' );
		const payload = get( message, 'data.payload' );
		if ( action !== 'pressThis' || ! payload ) {
			return;
		}

		calypsoPort.removeEventListener( 'message', onPressThis, false );

		const unsubscribe = subscribe( () => {
			// Calypso sends the message as soon as the iframe is loaded, so we
			// need to be sure that the editor is initialized and the core blocks
			// registered. There is no specific hook or selector for that, so we use
			// `isCleanNewPost` which is triggered when everything is initialized if
			// the post is new.
			const isCleanNewPost = select( 'core/editor' ).isCleanNewPost();
			if ( ! isCleanNewPost ) {
				return;
			}

			unsubscribe();

			const title = get( payload, 'title' );
			const text = get( payload, 'text' );
			const url = get( payload, 'url' );
			const image = get( payload, 'image' );

subscribeToBlocks() {
		subscribe( () => {
			// Check if the order of blocks has changed.
			const blockOrder = select( "core/editor" ).getBlockOrder();
			if ( this._previousBlockOrder !== blockOrder ) {
				this._previousBlockOrder = blockOrder;
				this.setHeader();
			}

			// Check if the the current last header block has changed.
			const lastHeadingBlock = select( "core/editor" ).getBlock( this.state.headingBlockClientId );
			const previousHeadingBlockLevel = get( this._previousLastHeadingBlock, "attributes.level" );

			if ( lastHeadingBlock && previousHeadingBlockLevel !== lastHeadingBlock.attributes.level ) {
				this._previousLastHeadingBlock = lastHeadingBlock;
				this.setHeader();
			}
		} );

INIT( _, store ) {
		// Select the block settings tab when the selected block changes
		subscribe(
			onChangeListener(
				() => !! select( 'core/editor' ).getBlockSelectionStart(),
				hasBlockSelection => {
					if ( ! select( 'core/edit-post' ).isEditorSidebarOpened() ) {
						return;
					}
					if ( hasBlockSelection ) {
						store.dispatch( openGeneralSidebar( 'edit-post/block' ) );
					} else {
						store.dispatch( openGeneralSidebar( 'edit-post/document' ) );
					}
				}
			)
		);

		const isMobileViewPort = () => select( 'core/viewport' ).isViewportMatch( '< medium' );

listenForTermChanges() {
		this.unsubscribe = subscribe( () => {
			if ( this.haveTermIdsForPostChanged() || this.haveTermsChanged() ) {
				this.updateReplacementVariable();
			}
		} );
	}

function handlePostLockTakeover( calypsoPort ) {
	const unsubscribe = subscribe( () => {
		const isLocked = select( 'core/editor' ).isPostLocked();
		const isLockTakeover = select( 'core/editor' ).isPostLockTakeover();
		const allPostsButton = document.querySelector( 'div.editor-post-locked-modal__buttons > a' );

		const isPostTakeoverDialog = isLocked && isLockTakeover && allPostsButton;

		if ( isPostTakeoverDialog ) {
			//handle All Posts button click event
			allPostsButton.addEventListener(
				'click',
				event => {
					event.preventDefault();
					calypsoPort.postMessage( { action: 'goToAllPosts' } );
				},
				false
			);

return new Promise( resolve => {
			let value = selector( ...args );
			if ( value ) {
				return resolve( value );
			}

			const unsubscribe = subscribe( () => {
				value = selector( ...args );

				if ( ! value ) {
					return;
				}

				unsubscribe();
				return resolve( value );
			} );
		} );
	};