Add anchor support

lib/block-supports/anchor.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Anchor block support flag.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Registers the anchor block attribute for block types that support it.
+ *
+ * @param WP_Block_Type $block_type Block Type.
+ */
+function gutenberg_register_anchor_support( $block_type ) {
+	$has_anchor_support = gutenberg_experimental_get( $block_type->supports, array( 'anchor' ), true );
+
+	if ( $has_anchor_support ) {
+		if ( ! $block_type->attributes ) {
+			$block_type->attributes = array();
+		}
+
+		if ( ! array_key_exists( 'anchor', $block_type->attributes ) ) {
+			$block_type->attributes['anchor'] = array(
+				'type' => 'string',
+			);
+		}
+	}
+
+}
+
+/**
+ * Add the anchor to the output.
+ *
+ * @param  array         $attributes       Comprehensive list of attributes to be applied.
+ * @param  array         $block_attributes Block attributes.
+ * @param  WP_Block_Type $block_type       Block Type.
+ *
+ * @return array Block CSS classes and inline styles.
+ */
+function gutenberg_apply_anchor_support( $attributes, $block_attributes, $block_type ) {
+	$has_anchor_support = gutenberg_experimental_get( $block_type->supports, array( 'anchor' ), true );
+	if ( $has_anchor_support ) {
+		$has_anchor = array_key_exists( 'anchor', $block_attributes );
+
+		if ( $has_anchor ) {
+			$attributes['anchor'] = $block_attributes['anchor'];
+		}
+	}
+
+	return $attributes;
+}

lib/block-supports/index.php

@@ -18,6 +18,7 @@ function gutenberg_register_block_supports() {
 		gutenberg_register_colors_support( $block_type );
 		gutenberg_register_typography_support( $block_type );
 		gutenberg_register_custom_classname_support( $block_type );
+		gutenberg_register_anchor_support( $block_type );
 	}
 }
 
@@ -47,6 +48,7 @@ function gutenberg_apply_block_supports( $block_content, $block ) {
 	$attributes = gutenberg_apply_typography_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_alignment_support( $attributes, $block['attrs'], $block_type );
 	$attributes = gutenberg_apply_custom_classname_support( $attributes, $block['attrs'], $block_type );
+	$attributes = gutenberg_apply_anchor_support( $attributes, $block['attrs'], $block_type );
 
 	if ( ! count( $attributes ) ) {
 		return $block_content;
@@ -81,7 +83,7 @@ function gutenberg_apply_block_supports( $block_content, $block ) {
 	$styles_to_add  = array_key_exists( 'inline_styles', $attributes ) ? $attributes['inline_styles'] : array();
 	$new_styles     = array_unique( array_map( 'gutenberg_normalize_css_rule', array_filter( array_merge( $current_styles, $styles_to_add ) ) ) );
 
-	// Apply new styles and classes.
+	// Apply new styles, classes and anchor.
 	if ( ! empty( $new_classes ) ) {
 		$block_root->setAttribute( 'class', esc_attr( implode( ' ', $new_classes ) ) );
 	}
@@ -90,6 +92,10 @@ function gutenberg_apply_block_supports( $block_content, $block ) {
 		$block_root->setAttribute( 'style', esc_attr( implode( '; ', $new_styles ) . ';' ) );
 	}
 
+	if ( ! empty( $attributes['anchor'] ) ) {
+		$block_root->setAttribute( 'id', esc_attr( $attributes['anchor'] ) );
+	}
+
 	return str_replace( array( $wrapper_left, $wrapper_right ), '', $dom->saveHtml() );
 }
 add_filter( 'render_block', 'gutenberg_apply_block_supports', 10, 2 );

lib/load.php

@@ -119,3 +119,4 @@ function gutenberg_is_experiment_enabled( $name ) {
 require dirname( __FILE__ ) . '/block-supports/typography.php';
 require dirname( __FILE__ ) . '/block-supports/custom-classname.php';
 require dirname( __FILE__ ) . '/block-supports/generated-classname.php';
+require dirname( __FILE__ ) . '/block-supports/anchor.php';

packages/block-editor/src/hooks/anchor.js

@@ -39,14 +39,20 @@ export function addAttribute( settings ) {
 	}
 	if ( hasBlockSupport( settings, 'anchor' ) ) {
 		// Gracefully handle if settings.attributes is undefined.
-		settings.attributes = {
-			...settings.attributes,
-			anchor: {
+		let anchor = {
+			type: 'string',
+		};
+		if ( settings.save.length ) {
+			anchor = {
 				type: 'string',
 				source: 'attribute',
 				attribute: 'id',
 				selector: '*',
-			},
+			};
+		}
+		settings.attributes = {
+			...settings.attributes,
+			anchor,
 		};
 	}
 

packages/block-library/src/archives/block.json

@@ -13,6 +13,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/calendar/block.json

@@ -10,6 +10,7 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"anchor": true
 	}
 }

packages/block-library/src/categories/block.json

@@ -17,6 +17,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/latest-comments/block.json

@@ -23,6 +23,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/latest-posts/block.json

@@ -82,6 +82,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/legacy-widget/block.json

@@ -19,6 +19,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"html": false,
 		"customClassName": false
 	}

packages/block-library/src/rss/block.json

@@ -37,6 +37,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/search/block.json

@@ -15,6 +15,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false
 	}
 }

packages/block-library/src/tag-cloud/block.json

@@ -13,6 +13,7 @@
 	},
 	"supports": {
 		"html": false,
-		"align": true
+		"align": true,
+		"anchor": true
 	}
 }