Merge pull request #11177 from skyace65/StepByStepUi

Add UI roles to remaining step by step pages

Author: mhilbrunner

getting_started/step_by_step/instancing.rst

@@ -52,9 +52,10 @@ you to download the ball's sample project we prepared for you:
 `instancing_starter.zip <https://github.com/godotengine/godot-docs-project-starters/releases/download/latest-4.x/instancing_starter.zip>`_.
 
 Extract the archive on your computer. To import it, you need the Project Manager.
-The Project Manager is accessed by opening Godot, or if you already have Godot opened, click on *Project -> Quit to Project List* (:kbd:`Ctrl + Shift + Q`, :kbd:`Ctrl + Option + Cmd + Q` on macOS)
+The Project Manager is accessed by opening Godot, or if you already have Godot
+opened, click on :menu:`Project > Quit to Project List` (:kbd:`Ctrl + Shift + Q`, :kbd:`Ctrl + Option + Cmd + Q` on macOS)
 
-In the Project Manager, click the *Import* button to import the project.
+In the Project Manager, click the :button:`Import` button to import the project.
 
 .. image:: img/instancing_import_button.webp
 
@@ -63,12 +64,12 @@ Double-click the ``project.godot`` file to open it.
 
 .. image:: img/instancing_import_project_file.webp
 
-Finally, click the Import & Edit button.
+Finally, click the :button:`Import`` button.
 
 .. image:: img/instancing_import_and_edit_button.webp
 
 A window notifying you that the project was last opened in an older Godot version
-may appear, that's not an issue. Click *Ok* to open the project.
+may appear, that's not an issue. Click :button:`Ok`` to open the project.
 
 The project contains two packed scenes: ``main.tscn``, containing walls against
 which the ball collides, and ``ball.tscn``. The Main scene should open
@@ -118,7 +119,7 @@ Editing scenes and instances
 There is more to instances. With this feature, you can:
 
 1. Change the properties of one ball without affecting the others using the
-   Inspector.
+   :ui:`Inspector`.
 2. Change the default properties of every Ball by opening the ``ball.tscn`` scene
    and making a change to the Ball node there. Upon saving, all instances of the
    Ball in the project will see their values update.
@@ -130,8 +131,8 @@ Let's try this. Double-click ``ball.tscn`` in the FileSystem to open it.
 
 .. image:: img/instancing_ball_scene_open.webp
 
-In the Scene dock on the left, select the Ball node. Then, in the Inspector on the right, click on the PhysicsMaterial
-property to expand it.
+In the Scene dock on the left, select the Ball node. Then, in the :ui:`Inspector` on the
+right, click on the :inspector:`PhysicsMaterial`` property to expand it.
 
 .. image:: img/instancing_physics_material_expand.webp
 
@@ -149,8 +150,8 @@ on the corresponding tab above the viewport.
 
 .. image:: img/instancing_scene_tabs.webp
 
-Select one of the instanced Ball nodes and, in the Inspector, set its Gravity
-Scale value to ``10``.
+Select one of the instanced Ball nodes and, in the :ui:`Inspector`, set its
+:inspector:`Gravity Scale` value to ``10``.
 
 .. image:: img/instancing_property_gravity_scale.png
 
@@ -167,11 +168,11 @@ Rerun the game and notice how this ball now falls much faster than the others.
 
 .. note::
 
-    You may notice you are unable to change the values of the PhysicsMaterial
-    of the ball. This is because PhysicsMaterial is a *resource*, and needs
+    You may notice you are unable to change the values of the :inspector:`PhysicsMaterial`
+    of the ball. This is because :inspector:`PhysicsMaterial` is a *resource*, and needs
     to be made unique before you can edit it in a scene that is linking to its
     original scene. To make a resource unique for one instance, right-click on
-    the **Physics Material** property in the Inspector and click **Make Unique**
+    the :inspector:`Physics Material` property in the :ui:`Inspector`` and click :button:`Make Unique``
     in the context menu.
 
     Resources are another essential building block of Godot games we will cover

getting_started/step_by_step/nodes_and_scenes.rst

@@ -72,7 +72,7 @@ opening the project, you should see an empty editor.
 
 .. image:: img/nodes_and_scenes_01_empty_editor.webp
 
-In an empty scene, the Scene dock on the left shows several options to add a
+In an empty scene, the :ui:`Scene`` dock on the left shows several options to add a
 root node quickly. :button:`2D Scene` adds a :ref:`Node2D <class_Node2D>` node,
 :button:`3D Scene` adds a :ref:`Node3D <class_Node3D>` node,
 and :button:`User Interface` adds a :ref:`Control <class_Control>` node.

