Figure block - improvements to match CCv2 requirements

[charlesons]

This issue was raised in response to feedback from project stakeholders outlined below:

https://docs.google.com/document/d/1wTGNxbMntc9jSJX-keLhptPCRq6E2cgwOQz_0EzLxIY/edit

Tasks

• [x] Allow the user to enter richly styled text for the summary (e.g. multi-line text with paragraph breaks and hyperlinks)
• [x] Allow the user to enter a numbered list of notes to the figure

[charlesons]

The figure block layout schema has been refactored to relax the constraints on content that can be entered by the editor. The fixed behaviours of the figure block are now:

• Title
• Styled div to act as a container for the figure. The background of the div can be set by the user. Other style and layout aspects of the container are implemented in SCSS.
• Placeholder blocks with text hints for: Summary, figure, sources and notes

This solves a number of issues identified in user testing:

• Multi line summary text can now be entered and can be styled to include aspects such as hyperlinks
• Any number of sources can be entered, with or without hyperlinks.
• Any number of notes can be added and can now be displayed in a numbered list

[charlesons]

The changes to complete this issue we done by changing the Figure block schema in Zope at the following URL

https://staging.climate-change.data.gov.uk/api/dexterity-types/figure/@@modeleditor

And the model schema defined is as follows:

<?xml version='1.0' encoding='utf8'?>
<model xmlns:i18n="http://xml.zope.org/namespaces/i18n" xmlns:marshal="http://namespaces.plone.org/supermodel/marshal" xmlns:form="http://namespaces.plone.org/supermodel/form" xmlns:security="http://namespaces.plone.org/supermodel/security" xmlns:users="http://namespaces.plone.org/supermodel/users" xmlns:lingua="http://namespaces.plone.org/supermodel/lingua" xmlns="http://namespaces.plone.org/supermodel/schema">
  <schema>
    <field name="Background" type="zope.schema.Choice">
      <default>White smoke</default>
      <description/>
      <required>False</required>
      <title>Background</title>
      <values>
        <element>White</element>
        <element>White smoke</element>
      </values>
    </field>
    <fieldset name="layout" label="Layout">
      <field name="blocks" type="plone.schema.jsonfield.JSONField">
        <default>{'9cb1566f-e0b1-43ff-a535-79bc6b18303e': {'@type': 'title', 'fixed': True, 'required': True}}</default>
        <required>False</required>
        <title>Blocks</title>
      </field>
      <field name="blocks_layout" type="plone.schema.jsonfield.JSONField">
        <default>{'items': ['9cb1566f-e0b1-43ff-a535-79bc6b18303e']}</default>
        <required>False</required>
        <title>Blocks Layout</title>
      </field>
    </fieldset>
  </schema>
</model>

[charlesons]

Suggestions for future development of the Figure block:

• Consider an even more direct way for the user to create a figure - perhaps inline as an editable block within the document
• How can we share a single data source between sibling components within figure block that are all consumers of that data source , e.g. the title, summary and sources could potentially all share metadata from a single data source.
• Once the figure block schema is finalised make it explicit as code or an XML content type

[charlesons]

Updated figure block schema with some placeholder text blocks for summary, sources and notes fields:

<model xmlns:i18n="http://xml.zope.org/namespaces/i18n" xmlns:marshal="http://namespaces.plone.org/supermodel/marshal" xmlns:form="http://namespaces.plone.org/supermodel/form" xmlns:security="http://namespaces.plone.org/supermodel/security" xmlns:users="http://namespaces.plone.org/supermodel/users" xmlns:lingua="http://namespaces.plone.org/supermodel/lingua" xmlns="http://namespaces.plone.org/supermodel/schema">
  <schema>
    <field name="Background" type="zope.schema.Choice">
      <default>White smoke</default>
      <description/>
      <required>False</required>
      <title>Background</title>
      <values>
        <element>White</element>
        <element>White smoke</element>
      </values>
    </field>
    <fieldset name="layout" label="Layout">
      <field name="blocks" type="plone.schema.jsonfield.JSONField">
        <default>{'9cb1566f-e0b1-43ff-a535-79bc6b18303e': {'@type': 'title', 'fixed': True, 'required': True}, '9e30a2a5-3651-4040-aef8-360bcccf4e35': {'@type': 'slate', 'placeholder': 'Add a list of notes here', 'plaintext': '', 'value': [{'children': [{'text': ''}], 'type': 'p'}]}, 'ba371a95-959c-4e21-a0ef-1a66e678636c': {'@type': 'slate', 'placeholder': 'Add a summary here', 'plaintext': '', 'value': [{'children': [{'text': ''}], 'type': 'p'}]}, 'e8da4b73-eaac-4c6c-9f3a-a3eb836abb9c': {'@type': 'slate', 'placeholder': 'Add charts or other figure content here', 'plaintext': '', 'value': [{'children': [{'text': ''}], 'type': 'p'}]}, 'f2c97995-6595-4648-b6f6-6bbe254a6362': {'@type': 'slate', 'placeholder': 'Add sources here', 'plaintext': '', 'value': [{'children': [{'text': ''}], 'type': 'p'}]}}</default>
        <required>False</required>
        <title>Blocks</title>
      </field>
      <field name="blocks_layout" type="plone.schema.jsonfield.JSONField">
        <default>{'items': ['9cb1566f-e0b1-43ff-a535-79bc6b18303e', 'ba371a95-959c-4e21-a0ef-1a66e678636c', 'e8da4b73-eaac-4c6c-9f3a-a3eb836abb9c', 'f2c97995-6595-4648-b6f6-6bbe254a6362', '9e30a2a5-3651-4040-aef8-360bcccf4e35']}</default>
        <required>False</required>
        <title>Blocks Layout</title>
      </field>
    </fieldset>
  </schema>
</model>

[charlesons]

Notes on working with content schema:

The Volto Through The Web layout editor seems not to allow existing block to be deleted easily. An alternative is to delete them in Zope, e.g. at:

https://staging.climate-change.data.gov.uk/api/portal_types/figure/manage_propertiesForm

New blocks can then be added in Volto Site Setup > Dexterity Content Types > Actions > Layout

Note there's a transient issue whereby changes to the block schema aren't saved to the ZODB but appear to update in the running instance of the front end (perhaps react is updating but zope is not?). It's best then to confirm any layout changes have correctly saved to the schema in the backend.

The updated schema should show in the field Model source, e.g.

https://staging.climate-change.data.gov.uk/api/portal_types/figure/manage_propertiesForm