{"id":16040706,"url":"https://github.com/ryelle/wc-custom-styles","last_synced_at":"2025-10-28T02:12:34.832Z","repository":{"id":40313982,"uuid":"183271370","full_name":"ryelle/wc-custom-styles","owner":"ryelle","description":"A UI for customizing blocks without touching code.","archived":false,"fork":false,"pushed_at":"2025-03-13T14:27:23.000Z","size":540,"stargazers_count":2,"open_issues_count":36,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T15:30:05.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ryelle.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-24T16:56:56.000Z","updated_at":"2020-04-17T18:05:44.000Z","dependencies_parsed_at":"2023-10-14T22:35:14.954Z","dependency_job_id":"b085ea0f-df16-4219-920b-696e4046bac1","html_url":"https://github.com/ryelle/wc-custom-styles","commit_stats":{"total_commits":65,"total_committers":3,"mean_commits":"21.666666666666668","dds":0.09230769230769231,"last_synced_commit":"d79f40a49821b31b57ffeda8a2e25031f93770db"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fwc-custom-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fwc-custom-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fwc-custom-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryelle%2Fwc-custom-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryelle","download_url":"https://codeload.github.com/ryelle/wc-custom-styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243806032,"owners_count":20350773,"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":[],"created_at":"2024-10-08T23:21:01.706Z","updated_at":"2025-10-28T02:12:34.746Z","avatar_url":"https://github.com/ryelle.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Custom Block Styles\n===================\n\nThis plugin is an exploration in customizing site styles without needing to code. Currently, there are two features in this plugin, **custom colors** and **custom block styles**.\n\n## Installing\n\nThis is a development repo, so you'll need to build the plugin before it's anything useful.\n\n1. Get a copy of this plugin using the green \"Clone or download\" button on the right. Regardless of whether you clone or download a zip, you need to build it.\n2. `npm install` to install the dependencies.\n3. `npm run build` (build once) or `npm start` (keep watching for changes) to compile the code.\n4. Activate the plugin.\n\n## Custom Colors\n\nThis feature lets editors customize the color palette used for background/text/etc colors in the editor. Colors can be created, changed, renamed, or deleted. Find this interface at Appearance \u003e Custom Colors.\n\n- Use the color picker (click on the color circle) to change the color.\n- Rename the color by editing the text.\n- Delete any colors you don't want by clicking the trash icon.\n- Add more colors for extra options with the Add Color button.\n- Reset back to the theme or gutenberg defaults with the Reset button.\n\nOnce you save your colors, they'll be available in the Color Settings on any block that supports colors. Check it out on the Group block, Paragraph block, the overlay on the Cover block, etc.\n\n\u003cimg src=\"https://i0.wp.com/ryelle.codes/wp-content/uploads/2019/06/wccbs-custom-colors.png?w=400\u0026ssl=1\u0026zoom=2\" width=\"400\" alt=\"\" /\u003e\n\n*Custom colors screen*\n\n## Custom Block Styles\n\nThis feature is more advanced/less polished. It lets editors create [\"block styles\"]() without having to write JavaScript. Block styles are simple variations on a block made with CSS. They work by adding a className to the block's wrapper. You can create new styles by selecting the block type, and entering in a name for it. The class name will be generated for you, and you can use that in your theme. The newly created style will be available for you immediately, no need to reload the page.\n\nRough edges:\n- This doesn't add any style, just the class name. It assumes you've added the class to your theme.\n- You can't preview the style in the editor, unless you've added a theme stylesheet to the editor (currently not possible on WordCamp sites).\n\n\u003cimg src=\"https://i0.wp.com/ryelle.codes/wp-content/uploads/2019/06/wccbs-block-style-sidebar.png?w=400\u0026ssl=1\u0026zoom=2\" width=\"400\" alt=\"\" /\u003e\n\n*Custom Block Styles sidebar*\n\n\u003cimg src=\"https://i0.wp.com/ryelle.codes/wp-content/uploads/2019/06/wccbs-block-style-inspector.png?w=400\u0026ssl=1\u0026zoom=2\" width=\"400\" alt=\"\" /\u003e\n\n*Block style variations in the style switcher*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryelle%2Fwc-custom-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryelle%2Fwc-custom-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryelle%2Fwc-custom-styles/lists"}