getting_started/step_by_step/scripting_first_script.rst

@@ -41,8 +41,8 @@ icon, which we often use for prototyping in the community.
 
 .. image:: img/scripting_first_script_icon.svg
 
-We need to create a Sprite2D node to display it in the game. In the Scene dock,
-click the **Other Node** button.
+We need to create a Sprite2D node to display it in the game. In the :ui:`Scene` dock,
+click the :button:`Other Node` button.
 
 .. image:: img/scripting_first_script_click_other_node.webp
 
@@ -51,14 +51,14 @@ to create the node.
 
 .. image:: img/scripting_first_script_add_sprite_node.webp
 
-Your Scene tab should now only have a Sprite2D node.
+Your :ui:`Scene` tab should now only have a Sprite2D node.
 
 .. image:: img/scripting_first_script_scene_tree.webp
 
-A Sprite2D node needs a texture to display. In the Inspector on the right, you
-can see that the **Texture** property says ``<empty>``. To display the Godot icon,
-click and drag the file ``icon.svg`` from the FileSystem dock onto the Texture
-slot.
+A Sprite2D node needs a texture to display. In the :ui:`Inspector` on the right, you
+can see that the :inspector:`Texture` property says ``<empty>``. To display the
+Godot icon, click and drag the file ``icon.svg`` from the FileSystem dock onto the
+Texture slot.
 
 .. image:: img/scripting_first_script_setting_texture.webp
 
@@ -75,16 +75,16 @@ Creating a new script
 ---------------------
 
 To create and attach a new script to our node, right-click on Sprite2D in the
-Scene dock and select **Attach Script**.
+Scene dock and select :button:`Attach Script`.
 
 .. image:: img/scripting_first_script_attach_script.webp
 
-The **Attach Node Script** window appears. It allows you to select the script's
+The :ui:`Attach Node Script` window appears. It allows you to select the script's
 language and file path, among other options.
 
-Change the **Template** field from ``Node: Default`` to ``Object: Empty`` to
+Change the :ui:`Template` field from ``Node: Default`` to ``Object: Empty`` to
 start with a clean file. Leave the other options set to their default values and
-click the **Create** button to create the script.
+click the :button:`Create` button to create the script.
 
 .. image:: img/scripting_first_script_attach_node_script.webp
 
@@ -93,7 +93,7 @@ click the **Create** button to create the script.
     C# script names need to match their class name. In this case, you should name the
     file ``MySprite2D.cs``.
 
-The Script workspace should appear with your new ``sprite_2d.gd`` file open and
+The :ui:`Script` workspace should appear with your new ``sprite_2d.gd`` file open and
 the following line of code:
 
 .. tabs::
@@ -120,16 +120,16 @@ node, including classes it extends, like ``Node2D``, ``CanvasItem``, and
           class will implicitly extend :ref:`RefCounted <class_RefCounted>`, which
           Godot uses to manage your application's memory.
 
-Inherited properties include the ones you can see in the Inspector dock, like
+Inherited properties include the ones you can see in the :ui:`Inspector` dock, like
 our node's ``texture``.
 
 .. note::
 
-    By default, the Inspector displays a node's properties in "Title Case", with
+    By default, the :ui:`Inspector` displays a node's properties in "Title Case", with
     capitalized words separated by a space. In GDScript code, these properties
     are in "snake_case", which is lowercase with words separated by an underscore.
 
-    You can hover over any property's name in the Inspector to see a description and
+    You can hover over any property's name in the :ui:`Inspector` to see a description and
     its identifier in code.
 
 Hello, world!
@@ -165,7 +165,7 @@ this function.
           red and display the following error message: "Indented block expected".
 
 Save the scene as ``sprite_2d.tscn`` if you haven't already, then press :kbd:`F6` (:kbd:`Cmd + R` on macOS)
-to run it. Look at the **Output** bottom panel that expands.
+to run it. Look at the :ui:`Output` bottom panel that expands.
 It should display "Hello, world!".
 
 .. image:: img/scripting_first_script_print_hello_world.webp
@@ -178,7 +178,7 @@ Turning around
 
 It's time to make our node move and rotate. To do so, we're going to add two
 member variables to our script: the movement speed in pixels per second and the
-angular speed in radians per second.  Add the following after the ``extends Sprite2D`` line.
+angular speed in radians per second. Add the following after the ``extends Sprite2D`` line.
 
 .. tabs::
  .. code-tab:: gdscript GDScript

