Remove style parameter

CHANGELOG.md

@@ -19,6 +19,7 @@
 ## Other Changes:
 
 - Performance optimization in the frontend's Blocks code by [@akx](https://github.com/akx) in [PR 4334](https://github.com/gradio-app/gradio/pull/4334)
+- Deprecated `.style` parameter and moved arguments to constructor. Added support for update to all arguments initially in style. Added `scale` and `min_width` support to every Component. By [@aliabid94](https://github.com/aliabid94) in [PR 4374](https://github.com/gradio-app/gradio/pull/4374)
 
 ## Breaking Changes:
 

demo/blocks_layout/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    with gr.Row():\n", "        gr.Image(interactive=True)\n", "        gr.Image()\n", "    with gr.Row():\n", "        gr.Textbox(label=\"Text\")\n", "        gr.Number(label=\"Count\")\n", "        gr.Radio(choices=[\"One\", \"Two\"])\n", "    with gr.Row():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                gr.Textbox(label=\"Text\")\n", "                gr.Number(label=\"Count\")\n", "                gr.Radio(choices=[\"One\", \"Two\"])\n", "            gr.Image()\n", "            with gr.Column():\n", "                gr.Image(interactive=True)\n", "                gr.Image()\n", "    gr.Image()\n", "    gr.Textbox(label=\"Text\")\n", "    gr.Number(label=\"Count\")\n", "    gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: blocks_layout"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "\n", "demo = gr.Blocks()\n", "\n", "with demo:\n", "    with gr.Row():\n", "        gr.Image(interactive=True, scale=2)\n", "        gr.Image()\n", "    with gr.Row():\n", "        gr.Textbox(label=\"Text\")\n", "        gr.Number(label=\"Count\", scale=2)\n", "        gr.Radio(choices=[\"One\", \"Two\"])\n", "    with gr.Row():\n", "        gr.Button(\"500\", scale=0, min_width=500)\n", "        gr.Button(\"A\").style(full_width=False)\n", "        gr.Button(\"grow\")\n", "    with gr.Row():\n", "        gr.Textbox()\n", "        gr.Textbox()\n", "        gr.Button()        \n", "    with gr.Row():\n", "        with gr.Row():\n", "            with gr.Column():\n", "                gr.Textbox(label=\"Text\")\n", "                gr.Number(label=\"Count\")\n", "                gr.Radio(choices=[\"One\", \"Two\"])\n", "            gr.Image()\n", "            with gr.Column():\n", "                gr.Image(interactive=True)\n", "                gr.Image()\n", "    gr.Image()\n", "    gr.Textbox(label=\"Text\")\n", "    gr.Number(label=\"Count\")\n", "    gr.Radio(choices=[\"One\", \"Two\"])\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/blocks_layout/run.py

@@ -5,12 +5,20 @@
 
 with demo:
     with gr.Row():
-        gr.Image(interactive=True)
+        gr.Image(interactive=True, scale=2)
         gr.Image()
     with gr.Row():
         gr.Textbox(label="Text")
-        gr.Number(label="Count")
+        gr.Number(label="Count", scale=2)
         gr.Radio(choices=["One", "Two"])
+    with gr.Row():
+        gr.Button("500", scale=0, min_width=500)
+        gr.Button("A").style(full_width=False)
+        gr.Button("grow")
+    with gr.Row():
+        gr.Textbox()
+        gr.Textbox()
+        gr.Button()        
     with gr.Row():
         with gr.Row():
             with gr.Column():

gradio/blocks.py

@@ -92,7 +92,6 @@ def __init__(
         self.root_url = root_url
         self.share_token = secrets.token_urlsafe(32)
         self._skip_init_processing = _skip_init_processing
-        self._style = {}
         self.parent: BlockContext | None = None
 
         if render:
@@ -292,7 +291,6 @@ def get_config(self):
             "visible": self.visible,
             "elem_id": self.elem_id,
             "elem_classes": self.elem_classes,
-            "style": self._style,
             "root_url": self.root_url,
         }
 
@@ -324,6 +322,9 @@ def __init__(
         self.children: list[Block] = []
         Block.__init__(self, visible=visible, render=render, **kwargs)
 
+    def add_child(self, child: Block):
+        self.children.append(child)
+
     def __enter__(self):
         self.parent = Context.block
         Context.block = self
@@ -345,11 +346,12 @@ def fill_expected_parents(self):
                 if pseudo_parent is not None and isinstance(
                     pseudo_parent, expected_parent
                 ):
-                    pseudo_parent.children.append(child)
+                    pseudo_parent.add_child(child)
                 else:
                     pseudo_parent = expected_parent(render=False)
+                    pseudo_parent.parent = self
                     children.append(pseudo_parent)
-                    pseudo_parent.children = [child]
+                    pseudo_parent.add_child(child)
                     if Context.root_block:
                         Context.root_block.blocks[pseudo_parent._id] = pseudo_parent
                 child.parent = pseudo_parent
@@ -757,6 +759,11 @@ def from_config(
         """
         config = copy.deepcopy(config)
         components_config = config["components"]
+        for component_config in components_config:
+            # for backwards compatibility, extract style into props
+            if "style" in component_config["props"]:
+                component_config["props"].update(component_config["props"]["style"])
+                del component_config["props"]["style"]
         theme = config.get("theme", "default")
         original_mapping: dict[int, Block] = {}
 
@@ -769,13 +776,10 @@ def get_block_instance(id: int) -> Block:
             cls = component_or_layout_class(block_config["type"])
             block_config["props"].pop("type", None)
             block_config["props"].pop("name", None)
-            style = block_config["props"].pop("style", None)
             if block_config["props"].get("root_url") is None and root_url:
                 block_config["props"]["root_url"] = f"{root_url}/"
             # Any component has already processed its initial value, so we skip that step here
             block = cls(**block_config["props"], _skip_init_processing=True)
-            if style and isinstance(block, components.IOComponent):
-                block.style(**style)
             return block
 
         def iterate_over_children(children_list):