{"id":19908697,"url":"https://github.com/emgk/guten-block-fields","last_synced_at":"2025-05-03T02:31:17.995Z","repository":{"id":57259749,"uuid":"144562903","full_name":"emgk/guten-block-fields","owner":"emgk","description":"Create Gutenberg block's toolbar \u003cInspectorControls /\u003e","archived":false,"fork":false,"pushed_at":"2019-09-21T10:23:37.000Z","size":102,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T05:42:24.286Z","etag":null,"topics":["fields","gutenberg","gutenberg-blocks","gutenberg-metadata","npm-package","wordpress"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/guten-block-fields","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/emgk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-13T10:13:06.000Z","updated_at":"2023-08-23T13:00:11.000Z","dependencies_parsed_at":"2022-08-25T01:01:25.232Z","dependency_job_id":null,"html_url":"https://github.com/emgk/guten-block-fields","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emgk%2Fguten-block-fields","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emgk%2Fguten-block-fields/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emgk%2Fguten-block-fields/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emgk%2Fguten-block-fields/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emgk","download_url":"https://codeload.github.com/emgk/guten-block-fields/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252133699,"owners_count":21699582,"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":["fields","gutenberg","gutenberg-blocks","gutenberg-metadata","npm-package","wordpress"],"created_at":"2024-11-12T21:12:58.473Z","updated_at":"2025-05-03T02:31:17.748Z","avatar_url":"https://github.com/emgk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Guten Block Fields\n\u003e WordPress Gutenberg development tool.\n\n[![NPM version](https://img.shields.io/npm/v/guten-block-fields.svg?style=flat-square)](https://www.npmjs.com/package/guten-block-fields)\n[![npm](https://img.shields.io/npm/dt/guten-block-fields.svg?style=flat-square)](https://www.npmjs.com/package/guten-block-fields)\n[![GitHub stars](https://img.shields.io/github/stars/emgk/guten-block-fields.svg?style=social\u0026label=Star)](https://github.com/emgk/guten-block-fields)\n\nWhen you creating blocks in Gutenberg, You may want more fields to manage the block's content. Gutenberg has a section called Inspector Controller which appears on the right side of the block when you click on particular block on editor. This package will help you to create those field in more easy way.\n\n## Install\n\n```\n$ npm install guten-block-fields\n```\n\n## Usage\n\n```\n$ guten-block-fields make \n```\n\n## Documentation\n\n[Click Here](https://emgk.github.io/doc/) to see documentation.\n\n## Video Demo\n\n[Click Here](https://youtu.be/j6mv9BcguoM) To watch the video demo.\n\n## Create fields\nTo create or manage block's field you'll need to create a `block-fields.json` file in your plugin's root folder.\n\nA `block-fields.json` file:\n\n- list the block's field and manage them anytime.\n- makes your field reproducible, and therefore much easier to share with another block.\n\n\n### \"block-fields.json\" options\n\n#### name \n\nType: `string`\n\nName of your component.\n\n#### output\n\nType: `string`\n\nThe path where you want to land of the generated files.\n\n\n#### toggles\n\nType: `object`\n\nList of the toggle\n\nExample: \n````\n\"toggles\": {\n        \"bio\": {\n            \"title\": \"Bio data\",\n            \"isOpen\": true,\n        },\n        \"occuption\": {\n            \"title\":\"Occuption\",\n            \"isOpen\":false\n        }\n    }\n````\n\n#### fields\n\nType: `array`\n\nPass the list of the field which needs to be required generated.\n\n##### Options: \n\n- `title` Title or label of the field.\n- `id` id of the field.\n- `type` Type of the field. \n- `value` Default value of the field.\n- `toggle` Toggle id in which this field should be appear. See \"toggle\" option above.\n- `baseControl` Whether field should wrapper inside the \u003cbaseControl\u003e or not.  \n\n### Supported fields\n\n#### text \nRender \u003cTextControl /\u003e\n\n##### example:\n````\n{\n    \"title\": \"Your Name\",\n    \"id\": \"your-name\",\n    \"type\": \"text\",\n    \"value\": \"john doe\",\n    \"toggle\": \"bio\",\n    \"baseControl\": true\n}\n````\n\n#### checkbox\nRender \u003cCheckboxControl /\u003e\n\nAdditional option:\n- `checked` `\u003ctrue|false\u003e`\n\n##### example:\n````\n{\n    \"title\": \"Accept t\u0026c\",\n    \"label\": \"Sample\",\n    \"id\": \"sample\",\n    \"toggle\": \"bio\",\n    \"checked\": true,\n    \"type\": \"checkbox\"\n},\n````\n\n#### button\nRender `\u003cButton /\u003e`\n\n##### example:\n````\n{\n    \"title\": \"Save Changes\",\n    \"type\": \"button\",\n    \"id\": \"save-change\",\n    \"toggle\": \"occuption\",\n    \"default\": false,\n    \"class\": \"save\"\n},\n````\n\n#### button-group\nRender `\u003cButtonGroup /\u003e`\n\n##### example:\n````\n{\n    \"title\": \"Button Group\",\n    \"type\": \"button-group\",\n    \"id\": \"button-group\",\n    \"toggle\": \"occuption\",\n    \"buttons\": [\n        {\n            \"isPrimary\": true,\n            \"class\": \"red\",\n            \"label\": \"Red\",\n            \"id\": \"red\"\n        },\n        {\n            \"isPrimary\": false,\n            \"class\": \"blue\",\n            \"label\": \"Blue\",\n            \"id\": \"blue\"\n        }\n    ]\n},\n````\n\n#### select\nRender `\u003cSelect /\u003e`\n\n##### example\n````\n{\n    \"type\": \"select\",\n    \"value\": \"india\",\n    \"id\": \"country\",\n    \"title\": \"Country\",\n    \"options\": [\n        {\n            \"label\": \"India\",\n            \"value\": \"india\"\n        },\n        {\n            \"label\": \"USA\",\n            \"value\": \"usa\"\n        }\n    ]\n},\n````\n\n#### radio \nRender `\u003cRadioControl /\u003e`\n\n##### example:\n````\n{\n    \"type\": \"radio\",\n    \"title\": \"Gender\",\n    \"id\": \"gender\",\n    \"value\": \"male\",\n    \"options\": [\n        {\n            \"label\": \"Male\",\n            \"value\": \"male\"\n        },\n        {\n            \"label\": \"Female\",\n            \"value\": \"female\"\n        }\n    ]\n},\n````\n\n#### range \nRender `\u003cRangeControl /\u003e`\n\n##### Example\n````\n{\n    \"type\": \"range\",\n    \"title\": \"Volume\",\n    \"id\": \"volume\",\n    \"min\": 1,\n    \"max\": 100,\n    \"value\": 40\n}\n````\n\n#### color \nRender `\u003cColorPalette /\u003e`\n\n##### Example\n````\n{\n    \"type\": \"color\",\n    \"title\": \"Background Color\",\n    \"id\": \"bg-color\",\n    \"value\": '#fff',\n    \"colors\": [\n        {\n            \"name\": \"red\",\n            \"color\": \"#f00\"\n        },\n        {\n            \"name\": \"blue\",\n            \"color\": \"#00f\"\n        },\n        {\n            \"name\": \"black\",\n            \"color\": \"#000\"\n        }\n    ]\n}\n````\n\n#### tree \nRender `\u003cTreeSelect /\u003e`\n\n##### Example\n````\n{\n    \"title\": \"Select Post\",\n    \"type\" : \"tree\",\n    \"optionlabel\": \"Select option\",\n    \"selectedId\": \"p211\",\n    \"tree\":[\n        {\n            name: 'Post 1',\n            id: 'p1',\n            children: [\n                { name: 'Descend 1 of post 1', id: 'p11' },\n                { name: 'Descend 2 of post 1', id: 'p12' },\n            ],\n        },\n        {\n            name: 'post 2',\n            id: 'p2',\n            children: [\n                {\n                    name: 'Descend 1 of post 2',\n                    id: 'p21',\n                    children: [\n                        {\n                            name: 'Descend 1 of Descend 1 of post 2',\n                            id: 'p211',\n                        },\n                    ],\n                },\n            ],\n        },\n    ]     \n}\n````\n\n#### datetime\n\nRender `\u003cDateTime /\u003e`\n\n##### Example\n\n````\n{\n    \"title\": \"Select Date and Time\",\n    \"id\": \"date-posting\",\n    \"type\": \"datetime\",\n    \"is12hours\": true,\n    \"locale\": \"\"\n}\n````\n\n-------\nThanks! ;)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femgk%2Fguten-block-fields","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femgk%2Fguten-block-fields","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femgk%2Fguten-block-fields/lists"}