From c9735ae6d38f0b40024b97428c0ec9c5ef2ab30f Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 17 Jul 2023 15:32:28 +1000 Subject: [PATCH 1/4] Add layout API documentation. --- .../block-api/block-supports.md | 73 +++++++++++++++++++ schemas/json/block.json | 53 ++++++++++++++ 2 files changed, 126 insertions(+) diff --git a/docs/reference-guides/block-api/block-supports.md b/docs/reference-guides/block-api/block-supports.md index 7e68e18eb14bf8..0995f4d86cfd76 100644 --- a/docs/reference-guides/block-api/block-supports.md +++ b/docs/reference-guides/block-api/block-supports.md @@ -543,6 +543,79 @@ supports: { } ``` +## layout + +- Type: `boolean` or `Object` +- Default value: null +- Subproperties: + - `default`: type `Object`, default value null + - `allowSwitching`: type `boolean`, default value `false` + - `allowEditing`: type `boolean`, default value `true` + - `allowInheriting`: type `boolean`, default value `true` + - `allowSizingOnChildren`: type `boolean`, default value `false` + - `allowVerticalAlignment`: type `boolean`, default value `true` + - `allowJustification`: type `boolean`, default value `true` + - `allowOrientation`: type `boolean`, default value `true` + +This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object. + +### layout.default + +- Type: `Object` +- Default value: null + +Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type, e.g., for a `flex` layout, a default value can be set for `flexWrap`. + +### layout.allowSwitching + +- Type: `boolean` +- Default value: `false` + +Exposes a switcher control that allows toggling between all existing layout types. + +### layout.allowEditing + +- Type: `boolean` +- Default value: `true` + +Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden. + +### layout.allowInheriting + +- Type: `boolean` +- Default value: `true` + +For the `flow` layout type only, determines display of the "Inner blocks use content width" toggle. + +### layout.allowSizingOnChildren + +- Type: `boolean` +- Default value: `false` + +For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block. + +### layout.allowVerticalAlignment + +- Type: `boolean` +- Default value: `true` + +For the `flex` layout type only, determines display of the vertical alignment control in the block toolbar. + +### layout.allowJustification + +- Type: `boolean` +- Default value: `true` + +For the `flex` layout type, determines display of the justification control in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar. + +### layout.allowOrientation + +- Type: `boolean` +- Default value: `true` + +For the `flex` layout type only, determines display of the orientation control in the block toolbar. + + ## multiple - Type: `boolean` diff --git a/schemas/json/block.json b/schemas/json/block.json index 6ca40ba90f9615..698842d22b1384 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -336,6 +336,59 @@ "description": "By default, all blocks will appear in the inserter, block transforms menu, Style Book, etc. To hide a block from all parts of the user interface so that it can only be inserted programmatically, set inserter to false.", "default": true }, + "layout": { + "type": "object", + "description": "This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object.", + "default": null, + "properties": { + "default": { + "type": "object", + "description": "Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type, e.g., for a `flex` layout, a default value can be set for `flexWrap`.", + "properties": { + "type": { + "type": "string", + "description": "The layout type.", + "enum": [ "constrained", "grid", "flex" ] + } + } + }, + "allowSwitching": { + "type": "boolean", + "description": "Exposes a switcher control that allows toggling between all existing layout types.", + "default": false + }, + "allowEditing": { + "type": "boolean", + "description": "Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.", + "default": true + }, + "allowInheriting": { + "type": "boolean", + "description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.", + "default": true + }, + "allowSizingOnChildren": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block.", + "default": false + }, + "allowVerticalAlignment": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of vertical alignment controls in the block toolbar.", + "default": true + }, + "allowJustification": { + "type": "boolean", + "description": "For the `flex` layout type, determines display of justification controls in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar.", + "default": true + }, + "allowOrientation": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of the orientation control in the block toolbar.", + "default": true + } + } + }, "multiple": { "type": "boolean", "description": "A non-multiple block can be inserted into each post, one time only. For example, the built-in ‘More’ block cannot be inserted again if it already exists in the post being edited. A non-multiple block’s icon is automatically dimmed (unclickable) to prevent multiple instances.", From 1cc323f5599c838a17ea2c0e91465fdf7cb70e7c Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 17 Jul 2023 15:47:09 +1000 Subject: [PATCH 2/4] multi type layout --- schemas/json/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/schemas/json/block.json b/schemas/json/block.json index 698842d22b1384..548c72332560e2 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -337,7 +337,7 @@ "default": true }, "layout": { - "type": "object", + "type": [ "boolean", "object" ], "description": "This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object.", "default": null, "properties": { From c03e0491948724acc86048d120d7641185aa6395 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 17 Jul 2023 16:15:27 +1000 Subject: [PATCH 3/4] Add all possible properties to layout default object. --- schemas/json/block.json | 48 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) diff --git a/schemas/json/block.json b/schemas/json/block.json index 548c72332560e2..b32b5b1b6cf150 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -349,6 +349,54 @@ "type": "string", "description": "The layout type.", "enum": [ "constrained", "grid", "flex" ] + }, + "contentSize": { + "type": "string", + "description": "The content size used on all children." + }, + "wideSize": { + "type": "string", + "description": "The wide size used on alignwide children." + }, + "justifyContent": { + "type": "string", + "description": "Content justification value.", + "enum": [ + "right", + "center", + "space-between", + "left", + "stretch" + ] + }, + "orientation": { + "type": "string", + "description": "The orientation of the layout.", + "enum": [ "horizontal", "vertical" ] + }, + "flexWrap": { + "type": "string", + "description": "The flex wrap value.", + "enum": [ "wrap", "nowrap" ] + }, + "verticalAlignment": { + "type": "string", + "description": "The vertical alignment value.", + "enum": [ + "top", + "center", + "bottom", + "space-between", + "stretch" + ] + }, + "minimumColumnWidth": { + "type": "string", + "description": "The minimum column width value." + }, + "columnCount": { + "type": "number", + "description": "The column count value." } } }, From ae5b43d0c6efe58e6027f9e738315cec0c4aec58 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 17 Jul 2023 16:27:10 +1000 Subject: [PATCH 4/4] try oneof --- schemas/json/block.json | 181 +++++++++++++++++++++------------------- 1 file changed, 95 insertions(+), 86 deletions(-) diff --git a/schemas/json/block.json b/schemas/json/block.json index b32b5b1b6cf150..147378da0293a8 100644 --- a/schemas/json/block.json +++ b/schemas/json/block.json @@ -337,105 +337,114 @@ "default": true }, "layout": { - "type": [ "boolean", "object" ], + "default": false, "description": "This value only applies to blocks that are containers for inner blocks. If set to `true` the layout type will be `flow`. For other layout types it's necessary to set the `type` explicitly inside the `default` object.", - "default": null, - "properties": { - "default": { + "oneOf": [ + { "type": "boolean" }, + { "type": "object", - "description": "Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type, e.g., for a `flex` layout, a default value can be set for `flexWrap`.", "properties": { - "type": { - "type": "string", - "description": "The layout type.", - "enum": [ "constrained", "grid", "flex" ] + "default": { + "type": "object", + "description": "Allows setting the `type` property to define what layout type is default for the block, and also default values for any properties inherent to that layout type, e.g., for a `flex` layout, a default value can be set for `flexWrap`.", + "properties": { + "type": { + "type": "string", + "description": "The layout type.", + "enum": [ + "constrained", + "grid", + "flex" + ] + }, + "contentSize": { + "type": "string", + "description": "The content size used on all children." + }, + "wideSize": { + "type": "string", + "description": "The wide size used on alignwide children." + }, + "justifyContent": { + "type": "string", + "description": "Content justification value.", + "enum": [ + "right", + "center", + "space-between", + "left", + "stretch" + ] + }, + "orientation": { + "type": "string", + "description": "The orientation of the layout.", + "enum": [ "horizontal", "vertical" ] + }, + "flexWrap": { + "type": "string", + "description": "The flex wrap value.", + "enum": [ "wrap", "nowrap" ] + }, + "verticalAlignment": { + "type": "string", + "description": "The vertical alignment value.", + "enum": [ + "top", + "center", + "bottom", + "space-between", + "stretch" + ] + }, + "minimumColumnWidth": { + "type": "string", + "description": "The minimum column width value." + }, + "columnCount": { + "type": "number", + "description": "The column count value." + } + } }, - "contentSize": { - "type": "string", - "description": "The content size used on all children." + "allowSwitching": { + "type": "boolean", + "description": "Exposes a switcher control that allows toggling between all existing layout types.", + "default": false }, - "wideSize": { - "type": "string", - "description": "The wide size used on alignwide children." + "allowEditing": { + "type": "boolean", + "description": "Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.", + "default": true }, - "justifyContent": { - "type": "string", - "description": "Content justification value.", - "enum": [ - "right", - "center", - "space-between", - "left", - "stretch" - ] + "allowInheriting": { + "type": "boolean", + "description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.", + "default": true }, - "orientation": { - "type": "string", - "description": "The orientation of the layout.", - "enum": [ "horizontal", "vertical" ] + "allowSizingOnChildren": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block.", + "default": false }, - "flexWrap": { - "type": "string", - "description": "The flex wrap value.", - "enum": [ "wrap", "nowrap" ] - }, - "verticalAlignment": { - "type": "string", - "description": "The vertical alignment value.", - "enum": [ - "top", - "center", - "bottom", - "space-between", - "stretch" - ] + "allowVerticalAlignment": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of vertical alignment controls in the block toolbar.", + "default": true }, - "minimumColumnWidth": { - "type": "string", - "description": "The minimum column width value." + "allowJustification": { + "type": "boolean", + "description": "For the `flex` layout type, determines display of justification controls in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar.", + "default": true }, - "columnCount": { - "type": "number", - "description": "The column count value." + "allowOrientation": { + "type": "boolean", + "description": "For the `flex` layout type only, determines display of the orientation control in the block toolbar.", + "default": true } } - }, - "allowSwitching": { - "type": "boolean", - "description": "Exposes a switcher control that allows toggling between all existing layout types.", - "default": false - }, - "allowEditing": { - "type": "boolean", - "description": "Determines display of layout controls in the block sidebar. If set to false, layout controls will be hidden.", - "default": true - }, - "allowInheriting": { - "type": "boolean", - "description": "For the `flow` layout type only, determines display of the `Inner blocks use content width` toggle.", - "default": true - }, - "allowSizingOnChildren": { - "type": "boolean", - "description": "For the `flex` layout type only, determines display of sizing controls (Fit/Fill/Fixed) on all child blocks of the flex block.", - "default": false - }, - "allowVerticalAlignment": { - "type": "boolean", - "description": "For the `flex` layout type only, determines display of vertical alignment controls in the block toolbar.", - "default": true - }, - "allowJustification": { - "type": "boolean", - "description": "For the `flex` layout type, determines display of justification controls in the block toolbar and block sidebar. For the `constrained` layout type, determines display of justification control in the block sidebar.", - "default": true - }, - "allowOrientation": { - "type": "boolean", - "description": "For the `flex` layout type only, determines display of the orientation control in the block toolbar.", - "default": true } - } + ] }, "multiple": { "type": "boolean",