{"id":13568186,"url":"https://github.com/collective/volto-subblocks","last_synced_at":"2025-04-04T04:30:50.888Z","repository":{"id":39884203,"uuid":"269793300","full_name":"collective/volto-subblocks","owner":"collective","description":null,"archived":false,"fork":false,"pushed_at":"2024-05-30T20:12:57.000Z","size":53,"stargazers_count":2,"open_issues_count":1,"forks_count":2,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-24T21:05:58.747Z","etag":null,"topics":["hacktoberfest","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/collective.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2020-06-05T22:18:17.000Z","updated_at":"2024-05-30T20:13:00.000Z","dependencies_parsed_at":"2023-01-19T19:46:54.569Z","dependency_job_id":"c13c31c3-8e90-44ff-a83e-506fa1cf59b4","html_url":"https://github.com/collective/volto-subblocks","commit_stats":{"total_commits":47,"total_committers":3,"mean_commits":"15.666666666666666","dds":0.2978723404255319,"last_synced_commit":"361632b573e767a11df2c7d391e369a879cc84c5"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collective%2Fvolto-subblocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collective%2Fvolto-subblocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collective%2Fvolto-subblocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collective%2Fvolto-subblocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/collective","download_url":"https://codeload.github.com/collective/volto-subblocks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247123071,"owners_count":20887259,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","react"],"created_at":"2024-08-01T14:00:21.389Z","updated_at":"2025-04-04T04:30:47.467Z","avatar_url":"https://github.com/collective.png","language":"JavaScript","funding_links":[],"categories":["Add-ons"],"sub_categories":["Layout add-ons"],"readme":"# volto-subblocks\n\nA widget for [Volto](https://github.com/plone/volto) to have a block with subblocks\n\nTo be used with mrs-developer, see [Volto docs](https://docs.voltocms.com/customizing/add-ons/) for further usage informations.\n\n\u003e If you are using Volto \u003c 16, then use v1.2.3.\n\n## Usage\n\nThis is meant to edit blocks with sub-blocks, where the sub-blocks are all of the same type.\n\n### SubblocksEdit\n\nThe edit component of the parent block must extend the class `SubblocksEdit`.\nIf you want to enable drag\u0026drop to reorder subblocks, you have to use the HOC 'withDNDContext'.\n\n```jsx\nexport default withDNDContext(Edit);\n```\n\nIn the `render()` function of this component, you have to:\n\n- wrap all content with 'SubblocksWrapper' component:\n\n```jsx\n\u003cSubblocksWrapper node={this.node}\u003e...\u003c/SubblocksWrapper\u003e\n```\n\n- iterate on `this.state.subblocks` to draw subblocks.\n- render each subblock passing this props:\n  ```jsx\n  \u003cEditBlock\n    data={subblock}\n    index={subindex}\n    selected={this.isSubblockSelected(subindex)}\n    {...this.subblockProps}\n  /\u003e\n  ```\n\n#### Usage\n\n- You could insert the add button simply writing `{this.renderAddBlockButton()}`\n\n* `this.state.subblocks`: contains subblocks. Used to iterate on subblocks\n* `this.state.subIndexSelected`: contains the index of the current selected subblock\n* `this.onChangeSubblocks(subblockIndex, subblock)`: function to call when a subblock value is changed.\n  - _subblockIndex_: is the index of the subblock in subblocks array\n  - _subblock_: is the subblock object with new value/values.\n* `this.onMoveSubblock(dragIndex, hoverIndex)`: function to call when a subblock changes his position / order in subblock list.\n  - _dragIndex_: initial index of the item\n  - _hoverIndex_: destination index of the item.\n* `this.onSubblockChangeFocus(index)`: called when the focus on subblocks changes.\n  - _index_: is the index of the focused subblock.\n* `this.deleteSubblock(index)`: function to call to delete subblock at _index_ position.\n* `this.isSubblockSelected(index)`: return true if subblock ad _index_ position is selected.\n* `this.renderAddBlockButton(title)`: renders the add block button.\n  - _title_: if given, the title is displayed on button. Default the title is _'Add block'_.\n* `this.subblockProps`: it's an object that contains default props for edit each subblock.\n\n#### Example\n\n```jsx\nimport React from 'react';\nimport {\n  withDNDContext,\n  SubblocksEdit,\n  SubblocksWrapper,\n} from 'volto-subblocks';\nimport EditBlock from './EditBlock';\n\nclass Edit extends SubblocksEdit {\n  render() {\n    if (__SERVER__) {\n      return \u003cdiv /\u003e;\n    }\n\n    return (\n      \u003cSubblocksWrapper node={this.node}\u003e\n        ...\n        {this.state.subblocks.map((subblock, subindex) =\u003e (\n          \u003cEditBlock\n            data={subblock}\n            index={subindex}\n            selected={this.isSubblockSelected(subindex)}\n            {...this.subblockProps}\n            openObjectBrowser={this.props.openObjectBrowser}\n          /\u003e\n        ))}\n        {this.props.selected \u0026\u0026 this.renderAddBlockButton()}\n        ...\n      \u003c/SubblocksWrapper\u003e\n    );\n  }\n}\n\nexport default React.memo(withDNDContext(Edit));\n```\n\n### SubblockEdit\n\nThe edit component of the subblock must extend the class SubblockEdit\n\nIf you want to enable drag\u0026drop to reorder subblocks, you have to compose with `injectDNDSubblocks`.\n\n```jsx\nexport default compose(injectDNDSubblocks)(EditBlock);\n```\n\nIn the `render()` function of this component, you have to:\n\n- wrap all content with 'Subblock' component. By default Subblock component is draggable. If you prefer not to make subblocks draggable, you could add the prop `draggable={false}`:\n\n```jsx\n\u003cSubblock subblock={this}\u003e...\u003c/Subblock\u003e\n```\n\n#### Example\n\n```jsx\nimport React from 'react';\nimport { compose } from 'redux';\nimport { injectDNDSubblocks, SubblockEdit, Subblock } from 'volto-subblocks';\n\nclass EditBlock extends SubblockEdit {\n  render() {\n    if (__SERVER__) {\n      return \u003cdiv /\u003e;\n    }\n\n    return \u003cSubblock subblock={this}\u003e...\u003c/Subblock\u003e;\n  }\n}\n\nexport default React.memo(compose(injectDNDSubblocks)(EditBlock));\n```\n\n### SubblocksWrapper\n\nIt's the wrapper to use in parent component.\nProperties:\n\n- `node`: the 'node' var that will contain ref for this node.\n- `className`: to add class or classes to the wrapper.\n\n#### Example\n\n```jsx\n\u003cSubblocksWrapper node={this.node} className=\"additional_class\"\u003e\n  ....\n\u003c/SubblocksWrapper\u003e\n```\n\n### Subblock\n\nIt's the wrapper for each subblock. Use it in subblock edit component.\nProperties:\n\n- `subblock`: the current class instance of subblock\n- `className`: to add class or classes to the wrapper.\n- `draggable`: default `true`. If you don't want to make your subblock sortable with drag\u0026drop, you can pass `false`.\n\n#### Example\n\n```jsx\n\u003cSubblock subblock={this} className=\"additional_class\" draggable={false}\u003e\n  ....\n\u003c/Subblock\u003e\n```\n\n## Authors\n\nThis product was developed by **RedTurtle Technology** team.\n\n[![RedTurtle Technology Site](https://avatars1.githubusercontent.com/u/1087171?s=100\u0026v=4)](http://www.redturtle.it/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollective%2Fvolto-subblocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollective%2Fvolto-subblocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollective%2Fvolto-subblocks/lists"}