Support IDs (HTML Anchors)

[gettonet]

Would be very useful if container or row would have an option to add id, along with class...Any chance of implementing this feature?

[Jürg Hunziker]

Hi @gettonet. There was already a feature request to add an ID attribute to the blocks here: https://wordpress.org/support/topic/classes-being-added-to-the-block-outer-and-not-the-row/. As I wrote there in my opinion this should be a feature which should be added by Gutenberg itself. But since this doesn't seem to happen in the near future I will think about adding them to our blocks.

[forcecodema]

I agree that it would be nice feature to have - and it is easy to add it.
Let's say for the row block we may add blockId or elementId attribute in:

class-row-block-type.php

protected $attributes = array(
	'blockId' => array(
		'type' => 'string',
	),

the default value in the same file like:

protected $default_attributes = array(
	'blockId' => '',
	...

then in row/edit.js

const {
	blockId,
	...
} = attributes;

...
<PanelBody>
	<TextControl
		label="Block Id"
		value={ blockId }
		onChange={ ( value ) => {
			setAttributes( {
				blockId: value,
			} );
		} }
	/>
</PanelBody>
...

and finally modify templates/row.php

$blockId = "";
if ( array_key_exists( 'blockId', $attributes ) && !empty( $attributes['blockId'] ) ) {
	$blockId = 'id="' . esc_attr( $attributes['blockId'] ) . '"';
}

and

<div <?php echo $blockId; ?> class="<?php echo esc_attr( implode( ' ', $classes ) ); ?>">