Scrolling Inserter Sections

build/editor.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'e7de7d86bd0f8dab8726');
+<?php return array('dependencies' => array(), 'version' => '8dddfed167cfdaa65ee8');

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives'), 'version' => 'b9039859ee148bccd2ce');
+<?php return array('dependencies' => array('lodash', 'react', 'wp-blob', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-data', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-keycodes', 'wp-primitives'), 'version' => 'fd232d1601671eb78211');

build/style.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => 'ca9dfa13a90bf7f4013a');
+<?php return array('dependencies' => array(), 'version' => 'b44d74af8873e6c88566');

src/components/inserter/index.js

@@ -18,12 +18,65 @@ import { flattenIconsArray, getIconTypes } from './../../utils';
 import ContentHeader from './content-header';
 import IconGrid from './icon-grid';
 import Sidebar from './sidebar';
+
+
+
+function resizeScrollers() {
+
+	const getEl = (theSelector) => {
+		return window.document.querySelector(theSelector); 
+	}
+
+	var tmpModal = getEl('.components-modal__content')
+	var tmpHeader = getEl('.components-modal__header');
+	var tmpSB = getEl('.icon-inserter__sidebar__search')
+
+	var tmpBuffer = 4;
+
+	var tmpMH = tmpModal.clientHeight;
+	var tmpHH = tmpHeader.clientHeight;
+	var tmpSH = tmpSB.clientHeight;
+
+	var tmpCBH = tmpMH - tmpSH - tmpBuffer;
+
+	var tmpCatBox = getEl('.icon-inserter__sidebar__category-type.components-menu-group');
+	var tmpIconsBox = getEl('.icon-inserter__content');
+	tmpCatBox.style.height = tmpCBH + 'px';
+	tmpIconsBox.style.height = (tmpCBH + tmpSH ) + 'px';
+
+}
+
 export default function InserterModal( props ) {
 	const { isInserterOpen, setInserterOpen, attributes, setAttributes } =
 		props;
 	const iconsByType = getIcons();
 	const iconTypes = getIconTypes( iconsByType );
 
+	//---- NEW CODE TO RESIZE SCROLLERS TO MODAL SIZE - WJF
+
+	//--- Resize scrollable elements when dialog is openned
+	useEffect(() => {
+		if( isInserterOpen ){
+			//--- Trigger looking for it
+			resizeScrollers();
+		}
+	}, [isInserterOpen]);
+
+
+	//--- Resize scrollable on window change
+	useEffect(() => {
+		//--- Handle window resize
+		const handleResize = () => {
+			resizeScrollers();
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		}
+	}, []);
+
+	//--- END WJF CODE
+
 	// Get the default type, and if there is none, get the first type.
 	const defaultType = useMemo( () => {
 		const defaultTypes = iconTypes.filter( ( type ) => type.isDefault );

src/editor.scss

@@ -101,7 +101,7 @@
 .wp-block-outermost-icon-inserter__modal {
 	.components-modal__content {
 		flex: 1 1 0%;
-		overflow: auto;
+		overflow: hidden;
 		padding: 0px;
 
 		&:before {
@@ -112,23 +112,23 @@
 	.icon-inserter {
 		align-items: stretch;
 		display: flex;
-		height: 100%;
+		height: 100%;		
 	}
 
 	.icon-inserter__sidebar {
 		display: none;
 		flex-direction: column;
 		flex-shrink: 0;
-		overflow-y: scroll;
+		overflow: hidden;
 		width: 280px;
-		padding: 24px 32px 32px;
+		padding: 0px;
 
 		@media ( min-width: 900px ) {
 			display: flex;
 		}
 
 		&__search {
-			margin-bottom: 16px;
+			margin-bottom: 2px;
 
 			.components-base-control__field {
 				margin-bottom: 0;
@@ -138,6 +138,8 @@
 		&__category-type {
 			// Override core component styles.
 			border: none;
+			height:400px;  //-- changes via code
+    		overflow:auto;
 
 			.components-menu-group__label {
 				margin: 0;
@@ -165,9 +167,11 @@
 		flex-direction: column;
 		flex-shrink: 0;
 		overflow: auto;
-		padding-top: 24px;
-		padding-right: 32px;
+		padding-top: 10px;
+    	padding-right: 10px;
 		width: 100%;
+		height:300px;
+
 
 		@media ( min-width: 900px ) {
 			width: calc(100% - 281px);