{"id":28243562,"url":"https://github.com/rezen/catz-block","last_synced_at":"2026-05-01T19:31:34.378Z","repository":{"id":41768346,"uuid":"211163363","full_name":"rezen/catz-block","owner":"rezen","description":"Sample plugin for a custom gutenberg block","archived":false,"fork":false,"pushed_at":"2022-12-10T03:48:17.000Z","size":532,"stargazers_count":0,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-10T15:41:47.157Z","etag":null,"topics":["wordpress","wordpress-gutenberg","wordpress-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rezen.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-09-26T19:09:22.000Z","updated_at":"2020-09-16T22:29:43.000Z","dependencies_parsed_at":"2023-01-25T20:00:29.961Z","dependency_job_id":null,"html_url":"https://github.com/rezen/catz-block","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rezen/catz-block","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rezen%2Fcatz-block","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rezen%2Fcatz-block/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rezen%2Fcatz-block/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rezen%2Fcatz-block/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rezen","download_url":"https://codeload.github.com/rezen/catz-block/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rezen%2Fcatz-block/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32510559,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["wordpress","wordpress-gutenberg","wordpress-plugin"],"created_at":"2025-05-19T07:07:40.703Z","updated_at":"2026-05-01T19:31:34.359Z","avatar_url":"https://github.com/rezen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Guten tag to Gutenberg\n## Takeway\n- How to get started making a block\n- React is needed\n- If you don't wanna mess with JavaScript check out ACF\n  - https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/\n\n## Intro\n- Call to learn JavaScript deeply\n  - https://wesbos.com/learn-javascript/\n- What is gutenberg\n  - R-evolution in the editor experience\n  - Blocked based\n  - Getting the editing experience to more closely align front-end result\n\n## Learn JavaScript deeply\n  - React\n    - https://twitter.com/chrisachard/status/1175022111758442497\n    - https://reactjs.org/community/courses.html\n    - https://learn.freecodecamp.org/front-end-libraries/react/\n\n### Everything is broken into components\n- https://github.com/WordPress/gutenberg/tree/master/packages/components/src\n- https://github.com/WordPress/gutenberg/blob/master/packages/components/src/select-control/index.js\n\n```sh\nnpm install @wordpress/components --save\n```\n\nComponents are classes or functions that return JSX which is special language Facebook developed to make it easy to write your HTML.\n\n```jsx\nfunction PluginControls(props) {\n\treturn (\n\t\t\u003cdiv class=\"plugin-controls-panel-1\"\u003e\n      \t\t\u003cColorIndicator colorValue=\"#f00\" /\u003e\n            \u003cSelectControl\n            \thelp=\"What size do you want the text?\"\n                  label=\"Size\"\n                  value={ props.size }\n                  options={ [\n                      { label: 'Big', value: '100%' },\n                      { label: 'Medium', value: '50%' },\n                      { label: 'Small', value: '25%' },\n                  ] }\n            \t /\u003e\t\n\t\t\u003c/div\u003e\n\t);\n}\n\n\u003cPluginControls size=\"50%\" /\u003e\n```\n\n## Creating your own block\n\n- https://developer.wordpress.org/block-editor/tutorials/block-tutorial/\n- https://css-tricks.com/learning-gutenberg-1-series-intro/\n- https://developer.wordpress.org/block-editor/components/\n- https://medium.com/@eudestwt/how-to-make-an-editable-wordpress-gutenberg-block-with-inspector-controls-on-the-sidebar-8779f4eddf8e\n\nA bit part of creating blocks is using the JavaScript API. You can write plain JS, but that quickly becomes cumbersome, which is why JSX came about. Setting up the build steps for modern JS is a pain and you can quickly spend days figuring out how to setup the build chain. Lucky for us there is a tool that makes it easy to scaffold out the foundation for our project!\n\n### create-guten-block\nThe `create-guten-block` project is a cli tool that quickly helps you get running creating a \"base plugin\" and setting up the build chains.\n\n- https://github.com/ahmadawais/create-guten-block\n\n\n```sh\n# Install package\nnpm install -g create-guten-block\n\n# Go to your plugins directory\ncd wp-content/plugins\n\n# Create a plugin for the example-block\ncreate-guten-block cats-block\n\n# Open the plugin in your editor\ncd cats-block\ncode .\nnpm start\n```\n\n### Dissecting the pieces\nLet's look at the pieces of code and see what they do.\n\n**Backend**  \n- `src/init.php`\n  - `wp_register_script` Register script to be used by gutenberg\n  - `register_block_type` Define a block type on backend\n\n**Frontend**  \n- `src/block/block.js`\n  - `import` Used to import packages or components\n  -  `registerBlockType` Register block on front end\n     -  `@edit` Controls editor for block\n     -  `@save` Controls what HTML is output from editor \n- `src/*.scss`\n\n### Making cats-block\nNow that we've talked about the building blocks of guten berg let's try to make one. There is nice site https://cataas.com/#/ that generates random cat pictures. Let's have a block that generates 6 random cat names with pictures. We'll add controls to resize the pictures.\n\n...","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frezen%2Fcatz-block","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frezen%2Fcatz-block","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frezen%2Fcatz-block/lists"}