[M3] Release testing about material-design-for-wordpress

[igruszkauy]

Tested via local environment:

M2 Components

Migrated to M3 Components

Query loop M3

Sample page from site

Tested:

• M2 components are migrated to M3 as expected
• Changing source color and typography and verifying components are updated as expected
• Changing components settings and verifying components are updated as expected
• Verified existing pages and posts and making sure components look as expected and nothing looks broken

Issues found:

1. "n" from button label is converted to lower case when updating to m3
2. icon does not use primary color in m2 and when updating to m3 it's not updated when changing source color
3. When updating the plugin and theme with the zips, I clicked the go to customizer button but it did not go to customizer http://material-m3-testing.local/wp-admin/customize.php?autofocus%5Bpanel%5D=material_design

[igruszkauy]

M2 HTML before updating

<!-- wp:material/buttons -->
<div class="wp-block-material-buttons"><!-- wp:material/button {"style":"text"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--text"><i class="material-icons mdc-button__icon">spa</i><div class="mdc-button__ripple"></div><span class="mdc-button__label">nORMAL TEXT</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button {"style":"outlined"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--outlined"><i class="material-icons mdc-button__icon">spa</i><div class="mdc-button__ripple"></div><span class="mdc-button__label">nORMAL OUTLINED</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button {"style":"outlined","iconPosition":"none"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--outlined"><div class="mdc-button__ripple"></div><span class="mdc-button__label">nORMAL OUTLINED NO ICON</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--raised"><i class="material-icons mdc-button__icon">spa</i><div class="mdc-button__ripple"></div><span class="mdc-button__label">nORMAL RAISED</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button {"style":"unelevated"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--unelevated"><i class="material-icons mdc-button__icon">spa</i><div class="mdc-button__ripple"></div><span class="mdc-button__label">nORMAL UNELEVATED</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button {"style":"outlined","size":"large"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--outlined is-large"><i class="material-icons mdc-button__icon">spa</i><div class="mdc-button__ripple"></div><span class="mdc-button__label">LARGE OUTLINED</span></button></div>
<!-- /wp:material/button -->

<!-- wp:material/button {"iconPosition":"trailing","size":"large"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button mdc-button--raised is-large"><div class="mdc-button__ripple"></div><span class="mdc-button__label">LARGE RAISED TRAILING</span><i class="material-icons mdc-button__icon">spa</i></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->

<!-- wp:material/tab-bar {"iconPosition":"above","tabs":[{"label":"TAB 1","content":[{"clientId":"b1870d4c-7f8e-43ac-ae5f-b3d4bfd30c6c","name":"core/paragraph","isValid":true,"attributes":{"content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehende","dropCap":false},"innerBlocks":[]}]},{"label":"TAB 2","icon":"2mp","content":[{"clientId":"666041e5-2e13-4df0-a910-f780c3644012","name":"core/paragraph","isValid":true,"attributes":{"content":"Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.","dropCap":false},"innerBlocks":[]}]},{"label":"TAB 3","icon":"12mp","content":[]}]} -->
<div class="wp-block-material-tab-bar mdc-tab-bar-container"><div class="mdc-tab-bar" role="tablist"><div class="mdc-tab-scroller"><div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll"><div class="mdc-tab-scroller__scroll-content"><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--active"><span class="mdc-tab__content"><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">TAB 1</span></span></span><span class="mdc-tab-indicator mdc-tab-indicator--active"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--stacked"><span class="mdc-tab__content"><i class="material-icons mdc-tab__icon">2mp</i><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">TAB 2</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div><div role="tab" tabindex="0" class="mdc-tab tab mdc-tab--stacked"><span class="mdc-tab__content"><i class="material-icons mdc-tab__icon">12mp</i><span class="mdc-tab__text-label tab__label-field"><span role="tab" tabindex="0">TAB 3</span></span></span><span class="mdc-tab-indicator"><span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span></span><span class="mdc-tab__ripple"></span></div></div></div></div></div><div><div class="mdc-tab-content mdc-typography--body1 mdc-tab-content--active"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehende</p></div><div class="mdc-tab-content mdc-typography--body1"><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div><div class="mdc-tab-content mdc-typography--body1"></div></div></div>
<!-- /wp:material/tab-bar -->

<!-- wp:material/data-table -->
<div class="wp-block-material-data-table wp-block-table"><div class="mdc-data-table"><table class="mdc-data-table__table"><thead class=""><tr class="mdc-data-table__header-row"><th class="mdc-data-table__header-cell">HEADER 1</th><th class="mdc-data-table__header-cell">HEADER 2</th></tr></thead><tbody class="mdc-data-table__content"><tr class="mdc-data-table__row"><td class="mdc-data-table__cell">1</td><td class="mdc-data-table__cell">2</td></tr><tr class="mdc-data-table__row"><td class="mdc-data-table__cell">3</td><td class="mdc-data-table__cell">4</td></tr></tbody><tfoot class=""><tr class="mdc-data-table__row"><td class="mdc-data-table__cell">FOOTER 1</td><td class="mdc-data-table__cell">FOOTER 2</td></tr></tfoot></table></div></div>
<!-- /wp:material/data-table -->

<!-- wp:material/contact-form -->
<div class="wp-block-material-contact-form"><!-- wp:material/name-input-field {"id":"material-design-name-2"} -->
<div class="mdc-text-field-container"><div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input id="material-design-name-2" name="material-design-name-2" type="text" required class="mdc-text-field__input" aria-labelledby="label-material-design-name-2" data-form="contact" data-meta="name" data-label="Name"/><div class="mdc-line-ripple"></div><label for="material-design-name-2" class="mdc-floating-label" id="label-material-design-name-2">Name</label></div></div>
<!-- /wp:material/name-input-field -->

<!-- wp:material/email-input-field {"id":"material-design-email-3"} -->
<div class="mdc-text-field-container"><div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input id="material-design-email-3" name="material-design-email-3" type="email" required class="mdc-text-field__input" aria-labelledby="label-material-design-email-3" data-form="contact" data-meta="email" data-label="Email"/><div class="mdc-line-ripple"></div><label for="material-design-email-3" class="mdc-floating-label" id="label-material-design-email-3">Email</label></div></div>
<!-- /wp:material/email-input-field -->

<!-- wp:material/website-input-field {"id":"material-design-website-4"} -->
<div class="mdc-text-field-container mdc-text-field-container--not-required"><div class="mdc-text-field mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><input id="material-design-website-4" name="material-design-website-4" type="url" class="mdc-text-field__input" aria-labelledby="label-material-design-website-4" data-form="contact" data-meta="website" data-label="Website"/><div class="mdc-line-ripple"></div><label for="material-design-website-4" class="mdc-floating-label" id="label-material-design-website-4">Website</label></div></div>
<!-- /wp:material/website-input-field -->

<!-- wp:material/message-input-field {"id":"material-design-message-1","outlined":false} -->
<div class="mdc-text-field-container"><div class="mdc-text-field mdc-text-field--textarea mdc-text-field--custom-full"><span class="mdc-text-field__ripple"></span><textarea id="material-design-message-1" name="material-design-message-1" class="mdc-text-field__input" rows="8" aria-labelledby="label-material-design-message-1" data-form="contact" data-meta="message" data-label="Message" required></textarea><div class="mdc-line-ripple"></div><label for="material-design-message-1" class="mdc-floating-label" id="label-material-design-message-1">Message</label></div></div>
<!-- /wp:material/message-input-field -->

<!-- wp:material/button {"style":"outlined","iconPosition":"none","isSubmit":true} -->
<div class="wp-block-material-button" id="block-material-button-9"><button class="mdc-button mdc-button--outlined" type="submit"><div class="mdc-button__ripple"></div><span class="mdc-button__label">SUBMIT</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/contact-form -->

<!-- wp:material/icon {"textColor":"#6200ee"} -->
<div class="wp-block-material-icon"><i class="material-icons md-24" style="color:#6200ee">3p</i></div>
<!-- /wp:material/icon -->

<!-- wp:material/list {"style":"two-line"} -->
<div class="wp-block-material-list"><ul class="mdc-list mdc-list--two-line"><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">spa</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">ITEM 1</span><span class="mdc-list-item__secondary-text"></span></span></li><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">spa</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">ITEM 2</span><span class="mdc-list-item__secondary-text"></span></span></li><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">spa</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">ITEM 3</span><span class="mdc-list-item__secondary-text">SEC TXT</span></span></li></ul></div>
<!-- /wp:material/list -->

<!-- wp:material/cards-collection {"cardsProps":[{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1580699133608-082eae6052a8.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"SEE MORE","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"cardStyle":"global","title":"TITLE FOR CARD 1","secondaryText":"SEC TEXT FOR CARD 1","supportingText":"SUPP TEXT FOR CARD 1"},{"contentLayout":"text-under-media","displayTitle":true,"displaySecondaryText":true,"imageSourceUrl":"http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1558905585-24d5d344c91d.jpeg","isImageEditMode":false,"displayImage":true,"displaySupportingText":true,"primaryActionButtonLabel":"SEE MORE","primaryActionButtonUrl":"","primaryActionButtonNewTab":false,"primaryActionButtonNoFollow":false,"secondaryActionButtonLabel":"","secondaryActionButtonUrl":"","secondaryActionButtonNewTab":false,"secondaryActionButtonNoFollow":false,"displayActions":true,"displaySecondaryActionButton":false,"cardStyle":"global","title":"TITLE FOR CARD 2","secondaryText":"SEC TEXT FOR CARD 2","supportingText":"SUPP TEXT FOR CARD 2"}]} -->
<div class="wp-block-material-cards-collection alignwide" id="block-material-cards-collection-0"><div class="masonry-grid layout-masonry"><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card mdc-card--global-override material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1580699133608-082eae6052a8.jpeg" alt="TITLE FOR CARD 1"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">TITLE FOR CARD 1</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">SEC TEXT FOR CARD 1</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">SUPP TEXT FOR CARD 1</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">SEE MORE</span></a></div></div></div></div></div><div style="width:50%" class="masonry-grid_column"><div class="card-container"><div class="mdc-card mdc-card--global-override material-design-card"><div class="mdc-card__primary-action material-design-card__primary-action mdc-ripple-upgraded" tabindex="0"><div tabindex="0" class="mdc-card__media mdc-card__media--16-9 material-design-card__media material-design-card-with-text-under-media"><img src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1558905585-24d5d344c91d.jpeg" alt="TITLE FOR CARD 2"/></div><div class="material-design-card__primary"><h2 class="material-design-card__title mdc-typography mdc-typography--headline6">TITLE FOR CARD 2</h2><h3 class="material-design-card__secondary-text mdc-typography mdc-typography--subtitle2">SEC TEXT FOR CARD 2</h3></div><div class="material-design-card__supporting-text material-design-card__supporting-text_text-under-media mdc-typography mdc-typography--body2">SUPP TEXT FOR CARD 2</div></div><div class="mdc-card__actions"><div class="mdc-card__action-buttons"><a href="#" class="mdc-button mdc-card__action mdc-card__action--button"><div class="mdc-button__ripple"></div><span class="mdc-button__label">SEE MORE</span></a></div></div></div></div></div></div></div>
<!-- /wp:material/cards-collection -->

<!-- wp:material/image-list {"ids":[33,32,34,43],"style":"grid"} -->
<div class="wp-block-material-image-list" id="block-material-image-list-0"><ul class="mdc-image-list mdc-image-list--with-text-protection"><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1531307119710-accdb402fe03-1024x1024.jpeg"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1531307119710-accdb402fe03-1024x1024.jpeg" data-id="33" data-link="http://material-m3-testing.local/material-demo-photo-1531307119710-accdb402fe03/"/></div><div class="mdc-image-list__supporting"><span class="mdc-image-list__label">A</span></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1531306760863-7fb02a41db12-1024x683.jpeg"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1531306760863-7fb02a41db12-1024x683.jpeg" data-id="32" data-link="http://material-m3-testing.local/material-demo-photo-1531306760863-7fb02a41db12/"/></div><div class="mdc-image-list__supporting"><span class="mdc-image-list__label">B</span></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1558905585-24d5d344c91d-1024x683.jpeg"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1558905585-24d5d344c91d-1024x683.jpeg" data-id="34" data-link="http://material-m3-testing.local/material-demo-photo-1558905585-24d5d344c91d/"/></div><div class="mdc-image-list__supporting"><span class="mdc-image-list__label">C</span></div></a></li><li class="mdc-image-list__item"><a class="mdc-image-list__item-wrap" href="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1582817954171-c3533fffde89-1024x684.jpeg"><div class="mdc-image-list__image-aspect-container"><img class="mdc-image-list__image" alt="" src="http://material-m3-testing.local/wp-content/uploads/2022/09/material-demo-photo-1582817954171-c3533fffde89-1024x684.jpeg" data-id="43" data-link="http://material-m3-testing.local/material-demo-photo-1582817954171-c3533fffde89/"/></div><div class="mdc-image-list__supporting"><span class="mdc-image-list__label">D</span></div></a></li></ul></div>
<!-- /wp:material/image-list -->

<!-- wp:material/hand-picked-posts {"style":"grid","posts":[18,19,16],"editMode":false} /-->