Add border styling ability for sensei buttons

[Imran92]

Resolves #7088
Part of the above issue - Handles the border color and width portion only. Stacked on #7224

Proposed Changes

• Many users have requested for this feature. We are adding the ability to change border color from editor for sensei buttons, especially lesson action buttons in learning mode. We are also allowing to change border width.

It'd be easier if the block was using API version 2, but changing to that could potentially break the buttons in different places for current users. So we did it as we used to do for our buttons.

Testing Instructions

1. Go to Site editor
2. Open Lesson (Learning Mode - Default) template, clear any previous saved version of this template if there's any
3. Update the border color and border width of the lesson action buttons
4. The styles are getting updated as expected
5. Save the template
6. Go to frontend, open a lesson in a course with learning mode enabled
7. Make sure the style is getting applied there as expected
8. Check in different themes

Editor

Frontend

Pre-Merge Checklist

• PR title and description contain sufficient detail and accurately describe the changes
• Acceptance criteria is met
• Decisions are publicly documented
• Adheres to coding standards (PHP, JavaScript, CSS, HTML)
• All strings are translatable (without concatenation, handles plurals)
• Follows our naming conventions (P6rkRX-4oA-p2)
• Hooks (p6rkRX-1uS-p2) and functions are documented
• New UIs are responsive and use a mobile-first approach
• New UIs match the designs
• Different user privileges (admin, teacher, subscriber) are tested as appropriate
• Code is tested on the minimum supported PHP and WordPress versions
• User interface changes have been tested on the latest versions of Chrome, Firefox and Safari
• "Needs Documentation" label is added if this change requires updates to documentation
• Known issues are created as new GitHub issues

[github-actions]

WordPress Dependencies Report

The github-action-wordpress-dependencies-report action has detected some script changes between the commit a8021fd and trunk. Please review and confirm the following are correct before merging.

Script Handle	Added Dependencies	Removed Dependencies	Total Size	Size Diff
blocks/single-page.js			15.6 kB	+109 B ( +0.71% 🔼 )
blocks/lesson-action-blocks.js			13.5 kB	+102 B ( +0.77% 🔼 )
blocks/global-blocks.js			20.5 kB	+100 B ( +0.5% 🔼 )
blocks/shared.js			13.9 kB	+102 B ( +0.74% 🔼 )
course-theme/blocks/index.js			13.8 kB	+12 B ( +0.09% 🔼 )

This comment was automatically generated by the github-action-wordpress-dependencies-report action.

[codecov]

Codecov Report

Merging #7283 (a8021fd) into trunk (261f533) will increase coverage by 0.01%.
Report is 41 commits behind head on trunk.
The diff coverage is 66.66%.

Additional details and impacted files

@@             Coverage Diff              @@
##              trunk    #7283      +/-   ##
============================================
+ Coverage     50.74%   50.76%   +0.01%     
+ Complexity    11051    11048       -3     
============================================
  Files           610      611       +1     
  Lines         46649    46669      +20     
  Branches        402      404       +2     
============================================
+ Hits          23671    23690      +19     
- Misses        22651    22652       +1     
  Partials        327      327              

Files	Coverage Δ
...ludes/blocks/course-theme/class-lesson-actions.php	98.00% <ø> (ø)
assets/blocks/button/color-props.js	51.85% <66.66%> (+1.85%)	⬆️

... and 6 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 97f952a...a8021fd. Read the comment docs.

[renatho]

Looks good and works well! 🚀

The base branch was changed.