Add browser like frame to images in Gutenberg/Block Editor. Demo https://gauravtiwari.org/work/

add_to_functions.php

<?php add_action('init', function() {
register_block_style('core/image', [
		'name' => 'browser-shot',
		'label' => __('BrowserShot', 'md'),					 
		'inline_style' => '.is-style-browser-shot, .browser-shot { border-top: 2em solid rgba(230, 230, 230, 0.7); box-shadow: 0 0.1em 1em 0 rgba(0, 0, 0, 0.2); position: relative; border-radius: 3px 3px 0 0; background:#fff; } .is-style-browser-shot:before, .browser-shot:before { display: block; position: absolute; content: ''; top: -1.25em; left: 1em; width: 0.5em; height: 0.5em; border-radius: 50%; background-color: #f44; box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5; }'
	]);
});