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?

[tschortsch]

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 ) ); ?>">