Adding some mobile styles to output.

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => '218c7a4d296402293c1b');
+<?php return array('dependencies' => array('react', 'wp-a11y', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-escape-html', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-plugins', 'wp-url'), 'version' => '925f5ee0f3f526a452d9');

src/blocks/photo-block/edit.js

@@ -1,36 +1,16 @@
 import './editor.scss';
 
 import classnames from 'classnames';
-import { useEffect, useState, useRef, useContext } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
-import {
-	PanelBody,
-	PanelRow,
-	RangeControl,
-	TextControl,
-	TextareaControl,
-	ButtonGroup,
-	Button,
-	ToggleControl,
-	Toolbar,
-	ToolbarButton,
-	ToolbarGroup,
-	ToolbarDropdownMenu,
-	Popover,
-	PlaceHolder,
-	MenuGroup,
-	MenuItem,
-} from '@wordpress/components';
+import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect, dispatch, select } from '@wordpress/data';
 import { doAction } from '@wordpress/hooks';
 import {
-	InspectorControls,
 	useBlockProps,
 	useInnerBlocksProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { generateUniqueId } from '../../utils/Functions';
 
 import { blockStore } from '../../store';
 
@@ -60,6 +40,15 @@ const PhotoBlock = ( props ) => {
 	const innerBlockCount = useSelect( ( coreSelect ) => coreSelect( 'core/block-editor' ).getBlock( clientId ).innerBlocks ).length;
 
 	const newUniqueId = 'photo-block-' + clientId.substr( 2, 9 ).replace( '-', '' );
+	const [ resizeListener, { width } ] = useResizeObserver();
+	let modifierClassNames;
+	if ( typeof width === 'number' ) {
+		modifierClassNames = {
+			'is-layout-large': width >= 700,
+			'is-layout-medium': width >= 450 && width < 700,
+			'is-layout-small': width < 450,
+		};
+	}
 
 	/**
 	 * Get a unique ID for the block for inline styling if necessary.
@@ -200,7 +189,8 @@ const PhotoBlock = ( props ) => {
 			globalStyleCSSClassName,
 			{
 				'dlx-has-drop-shadow': photoDropShadow.enabled,
-			}
+			},
+			modifierClassNames
 		),
 	} );
 
@@ -274,6 +264,7 @@ const PhotoBlock = ( props ) => {
 	const block = (
 		<>
 			<section className="dlx-photo-block__container dlx-photo-block__block-wrapper" id={ uniqueId }>
+				{ resizeListener }
 				{ initCurrentScreen() }
 			</section>
 		</>

src/scss/block-backend-frontend.scss

@@ -609,9 +609,30 @@ figcaption.dlx-photo-block__caption.has-smart-styles .dlx-photo-block__caption-i
 .wp-block .filepond--wrapper,
 .dlx-photo-block__block-wrapper {
 	justify-content: center;
-	min-width: 400px;
 	margin: 0 auto;
 }
+.is-layout-small {
+	.dlx-photo-block__upload-types__container {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: center;
+		row-gap: 15px;
+
+		button {
+			width: 100%;
+			margin-right: 0 !important;
+			justify-content: center !important;
+		}
+	}
+	.dlx-photo-block__upload-target__container {
+		display: none !important;
+	}
+	.dlx-photo-block__upload-types-url__container {
+		display: grid;
+		grid-template-columns: 1fr;
+	}
+}
+
 .dlx-photo-block__screen-initial {
 	width: 100%;
 	max-width: 800px;

src/scss/breakpoints-mixin.scss

@@ -0,0 +1,27 @@
+/* Responsive styles - In hindsight, should've used mobile-first */
+/* Mixin from: https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/ */
+/* It's only used here, so no external file for mixin? */
+$breakpoints: (
+  'xs':   420px,
+  'small':  520px,
+  'medium': 768px,
+  'large':  1024px,
+  'xl':  1200px,
+  'xxl': 1400px
+) !default;
+
+@mixin respond-to($breakpoint) {
+	// If the key exists in the map
+	@if map-has-key($breakpoints, $breakpoint) {
+	  // Prints a media query based on the value
+	  @media (min-width: map-get($breakpoints, $breakpoint)) {
+		@content;
+	  }
+	}
+
+	// If the key doesn't exist in the map
+	@else {
+	  @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+		  + "Available breakpoints are: #{map-keys($breakpoints)}.";
+	}
+  }