How to use @wordpress/viewport - 10 common examples

} else {
				selectBlock( ownProps.clientId );
			}
		},
		toggleSelection( selectionEnabled ) {
			toggleSelection( selectionEnabled );
		},
		enableNavigationMode() {
			setNavigationMode( true );
		},
	};
} );

export default compose(
	pure,
	withViewportMatch( { isLargeViewport: 'medium' } ),
	applyWithSelect,
	applyWithDispatch,
	// block is sometimes not mounted at the right time, causing it be undefined
	// see issue for more info https://github.com/WordPress/gutenberg/issues/17013
	ifCondition( ( { block } ) => !! block ),
	withFilters( 'editor.BlockListBlock' )
)( BlockListBlock );

if ( getBlockSelectionStart() ) {
				multiSelect( getBlockSelectionStart(), ownProps.clientId );
			} else {
				selectBlock( ownProps.clientId );
			}
		},
		toggleSelection( selectionEnabled ) {
			toggleSelection( selectionEnabled );
		},
		setNavigationMode,
	};
} );

export default compose(
	pure,
	withViewportMatch( { isLargeViewport: 'medium' } ),
	applyWithSelect,
	applyWithDispatch,
	// block is sometimes not mounted at the right time, causing it be undefined
	// see issue for more info https://github.com/WordPress/gutenberg/issues/17013
	ifCondition( ( { block } ) => !! block ),
	withFilters( 'editor.BlockListBlock' )
)( BlockListBlock );

}
}

export const EnablePublishSidebarOption = compose(
	withSelect( ( select ) => ( {
		isChecked: select( 'core/editor' ).isPublishSidebarEnabled(),
	} ) ),
	withDispatch( ( dispatch ) => {
		const { enablePublishSidebar, disablePublishSidebar } = dispatch( 'core/editor' );
		return {
			onChange: ( isEnabled ) => ( isEnabled ? enablePublishSidebar() : disablePublishSidebar() ),
		};
	} ),
	// In < medium viewports we override this option and always show the publish sidebar.
	// See the edit-post's header component for the specific logic.
	ifViewportMatches( 'medium' ),
)( Option );

export const EnableTipsOption = compose(
	withSelect( ( select ) => ( {
		isChecked: select( 'core/nux' ).areTipsEnabled(),
	} ) ),
	withDispatch( ( dispatch ) => {
		const { enableTips, disableTips } = dispatch( 'core/nux' );
		return {
			onChange: ( isEnabled ) => ( isEnabled ? enableTips() : disableTips() ),
		};
	} )
)(
	// Using DeferredOption here means enableTips() is called when the Options
	// modal is dismissed. This stops the NUX guide from appearing above the
	// Options modal, which looks totally weird.

false
		),
		isBeingScheduled: select( 'core/editor' ).isEditedPostBeingScheduled(),
		isPending: select( 'core/editor' ).isCurrentPostPending(),
		isPublished: select( 'core/editor' ).isCurrentPostPublished(),
		isPublishSidebarEnabled: select( 'core/editor' ).isPublishSidebarEnabled(),
		isPublishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
		isScheduled: select( 'core/editor' ).isCurrentPostScheduled(),
	} ) ),
	withDispatch( dispatch => {
		const { togglePublishSidebar } = dispatch( 'core/edit-post' );
		return {
			togglePublishSidebar,
		};
	} ),
	withViewportMatch( { isLessThanMediumViewport: '< medium' } )
)( PostPublishButtonOrToggle );

pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(),
		publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
		hasActiveMetaboxes: select( 'core/edit-post' ).hasMetaBoxes(),
		isSaving: select( 'core/edit-post' ).isSavingMetaBoxes(),
		isRichEditingEnabled: select( 'core/editor' ).getEditorSettings().richEditingEnabled,
	} ) ),
	withDispatch( ( dispatch ) => {
		const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );
		return {
			closePublishSidebar,
			togglePublishSidebar,
		};
	} ),
	navigateRegions,
	withViewportMatch( { isMobileViewport: '< small' } ),
)( Layout );

{ ! interactive && (
						<div>
					) }
				</div>
			
		);
	}
}

export default compose(
	withNotices,
	withViewportMatch( { isMobile: '&lt; small' } )
)( GoogleCalendarEdit );

controls={ ALIGNMENT_CONTROLS.map( control => {
				const { align } = control
				const isActive = ( value === align )

				return {
					...control,
					isActive,
					onClick: applyOrUnset( align ),
				}
			} ) }
		/>
	)
}

export default compose(
	withViewportMatch( { isLargeViewport: 'medium' } ),
	withSelect( ( select, {
		clientId, isLargeViewport, isCollapsed,
	} ) => {
		const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' )
		return {
			isCollapsed: isCollapsed || ! isLargeViewport || (
				! getEditorSettings().hasFixedToolbar &&
				getBlockRootClientId( clientId )
			),
		}
	} ),
)( HorizontalAlignmentToolbar )

const { align } = control
				const isActive = ( value === align )

				return {
					...control,
					isDisabled,
					isActive,
					onClick: applyOrUnset( align ),
				}
			} ) }
		/>
	)
}

export default compose(
	withViewportMatch( { isLargeViewport: 'medium' } ),
	withSelect( ( select, {
		clientId, isLargeViewport, isCollapsed,
	} ) => {
		const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' )
		return {
			isCollapsed: isCollapsed || ! isLargeViewport || (
				! getEditorSettings().hasFixedToolbar &&
				getBlockRootClientId( clientId )
			),
		}
	} ),
)( VerticalAlignmentToolbar )

withSelect( ( select ) => ( {
		mode: select( 'core/edit-post' ).getEditorMode(),
		editorSidebarOpened: select( 'core/edit-post' ).isEditorSidebarOpened(),
		pluginSidebarOpened: select( 'core/edit-post' ).isPluginSidebarOpened(),
		publishSidebarOpened: select( 'core/edit-post' ).isPublishSidebarOpened(),
		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
	} ) ),
	withDispatch( ( dispatch ) => {
		const { closePublishSidebar, togglePublishSidebar } = dispatch( 'core/edit-post' );
		return {
			closePublishSidebar,
			togglePublishSidebar,
		};
	} ),
	navigateRegions,
	withViewportMatch( { isMobileViewport: '< small' } ),
)( Layout );

blocks = castArray(blocks).map(block => (
        cloneBlock(block, { layout })
      ));
      replaceBlocks([ ownProps.clientId ], blocks);
    },
    onMetaChange (meta) {
      editPost({ meta });
    },
    toggleSelection (selectionEnabled) {
      toggleSelection(selectionEnabled);
    },
  };
});

export default compose(
  withViewportMatch({ isLargeViewport: 'medium' }),
  applyWithSelect,
  applyWithDispatch,
  withFilters('editor.BlockListBlock'),
  withHoverAreas,
)(BlockListBlock);