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)

• [X] 🍕 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
• [X] 🙋 no, because I need help (more like time)

Added to documentation?

• [X] 📜 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
• [X] 🙌 Does this issue pass all the linting? (PHPCS, ESLint, SassLint)

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