Fundamentals of Block Development - fix save definition (#56605)

docs/getting-started/fundamentals/file-structure-of-a-block.md

@@ -47,7 +47,7 @@ The `edit.js` commonly gets used to contain the React component that gets used i
 
 ### `save.js`
 
-The `save.js` is similar to the `edit.js` file in that it exports a single React component. This component generates the static HTML markup that gets saved to the Database. 
+The `save.js` exports the function that returns the static HTML markup that gets saved to the Database. 
 
 ### `style.(css|scss|sass)`
 

docs/getting-started/fundamentals/javascript-in-the-block-editor.md

@@ -30,7 +30,7 @@ With the [proper `package.json` scripts](https://developer.wordpress.org/block-e
 
 Using Javascript without a build process may be another good option for code developments with few requirements (especially those not requiring JSX). 
 
-Without a build process, you access the methods directly from the `wp` global object and must enqueue the script manually. [WordPress Javascript](https://developer.wordpress.org/block-editor/reference-guides/packages/) packages](https://developer.wordpress.org/block-editor/reference-guides/packages/) can be accessed through the `wp` [global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable) but every script that wants to use them through this `wp` object is responsible for adding [the handle of that package](https://developer.wordpress.org/block-editor/contributors/code/scripts/) to the dependency array when registered.
+Without a build process, you access the methods directly from the `wp` global object and must enqueue the script manually. [WordPress Javascript packages](https://developer.wordpress.org/block-editor/reference-guides/packages/) can be accessed through the `wp` [global variable](https://developer.mozilla.org/en-US/docs/Glossary/Global_variable) but every script that wants to use them through this `wp` object is responsible for adding [the handle of that package](https://developer.wordpress.org/block-editor/contributors/code/scripts/) to the dependency array when registered.
 
 So, for example if a script wants to register a block variation using the `registerBlockVariation` method out of the ["blocks" package](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-blocks/), the `wp-blocks` handle would need to get added to the dependency array to ensure that `wp.blocks.registerBlockVariation` is defined when the script tries to access it (see [example](https://github.com/wptrainingteam/block-theme-examples/blob/master/example-block-variation/functions.php)). 
 
@@ -42,10 +42,10 @@ Use [`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/ho
 
 ## Additional resources
 
+- [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/) 
+- [Enqueueing assets in the Editor](https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/) 
+- [Wordpress Packages handles](https://developer.wordpress.org/block-editor/contributors/code/scripts/) 
 - [Javascript Reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | MDN Web Docs
 - [block-development-examples](https://github.com/WordPress/block-development-examples) | GitHub repository
 - [block-theme-examples](https://github.com/wptrainingteam/block-theme-examples) | GitHub repository
-- [Get started with wp-scripts](https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/) | Block Editor Handbook
-- [Enqueueing assets in the Editor](https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/) | Block Editor Handbook
-- [Wordpress Packages handles](https://developer.wordpress.org/block-editor/contributors/code/scripts/) | Block Editor Handbook
 - [How webpack and WordPress packages interact](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) | Developer Blog

docs/getting-started/fundamentals/registration-of-a-block.md

@@ -70,23 +70,23 @@ The content of <code>block.json</code> (or any other <code>.json</code> file) ca
 
 The client-side block settings object passed as a second parameter include two properties that are especially relevant:
 - `edit`: The React component that gets used in the editor for our block.
-- `save`: The React component that generates the static HTML markup that gets saved to the Database. 
+- `save`: The function that returns the static HTML markup that gets saved to the Database. 
 
 `registerBlockType` returns the registered block type (`WPBlock`) on success or `undefined` on failure.
 
 **Example:**
 
 ```js
 import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
 import metadata from './block.json';
 
+const Edit = () => <p { ...useBlockProps() }>Hello World - Block Editor</p>;
+const save = () => <p { ...useBlockProps.save() }>Hello World - Frontend</p>;
+
 registerBlockType( metadata.name, {
-	edit() {
-		return <p>Hello World - Block Editor</p>;
-	},
-	save() {
-		return <p>Hello World - Frontend</p>;
-	},
+	edit: Edit,
+	save,
 } );
 ```
 _See the [code above](https://github.com/WordPress/block-development-examples/blob/trunk/plugins/minimal-block-ca6eda/src/index.js) in [an example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-ca6eda)_