Skip to content

Latest commit

 

History

History
38 lines (31 loc) · 2.22 KB

resume-skills-block.md

File metadata and controls

38 lines (31 loc) · 2.22 KB

Resume Skill Block

A custom block that lists skills and a star rating for each skill. This could be useful if you want a visual on a resume for example. Another resume related block, a custom built skills/rating block. Even though there's a similar block in jetpack this one pairs the rating with a text field for a label. At first I created this with a custom class added to an unordered list block, but that required pasting in the html stars as characters or emojis. So then I built it into a simple custom block to attach stars to a text field and display them in a chart.

Block description

View the block source code in the theme at evans-block-theme/blocks/skills and evans-block-theme/blocks/skill. Notice that there is a skills block as well as a skill block. The skills contains skills (so you can list as many as you would like). The skills is just a container, and each individual skill has only a label and a level. You enter a label and select from a dropdown how many stars you equate to that skill.

resume skills block demo

Block Inserter

block resume skills inserter

Block markup

<!-- wp:evans-block-theme/skills {"label":"Here's a skill","level":"stars here"} -->
<div class="wp-block-evans-block-theme-skills"><!-- wp:evans-block-theme/skill {"label":"WordPress","level":"5"} /-->

<!-- wp:evans-block-theme/skill {"label":"Javascript","level":"5"} /-->

<!-- wp:evans-block-theme/skill {"label":"PHP","level":"4"} /--></div>
<!-- /wp:evans-block-theme/skills -->

Block example

View an example with other blocks.

Contents