diff --git a/block-hydration-experiments.php b/block-hydration-experiments.php
index 6ed2656d..f1fd0a53 100644
--- a/block-hydration-experiments.php
+++ b/block-hydration-experiments.php
@@ -46,7 +46,7 @@ function bhe_block_wrapper($block_content, $block, $instance)
 	$attributes = [];
 	$sourced_attributes = [];
 	foreach ($attr_definitions as $attr => $definition) {
-		if (!empty($definition['frontend'])) {
+		if (!empty($definition['public'])) {
 			if (!empty($definition['source'])) {
 				$sourced_attributes[$attr] = [
 					'selector' => $definition['selector'], // TODO: Guard against unset.
@@ -80,14 +80,14 @@ function bhe_block_wrapper($block_content, $block, $instance)
 
 	$block_wrapper =
 		sprintf(
-			'<gutenberg-block ' .
-				'data-gutenberg-block-type="%1$s" ' .
-				'data-gutenberg-uses-block-context="%2$s" ' .
-				'data-gutenberg-provides-block-context="%3$s" ' .
-				'data-gutenberg-attributes="%4$s" ' .
-				'data-gutenberg-sourced-attributes="%5$s" ' .
-				'data-gutenberg-block-props="%6$s" ' .
-				'data-gutenberg-hydration="%7$s">',
+			'<wp-block ' .
+				'data-wp-block-type="%1$s" ' .
+				'data-wp-block-uses-block-context="%2$s" ' .
+				'data-wp-block-provides-block-context="%3$s" ' .
+				'data-wp-block-attributes="%4$s" ' .
+				'data-wp-block-sourced-attributes="%5$s" ' .
+				'data-wp-block-props="%6$s" ' .
+				'data-wp-block-hydration="%7$s">',
 			esc_attr($block['blockName']),
 			esc_attr(json_encode($block_type->uses_context)),
 			esc_attr(json_encode($block_type->provides_context)),
@@ -95,10 +95,9 @@ function bhe_block_wrapper($block_content, $block, $instance)
 			esc_attr(json_encode($sourced_attributes)),
 			esc_attr(json_encode($block_props)),
 			esc_attr($hydration_technique)
-		) . '%1$s</gutenberg-block>';
+		) . '%1$s</wp-block>';
 
-	$template_wrapper =
-		'<template class="gutenberg-inner-blocks">%1$s</template>';
+	$template_wrapper = '<template class="wp-inner-blocks">%1$s</template>';
 
 	$empty_template = sprintf($template_wrapper, '');
 	$template = sprintf(
diff --git a/src/blocks/interactive-child/block.json b/src/blocks/interactive-child/block.json
index aee5271c..638d0944 100644
--- a/src/blocks/interactive-child/block.json
+++ b/src/blocks/interactive-child/block.json
@@ -20,5 +20,5 @@
 	"textdomain": "block-hydration-experiments",
 	"editorScript": "file:./index.js",
 	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js"
+	"viewScript": "file:./frontend.js"
 }
diff --git a/src/blocks/interactive-child/frontend.js b/src/blocks/interactive-child/frontend.js
index d738c420..e47d0edf 100644
--- a/src/blocks/interactive-child/frontend.js
+++ b/src/blocks/interactive-child/frontend.js
@@ -1,26 +1,8 @@
 import CounterContext from '../../context/counter';
 import ThemeContext from '../../context/theme';
-import { useContext } from '../../gutenberg-packages/wordpress-element';
+import { registerBlockType } from '../../gutenberg-packages/frontend';
+import View from './view';
 
-const Frontend = ({ blockProps, context }) => {
-	const theme = useContext(ThemeContext);
-	const counter = useContext(CounterContext);
-
-	return (
-		<div {...blockProps}>
-			<p>
-				Block Context from interactive parent - "bhe/interactive-title":{' '}
-				{context['bhe/interactive-title']}
-			</p>
-			<p>
-				Block Context from non-interactive parent -
-				"bhe/non-interactive-title":{' '}
-				{context['bhe/non-interactive-title']}
-			</p>
-			<p>React Context - "counter": {counter}</p>
-			<p>React Context - "theme": {theme}</p>
-		</div>
-	);
-};
-
-export default Frontend;
+registerBlockType('bhe/interactive-child', View, {
+	usesContext: [ThemeContext, CounterContext],
+});
diff --git a/src/blocks/interactive-child/index.js b/src/blocks/interactive-child/index.js
index 8c88ccbc..1ae9f8bc 100644
--- a/src/blocks/interactive-child/index.js
+++ b/src/blocks/interactive-child/index.js
@@ -1,10 +1,9 @@
 import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
 import Edit from './edit';
-import Frontend from './frontend';
+import View from './view';
 import './style.scss';
 
 registerBlockType('bhe/interactive-child', {
 	edit: Edit,
-	// The Save component is derived from the Frontend component.
-	frontend: Frontend,
+	view: View, // The Save component is derived from the View component.
 });
diff --git a/src/blocks/interactive-child/style.scss b/src/blocks/interactive-child/style.scss
index bd891aa0..2c8c2fad 100644
--- a/src/blocks/interactive-child/style.scss
+++ b/src/blocks/interactive-child/style.scss
@@ -17,7 +17,7 @@
 	content: 'BHE - Interactive Child';
 }
 
-gutenberg-block,
-gutenberg-inner-blocks {
+wp-block,
+wp-inner-blocks {
 	display: contents;
 }
diff --git a/src/blocks/interactive-child/view.js b/src/blocks/interactive-child/view.js
index cc7038be..8d922c45 100644
--- a/src/blocks/interactive-child/view.js
+++ b/src/blocks/interactive-child/view.js
@@ -1,8 +1,26 @@
 import CounterContext from '../../context/counter';
 import ThemeContext from '../../context/theme';
-import { registerBlockType } from '../../gutenberg-packages/frontend';
-import Frontend from './frontend';
+import { useContext } from '../../gutenberg-packages/wordpress-element';
 
-registerBlockType('bhe/interactive-child', Frontend, {
-	usesContext: [ThemeContext, CounterContext],
-});
+const View = ({ blockProps, context }) => {
+	const theme = useContext(ThemeContext);
+	const counter = useContext(CounterContext);
+
+	return (
+		<div {...blockProps}>
+			<p>
+				Block Context from interactive parent - "bhe/interactive-title":{' '}
+				{context['bhe/interactive-title']}
+			</p>
+			<p>
+				Block Context from non-interactive parent -
+				"bhe/non-interactive-title":{' '}
+				{context['bhe/non-interactive-title']}
+			</p>
+			<p>React Context - "counter": {counter}</p>
+			<p>React Context - "theme": {theme}</p>
+		</div>
+	);
+};
+
+export default View;
diff --git a/src/blocks/interactive-parent/block.json b/src/blocks/interactive-parent/block.json
index 50a87993..8f1efc4c 100644
--- a/src/blocks/interactive-parent/block.json
+++ b/src/blocks/interactive-parent/block.json
@@ -11,13 +11,13 @@
 		"counter": {
 			"type": "number",
 			"default": 0,
-			"frontend": true
+			"public": true
 		},
 		"title": {
 			"type": "string",
 			"source": "text",
 			"selector": ".title",
-			"frontend": true
+			"public": true
 		},
 		"secret": {
 			"type": "string",
@@ -42,5 +42,5 @@
 	"textdomain": "block-hydration-experiments",
 	"editorScript": "file:./index.js",
 	"style": "file:./style-index.css",
-	"viewScript": "file:./view.js"
+	"viewScript": "file:./frontend.js"
 }
diff --git a/src/blocks/interactive-parent/frontend.js b/src/blocks/interactive-parent/frontend.js
index 632f99be..8411e50e 100644
--- a/src/blocks/interactive-parent/frontend.js
+++ b/src/blocks/interactive-parent/frontend.js
@@ -1,42 +1,8 @@
-import Counter from '../../context/counter';
-import Theme from '../../context/theme';
-import { useState } from '../../gutenberg-packages/wordpress-element';
-import Button from './shared/button';
-import Title from './shared/title';
+import CounterContext from '../../context/counter';
+import ThemeContext from '../../context/theme';
+import { registerBlockType } from '../../gutenberg-packages/frontend';
+import View from './view';
 
-const Frontend = ({
-	blockProps: {
-		className,
-		style: { fontWeight, ...style },
-	},
-	attributes: { counter: initialCounter, title },
-	children,
-}) => {
-	const [show, setShow] = useState(true);
-	const [bold, setBold] = useState(true);
-	const [counter, setCounter] = useState(initialCounter);
-
-	return (
-		<Counter.Provider value={counter}>
-			<Theme.Provider value="cool theme">
-				<div
-					className={`${className} ${show ? 'show' : 'hide'}`}
-					style={{
-						...style,
-						fontWeight: bold ? 900 : fontWeight,
-					}}
-				>
-					<Title>{title}</Title>
-					<Button handler={() => setShow(!show)}>Show</Button>
-					<Button handler={() => setBold(!bold)}>Bold</Button>
-					<button onClick={() => setCounter(counter + 1)}>
-						{counter}
-					</button>
-					{show && children}
-				</div>
-			</Theme.Provider>
-		</Counter.Provider>
-	);
-};
-
-export default Frontend;
+registerBlockType('bhe/interactive-parent', View, {
+	providesContext: [ThemeContext, CounterContext],
+});
diff --git a/src/blocks/interactive-parent/index.js b/src/blocks/interactive-parent/index.js
index a9f5db57..f0b5af7f 100644
--- a/src/blocks/interactive-parent/index.js
+++ b/src/blocks/interactive-parent/index.js
@@ -1,10 +1,9 @@
 import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
 import Edit from './edit';
-import Frontend from './frontend';
+import View from './view';
 import './style.scss';
 
 registerBlockType('bhe/interactive-parent', {
 	edit: Edit,
-	// The Save component is derived from the Frontend component.
-	frontend: Frontend,
+	view: View, // The Save component is derived from the View component.
 });
diff --git a/src/blocks/interactive-parent/style.scss b/src/blocks/interactive-parent/style.scss
index 95cfe66a..5a91454b 100644
--- a/src/blocks/interactive-parent/style.scss
+++ b/src/blocks/interactive-parent/style.scss
@@ -17,7 +17,7 @@
 	content: 'BHE - Interactive Parent';
 }
 
-gutenberg-block,
-gutenberg-inner-blocks {
+wp-block,
+wp-inner-blocks {
 	display: contents;
 }
diff --git a/src/blocks/interactive-parent/view.js b/src/blocks/interactive-parent/view.js
index 6a65088e..9e7cec5c 100644
--- a/src/blocks/interactive-parent/view.js
+++ b/src/blocks/interactive-parent/view.js
@@ -1,8 +1,42 @@
-import CounterContext from '../../context/counter';
-import ThemeContext from '../../context/theme';
-import { registerBlockType } from '../../gutenberg-packages/frontend';
-import Frontend from './frontend';
+import Counter from '../../context/counter';
+import Theme from '../../context/theme';
+import { useState } from '../../gutenberg-packages/wordpress-element';
+import Button from './shared/button';
+import Title from './shared/title';
 
-registerBlockType('bhe/interactive-parent', Frontend, {
-	providesContext: [ThemeContext, CounterContext],
-});
+const View = ({
+	blockProps: {
+		className,
+		style: { fontWeight, ...style },
+	},
+	attributes: { counter: initialCounter, title },
+	children,
+}) => {
+	const [show, setShow] = useState(true);
+	const [bold, setBold] = useState(true);
+	const [counter, setCounter] = useState(initialCounter);
+
+	return (
+		<Counter.Provider value={counter}>
+			<Theme.Provider value="cool theme">
+				<div
+					className={`${className} ${show ? 'show' : 'hide'}`}
+					style={{
+						...style,
+						fontWeight: bold ? 900 : fontWeight,
+					}}
+				>
+					<Title>{title}</Title>
+					<Button handler={() => setShow(!show)}>Show</Button>
+					<Button handler={() => setBold(!bold)}>Bold</Button>
+					<button onClick={() => setCounter(counter + 1)}>
+						{counter}
+					</button>
+					{show && children}
+				</div>
+			</Theme.Provider>
+		</Counter.Provider>
+	);
+};
+
+export default View;
diff --git a/src/blocks/non-interactive-parent/block.json b/src/blocks/non-interactive-parent/block.json
index fa0ba0fc..333019aa 100644
--- a/src/blocks/non-interactive-parent/block.json
+++ b/src/blocks/non-interactive-parent/block.json
@@ -12,7 +12,7 @@
 			"type": "string",
 			"source": "text",
 			"selector": ".title",
-			"frontend": true
+			"public": true
 		}
 	},
 	"providesContext": {
diff --git a/src/blocks/non-interactive-parent/index.js b/src/blocks/non-interactive-parent/index.js
index d7fdfae3..a50b4e51 100644
--- a/src/blocks/non-interactive-parent/index.js
+++ b/src/blocks/non-interactive-parent/index.js
@@ -1,9 +1,12 @@
 import { registerBlockType } from '../../gutenberg-packages/wordpress-blocks';
 import metadata from './block.json';
-import edit from './edit';
-import frontend from './frontend';
+import Edit from './edit';
+import View from './view';
 import './style.scss';
 
 const { name } = metadata;
 
-registerBlockType(name, { edit, frontend });
+registerBlockType(name, {
+	edit: Edit,
+	view: View, // The Save component is derived from the View component.
+});
diff --git a/src/blocks/non-interactive-parent/style.scss b/src/blocks/non-interactive-parent/style.scss
index c2c61eef..05338e5d 100644
--- a/src/blocks/non-interactive-parent/style.scss
+++ b/src/blocks/non-interactive-parent/style.scss
@@ -17,7 +17,7 @@
 	font-size: 10px;
 }
 
-gutenberg-block,
-gutenberg-inner-blocks {
+wp-block,
+wp-inner-blocks {
 	display: contents;
 }
diff --git a/src/blocks/non-interactive-parent/frontend.js b/src/blocks/non-interactive-parent/view.js
similarity index 52%
rename from src/blocks/non-interactive-parent/frontend.js
rename to src/blocks/non-interactive-parent/view.js
index 70a54e0f..c381f3cb 100644
--- a/src/blocks/non-interactive-parent/frontend.js
+++ b/src/blocks/non-interactive-parent/view.js
@@ -1,8 +1,8 @@
-const Frontend = ({ attributes, blockProps, children }) => (
+const View = ({ attributes, blockProps, children }) => (
 	<div {...blockProps}>
 		<p className="title">{attributes.title}</p>
 		{children}
 	</div>
 );
 
-export default Frontend;
+export default View;
diff --git a/src/gutenberg-packages/frontend.js b/src/gutenberg-packages/frontend.js
index 74298fb6..c2ce4629 100644
--- a/src/gutenberg-packages/frontend.js
+++ b/src/gutenberg-packages/frontend.js
@@ -2,14 +2,14 @@ import { Consumer, createProvider } from './react-context';
 import { createGlobal, matcherFromSource } from './utils';
 import { EnvContext, hydrate } from './wordpress-element';
 
-const blockTypes = createGlobal('gutenbergBlockTypes', new Map());
+const blockTypes = createGlobal('wpBlockTypes', new Map());
 
 export const registerBlockType = (name, Component, options) => {
 	blockTypes.set(name, { Component, options });
 };
 
 const Children = ({ value }) => (
-	<gutenberg-inner-blocks
+	<wp-inner-blocks
 		suppressHydrationWarning={true}
 		dangerouslySetInnerHTML={{ __html: value }}
 	/>
@@ -24,17 +24,17 @@ const Wrappers = ({ wrappers, children }) => {
 	return result;
 };
 
-class GutenbergBlock extends HTMLElement {
+class WpBlock extends HTMLElement {
 	connectedCallback() {
 		setTimeout(() => {
 			// Get the block attributes.
 			const attributes = JSON.parse(
-				this.getAttribute('data-gutenberg-attributes')
+				this.getAttribute('data-wp-block-attributes')
 			);
 
 			// Add the sourced attributes to the attributes object.
 			const sourcedAttributes = JSON.parse(
-				this.getAttribute('data-gutenberg-sourced-attributes')
+				this.getAttribute('data-wp-block-sourced-attributes')
 			);
 			for (const attr in sourcedAttributes) {
 				attributes[attr] = matcherFromSource(sourcedAttributes[attr])(
@@ -45,10 +45,10 @@ class GutenbergBlock extends HTMLElement {
 			// Get the Block Context from their parents.
 			const blockContext = {};
 			const usesBlockContext = JSON.parse(
-				this.getAttribute('data-gutenberg-uses-block-context')
+				this.getAttribute('data-wp-block-uses-block-context')
 			);
 			if (usesBlockContext) {
-				const event = new CustomEvent('gutenberg-block-context', {
+				const event = new CustomEvent('wp-block-context', {
 					detail: { context: {} },
 					bubbles: true,
 					cancelable: true,
@@ -64,10 +64,10 @@ class GutenbergBlock extends HTMLElement {
 
 			// Share the Block Context with their children.
 			const providesBlockContext = JSON.parse(
-				this.getAttribute('data-gutenberg-provides-block-context')
+				this.getAttribute('data-wp-block-provides-block-context')
 			);
 			if (providesBlockContext) {
-				this.addEventListener('gutenberg-block-context', (event) => {
+				this.addEventListener('wp-block-context', (event) => {
 					// Select only the parts of the context that the block declared in
 					// the `providesContext` of its block.json.
 					Object.entries(providesBlockContext).forEach(
@@ -82,22 +82,18 @@ class GutenbergBlock extends HTMLElement {
 			}
 
 			// Hydrate the interactive blocks.
-			const hydration = this.getAttribute('data-gutenberg-hydration');
+			const hydration = this.getAttribute('data-wp-block-hydration');
 
 			if (hydration) {
 				const Providers = [];
 
 				// Get the block type, block props (class and style), inner blocks,
 				// frontend component and options.
-				const blockType = this.getAttribute(
-					'data-gutenberg-block-type'
-				);
-				const innerBlocks = this.querySelector(
-					'gutenberg-inner-blocks'
-				);
+				const blockType = this.getAttribute('data-wp-block-type');
+				const innerBlocks = this.querySelector('wp-inner-blocks');
 				const { Component, options } = blockTypes.get(blockType);
 				const { class: className, style } = JSON.parse(
-					this.getAttribute('data-gutenberg-block-props')
+					this.getAttribute('data-wp-block-props')
 				);
 				// Temporary element to translate style strings to style objects.
 				const el = document.createElement('div');
@@ -107,7 +103,7 @@ class GutenbergBlock extends HTMLElement {
 
 				// Get the React Context from their parents.
 				options?.usesContext?.forEach((context) => {
-					const event = new CustomEvent('gutenberg-react-context', {
+					const event = new CustomEvent('wp-react-context', {
 						detail: { context },
 						bubbles: true,
 						cancelable: true,
@@ -118,31 +114,28 @@ class GutenbergBlock extends HTMLElement {
 
 				// Share the React Context with their children.
 				if (options?.providesContext?.length > 0) {
-					this.addEventListener(
-						'gutenberg-react-context',
-						(event) => {
-							for (const context of options.providesContext) {
-								// We compare the provided context with the received context.
-								if (event.detail.context === context) {
-									// If there's a match, we stop propagation.
-									event.stopPropagation();
-
-									// We return a Provider that is subscribed to the parent Provider.
-									event.detail.Provider = createProvider({
-										element: this,
-										context,
-									});
-
-									// We can stop the iteration.
-									break;
-								}
+					this.addEventListener('wp-react-context', (event) => {
+						for (const context of options.providesContext) {
+							// We compare the provided context with the received context.
+							if (event.detail.context === context) {
+								// If there's a match, we stop propagation.
+								event.stopPropagation();
+
+								// We return a Provider that is subscribed to the parent Provider.
+								event.detail.Provider = createProvider({
+									element: this,
+									context,
+								});
+
+								// We can stop the iteration.
+								break;
 							}
 						}
-					);
+					});
 				}
 
 				const media = this.getAttribute(
-					'data-gutenberg-hydration-media'
+					'data-wp-block-hydration-media'
 				);
 
 				hydrate(
@@ -176,7 +169,7 @@ class GutenbergBlock extends HTMLElement {
 						</Wrappers>
 
 						<template
-							className="gutenberg-inner-blocks"
+							className="wp-inner-blocks"
 							suppressHydrationWarning={true}
 						/>
 					</EnvContext.Provider>,
@@ -193,6 +186,6 @@ class GutenbergBlock extends HTMLElement {
 //
 // We need to ensure that the component registration code is only run once
 // because it throws if you try to register an element with the same name twice.
-if (customElements.get('gutenberg-block') === undefined) {
-	customElements.define('gutenberg-block', GutenbergBlock);
+if (customElements.get('wp-block') === undefined) {
+	customElements.define('wp-block', WpBlock);
 }
diff --git a/src/gutenberg-packages/wordpress-blocks.js b/src/gutenberg-packages/wordpress-blocks.js
index 9860ee54..cd1938c9 100644
--- a/src/gutenberg-packages/wordpress-blocks.js
+++ b/src/gutenberg-packages/wordpress-blocks.js
@@ -13,15 +13,15 @@ const Wrapper =
 					attributes={attributes}
 					context={{}}
 				>
-					<gutenberg-inner-blocks {...useInnerBlocksProps.save()} />
+					<wp-inner-blocks {...useInnerBlocksProps.save()} />
 				</Comp>
 			</>
 		);
 
-export const registerBlockType = (name, { frontend, edit, ...rest }) => {
+export const registerBlockType = (name, { edit, view, ...rest }) => {
 	gutenbergRegisterBlockType(name, {
 		edit,
-		save: Wrapper(frontend),
+		save: Wrapper(view),
 		...rest,
 	});
 };