diff --git a/blocks.js b/blocks.js index 6e3e69df46b77c..b4cda4e2e7eb2a 100644 --- a/blocks.js +++ b/blocks.js @@ -521,16 +521,12 @@ function renderBlockMenu() { insertBlockMenuContent.appendChild( node ); } } ); - - var placeholder = document.createElement('div'); - placeholder.className = 'insert-block__separator'; - placeholder.textContent = 'These don\'t work yet.'; - insertBlockMenuContent.appendChild( placeholder ); } function attachBlockMenuSearch() { insertBlockMenuSearchInput.addEventListener( 'keyup', filterBlockMenu, false ); insertBlockMenuSearchInput.addEventListener( 'input', filterBlockMenu, false ); + insertBlockMenuContent.addEventListener( 'scroll', handleBlockMenuScroll, false ); selectBlockInMenu(); renderBlockMenu(); @@ -539,6 +535,14 @@ function attachBlockMenuSearch() { selectBlockInMenu(); renderBlockMenu(); } + + function handleBlockMenuScroll( event ) { + if ( insertBlockMenuContent.scrollHeight - insertBlockMenuContent.scrollTop <= insertBlockMenuContent.clientHeight ) { + insertBlockMenuContent.className = 'insert-block__content is-bottom'; + } else { + insertBlockMenuContent.className = 'insert-block__content'; + } + } } /** diff --git a/style.css b/style.css index 5dcd07a6377722..190ec91a8e362f 100644 --- a/style.css +++ b/style.css @@ -426,6 +426,11 @@ img.is-selected { .insert-block__content { max-height: 180px; overflow: auto; + box-shadow: inset 0px -4px 6px -2px rgba(224,229,233,1); +} + +.insert-block__content.is-bottom { + box-shadow: none; } .insert-block__content:focus {