Editor.js custom blocks

We can register a custom block component for use with inline block editing.

In this example we create a file called _inc/carousel.php to register a carousel component:

<?php
$cms->register_block_handler([
	'name' => 'Carousel',
	'render' => function ($data) {
        ?>
        
<div class="glide">
	<div class="glide__track" data-glide-el="track">
		<ul class="glide__slides">

		<?php
		foreach ($data as $v):
		?>
			<li class="glide__slide" sl-name="slides[<?=$k; ?>]">
				<img src="<?=$v['url'];?>">
	        		<h3><?=$v['thumbnails'];?></h3>
				<div><?=$v['caption'];?></div>
			</li>
		<?php
		endforeach;
		?>

		</ul>
	</div>

	<div class="glide__arrows" data-glide-el="controls">
		<button class="glide__arrow glide__arrow--left" data-glide-dir="<"><i class="fas fa-chevron-left"></i></button>
		<button class="glide__arrow glide__arrow--right" data-glide-dir=">"><i class="fas fa-chevron-right"></i></button>
	</div>
</div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.core.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.theme.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.min.js"></script>

<script>
	window.addEventListener('load', function () {
		if (!document.querySelector('.glide')) {
			return;
		}
		
		var glide = new Glide(".glide", {
			type: "carousel",
			gap: 80,
			perView: 3,
			perSwipe: '|',
			breakpoints: {
				800: {
					perView: 1
				}
			}
		}).mount();
	});
</script>

        <?php
	},
	'setup' => function () {
		?>
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bundle.min.js"></script>
		<?php
	},
	'config' => [
        'endpoints' => [
            'byFile' => '/_lib/api/v2/?cmd=uploads',
        ]
	]
]);

The $cms->register_block_handler method takes the following arguments.

name

The name of the block.

render

Custom render function should return a HTML string.

setup

Should output any scripts needed to load the editor.js plugin.

config

Any config data which should be passed to the plugin when initialised.

We can then nvoke the carousel component as follows:

<?php
require('_inc/blocks/carousel.php');

$page_data = $cms->get_page();
$meta = $page_data['meta'];
?>

<div sl-name="main" sl-type="block">
	<?=$cms->render_blocks($meta['main']);?>
</div>

<?php 
load_js('shiftlib');
$cms->load_page_editor($page_data);