diff --git a/package-lock.json b/package-lock.json
index d4562580e2b47a..81bc0e14a35a6f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19502,7 +19502,7 @@
 				},
 				"node-pre-gyp": {
 					"version": "0.12.0",
-					"resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz",
+					"resolved": false,
 					"integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==",
 					"dev": true,
 					"optional": true,
@@ -19521,7 +19521,7 @@
 				},
 				"nopt": {
 					"version": "4.0.1",
-					"resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
+					"resolved": false,
 					"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
 					"dev": true,
 					"optional": true,
@@ -27294,7 +27294,7 @@
 			"dependencies": {
 				"clone-deep": {
 					"version": "0.2.4",
-					"resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
+					"resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz",
 					"integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=",
 					"dev": true,
 					"requires": {
@@ -27328,7 +27328,7 @@
 					"dependencies": {
 						"kind-of": {
 							"version": "2.0.1",
-							"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
+							"resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz",
 							"integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=",
 							"dev": true,
 							"requires": {
diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js
index ea82c7d935e12b..cf1a6c4fb07c6e 100644
--- a/packages/block-editor/src/components/inserter/menu.js
+++ b/packages/block-editor/src/components/inserter/menu.js
@@ -1,7 +1,18 @@
 /**
  * External dependencies
  */
-import { filter, findIndex, flow, groupBy, isEmpty, map, sortBy, without, includes } from 'lodash';
+import {
+	filter,
+	findIndex,
+	flow,
+	get,
+	groupBy,
+	isEmpty,
+	map,
+	sortBy,
+	without,
+	includes,
+} from 'lodash';
 import scrollIntoView from 'dom-scroll-into-view';
 import classnames from 'classnames';
 
@@ -251,6 +262,7 @@ export class InserterMenu extends Component {
 			! isEmpty( itemsPerCollection );
 		const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null;
 		const hasHelpPanel = hasItems && showInserterHelpPanel;
+		const viewportWidth = get( hoveredItemBlockType, 'example.viewportWidth', 500 );
 
 		// Disable reason (no-autofocus): The inserter menu is a modal display, not one which
 		// is always visible, and one which already incurs this behavior of autoFocus via
@@ -416,7 +428,7 @@ export class InserterMenu extends Component {
 										<div className="block-editor-inserter__preview-content">
 											<BlockPreview
 												padding={ 10 }
-												viewportWidth={ 500 }
+												viewportWidth={ viewportWidth }
 												blocks={
 													hoveredItemBlockType.example
 														? getBlockFromExample( hoveredItem.name, {