getting_started/step_by_step/scripting_player_input.rst

@@ -74,8 +74,8 @@ The two actions we use above, "ui_left" and "ui_right", are predefined in every
 Godot project. They respectively trigger when the player presses the left and
 right arrows on the keyboard or left and right on a gamepad's D-pad.
 
-.. note:: You can see and edit input actions in your project by going to Project
-          -> Project Settings and clicking on the Input Map tab.
+.. note:: You can see and edit input actions in your project by going to
+          :menu:`Project > Project Settings` and clicking on the :ui:`Input Map` tab.
 
 Finally, we use the ``direction`` as a multiplier when we update the node's
 ``rotation``: ``rotation += angular_speed * direction * delta``.

getting_started/step_by_step/signals.rst

@@ -58,11 +58,11 @@ To add a button to our game, we will create a new scene which will include
 both a :ref:`Button <class_button>` and the ``sprite_2d.tscn`` scene we created in
 the :ref:`doc_scripting_first_script` lesson.
 
-Create a new scene by going to the menu Scene -> New Scene.
+Create a new scene by going to the menu :menu:`Scene > New Scene`.
 
 .. image:: img/signals_01_new_scene.webp
 
-In the Scene dock, click the 2D Scene button. This will add
+In the Scene dock, click the :button:`2D Scene`` button. This will add
 a :ref:`Node2D <class_Node2D>` as our root.
 
 .. image:: img/signals_02_2d_scene.webp
@@ -73,7 +73,7 @@ previously onto the Node2D to instantiate it.
 .. image:: img/signals_03_dragging_scene.png
 
 We want to add another node as a sibling of the Sprite2D. To do so, right-click
-on Node2D and select Add Child Node.
+on Node2D and select :button:`Add Child Node`.
 
 .. image:: img/signals_04_add_child_node.webp
 
@@ -92,8 +92,8 @@ If you don't see the handles, ensure the select tool is active in the toolbar.
 
 Click and drag on the button itself to move it closer to the sprite.
 
-You can also write a label on the Button by editing its Text property in the
-Inspector. Enter ``Toggle motion``.
+You can also write a label on the Button by editing its :inspector:`Text` property
+in the :ui:`Inspector`. Enter ``Toggle motion``.
 
 .. image:: img/signals_08_toggle_motion_text.webp
 
@@ -114,8 +114,9 @@ want to call a new function that will toggle its motion on and off. We need to
 have a script attached to the Sprite2D node, which we do from the previous
 lesson.
 
-You can connect signals in the Node dock. Select the Button node and, on the
-right side of the editor, click on the tab named "Node" next to the Inspector.
+You can connect signals in the :ui:`Node` dock. Select the Button node and, on the
+right side of the editor, click on the tab named :ui:`Node` next to the
+:ui:`Inspector`.
 
 .. image:: img/signals_10_node_dock.webp
 
@@ -142,7 +143,7 @@ methods "_on_node_name_signal_name". Here, it'll be "_on_button_pressed".
 
    The advanced view lets you connect to any node and any built-in
    function, add arguments to the callback, and set options. You can
-   toggle the mode in the window's bottom-right by clicking the Advanced
+   toggle the mode in the window's bottom-right by clicking the :button:`Advanced`
    button.
 
 .. note::
@@ -151,8 +152,8 @@ methods "_on_node_name_signal_name". Here, it'll be "_on_button_pressed".
     automatic code generation might not work. In this case, you need to connect
     the signal via code as explained in the next section.
 
-Click the Connect button to complete the signal connection and jump to the
-Script workspace. You should see the new method with a connection icon in the
+Click the :button:`Connect` button to complete the signal connection and jump to the
+:ui:`Script` workspace. You should see the new method with a connection icon in the
 left margin.
 
 .. image:: img/signals_13_signals_connection_icon.webp
@@ -273,7 +274,7 @@ this.
 
 .. image:: img/signals_15_scene_tree.webp
 
-With the Timer node selected, go to the Inspector and enable the **Autostart**
+With the Timer node selected, go to the :ui:`Inspector` and enable the :inspector:`Autostart`
 property.
 
 .. image:: img/signals_18_timer_autostart.webp
@@ -466,7 +467,7 @@ reaches 0.
 .. note:: As signals represent events that just occurred, we generally use an
           action verb in the past tense in their names.
 
-Your signals work the same way as built-in ones: they appear in the Node tab and
+Your signals work the same way as built-in ones: they appear in the :ui:`Node` tab and
 you can connect to them like any other.
 
 .. image:: img/signals_17_custom_signal.webp