38 create a block specific build pattern so scss and css can be local to the block folder

[guzmandrade-dev]

Closes

#38

#WDSUS-37

What type of PR is this? (put an x to all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Link to test

Description

This PR adds to the block created with the WP-CLI command wp wds create_portable_block starter styles and changes how styles are built, so single style files are created per each block.

Example:

Run the following to create the block myblock (double-check you don't have a folder named myblock under blocks):

wp wds create_portable_block myblock --title="This is myblock" --desc="This block is used for wds." --keyword="myblock" --icon="table-row-before"

add markup and style code to your block, such as:

and run npm run buld or npm run start. This should result, after adding the custom block to a post or page, in the following:

on the Frontend

Editor page

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help (more like time)

Added to documentation?

• 📜 README.md
• 📓 Confluence
• 🙅 no documentation needed

Others

• 🦮 Is this issue accessible? (Section 508/WCAG 2.0AA) -- would depend on the markup of new blocks created
• 🙌 Does this issue pass all the linting? (PHPCS, ESLint, SassLint)

[optional] Are there any post-deployment tasks we need to perform?

[khleomix]

@guzmandrade-wds LGTM! Thanks!!!