Problem/Motivation
Now we store the layout field in YAML as a base64 serialized object, using this approach:
$sections[] = serialize($section);
return [
'sections' => base64_encode(implode('|', $sections)),
'blocks' => $block_list,
];
That is pretty safe, but not convenient at all, especially for reviewing the changes in diffs.
Steps to reproduce
1. Export a node with the custom layout configured.
2. See a long line with random letters in the YAML, like this
layout_builder__layout:
sections: TzoyOToiRHJ1cGFsXGxheW91dF9idWlsZGVyXFNlY3Rpb24iOjQ6e3M6MTE6IgAqAGxheW91dElkIjtzOjEzOiJsYXlvdXRfb25lY29sIjtzOjE3OiIAKgBsYXlvdXRTZXR0aW5ncyI7YToxOntzOjU6ImxhYmVsIjtzOjA6IiI7fXM6MTM6IgAqAGNvbXBvbmVudHMiO2E6NDp7czozNjoiMmE4ZDQ0Y2ItNzAyYS00Mzk0LThjZmYtZTEyNTI0Y2QxYTFjIjtPOjM4OiJEcnVwYWxcbGF5b3V0X2J1aWxkZXJcU2VjdGlvbkNvbXBvbmVudCI6NTp7czo3OiIAKgB1dWlkIjtzOjM2OiIyYThkNDRjYi03MDJhLTQzOTQtOGNmZi1lMTI1MjRjZDFhMWMiO3M6OToiACoAcmVnaW9uIjtzOjc6ImNvbnRlbnQiO3M6MTY6IgAqAGNvbmZpZ3VyYXRpb24iO2E6NDp7czoyOiJpZCI7czoyODoiZmllbGRfYmxvY2s6bm9kZTpsYXlvdXQ6Ym9keSI7czoxMzoibGFiZWxfZGlzcGxheSI7czoxOiIwIjtzOjE1OiJjb250ZXh0X21hcHBpbmciO2E6MTp7czo2OiJlbnRpdHkiO3M6MjE6ImxheW91dF9idWlsZGVyLmVudGl0eSI7fXM6OToiZm9ybWF0dGVyIjthOjQ6e3M6NDoidHlwZSI7czoxMjoidGV4dF9kZWZhdWx0IjtzOjU6ImxhYmVsIjtzOjY6ImhpZGRlbiI7czo4OiJzZXR0aW5ncyI7YTowOnt9czoyMDoidGhpcmRfcGFydHlfc2V0dGluZ3MiO2E6MDp7fX19czo5OiIAKgB3ZWlnaHQiO2k6NDtzOjEzOiIAKgBhZGRpdGlvbmFsIjthOjA6e319czozNjoiMjQxNmU5OWUtMWUyOC00NjFlLWI5ZmMtNWY5ZWUwMTY0MDJmIjtPOjM4OiJEcnVwYWxcbGF5b3V0X2J1aWxkZXJcU2VjdGlvbkNvbXBvbmVudCI6NTp7czo3OiIAKgB1dWlkIjtzOjM2OiIyNDE2ZTk5ZS0xZTI4LTQ2MWUtYjlmYy01ZjllZTAxNjQwMmYiO3M6OToiACoAcmVnaW9uIjtzOjc6ImNvbnRlbnQiO3M6MTY6IgAqAGNvbmZpZ3VyYXRpb24iO2E6Njp7czoyOiJpZCI7czo0NToidmlld3NfZXhwb3NlZF9maWx0ZXJfYmxvY2s6c3RvcmVzX21hcC1ibG9ja18xIjtzOjU6ImxhYmVsIjtzOjA6IiI7czoxMzoibGFiZWxfZGlzcGxheSI7czo3OiJ2aXNpYmxlIjtzOjg6InByb3ZpZGVyIjtzOjU6InZpZXdzIjtzOjExOiJ2aWV3c19sYWJlbCI7czowOiIiO3M6MTU6ImNvbnRleHRfbWFwcGluZyI7YTowOnt9fXM6OToiACoAd2VpZ2h0IjtpOjM7czoxMzoiACoAYWRkaXRpb25hbCI7YTowOnt9fXM6MzY6IjdlMmZjYjE5LTdkMTktNDY1ZC1hNjY2LTM2NTQ3YmQyYjdhYSI7TzozODoiRHJ1cGFsXGxheW91dF9idWlsZGVyXFNlY3Rpb25Db21wb25lbnQiOjU6e3M6NzoiACoAdXVpZCI7czozNjoiN2UyZmNiMTktN2QxOS00NjVkLWE2NjYtMzY1NDdiZDJiN2FhIjtzOjk6IgAqAHJlZ2lvbiI7czo3OiJjb250ZW50IjtzOjE2OiIAKgBjb25maWd1cmF0aW9uIjthOjc6e3M6MjoiaWQiO3M6MzA6InZpZXdzX2Jsb2NrOnN0b3JlX2xpc3QtYmxvY2tfMSI7czo1OiJsYWJlbCI7czowOiIiO3M6MTM6ImxhYmVsX2Rpc3BsYXkiO3M6NzoidmlzaWJsZSI7czo4OiJwcm92aWRlciI7czo1OiJ2aWV3cyI7czoxMToidmlld3NfbGFiZWwiO3M6MDoiIjtzOjE0OiJpdGVtc19wZXJfcGFnZSI7czo0OiJub25lIjtzOjE1OiJjb250ZXh0X21hcHBpbmciO2E6MDp7fX1zOjk6IgAqAHdlaWdodCI7aTo1O3M6MTM6IgAqAGFkZGl0aW9uYWwiO2E6MDp7fX1zOjM2OiJiZmYxYzVmZi03NTlmLTRjMWQtYjMzNS0xMmNjNjEwM2ZmNzkiO086Mzg6IkRydXBhbFxsYXlvdXRfYnVpbGRlclxTZWN0aW9uQ29tcG9uZW50Ijo1OntzOjc6IgAqAHV1aWQiO3M6MzY6ImJmZjFjNWZmLTc1OWYtNGMxZC1iMzM1LTEyY2M2MTAzZmY3OSI7czo5OiIAKgByZWdpb24iO3M6NzoiY29udGVudCI7czoxNjoiACoAY29uZmlndXJhdGlvbiI7YTo2OntzOjI6ImlkIjtzOjUxOiJwYXJhZ3JhcGhfZmllbGQ6bm9kZTpmaWVsZF9wYWdlX2NvbXBvbmVudHM6MDpsYXlvdXQiO3M6NToibGFiZWwiO3M6OTk6IlNlbyBzdWJ0aXRsZSBTZW8gdGl0bGUgU2VvIHRleHQuIFNlbyB0ZXh0LiBTZW8gdGV4dC4gU2VvIHRleHQuIFNlbyB0ZXh0LiBTZW8gdGV4dC4gU2VvIHRleHQuIFNlb+KApiI7czoxMzoibGFiZWxfZGlzcGxheSI7aTowO3M6ODoicHJvdmlkZXIiO3M6MTY6InBhcmFncmFwaF9ibG9ja3MiO3M6MTI6ImRpc3BsYXlfbW9kZSI7czo3OiJkZWZhdWx0IjtzOjE1OiJjb250ZXh0X21hcHBpbmciO2E6Mjp7czo2OiJlbnRpdHkiO3M6MjE6ImxheW91dF9idWlsZGVyLmVudGl0eSI7czo5OiJ2aWV3X21vZGUiO3M6OToidmlld19tb2RlIjt9fXM6OToiACoAd2VpZ2h0IjtpOjY7czoxMzoiACoAYWRkaXRpb25hbCI7YTowOnt9fX1zOjIxOiIAKgB0aGlyZFBhcnR5U2V0dGluZ3MiO2E6MDp7fX18TzoyOToiRHJ1cGFsXGxheW91dF9idWlsZGVyXFNlY3Rpb24iOjQ6e3M6MTE6IgAqAGxheW91dElkIjtzOjEzOiJsYXlvdXRfb25lY29sIjtzOjE3OiIAKgBsYXlvdXRTZXR0aW5ncyI7YToyOntzOjU6ImxhYmVsIjtzOjA6IiI7czoxNToiY29udGV4dF9tYXBwaW5nIjthOjA6e319czoxMzoiACoAY29tcG9uZW50cyI7YTowOnt9czoyMToiACoAdGhpcmRQYXJ0eVNldHRpbmdzIjthOjA6e319
blocks: { }
3. Modify one block in the layout, and export the entity again.
4 See a lot of changes in this long line with characters, with no idea about what exactly was changed.
Proposed resolution
Actually, the section can be represented as array and stored in the YAML file as a reviewable structure, like any other entity. We just need to call
$sections[] = $section->toArray();
And with this, we will have a well-represented structure in the YAML, an example:
layout_builder__layout:
sections:
-
layout_id: layout_onecol
layout_settings:
label: ''
components:
-
uuid: 2a8d44cb-702a-4394-8cff-e12524cd1a1c
region: content
configuration:
id: 'field_block:node:layout:body'
label_display: '0'
context_mapping:
entity: layout_builder.entity
formatter:
type: text_default
label: hidden
settings: { }
third_party_settings: { }
weight: 4
additional: { }
-
uuid: 2416e99e-1e28-461e-b9fc-5f9ee016402f
region: content
configuration:
id: 'views_exposed_filter_block:stores_map-block_1'
label: ''
label_display: visible
provider: views
views_label: ''
context_mapping: { }
weight: 3
additional: { }
-
uuid: 7e2fcb19-7d19-465d-a666-36547bd2b7aa
region: content
configuration:
id: 'views_block:store_list-block_1'
label: ''
label_display: visible
provider: views
views_label: ''
items_per_page: none
context_mapping: { }
weight: 5
additional: { }
-
uuid: bff1c5ff-759f-4c1d-b335-12cc6103ff79
region: content
configuration:
id: 'paragraph_field:node:field_page_components:0:layout'
label: 'Seo subtitle Seo title Seo text. Seo text. Seo text. Seo text. Seo text. Seo text. Seo text. Seo…'
label_display: 0
provider: paragraph_blocks
display_mode: default
context_mapping:
entity: layout_builder.entity
view_mode: view_mode
weight: 6
additional: { }
third_party_settings: { }
-
layout_id: layout_onecol
layout_settings:
label: ''
context_mapping: { }
components: { }
third_party_settings: { }
blocks: { }
So, we have to rework a bit the exporting and importing parts, and will get more readable layout content in the YAMLs!
Remaining tasks
User interface changes
API changes
Data model changes