Merge pull request #10934 from ProgrammerOnCoffee/update-gui-containers

Update the Using Containers tutorial

Author: ProgrammerOnCoffee

tutorials/ui/gui_containers.rst

@@ -1,5 +1,3 @@
-:article_outdated: True
-
 .. _doc_gui_containers:
 
 Using Containers
@@ -141,12 +139,19 @@ It respects both the horizontal and vertical sizing options.
 
    .. image:: img/containers_panel.png
 
-This container is useful as top-level, or just to add custom backgrounds to sections of a layout.
+This container is useful as a top-level control, or just to add custom backgrounds to sections of a layout.
+
+FoldableContainer
+~~~~~~~~~~~~~~~~~
+
+A container that can be expanded/collapsed
+(via :ref:`FoldableContainer <class_FoldableContainer>`).
+Child controls are hidden when it is collapsed.
 
 ScrollContainer
 ~~~~~~~~~~~~~~~
 
-Accepts a single child node. If this node is bigger than the container, scrollbars will be added
+Accepts a single child node. If the child node is bigger than the container, scrollbars will be added
 to allow panning the node around (via :ref:`ScrollContainer <class_ScrollContainer>`). Both
 vertical and horizontal size options are respected, and the behavior can be turned on or off
 per axis in the properties.
@@ -170,30 +175,30 @@ It has multiple stretch modes, providing options for adjusting the child control
 
    .. image:: img/containers_aspectratio.webp
 
-useful when you have a container that needs to be dynamic and responsive to different screen sizes,
+It is useful when you have a container that needs to be dynamic and responsive to different screen sizes,
 and you want the child elements to scale proportionally without losing their intended shapes.
 
    .. image:: img/containers_aspectratio_drag.webp
 
 FlowContainer
 ~~~~~~~~~~~~~
 
-FlowContainer is a container that arranges its child controls either horizontally or vertically,
+FlowContainer is a container that arranges its child controls either horizontally or vertically
 (via :ref:`HFlowContainer <class_HFlowContainer>` and via :ref:`VFlowContainer <class_VFlowContainer>`).
-and when the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.
+When the available space runs out, it wraps the children to the next line or column, similar to how text wraps in a book.
 
 
    .. image:: img/containers_hflow.webp
 
-useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.
+It is useful for creating flexible layouts where the child controls adjust automatically to the available space without overlapping.
 
    .. image:: img/containers_hflow_drag.webp
 
 CenterContainer
 ~~~~~~~~~~~~~~~
 
 CenterContainer is a container that automatically keeps all of its child controls centered within it at their minimum size.
-It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning.
+It ensures that the child controls are always aligned to the center, making it easier to create centered layouts without manual positioning
 (via :ref:`CenterContainer <class_CenterContainer>`).
 
    .. image:: img/containers_center.webp
@@ -210,7 +215,7 @@ Creating custom Containers
 --------------------------
 
 It is possible to create a custom container using a script.
-Here is an example of a container that fits children to its rect size:
+Here is an example of a container that fits children to its size:
 
 .. tabs::
  .. code-tab:: gdscript GDScript
@@ -222,7 +227,7 @@ Here is an example of a container that fits children to its rect size:
             # Must re-sort the children
             for c in get_children():
                 # Fit to own size
-                fit_child_in_rect(c, Rect2(Vector2(), rect_size))
+                fit_child_in_rect(c, Rect2(Vector2(), size))
 
     func set_some_setting():
         # Some setting changed, ask for children re-sort.
@@ -242,7 +247,7 @@ Here is an example of a container that fits children to its rect size:
                 foreach (Control c in GetChildren())
                 {
                     // Fit to own size
-                    FitChildInRect(c, new Rect2(new Vector2(), RectSize));
+                    FitChildInRect(c, new Rect2(new Vector2(), Size));
                 }
             }
         }