From e1a5d1a1d68c78c9bb948fcbcaddd2885f91aa40 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 10:00:31 +0330 Subject: [PATCH 01/40] feat: no need to support the `Page List Item` block --- .../blocks/core/js/wordpress-blocks-list.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index 5516ccae8..a782b833f 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -3,9 +3,9 @@ "data": { "total": 93, "supported": 76, - "soft-supported": 89, - "not-supported": 4, - "no-need-to-support": 13 + "soft-supported": 90, + "not-supported": 3, + "no-need-to-support": 14 }, "supported": [ { @@ -382,6 +382,11 @@ "name": "core/widget-group", "title": "Widget Group", "note": "Investigate if this block can be supported." + }, + { + "name": "core/page-list-item", + "title": "Page List Item", + "note": "This block is not selectable and there is no ui for it for user and we do not need to support it." } ], "not-supported": [ @@ -390,11 +395,6 @@ "title": "Navigation", "note": "Advanced editor setting panel compatibility needed." }, - { - "name": "core/page-list-item", - "title": "Page List Item", - "note": "Investigate if this block can be supported." - }, { "name": "core/archives", "title": "Archives", From c7ea247e0f56492d9becd4b9f2783e7726fc33f9 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 10:18:10 +0330 Subject: [PATCH 02/40] feat: add `@10up/cypress-wp-utils` package and use it's command --- package-lock.json | 16 +++++++++++++ package.json | 1 + packages/dev-cypress/js/helpers/editor.js | 29 ----------------------- packages/dev-cypress/js/support/e2e.js | 13 +++++----- 4 files changed, 24 insertions(+), 35 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8f5077abd..33938ecb8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "rememo": "^4.0.2" }, "devDependencies": { + "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.5", "@babel/cli": "^7.22.9", "@babel/core": "^7.22.9", @@ -177,6 +178,15 @@ "stylelint": "^14.2" } }, + "node_modules/@10up/cypress-wp-utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", + "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", + "dev": true, + "engines": { + "node": ">=12.0" + } + }, "node_modules/@4tw/cypress-drag-drop": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz", @@ -51539,6 +51549,12 @@ } }, "dependencies": { + "@10up/cypress-wp-utils": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/@10up/cypress-wp-utils/-/cypress-wp-utils-0.4.0.tgz", + "integrity": "sha512-7cNELIX6ml5V9JEU83iEyQ6dkZ77ImdR5HKjUP4oyArQogPVcFPUnokU7GInH8DicqXbESrrkxZ0IfnNtNWh+A==", + "dev": true + }, "@4tw/cypress-drag-drop": { "version": "2.2.5", "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz", diff --git a/package.json b/package.json index 54ea8d2a1..0d9a1874e 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "rememo": "^4.0.2" }, "devDependencies": { + "@10up/cypress-wp-utils": "^0.4.0", "@4tw/cypress-drag-drop": "^2.2.5", "@babel/cli": "^7.22.9", "@babel/core": "^7.22.9", diff --git a/packages/dev-cypress/js/helpers/editor.js b/packages/dev-cypress/js/helpers/editor.js index 1ed9e6d35..d0ff3e2d9 100644 --- a/packages/dev-cypress/js/helpers/editor.js +++ b/packages/dev-cypress/js/helpers/editor.js @@ -482,32 +482,3 @@ export const reSelectBlock = (blockType = 'core/paragraph') => { // reselect block cy.getIframeBody().find(`[data-type="${blockType}"]`).first().click(); }; - -// https://github.com/10up/cypress-wp-utils/blob/013915676935410cf3390829a52bc5e0c80b6deb/src/commands/open-document-settings-sidebar.ts -Cypress.Commands.add('openDocumentSettingsSidebar', (tab = 'Post') => { - cy.get('body').then(($body) => { - const $settingButtonIds = [ - 'button[aria-expanded="false"][aria-label="Settings"]', - ]; - - $settingButtonIds.forEach(($settingButtonId) => { - if ($body.find($settingButtonId).length) { - cy.get($settingButtonId).click(); - cy.wrap($body.find($settingButtonId)).as('sidebarButton'); - } - }); - - const $tabSelectors = [ - // commented from original code because it is not valid - // `div[role="tablist"] button:contains("${tab}")`, - `.edit-post-sidebar__panel-tabs button:contains("${tab}")`, - ]; - - $tabSelectors.forEach(($tabSelector) => { - if ($body.find($tabSelector).length) { - cy.get($tabSelector).first().click(); - cy.wrap($body.find($tabSelector)).as('selectedTab'); - } - }); - }); -}); diff --git a/packages/dev-cypress/js/support/e2e.js b/packages/dev-cypress/js/support/e2e.js index 3dcf82014..562e1fc32 100644 --- a/packages/dev-cypress/js/support/e2e.js +++ b/packages/dev-cypress/js/support/e2e.js @@ -1,14 +1,15 @@ -/** - * Internal dependencies - */ -import { registerCommands } from './commands'; -import { loginToSite, goTo } from '../helpers'; - /** * External dependencies */ import 'cypress-real-events'; import '@cypress/code-coverage/support'; +import '@10up/cypress-wp-utils'; + +/** + * Internal dependencies + */ +import { registerCommands } from './commands'; +import { loginToSite, goTo } from '../helpers'; registerCommands(); From 9787cc91a78f56fbd1a9732944c7b7fd6c4e4aae Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 10:18:22 +0330 Subject: [PATCH 03/40] test: improve selector --- .../post-featured-image/test/selectors.blocks.e2e.cy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blocks/core/js/wordpress/post-featured-image/test/selectors.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/post-featured-image/test/selectors.blocks.e2e.cy.js index 9284baf96..fb59f5f17 100644 --- a/packages/blocks/core/js/wordpress/post-featured-image/test/selectors.blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/post-featured-image/test/selectors.blocks.e2e.cy.js @@ -189,7 +189,7 @@ describe('Featured Image Block → Selectors test', () => { savePage(); redirectToFrontPage(); - cy.get('.blockera-block').within(() => { + cy.get('.blockera-block.wp-block-post-featured-image').within(() => { cy.get('img') .first() .should('have.css', 'border', '5px dashed rgb(55, 230, 212)') From d5c91d48c279c9376a5b996dc6a11634f1c96d53 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 10:25:12 +0330 Subject: [PATCH 04/40] fix: block was labeled as support wrongly! --- packages/blocks/core/js/wordpress-blocks-list.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index a782b833f..3a452d90e 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -2,9 +2,9 @@ "$schema": "./schemas/blocks.schema.json", "data": { "total": 93, - "supported": 76, - "soft-supported": 90, - "not-supported": 3, + "supported": 75, + "soft-supported": 89, + "not-supported": 4, "no-need-to-support": 14 }, "supported": [ @@ -130,10 +130,6 @@ "title": "Table", "note": "@todo there is a lot of room for inner blocks." }, - { - "name": "core/tag-cloud", - "title": "Tag Cloud" - }, { "name": "core/verse", "title": "Verse" @@ -404,6 +400,10 @@ "name": "core/calendar", "title": "Calendar", "note": "There is a block editor js error about attributes." + }, + { + "name": "core/tag-cloud", + "title": "Tag Cloud" } ] } From 2d4a3edd2ab09d074d7c732bb4691d0030a18379 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 11:33:04 +0330 Subject: [PATCH 05/40] feat(Tag Cloud Block): Add block support by Blockera. --- packages/blocks/core/CHANGELOG.md | 2 +- .../blocks/core/js/wordpress-blocks-list.json | 14 +++---- packages/blocks/core/js/wordpress/index.js | 1 + .../core/js/wordpress/tag-cloud/index.js | 37 +++++++++++++++++++ .../core/php/wordpress/tag-cloud/block.php | 22 +++++++++++ .../core/php/wordpress/tag-cloud/index.php | 7 ++++ 6 files changed, 75 insertions(+), 8 deletions(-) create mode 100644 packages/blocks/core/js/wordpress/tag-cloud/index.js create mode 100644 packages/blocks/core/php/wordpress/tag-cloud/block.php create mode 100644 packages/blocks/core/php/wordpress/tag-cloud/index.php diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 0c29e2d2d..1a4140b2b 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -5,7 +5,7 @@ - Added support for the `Navigation Link Block` by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Home Link Block` by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Submenu Block` and its inner blocks by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - +- Added support for the `Tag Cloud Block` by Blockera. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index 3a452d90e..2dca0b753 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -2,9 +2,9 @@ "$schema": "./schemas/blocks.schema.json", "data": { "total": 93, - "supported": 75, - "soft-supported": 89, - "not-supported": 4, + "supported": 76, + "soft-supported": 90, + "not-supported": 3, "no-need-to-support": 14 }, "supported": [ @@ -283,6 +283,10 @@ "name": "core/term-description", "title": "Term Description" }, + { + "name": "core/tag-cloud", + "title": "Tag Cloud" + }, { "name": "core/query-title", "title": "Query Title" @@ -400,10 +404,6 @@ "name": "core/calendar", "title": "Calendar", "note": "There is a block editor js error about attributes." - }, - { - "name": "core/tag-cloud", - "title": "Tag Cloud" } ] } diff --git a/packages/blocks/core/js/wordpress/index.js b/packages/blocks/core/js/wordpress/index.js index 121fe7880..19fbb1b2b 100644 --- a/packages/blocks/core/js/wordpress/index.js +++ b/packages/blocks/core/js/wordpress/index.js @@ -72,6 +72,7 @@ export * from './social-link'; export * from './social-links'; export * from './spacer'; export * from './table'; +export * from './tag-cloud'; export * from './term-description'; export * from './verse'; export * from './video'; diff --git a/packages/blocks/core/js/wordpress/tag-cloud/index.js b/packages/blocks/core/js/wordpress/tag-cloud/index.js new file mode 100644 index 000000000..5dad6d5b1 --- /dev/null +++ b/packages/blocks/core/js/wordpress/tag-cloud/index.js @@ -0,0 +1,37 @@ +// @flow + +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Blockera dependencies + */ +import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; + +/** + * Internal dependencies + */ +import type { BlockType } from '../../type'; + +export const TagCloud: BlockType = { + name: 'blockeraTagCloud', + targetBlock: 'core/tag-cloud', + blockeraInnerBlocks: { + 'elements/tag-link': { + name: 'elements/tag-link', + type: 'title', + label: __('Tag Link', 'blockera'), + description: __('All tag items inside tag cloud.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, + }, + edit: (props) => { + return ; + }, +}; diff --git a/packages/blocks/core/php/wordpress/tag-cloud/block.php b/packages/blocks/core/php/wordpress/tag-cloud/block.php new file mode 100644 index 000000000..4a009fb19 --- /dev/null +++ b/packages/blocks/core/php/wordpress/tag-cloud/block.php @@ -0,0 +1,22 @@ + array_merge( + $args['selectors'] ?? [], + [ + 'blockera/elements/tag-link' => [ + 'root' => 'a.tag-cloud-link', + ], + ] + ), + ] +); diff --git a/packages/blocks/core/php/wordpress/tag-cloud/index.php b/packages/blocks/core/php/wordpress/tag-cloud/index.php new file mode 100644 index 000000000..52161c374 --- /dev/null +++ b/packages/blocks/core/php/wordpress/tag-cloud/index.php @@ -0,0 +1,7 @@ + Date: Mon, 16 Sep 2024 11:41:32 +0330 Subject: [PATCH 06/40] test(Tag Cloud Block): verify functionality of the `Tag Cloud Block` and its inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../test/block.inner-blocks.e2e.cy.js | 59 +++++++++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 packages/blocks/core/js/wordpress/tag-cloud/test/block.inner-blocks.e2e.cy.js diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 1a4140b2b..288c5ed1a 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -16,6 +16,7 @@ - Added automated test for `Navigation Link Block` to check that the `Back to Parent` navigation buttons work correctly. - Added automated test for `Home Link Block` to check that the `Back to Parent` navigation buttons work correctly. - Added automated test for `Submenu Block` to check that the `Back to Parent` navigation buttons work correctly. +- Added automated test to verify functionality of the `Tag Cloud Block` and its inner blocks. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/tag-cloud/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/tag-cloud/test/block.inner-blocks.e2e.cy.js new file mode 100644 index 000000000..cd125e03a --- /dev/null +++ b/packages/blocks/core/js/wordpress/tag-cloud/test/block.inner-blocks.e2e.cy.js @@ -0,0 +1,59 @@ +/** + * Blockera dependencies + */ +import { + savePage, + createPost, + appendBlocks, + setInnerBlock, + setParentBlock, + redirectToFrontPage, +} from '@blockera/dev-cypress/js/helpers'; + +describe('Tag Cloud Block → Inner Blocks', () => { + beforeEach(() => { + createPost(); + }); + + it('Inner blocks existence + CSS selectors in editor and front-end', () => { + appendBlocks('\n '); + + // Select target block + cy.getBlock('core/tag-cloud').click(); + + // + // 1. Edit Inner Blocks + // + + // + // 1.1. elements/tag-link + // + setInnerBlock('elements/tag-link'); + + // + // 1.1.1. BG color + // + cy.setColorControlValue('BG Color', 'ff0000'); + + cy.getBlock('core/tag-cloud') + .first() + .within(() => { + cy.get('a.tag-cloud-link') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.blockera-block.wp-block-tag-cloud').within(() => { + // elements/tag-link + cy.get('a.tag-cloud-link') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + }); +}); From c3e4f5ffdd3b7fa9a5e4f621e7c8f5a36c963258 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Mon, 16 Sep 2024 13:03:01 +0330 Subject: [PATCH 07/40] feat: supported calendar and archives blocks by Blockera --- .../blocks/core/js/wordpress-blocks-list.json | 18 ++++++++---------- .../core/js/wordpress/archives/index.js | 19 +++++++++++++++++++ .../core/js/wordpress/calendar/index.js | 19 +++++++++++++++++++ packages/blocks/core/js/wordpress/index.js | 2 ++ 4 files changed, 48 insertions(+), 10 deletions(-) create mode 100644 packages/blocks/core/js/wordpress/archives/index.js create mode 100644 packages/blocks/core/js/wordpress/calendar/index.js diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index 3a452d90e..49ae8621a 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -311,6 +311,14 @@ { "name": "core/navigation-link", "title": "Navigation Link" + }, + { + "name": "core/archives", + "title": "Archives" + }, + { + "name": "core/calendar", + "title": "Calendar" } ], "no-need-to-support": [ @@ -391,16 +399,6 @@ "title": "Navigation", "note": "Advanced editor setting panel compatibility needed." }, - { - "name": "core/archives", - "title": "Archives", - "note": "There is a block editor js error about attributes." - }, - { - "name": "core/calendar", - "title": "Calendar", - "note": "There is a block editor js error about attributes." - }, { "name": "core/tag-cloud", "title": "Tag Cloud" diff --git a/packages/blocks/core/js/wordpress/archives/index.js b/packages/blocks/core/js/wordpress/archives/index.js new file mode 100644 index 000000000..1f8803350 --- /dev/null +++ b/packages/blocks/core/js/wordpress/archives/index.js @@ -0,0 +1,19 @@ +// @flow + +/** + * Blockera dependencies + */ +import { SharedBlockExtension } from '@blockera/editor'; + +/** + * Internal dependencies + */ +import type { BlockType } from '../../type'; + +export const Archives: BlockType = { + name: 'blockeraArchives', + targetBlock: 'core/archives', + edit: (props) => { + return ; + }, +}; diff --git a/packages/blocks/core/js/wordpress/calendar/index.js b/packages/blocks/core/js/wordpress/calendar/index.js new file mode 100644 index 000000000..3dadbbee0 --- /dev/null +++ b/packages/blocks/core/js/wordpress/calendar/index.js @@ -0,0 +1,19 @@ +// @flow + +/** + * Blockera dependencies + */ +import { SharedBlockExtension } from '@blockera/editor'; + +/** + * Internal dependencies + */ +import type { BlockType } from '../../type'; + +export const Calendar: BlockType = { + name: 'blockeraCalendar', + targetBlock: 'core/calendar', + edit: (props) => { + return ; + }, +}; diff --git a/packages/blocks/core/js/wordpress/index.js b/packages/blocks/core/js/wordpress/index.js index 121fe7880..d74f8953f 100644 --- a/packages/blocks/core/js/wordpress/index.js +++ b/packages/blocks/core/js/wordpress/index.js @@ -3,11 +3,13 @@ export * from './audio'; export * from './avatar'; export * from './button'; +export * from './archives'; export * from './buttons'; export * from './categories'; export * from './code'; export * from './columns'; export * from './column'; +export * from './calendar'; export * from './comment-author-name'; export * from './comment-content'; export * from './comment-date'; From a83778c3d33311e564a6d59216b301c5b621b99b Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Mon, 16 Sep 2024 13:07:56 +0330 Subject: [PATCH 08/40] docs: update the changelog of blocks package --- packages/blocks/core/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 288c5ed1a..5e2a3c92d 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -6,6 +6,8 @@ - Added support for the `Home Link Block` by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Submenu Block` and its inner blocks by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Tag Cloud Block` by Blockera. +- Added support for the `Archives` by Blockera. +- Added support for the `Calendar` by Blockera. ### Bug Fixes From f22648f663f00dabaf8cc54bf88c865de4ec27e2 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 14:21:51 +0330 Subject: [PATCH 09/40] feat: icons imroved --- .../blocks/core/js/wordpress/categories/index.js | 4 ++-- .../icons/block-list-item-container.svg | 5 +++++ .../js/library-ui/icons/block-list-item.svg | 16 ++++------------ packages/icons/js/library-ui/icons/index.js | 1 + 4 files changed, 12 insertions(+), 14 deletions(-) create mode 100644 packages/icons/js/library-ui/icons/block-list-item-container.svg diff --git a/packages/blocks/core/js/wordpress/categories/index.js b/packages/blocks/core/js/wordpress/categories/index.js index 4f4376eb4..fe2192fae 100644 --- a/packages/blocks/core/js/wordpress/categories/index.js +++ b/packages/blocks/core/js/wordpress/categories/index.js @@ -24,7 +24,7 @@ export const Categories: BlockType = { name: 'elements/term-item', label: __('Terms', 'blockera'), description: __('All term elements.', 'blockera'), - icon: , + icon: , settings: { force: true, }, @@ -33,7 +33,7 @@ export const Categories: BlockType = { name: 'elements/list-item', label: __('Terms Container', 'blockera'), description: __('All terms container elements.', 'blockera'), - icon: , + icon: , settings: { force: true, }, diff --git a/packages/icons/js/library-ui/icons/block-list-item-container.svg b/packages/icons/js/library-ui/icons/block-list-item-container.svg new file mode 100644 index 000000000..90146572a --- /dev/null +++ b/packages/icons/js/library-ui/icons/block-list-item-container.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/js/library-ui/icons/block-list-item.svg b/packages/icons/js/library-ui/icons/block-list-item.svg index 03c2d75e8..0cbd7b243 100644 --- a/packages/icons/js/library-ui/icons/block-list-item.svg +++ b/packages/icons/js/library-ui/icons/block-list-item.svg @@ -1,12 +1,4 @@ - - - \ No newline at end of file + + + + diff --git a/packages/icons/js/library-ui/icons/index.js b/packages/icons/js/library-ui/icons/index.js index 29fc5ed41..ac1739c45 100644 --- a/packages/icons/js/library-ui/icons/index.js +++ b/packages/icons/js/library-ui/icons/index.js @@ -26,6 +26,7 @@ export { default as BlockGalleryCaption } from './block-gallery-caption.svg'; export { default as BlockImageCaption } from './block-image-caption.svg'; export { default as BlockInput } from './block-input.svg'; export { default as BlockLink } from './block-link.svg'; +export { default as BlockListItemContainer } from './block-list-item-container.svg'; export { default as BlockListItem } from './block-list-item.svg'; export { default as BlockLoginFormButton } from './block-login-form-button.svg'; export { default as BlockLoginFormContainer } from './block-login-form-container.svg'; From 4df93d98817ab89e2756c1aa6316989059bb948c Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 14:24:19 +0330 Subject: [PATCH 10/40] feat(Archive block): inner blocks support --- packages/blocks/core/CHANGELOG.md | 3 +- .../core/js/wordpress/archives/index.js | 32 +++++++++++++++++++ .../core/php/wordpress/archives/block.php | 28 ++++++++++++++++ .../core/php/wordpress/archives/index.php | 7 ++++ .../icons/block-list-item-marker.svg | 4 +++ packages/icons/js/library-ui/icons/index.js | 1 + 6 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 packages/blocks/core/php/wordpress/archives/block.php create mode 100644 packages/blocks/core/php/wordpress/archives/index.php create mode 100644 packages/icons/js/library-ui/icons/block-list-item-marker.svg diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 5e2a3c92d..38f4b7f94 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -6,7 +6,8 @@ - Added support for the `Home Link Block` by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Submenu Block` and its inner blocks by Blockera. [[🔗 Link](https://community.blockera.ai/feature-request-1rsjg2ck/post/supporting-blocks-inside-navigation-block-MIcY979kIVCxkvU)] - Added support for the `Tag Cloud Block` by Blockera. -- Added support for the `Archives` by Blockera. +- Added support for the `Archives Block` by Blockera. +- Added support for the inner blocks of `Archives` by Blockera. - Added support for the `Calendar` by Blockera. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress/archives/index.js b/packages/blocks/core/js/wordpress/archives/index.js index 1f8803350..9f85d5d9b 100644 --- a/packages/blocks/core/js/wordpress/archives/index.js +++ b/packages/blocks/core/js/wordpress/archives/index.js @@ -1,9 +1,15 @@ // @flow +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Blockera dependencies */ import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; /** * Internal dependencies @@ -13,6 +19,32 @@ import type { BlockType } from '../../type'; export const Archives: BlockType = { name: 'blockeraArchives', targetBlock: 'core/archives', + blockeraInnerBlocks: { + 'elements/item': { + name: 'elements/item', + label: __('Items', 'blockera'), + description: __('Item inside archives list.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, + 'elements/item-marker': { + name: 'elements/item-marker', + label: __('Items Marker', 'blockera'), + description: __('Marker of list items.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, + }, edit: (props) => { return ; }, diff --git a/packages/blocks/core/php/wordpress/archives/block.php b/packages/blocks/core/php/wordpress/archives/block.php new file mode 100644 index 000000000..cef955b54 --- /dev/null +++ b/packages/blocks/core/php/wordpress/archives/block.php @@ -0,0 +1,28 @@ + array_merge( + $args['selectors'] ?? [], + (array) array_merge( + [ + 'blockera/elements/item' => [ + 'root' => 'a', + 'blockeraSpacing' => 'li', + ], + 'blockera/elements/item-marker' => [ + 'root' => 'li::marker', + ], + ], + ) + ), + ] +); diff --git a/packages/blocks/core/php/wordpress/archives/index.php b/packages/blocks/core/php/wordpress/archives/index.php new file mode 100644 index 000000000..f795ee9f6 --- /dev/null +++ b/packages/blocks/core/php/wordpress/archives/index.php @@ -0,0 +1,7 @@ + + + + diff --git a/packages/icons/js/library-ui/icons/index.js b/packages/icons/js/library-ui/icons/index.js index ac1739c45..e9827e657 100644 --- a/packages/icons/js/library-ui/icons/index.js +++ b/packages/icons/js/library-ui/icons/index.js @@ -27,6 +27,7 @@ export { default as BlockImageCaption } from './block-image-caption.svg'; export { default as BlockInput } from './block-input.svg'; export { default as BlockLink } from './block-link.svg'; export { default as BlockListItemContainer } from './block-list-item-container.svg'; +export { default as BlockListItemMarker } from './block-list-item-marker.svg'; export { default as BlockListItem } from './block-list-item.svg'; export { default as BlockLoginFormButton } from './block-login-form-button.svg'; export { default as BlockLoginFormContainer } from './block-login-form-container.svg'; From 2ac41f7a2760ffa98ac7466ceddcefcd12c9cd3c Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 14:43:29 +0330 Subject: [PATCH 11/40] test(Archives Block): inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../test/block.inner-blocks.e2e.cy.js | 106 ++++++++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 38f4b7f94..b6dc5347c 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -20,6 +20,7 @@ - Added automated test for `Home Link Block` to check that the `Back to Parent` navigation buttons work correctly. - Added automated test for `Submenu Block` to check that the `Back to Parent` navigation buttons work correctly. - Added automated test to verify functionality of the `Tag Cloud Block` and its inner blocks. +- Added automated test for `Archives Block` to check its inner blocks work correctly. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js new file mode 100644 index 000000000..6bf2d5061 --- /dev/null +++ b/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js @@ -0,0 +1,106 @@ +/** + * Blockera dependencies + */ +import { + savePage, + createPost, + appendBlocks, + setInnerBlock, + setParentBlock, + setBoxSpacingSide, + redirectToFrontPage, +} from '@blockera/dev-cypress/js/helpers'; + +describe('Archives Block → Inner Blocks', () => { + beforeEach(() => { + createPost(); + }); + + it('Inner blocks existence + CSS selectors in block editor and front-end', () => { + appendBlocks(`\n `); + + // Select target block + cy.getBlock('core/archives').click(); + + // + // 1. Edit Inner Blocks + // + + // + // 1.1. elements/item + // + setInnerBlock('elements/item'); + + // + // 1.1.1. BG color + // + cy.setColorControlValue('BG Color', 'ff0000'); + + cy.getBlock('core/archives') + .first() + .within(() => { + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + + // + // 1.1.2. Padding + // + setBoxSpacingSide('padding-right', 50); + + cy.getBlock('core/archives') + .first() + .within(() => { + cy.get('li') + .first() + .should('have.css', 'padding-right', '50px'); + }); + + // + // 1.2. elements/item-marker + // + setParentBlock(); + setInnerBlock('elements/item-marker'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('Text Color', '00ffdf'); + + cy.getBlock('core/archives') + .first() + .within(() => { + cy.get('li').within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.blockera-block.wp-block-archives').within(() => { + // elements/item + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + cy.get('li').first().should('have.css', 'padding-right', '50px'); + + // elements/item-marker + cy.get('li').within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + }); +}); From 93ebed60406629a57321955e450149451c39f7d4 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:05:18 +0330 Subject: [PATCH 12/40] feat(Page List Block): Improve Inner blocks to make it much more flexible to customize. --- packages/blocks/core/CHANGELOG.md | 1 + .../core/js/wordpress/page-list/index.js | 47 +++++++++++++++++++ .../core/php/wordpress/page-list/block.php | 30 ++++++++++++ .../core/php/wordpress/page-list/index.php | 7 +++ 4 files changed, 85 insertions(+) create mode 100644 packages/blocks/core/php/wordpress/page-list/block.php create mode 100644 packages/blocks/core/php/wordpress/page-list/index.php diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index b6dc5347c..3603996a6 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -9,6 +9,7 @@ - Added support for the `Archives Block` by Blockera. - Added support for the inner blocks of `Archives` by Blockera. - Added support for the `Calendar` by Blockera. +- Enhanced inner blocks of the `Page List Block` for greater customization flexibility. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress/page-list/index.js b/packages/blocks/core/js/wordpress/page-list/index.js index ba6092e7d..a22ed3563 100644 --- a/packages/blocks/core/js/wordpress/page-list/index.js +++ b/packages/blocks/core/js/wordpress/page-list/index.js @@ -1,9 +1,15 @@ // @flow +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Blockera dependencies */ import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; /** * Internal dependencies @@ -13,6 +19,47 @@ import type { BlockType } from '../../type'; export const PageList: BlockType = { name: 'blockeraPageList', targetBlock: 'core/page-list', + blockeraInnerBlocks: { + 'elements/item': { + name: 'elements/item', + label: __('Items', 'blockera'), + description: __('Item inside archives list.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, + 'elements/item-marker': { + name: 'elements/item-marker', + label: __('Items Marker', 'blockera'), + description: __('Marker of list items.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, + 'elements/item-container': { + name: 'elements/item-container', + label: __('Item Container', 'blockera'), + description: __('Container element of each item.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, + }, edit: (props) => { return ; }, diff --git a/packages/blocks/core/php/wordpress/page-list/block.php b/packages/blocks/core/php/wordpress/page-list/block.php new file mode 100644 index 000000000..04248b590 --- /dev/null +++ b/packages/blocks/core/php/wordpress/page-list/block.php @@ -0,0 +1,30 @@ + array_merge( + $args['selectors'] ?? [], + (array) array_merge( + [ + 'blockera/elements/item' => [ + 'root' => 'a', + ], + 'blockera/elements/item-container' => [ + 'root' => 'li', + ], + 'blockera/elements/item-marker' => [ + 'root' => 'li::marker', + ], + ], + ) + ), + ] +); diff --git a/packages/blocks/core/php/wordpress/page-list/index.php b/packages/blocks/core/php/wordpress/page-list/index.php new file mode 100644 index 000000000..d2ab3cb85 --- /dev/null +++ b/packages/blocks/core/php/wordpress/page-list/index.php @@ -0,0 +1,7 @@ + Date: Mon, 16 Sep 2024 16:08:23 +0330 Subject: [PATCH 13/40] test(Page List Block): test for checking inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../test/block.inner-blocks.e2e.cy.js | 116 +++++++++++++++++- 2 files changed, 111 insertions(+), 6 deletions(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 3603996a6..d6af36e7f 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -22,6 +22,7 @@ - Added automated test for `Submenu Block` to check that the `Back to Parent` navigation buttons work correctly. - Added automated test to verify functionality of the `Tag Cloud Block` and its inner blocks. - Added automated test for `Archives Block` to check its inner blocks work correctly. +- Added automated test for `Page List Block` to check its inner blocks work correctly. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/page-list/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/page-list/test/block.inner-blocks.e2e.cy.js index 8387e07db..23fb587db 100644 --- a/packages/blocks/core/js/wordpress/page-list/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/page-list/test/block.inner-blocks.e2e.cy.js @@ -1,20 +1,124 @@ /** * Blockera dependencies */ -import { createPost, appendBlocks } from '@blockera/dev-cypress/js/helpers'; +import { + savePage, + createPost, + appendBlocks, + setInnerBlock, + setParentBlock, + setBoxSpacingSide, + redirectToFrontPage, +} from '@blockera/dev-cypress/js/helpers'; describe('Page List Block → Inner Blocks', () => { beforeEach(() => { createPost(); }); - it('Should not have inner blocks', () => { - appendBlocks(``); + it('Inner blocks existence + CSS selectors in block editor and front-end', () => { + appendBlocks(`\n `); + // Select target block cy.getBlock('core/page-list').click(); - cy.get('.blockera-extension.blockera-extension-inner-blocks').should( - 'not.exist' - ); + // + // 1. Edit Inner Blocks + // + + // + // 1.1. elements/item + // + setInnerBlock('elements/item'); + + // + // 1.1.1. BG color + // + cy.setColorControlValue('BG Color', 'ff0000'); + + cy.getBlock('core/page-list') + .first() + .within(() => { + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + + // + // 1.2. elements/item-marker + // + setParentBlock(); + setInnerBlock('elements/item-marker'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('Text Color', '00ffdf'); + + cy.getBlock('core/page-list') + .first() + .within(() => { + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle( + $el[0], + '::marker' + ); + const markerColor = + marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + + // + // 1.3. elements/item-container + // + setParentBlock(); + setInnerBlock('elements/item-container'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('BG Color', 'ff2020'); + + cy.getBlock('core/page-list') + .first() + .within(() => { + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.blockera-block.wp-block-page-list').within(() => { + // elements/item + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + + // elements/item-container + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + + // elements/item-marker + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); }); }); From dd96aafff172ea30d3dfad16f4ea7f88486a3bc5 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:17:36 +0330 Subject: [PATCH 14/40] feat(Archives Block): improve inner blocks --- .../blocks/core/js/wordpress/archives/index.js | 15 +++++++++++++++ .../blocks/core/php/wordpress/archives/block.php | 10 ++++++---- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/blocks/core/js/wordpress/archives/index.js b/packages/blocks/core/js/wordpress/archives/index.js index 9f85d5d9b..753fd7c5c 100644 --- a/packages/blocks/core/js/wordpress/archives/index.js +++ b/packages/blocks/core/js/wordpress/archives/index.js @@ -44,6 +44,21 @@ export const Archives: BlockType = { force: true, }, }, + 'elements/item-container': { + name: 'elements/item-container', + label: __('Item Container', 'blockera'), + description: __('Container element of each item.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, }, edit: (props) => { return ; diff --git a/packages/blocks/core/php/wordpress/archives/block.php b/packages/blocks/core/php/wordpress/archives/block.php index cef955b54..e0a4c0d1d 100644 --- a/packages/blocks/core/php/wordpress/archives/block.php +++ b/packages/blocks/core/php/wordpress/archives/block.php @@ -14,11 +14,13 @@ $args['selectors'] ?? [], (array) array_merge( [ - 'blockera/elements/item' => [ - 'root' => 'a', - 'blockeraSpacing' => 'li', + 'blockera/elements/item' => [ + 'root' => 'a', ], - 'blockera/elements/item-marker' => [ + 'blockera/elements/item-container' => [ + 'root' => 'li', + ], + 'blockera/elements/item-marker' => [ 'root' => 'li::marker', ], ], From fff2afac7770f00d07c1c62ad674f5f452a73914 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:18:12 +0330 Subject: [PATCH 15/40] test(Archives Block): improve tests to check new container inner block --- .../test/block.inner-blocks.e2e.cy.js | 58 ++++++++++++------- 1 file changed, 38 insertions(+), 20 deletions(-) diff --git a/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js index 6bf2d5061..6469cf50d 100644 --- a/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/archives/test/block.inner-blocks.e2e.cy.js @@ -45,39 +45,51 @@ describe('Archives Block → Inner Blocks', () => { }); // - // 1.1.2. Padding + // 1.2. elements/item-marker + // + setParentBlock(); + setInnerBlock('elements/item-marker'); + + // + // 1.2.1. Text color // - setBoxSpacingSide('padding-right', 50); + cy.setColorControlValue('Text Color', '00ffdf'); cy.getBlock('core/archives') .first() .within(() => { cy.get('li') .first() - .should('have.css', 'padding-right', '50px'); + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle( + $el[0], + '::marker' + ); + const markerColor = + marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); }); // - // 1.2. elements/item-marker + // 1.3. elements/item-container // setParentBlock(); - setInnerBlock('elements/item-marker'); + setInnerBlock('elements/item-container'); // // 1.2.1. Text color // - cy.setColorControlValue('Text Color', '00ffdf'); + cy.setColorControlValue('BG Color', 'ff2020'); cy.getBlock('core/archives') .first() .within(() => { - cy.get('li').within(($el) => { - cy.window().then((win) => { - const marker = win.getComputedStyle($el[0], '::marker'); - const markerColor = marker.getPropertyValue('color'); - expect(markerColor).to.equal('rgb(0, 255, 223)'); - }); - }); + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); }); // @@ -91,16 +103,22 @@ describe('Archives Block → Inner Blocks', () => { cy.get('a') .first() .should('have.css', 'background-color', 'rgb(255, 0, 0)'); - cy.get('li').first().should('have.css', 'padding-right', '50px'); + + // elements/item-container + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); // elements/item-marker - cy.get('li').within(($el) => { - cy.window().then((win) => { - const marker = win.getComputedStyle($el[0], '::marker'); - const markerColor = marker.getPropertyValue('color'); - expect(markerColor).to.equal('rgb(0, 255, 223)'); + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); }); - }); }); }); }); From 16ffcf877149c778760f766c44b8be0c495e83af Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:34:30 +0330 Subject: [PATCH 16/40] feat(List Block): improve inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../blocks/core/js/wordpress/list/index.js | 30 +++++++++++++++++++ .../blocks/core/php/wordpress/list/block.php | 12 +++++++- 3 files changed, 42 insertions(+), 1 deletion(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index d6af36e7f..7d7a371dd 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -10,6 +10,7 @@ - Added support for the inner blocks of `Archives` by Blockera. - Added support for the `Calendar` by Blockera. - Enhanced inner blocks of the `Page List Block` for greater customization flexibility. +- Enhanced inner blocks of the `List Block` for greater customization flexibility. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress/list/index.js b/packages/blocks/core/js/wordpress/list/index.js index c01761348..82d82d25d 100644 --- a/packages/blocks/core/js/wordpress/list/index.js +++ b/packages/blocks/core/js/wordpress/list/index.js @@ -1,9 +1,15 @@ // @flow +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Blockera dependencies */ import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; /** * Internal dependencies @@ -15,6 +21,30 @@ export const List: BlockType = { name: 'blockeraList', targetBlock: 'core/list', blockeraInnerBlocks: { + 'elements/item': { + name: 'elements/item', + label: __('List Items', 'blockera'), + description: __('Items inside list.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, + 'elements/item-marker': { + name: 'elements/item-marker', + label: __('List Items Marker', 'blockera'), + description: __('Marker of list items.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, 'elements/link': sharedInnerBlocks['elements/link'], }, edit: (props) => { diff --git a/packages/blocks/core/php/wordpress/list/block.php b/packages/blocks/core/php/wordpress/list/block.php index 979bbf54e..af9cabd2e 100644 --- a/packages/blocks/core/php/wordpress/list/block.php +++ b/packages/blocks/core/php/wordpress/list/block.php @@ -12,7 +12,17 @@ [ 'selectors' => array_merge( $args['selectors'] ?? [], - blockera_load( 'inners.link', dirname( __DIR__ ) ), + [ + 'blockera/elements/link' => [ + 'root' => 'a:not(.wp-element-button)', + ], + 'blockera/elements/item' => [ + 'root' => 'li', + ], + 'blockera/elements/item-marker' => [ + 'root' => 'li::marker', + ], + ], ), ] ); From bf31a33d68cd3efea447558f49cb87ebc21bbcf4 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:35:41 +0330 Subject: [PATCH 17/40] test(List Block): improve tests to check inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../list/test/block.inner-blocks.e2e.cy.js | 118 +++++++++++++++--- 2 files changed, 105 insertions(+), 14 deletions(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 7d7a371dd..87dc3d648 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -24,6 +24,7 @@ - Added automated test to verify functionality of the `Tag Cloud Block` and its inner blocks. - Added automated test for `Archives Block` to check its inner blocks work correctly. - Added automated test for `Page List Block` to check its inner blocks work correctly. +- Added automated test for `List Block` to check its inner blocks work correctly. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/list/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/list/test/block.inner-blocks.e2e.cy.js index a928d10b5..a49482f15 100644 --- a/packages/blocks/core/js/wordpress/list/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/list/test/block.inner-blocks.e2e.cy.js @@ -2,9 +2,12 @@ * Blockera dependencies */ import { + savePage, createPost, appendBlocks, - openInnerBlocksExtension, + setInnerBlock, + setParentBlock, + redirectToFrontPage, } from '@blockera/dev-cypress/js/helpers'; describe('List Block → Inner Blocks', () => { @@ -12,10 +15,10 @@ describe('List Block → Inner Blocks', () => { createPost(); }); - it('Inner blocks existence', () => { - appendBlocks(`' + it('Inner blocks existence + CSS selectors in block editor and front-end', () => { + appendBlocks(`
    -
  • item 1
    • +
  • item 1 link is here
    • @@ -25,7 +28,7 @@ describe('List Block → Inner Blocks', () => {
  • item 3
-'`); +`); // Select target block cy.getBlock('core/list').click(); @@ -33,16 +36,103 @@ describe('List Block → Inner Blocks', () => { // Switch to parent block cy.getByAriaLabel('Select List').click(); - // open inner block settings - openInnerBlocksExtension(); + // + // 1. Edit Inner Blocks + // - cy.get('.blockera-extension.blockera-extension-inner-blocks').within( - () => { - cy.getByDataTest('elements/link').should('exist'); + // + // 1.1. elements/item + // + setInnerBlock('elements/item'); - // no other item - cy.getByDataTest('core/heading').should('not.exist'); - } - ); + // + // 1.1.1. BG color + // + cy.setColorControlValue('BG Color', 'ff0000'); + + cy.getBlock('core/list') + .first() + .within(() => { + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + + // + // 1.2. elements/item-marker + // + setParentBlock(); + setInnerBlock('elements/item-marker'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('Text Color', '00ffdf'); + + cy.getBlock('core/list') + .first() + .within(() => { + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle( + $el[0], + '::marker' + ); + const markerColor = + marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + + // + // 1.3. elements/link + // + setParentBlock(); + setInnerBlock('elements/link'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('BG Color', 'ff2020'); + + cy.getBlock('core/list') + .first() + .within(() => { + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.blockera-block.wp-block-list').within(() => { + // elements/item + cy.get('li') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + + // elements/link + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + + // elements/item-marker + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); }); }); From 86f57deefcae839e206c7ad513151e04445d003c Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:37:34 +0330 Subject: [PATCH 18/40] feat: improve code by removing extra object merge --- .../core/php/wordpress/archives/block.php | 22 +++++++++---------- .../core/php/wordpress/page-list/block.php | 22 +++++++++---------- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/packages/blocks/core/php/wordpress/archives/block.php b/packages/blocks/core/php/wordpress/archives/block.php index e0a4c0d1d..7bb1d4181 100644 --- a/packages/blocks/core/php/wordpress/archives/block.php +++ b/packages/blocks/core/php/wordpress/archives/block.php @@ -12,19 +12,17 @@ [ 'selectors' => array_merge( $args['selectors'] ?? [], - (array) array_merge( - [ - 'blockera/elements/item' => [ - 'root' => 'a', - ], - 'blockera/elements/item-container' => [ - 'root' => 'li', - ], - 'blockera/elements/item-marker' => [ - 'root' => 'li::marker', - ], + [ + 'blockera/elements/item' => [ + 'root' => 'a', ], - ) + 'blockera/elements/item-container' => [ + 'root' => 'li', + ], + 'blockera/elements/item-marker' => [ + 'root' => 'li::marker', + ], + ], ), ] ); diff --git a/packages/blocks/core/php/wordpress/page-list/block.php b/packages/blocks/core/php/wordpress/page-list/block.php index 04248b590..302296c71 100644 --- a/packages/blocks/core/php/wordpress/page-list/block.php +++ b/packages/blocks/core/php/wordpress/page-list/block.php @@ -12,19 +12,17 @@ [ 'selectors' => array_merge( $args['selectors'] ?? [], - (array) array_merge( - [ - 'blockera/elements/item' => [ - 'root' => 'a', - ], - 'blockera/elements/item-container' => [ - 'root' => 'li', - ], - 'blockera/elements/item-marker' => [ - 'root' => 'li::marker', - ], + [ + 'blockera/elements/item' => [ + 'root' => 'a', ], - ) + 'blockera/elements/item-container' => [ + 'root' => 'li', + ], + 'blockera/elements/item-marker' => [ + 'root' => 'li::marker', + ], + ], ), ] ); From ba64c3d37580e20a1d142835113e35774f328c06 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 16:59:31 +0330 Subject: [PATCH 19/40] feat(List Item Block): improve inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../core/js/wordpress/list-item/index.js | 25 +++++++++++++++++++ .../core/php/wordpress/list-item/block.php | 25 +++++++++++++++++++ .../core/php/wordpress/list-item/index.php | 7 ++++++ 4 files changed, 58 insertions(+) create mode 100644 packages/blocks/core/php/wordpress/list-item/block.php create mode 100644 packages/blocks/core/php/wordpress/list-item/index.php diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 87dc3d648..fc51d5809 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -11,6 +11,7 @@ - Added support for the `Calendar` by Blockera. - Enhanced inner blocks of the `Page List Block` for greater customization flexibility. - Enhanced inner blocks of the `List Block` for greater customization flexibility. +- Enhanced inner blocks of the `List Item Block` for greater customization flexibility. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress/list-item/index.js b/packages/blocks/core/js/wordpress/list-item/index.js index 94679c4d8..f3ddda904 100644 --- a/packages/blocks/core/js/wordpress/list-item/index.js +++ b/packages/blocks/core/js/wordpress/list-item/index.js @@ -1,18 +1,43 @@ // @flow +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Blockera dependencies */ import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; /** * Internal dependencies */ +import sharedInnerBlocks from '../inners/shared'; import type { BlockType } from '../../type'; export const ListItem: BlockType = { name: 'blockeraListItem', targetBlock: 'core/list-item', + blockeraInnerBlocks: { + 'elements/item-marker': { + name: 'elements/item-marker', + label: __('List Item Marker', 'blockera'), + description: __('Marker of list item.', 'blockera'), + icon: ( + + ), + settings: { + force: true, + }, + }, + 'elements/link': sharedInnerBlocks['elements/link'], + }, edit: (props) => { return ; }, diff --git a/packages/blocks/core/php/wordpress/list-item/block.php b/packages/blocks/core/php/wordpress/list-item/block.php new file mode 100644 index 000000000..227ca9012 --- /dev/null +++ b/packages/blocks/core/php/wordpress/list-item/block.php @@ -0,0 +1,25 @@ + array_merge( + $args['selectors'] ?? [], + [ + 'blockera/elements/link' => [ + 'root' => 'a:not(.wp-element-button)', + ], + 'blockera/elements/item-marker' => [ + 'root' => '::marker', + ], + ], + ), + ] +); diff --git a/packages/blocks/core/php/wordpress/list-item/index.php b/packages/blocks/core/php/wordpress/list-item/index.php new file mode 100644 index 000000000..c5765e548 --- /dev/null +++ b/packages/blocks/core/php/wordpress/list-item/index.php @@ -0,0 +1,7 @@ + Date: Mon, 16 Sep 2024 17:00:02 +0330 Subject: [PATCH 20/40] test(List Item Block): improve tests to check inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../test/block.inner-blocks.e2e.cy.js | 88 +++++++++++++++++-- 2 files changed, 82 insertions(+), 7 deletions(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index fc51d5809..9c7f9b8f9 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -26,6 +26,7 @@ - Added automated test for `Archives Block` to check its inner blocks work correctly. - Added automated test for `Page List Block` to check its inner blocks work correctly. - Added automated test for `List Block` to check its inner blocks work correctly. +- Added automated test for `List Item Block` to check its inner blocks work correctly. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js index 0f4062df9..b34acb6b2 100644 --- a/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js @@ -2,9 +2,12 @@ * Blockera dependencies */ import { + savePage, createPost, appendBlocks, - openInnerBlocksExtension, + setInnerBlock, + setParentBlock, + redirectToFrontPage, } from '@blockera/dev-cypress/js/helpers'; describe('List Item Block → Inner Blocks', () => { @@ -12,10 +15,10 @@ describe('List Item Block → Inner Blocks', () => { createPost(); }); - it('Should not have inner blocks', () => { + it('Inner blocks existence + CSS selectors in block editor and front-end', () => { appendBlocks(`
    -
  • item 1
    • +
  • item 1 link is here
    • @@ -28,10 +31,81 @@ describe('List Item Block → Inner Blocks', () => { `); // Select target block - cy.getBlock('core/list').click(); + cy.getBlock('core/list-item').first().click(); - cy.get('.blockera-extension.blockera-extension-inner-blocks').should( - 'not.exist' - ); + // + // 1. Edit Inner Blocks + // + + // + // 1.1. elements/item-marker + // + setInnerBlock('elements/item-marker'); + + // + // 1.1.1. Text color + // + cy.setColorControlValue('Text Color', '00ffdf'); + + cy.getBlock('core/list') + .first() + .within(() => { + cy.get('li') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle( + $el[0], + '::marker' + ); + const markerColor = + marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + + // + // 1.2. elements/link + // + setParentBlock(); + setInnerBlock('elements/link'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('BG Color', 'ff2020'); + + cy.getBlock('core/list') + .first() + .within(() => { + cy.get('a') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.wp-block-list').within(() => { + // elements/link + cy.get('li.blockera-block a') + .first() + .should('have.css', 'background-color', 'rgb(255, 32, 32)'); + + // elements/item-marker + cy.get('li.blockera-block') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); }); }); From b3bd94689ebe66f370b761ac583b08b6b0cb90e3 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 17:19:03 +0330 Subject: [PATCH 21/40] feat(Details Block): improve inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../blocks/core/js/wordpress/details/index.js | 26 +++++++++++++++++++ .../core/php/wordpress/details/block.php | 18 ++++++++++--- 3 files changed, 41 insertions(+), 4 deletions(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 9c7f9b8f9..4e596a222 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -12,6 +12,7 @@ - Enhanced inner blocks of the `Page List Block` for greater customization flexibility. - Enhanced inner blocks of the `List Block` for greater customization flexibility. - Enhanced inner blocks of the `List Item Block` for greater customization flexibility. +- Enhanced inner blocks of the `Details Block` for greater customization flexibility. ### Bug Fixes diff --git a/packages/blocks/core/js/wordpress/details/index.js b/packages/blocks/core/js/wordpress/details/index.js index f5f7cf5bf..28b8efc1b 100644 --- a/packages/blocks/core/js/wordpress/details/index.js +++ b/packages/blocks/core/js/wordpress/details/index.js @@ -1,9 +1,15 @@ // @flow +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + /** * Blockera dependencies */ import { SharedBlockExtension } from '@blockera/editor'; +import { Icon } from '@blockera/icons'; /** * Internal dependencies @@ -15,6 +21,26 @@ export const Details: BlockType = { name: 'blockeraDetails', targetBlock: 'core/details', blockeraInnerBlocks: { + 'elements/title': { + name: 'elements/title', + type: 'title', + label: __('Title', 'blockera'), + description: __('The title of details block.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, + 'elements/title-icon': { + name: 'elements/title-icon', + type: 'title', + label: __('Title Icon', 'blockera'), + description: __('Chevron down icon of title.', 'blockera'), + icon: , + settings: { + force: true, + }, + }, 'core/paragraph': sharedInnerBlocks['core/paragraph'], 'elements/link': sharedInnerBlocks['elements/link'], }, diff --git a/packages/blocks/core/php/wordpress/details/block.php b/packages/blocks/core/php/wordpress/details/block.php index f00dc93b0..c35dc5c96 100644 --- a/packages/blocks/core/php/wordpress/details/block.php +++ b/packages/blocks/core/php/wordpress/details/block.php @@ -20,10 +20,20 @@ ), 'selectors' => array_merge( $args['selectors'] ?? [], - (array) array_merge( - blockera_load( 'inners.link', dirname( __DIR__ ) ), - blockera_load( 'inners.paragraph', dirname( __DIR__ ) ), - ) + [ + 'blockera/elements/title' => [ + 'root' => 'summary', + ], + 'blockera/elements/title-icon' => [ + 'root' => 'summary::marker', + ], + 'blockera/elements/link' => [ + 'root' => 'a:not(.wp-element-button)', + ], + 'blockera/core/paragraph' => [ + 'root' => 'p', + ], + ], ), ] ); From 53b302f892b31039f5c348be021e14a894292711 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Mon, 16 Sep 2024 17:19:54 +0330 Subject: [PATCH 22/40] test(Details Block): improve tests to check inner blocks --- packages/blocks/core/CHANGELOG.md | 1 + .../details/test/block.inner-blocks.e2e.cy.js | 87 ++++++++++++++++--- 2 files changed, 77 insertions(+), 11 deletions(-) diff --git a/packages/blocks/core/CHANGELOG.md b/packages/blocks/core/CHANGELOG.md index 4e596a222..7185e3dc6 100644 --- a/packages/blocks/core/CHANGELOG.md +++ b/packages/blocks/core/CHANGELOG.md @@ -28,6 +28,7 @@ - Added automated test for `Page List Block` to check its inner blocks work correctly. - Added automated test for `List Block` to check its inner blocks work correctly. - Added automated test for `List Item Block` to check its inner blocks work correctly. +- Added automated test for `Details Block` to check its inner blocks work correctly. ### Miscellaneous diff --git a/packages/blocks/core/js/wordpress/details/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/details/test/block.inner-blocks.e2e.cy.js index 11caf6a82..6d9e8f5ce 100644 --- a/packages/blocks/core/js/wordpress/details/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/details/test/block.inner-blocks.e2e.cy.js @@ -2,9 +2,12 @@ * Blockera dependencies */ import { + savePage, createPost, appendBlocks, - openInnerBlocksExtension, + setInnerBlock, + setParentBlock, + redirectToFrontPage, } from '@blockera/dev-cypress/js/helpers'; describe('Details Block → Inner Blocks', () => { @@ -22,17 +25,79 @@ describe('Details Block → Inner Blocks', () => { // Select target block cy.getBlock('core/details').click(); - // open inner block settings - openInnerBlocksExtension(); + // + // 1. Edit Inner Blocks + // - cy.get('.blockera-extension.blockera-extension-inner-blocks').within( - () => { - cy.getByDataTest('elements/link').should('exist'); - cy.getByDataTest('core/paragraph').should('exist'); + // + // 1.1. elements/item + // + setInnerBlock('elements/title'); - // no other item - cy.getByDataTest('core/heading').should('not.exist'); - } - ); + // + // 1.1.1. BG color + // + cy.setColorControlValue('BG Color', 'ff0000'); + + cy.getBlock('core/details') + .first() + .within(() => { + cy.get('summary') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + }); + + // + // 1.2. elements/title-cion + // + setParentBlock(); + setInnerBlock('elements/title-icon'); + + // + // 1.2.1. Text color + // + cy.setColorControlValue('Text Color', '00ffdf'); + + cy.getBlock('core/details') + .first() + .within(() => { + cy.get('summary') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle( + $el[0], + '::marker' + ); + const markerColor = + marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); + + // + // 2. Assert inner blocks selectors in front end + // + savePage(); + redirectToFrontPage(); + + cy.get('.blockera-block.wp-block-details').within(() => { + // elements/title + cy.get('summary') + .first() + .should('have.css', 'background-color', 'rgb(255, 0, 0)'); + + // elements/title-icon + cy.get('summary') + .first() + .within(($el) => { + cy.window().then((win) => { + const marker = win.getComputedStyle($el[0], '::marker'); + const markerColor = marker.getPropertyValue('color'); + expect(markerColor).to.equal('rgb(0, 255, 223)'); + }); + }); + }); }); }); From a42c0bba2dd09e39a32686d9b745137369e8c65b Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 11:54:08 +0330 Subject: [PATCH 23/40] fix: list-item block item-marker inner root selector --- packages/blocks/core/php/wordpress/list-item/block.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/blocks/core/php/wordpress/list-item/block.php b/packages/blocks/core/php/wordpress/list-item/block.php index 227ca9012..1f8be23f1 100644 --- a/packages/blocks/core/php/wordpress/list-item/block.php +++ b/packages/blocks/core/php/wordpress/list-item/block.php @@ -17,7 +17,7 @@ 'root' => 'a:not(.wp-element-button)', ], 'blockera/elements/item-marker' => [ - 'root' => '::marker', + 'root' => '&::marker', ], ], ), From 9704238f71d1914caa9b07af60641baa8a67a30a Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 11:56:05 +0330 Subject: [PATCH 24/40] feat: improved getNormalizedSelector api - write new test suites for that --- packages/editor/CHANGELOG.md | 2 + .../get-compatible-block-css-selector.js | 252 ++++++++++++------ .../test/get-normalized-selector.spec.js | 218 +++++++++++++++ 3 files changed, 386 insertions(+), 86 deletions(-) create mode 100644 packages/editor/js/style-engine/test/get-normalized-selector.spec.js diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index ae842a142..9ef711c78 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -19,7 +19,9 @@ ### Improvements - Design of post preview link in header improved. +- Enhanced the getNormalizedSelector API for better performance and functionality. ### Automated Tests: - Completed E2E tests to verify the functionality of all advanced states in Flex Layout. - Conducted WP data compatibility test for the Spacer Block to ensure correct functionality. +- Added new test suites to ensure the robustness of the getNormalizedSelector API. diff --git a/packages/editor/js/style-engine/get-compatible-block-css-selector.js b/packages/editor/js/style-engine/get-compatible-block-css-selector.js index 1d62ce18d..c1de6b656 100644 --- a/packages/editor/js/style-engine/get-compatible-block-css-selector.js +++ b/packages/editor/js/style-engine/get-compatible-block-css-selector.js @@ -21,6 +21,149 @@ import type { NormalizedSelectorProps } from './types'; import { isNormalState } from '../extensions/components'; import { getBlockCSSSelector } from './get-block-css-selector'; +/** + * Generates a CSS selector based on the provided state, suffix, and whether the block is an inner block or outer block. + * It also accounts for customized pseudo-classes and normal/non-normal states. + * Additionally, supports selectors starting with '&', which are replaced with the root selector. + * + * @param {string} selector - The base CSS selector string, can be a comma-separated list of selectors. + * @param {Object} options - Configuration object for generating the selector. + * @param {TStates} options.state - The current state of the block (e.g., 'normal', 'hover', 'active'). + * @param {string} options.suffixClass - A suffix to append to the selector (e.g., '--modified'). + * @param {TStates} [options.masterState] - The state of the parent/master block if applicable. + * @param {string} options.rootSelector - The root block selector used when dealing with inner blocks. + * @param {function(): TStates} options.getInnerState - Function that returns the current state of the inner block. + * @param {function(): TStates} options.getMasterState - Function that returns the current state of the master block. + * @param {boolean} [options.fromInnerBlock=false] - A flag indicating if the current block is an inner block. + * @param {Array} options.customizedPseudoClasses - Array of customized pseudo-classes that should not be altered (e.g., 'parent-class', 'custom-class'). + * + * @return {string} - The final normalized CSS selector string, adjusted based on the state, suffix, and inner/outer block context. + * + * @example + * // Normal state with suffix class + * normalizedSelector('.my-element', { + * state: 'normal', + * suffixClass: '--modified', + * rootSelector: '.root', + * getInnerState: () => 'normal', + * getMasterState: () => 'normal', + * customizedPseudoClasses: ['parent-class', 'custom-class', 'parent-hover'], + * }); + * // Returns: '.my-element--modified' + * + * @example + * // Non-normal state with inner block and master state + * normalizedSelector('.my-element', { + * state: 'hover', + * masterState: 'active', + * suffixClass: '--modified', + * rootSelector: '.root', + * getInnerState: () => 'hover', + * getMasterState: () => 'active', + * fromInnerBlock: true, + * customizedPseudoClasses: ['parent-class', 'custom-class', 'parent-hover'], + * }); + * // Returns: '.root:active .my-element--modified:hover' + */ +export const getNormalizedSelector = ( + selector: string, + options: { + state: TStates, + suffixClass: string, + masterState?: TStates, + rootSelector: string, + fromInnerBlock?: boolean, + getInnerState: () => TStates, + getMasterState: () => TStates, + customizedPseudoClasses: Array, + } +): string => { + if (isEmpty(selector)) { + return selector; + } + + const { + state, + suffixClass, + masterState, + rootSelector, + getInnerState, + getMasterState, + fromInnerBlock = false, + customizedPseudoClasses, + } = options; + const parsedSelectors = selector.split(','); + + // Helper function to check if a state is normal. + const isNormal = (state: TStates) => isNormalState(state); + + // Replace '&' with the rootSelector and trim unnecessary spaces + const processAmpersand = (selector: string): string => { + return selector.trim().startsWith('&') + ? `${rootSelector}${selector.trim().substring(1)}` + : selector.trim(); + }; + + // Helper to generate the appropriate selector string based on various states. + const generateSelector = (selector: string): string => { + const innerState = getInnerState(); + const masterStateType = getMasterState(); + + const isStateNormal = isNormal(state); + const isMasterNormal = masterState && isNormal(masterState); + + // Handle inner block cases. + if (fromInnerBlock) { + if (masterState && !isMasterNormal) { + if ( + !isStateNormal && + state === innerState && + masterState === masterStateType + ) { + return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + } + return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}`; + } + + if (!isStateNormal && state === innerState) { + return `${rootSelector} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + } + + return `${rootSelector} ${selector}${suffixClass}`; + } + + const isMasterStateTypeNormal = isNormal(masterStateType); + + // Handle non-normal states for outer block. + if (!isStateNormal) { + if (!isMasterStateTypeNormal && state === masterStateType) { + return `${selector}${suffixClass}:${state}, ${selector}${suffixClass}`; + } + return `${selector}${suffixClass}:${state}`; + } + + // Default case: normal state. + return `${selector}${suffixClass}`; + }; + + // Handle single selector case. + if (parsedSelectors.length === 1) { + const processedSelector = processAmpersand(selector); + return customizedPseudoClasses.includes(state) + ? processedSelector + : generateSelector(processedSelector); + } + + // Handle multiple selectors. + return parsedSelectors + .map((selector) => { + const processedSelector = processAmpersand(selector); + return customizedPseudoClasses.includes(state) + ? processedSelector + : generateSelector(processedSelector); + }) + .join(', '); +}; export const getCompatibleBlockCssSelector = ({ state, query, @@ -95,83 +238,6 @@ export const getCompatibleBlockCssSelector = ({ }; }; - const normalizedSelector = ( - fromInnerBlock: boolean = false - ): string => { - const parsedSelectors = _selector.split(','); - const generateSelector = (selector: string): string => { - const innerStateType = getInnerState(); - const masterStateType = getMasterState(); - - // Current Block is inner block. - if (fromInnerBlock) { - // Assume inner block inside pseudo-state of master. - if (masterState && !isNormalState(masterState)) { - if (!isNormalState(state)) { - if ( - !isNormalState(masterStateType) && - masterState === masterStateType && - !isNormalState(innerStateType) && - state === innerStateType - ) { - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; - } - - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}`; - } - - return `${rootSelector}:${masterState} ${selector}${suffixClass}`; - } - - if (!isNormalState(state) && masterState) { - if ( - !isNormalState(innerStateType) && - state === innerStateType - ) { - return `${rootSelector} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; - } - - return `${rootSelector} ${selector}${suffixClass}:${state}`; - } - - return `${rootSelector} ${selector}${suffixClass}`; - } - - // Recieved state is not normal. - if (!isNormalState(state)) { - // Assume active master block state is not normal. - if ( - !isNormalState(masterStateType) && - state === masterStateType - ) { - return `${selector}${suffixClass}:${state}, ${selector}${suffixClass}`; - } - - return `${selector}${suffixClass}:${state}`; - } - - return `${selector}${suffixClass}`; - }; - - if (1 === parsedSelectors.length) { - if (customizedPseudoClasses.includes(state)) { - return _selector; - } - - return generateSelector(_selector); - } - - return parsedSelectors - .map((selector: string): string => { - if (customizedPseudoClasses.includes(state)) { - return selector; - } - - return generateSelector(selector); - }) - .join(', '); - }; - // Assume selector is invalid. if (!_selector) { // we try to use parent or custom css class if exists! @@ -215,7 +281,18 @@ export const getCompatibleBlockCssSelector = ({ // TODO: break; default: - registerSelector(normalizedSelector(true)); + registerSelector( + getNormalizedSelector(_selector, { + state, + suffixClass, + masterState, + rootSelector, + getInnerState, + getMasterState, + fromInnerBlock: false, + customizedPseudoClasses, + }) + ); break; } } @@ -230,7 +307,17 @@ export const getCompatibleBlockCssSelector = ({ // TODO: break; default: - registerSelector(normalizedSelector()); + registerSelector( + getNormalizedSelector(_selector, { + state, + suffixClass, + masterState, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }) + ); break; } } @@ -370,13 +457,6 @@ const appendRootBlockCssSelector = (selector: string, root: string): string => { // Assume received selector is html tag name! if (!/\.|\s/.test(selector)) { - const regexp = /is-\w+-preview/g; - - // Assume recieved root selector inside other breakpoint. - if (regexp.test(root)) { - return root.replace('-preview ', `-preview ${selector}`); - } - return `${selector}${root}`; } diff --git a/packages/editor/js/style-engine/test/get-normalized-selector.spec.js b/packages/editor/js/style-engine/test/get-normalized-selector.spec.js new file mode 100644 index 000000000..8b62dc7c6 --- /dev/null +++ b/packages/editor/js/style-engine/test/get-normalized-selector.spec.js @@ -0,0 +1,218 @@ +import { getNormalizedSelector } from '../get-compatible-block-css-selector'; + +describe('getNormalizedSelector', () => { + const rootSelector = '.my-root'; + const suffixClass = '--modified'; + const customizedPseudoClasses = [ + 'parent-class', + 'custom-class', + 'parent-hover', + ]; + + const getInnerState = jest.fn(); + const getMasterState = jest.fn(); + + afterEach(() => { + jest.clearAllMocks(); + }); + + test('should return the correct selector when state is normal', () => { + const state = 'normal'; + getInnerState.mockReturnValue('normal'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('.my-element', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }); + + expect(result).toBe('.my-element--modified'); + }); + + test('should handle non-normal state with master state not normal and fromInnerBlock=true', () => { + const state = 'hover'; + const masterState = 'active'; + getInnerState.mockReturnValue('hover'); + getMasterState.mockReturnValue('active'); + + const result = getNormalizedSelector('.my-element', { + state, + suffixClass, + masterState, + rootSelector, + getInnerState, + getMasterState, + fromInnerBlock: true, + customizedPseudoClasses, + }); + + expect(result).toBe( + '.my-root:active .my-element--modified:hover, .my-root .my-element--modified' + ); + }); + + test('should handle customized pseudo-classes', () => { + const state = 'custom-class'; + getInnerState.mockReturnValue('normal'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('.my-element', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }); + + // Should return the original selector without modifications + expect(result).toBe('.my-element'); + }); + + test('should handle multiple selectors', () => { + const state = 'hover'; + getInnerState.mockReturnValue('normal'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('.my-element, .another-element', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }); + + expect(result).toBe( + '.my-element--modified:hover, .another-element--modified:hover' + ); + }); + + test('should handle when inner state matches state', () => { + const state = 'hover'; + getInnerState.mockReturnValue('hover'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('.my-element', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + fromInnerBlock: true, + customizedPseudoClasses, + }); + + expect(result).toBe( + '.my-root .my-element--modified:hover, .my-root .my-element--modified' + ); + }); + + test('should return unmodified selector when state is a customized pseudo-class', () => { + const state = 'parent-hover'; + getInnerState.mockReturnValue('normal'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('.my-element', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }); + + expect(result).toBe('.my-element'); + }); + + test('should handle empty selector gracefully', () => { + const state = 'hover'; + getInnerState.mockReturnValue('hover'); + getMasterState.mockReturnValue('normal'); + + const result = getNormalizedSelector('', { + state, + suffixClass, + rootSelector, + getInnerState, + getMasterState, + customizedPseudoClasses, + }); + + expect(result).toBe(''); + }); +}); + +describe("getNormalizedSelector - supports selectors starting with '&'", () => { + const mockGetInnerState = jest.fn((): TStates => 'normal'); + const mockGetMasterState = jest.fn((): TStates => 'normal'); + + const defaultOptions = { + state: 'normal', + suffixClass: '--modified', + rootSelector: '.root', + getInnerState: mockGetInnerState, + getMasterState: mockGetMasterState, + fromInnerBlock: false, + customizedPseudoClasses: [ + 'parent-class', + 'custom-class', + 'parent-hover', + ], + }; + + beforeEach(() => { + mockGetInnerState.mockClear(); + mockGetMasterState.mockClear(); + }); + + test('should replace "&" with rootSelector for "&::marker"', () => { + const result = getNormalizedSelector('&::marker', defaultOptions); + expect(result).toBe('.root::marker--modified'); + }); + + test('should replace "&" with rootSelector for "&.test"', () => { + const result = getNormalizedSelector('&.test', defaultOptions); + expect(result).toBe('.root.test--modified'); + }); + + test('should handle normal state without "&" prefix', () => { + const result = getNormalizedSelector('.my-element', defaultOptions); + expect(result).toBe('.my-element--modified'); + }); + + test('should handle multiple selectors with "&" prefix', () => { + const result = getNormalizedSelector( + '&.test, &::before', + defaultOptions + ); + expect(result).toBe('.root.test--modified, .root::before--modified'); + }); + + test('should not alter pseudo-classes from customizedPseudoClasses', () => { + const options = { + ...defaultOptions, + state: 'hover', + }; + + const result = getNormalizedSelector('&.test', options); + expect(result).toBe('.root.test--modified:hover'); + }); + + test('should handle empty selector gracefully', () => { + const result = getNormalizedSelector('', defaultOptions); + expect(result).toBe(''); // Handles empty string. + }); + + test('should handle multiple selectors with a mix of normal and & selectors', () => { + const result = getNormalizedSelector( + '.my-element, &.test', + defaultOptions + ); + expect(result).toBe('.my-element--modified, .root.test--modified'); + }); +}); From 7e3d52e5d7b0727912f8939ad9cd1c812d5b3909 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 11:58:32 +0330 Subject: [PATCH 25/40] fix: update the WordPress block list data --- packages/blocks/core/js/wordpress-blocks-list.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index 49ae8621a..8a1cdfd5c 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -2,9 +2,9 @@ "$schema": "./schemas/blocks.schema.json", "data": { "total": 93, - "supported": 75, - "soft-supported": 89, - "not-supported": 4, + "supported": 77, + "soft-supported": 91, + "not-supported": 2, "no-need-to-support": 14 }, "supported": [ From 66496bf4e313d79dc68600b6d09ba055f1e73020 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Tue, 17 Sep 2024 12:37:30 +0330 Subject: [PATCH 26/40] fix: blocks list JSON --- packages/blocks/core/js/wordpress-blocks-list.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/blocks/core/js/wordpress-blocks-list.json b/packages/blocks/core/js/wordpress-blocks-list.json index 8a1cdfd5c..def23e629 100644 --- a/packages/blocks/core/js/wordpress-blocks-list.json +++ b/packages/blocks/core/js/wordpress-blocks-list.json @@ -2,9 +2,9 @@ "$schema": "./schemas/blocks.schema.json", "data": { "total": 93, - "supported": 77, - "soft-supported": 91, - "not-supported": 2, + "supported": 78, + "soft-supported": 92, + "not-supported": 1, "no-need-to-support": 14 }, "supported": [ @@ -319,6 +319,10 @@ { "name": "core/calendar", "title": "Calendar" + }, + { + "name": "core/tag-cloud", + "title": "Tag Cloud" } ], "no-need-to-support": [ @@ -398,10 +402,6 @@ "name": "core/navigation", "title": "Navigation", "note": "Advanced editor setting panel compatibility needed." - }, - { - "name": "core/tag-cloud", - "title": "Tag Cloud" } ] } From f6014a5f46077a6a7fc3390324a368d65dd26178 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 18:50:50 +0330 Subject: [PATCH 27/40] test: pass getNormalizedSelector tests --- .../get-compatible-block-css-selector.js | 56 +++++++++++-------- .../test/get-normalized-selector.spec.js | 1 + 2 files changed, 33 insertions(+), 24 deletions(-) diff --git a/packages/editor/js/style-engine/get-compatible-block-css-selector.js b/packages/editor/js/style-engine/get-compatible-block-css-selector.js index c1de6b656..aa164fb76 100644 --- a/packages/editor/js/style-engine/get-compatible-block-css-selector.js +++ b/packages/editor/js/style-engine/get-compatible-block-css-selector.js @@ -94,9 +94,6 @@ export const getNormalizedSelector = ( } = options; const parsedSelectors = selector.split(','); - // Helper function to check if a state is normal. - const isNormal = (state: TStates) => isNormalState(state); - // Replace '&' with the rootSelector and trim unnecessary spaces const processAmpersand = (selector: string): string => { return selector.trim().startsWith('&') @@ -106,43 +103,53 @@ export const getNormalizedSelector = ( // Helper to generate the appropriate selector string based on various states. const generateSelector = (selector: string): string => { - const innerState = getInnerState(); + const innerStateType = getInnerState(); const masterStateType = getMasterState(); - const isStateNormal = isNormal(state); - const isMasterNormal = masterState && isNormal(masterState); - - // Handle inner block cases. + // Current Block is inner block. if (fromInnerBlock) { - if (masterState && !isMasterNormal) { + // Assume inner block inside pseudo-state of master. + if (masterState && !isNormalState(masterState)) { + if (!isNormalState(state)) { + if ( + !isNormalState(masterStateType) && + masterState === masterStateType && + !isNormalState(innerStateType) && + state === innerStateType + ) { + return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + } + + return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}`; + } + + return `${rootSelector}:${masterState} ${selector}${suffixClass}`; + } + + if (!isNormalState(state) && masterState) { if ( - !isStateNormal && - state === innerState && - masterState === masterStateType + !isNormalState(innerStateType) && + state === innerStateType ) { - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + return `${rootSelector} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; } - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}`; - } - if (!isStateNormal && state === innerState) { - return `${rootSelector} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + return `${rootSelector} ${selector}${suffixClass}:${state}`; } return `${rootSelector} ${selector}${suffixClass}`; } - const isMasterStateTypeNormal = isNormal(masterStateType); - - // Handle non-normal states for outer block. - if (!isStateNormal) { - if (!isMasterStateTypeNormal && state === masterStateType) { + // Recieved state is not normal. + if (!isNormalState(state)) { + // Assume active master block state is not normal. + if (!isNormalState(masterStateType) && state === masterStateType) { return `${selector}${suffixClass}:${state}, ${selector}${suffixClass}`; } + return `${selector}${suffixClass}:${state}`; } - // Default case: normal state. return `${selector}${suffixClass}`; }; @@ -164,6 +171,7 @@ export const getNormalizedSelector = ( }) .join(', '); }; + export const getCompatibleBlockCssSelector = ({ state, query, @@ -289,7 +297,7 @@ export const getCompatibleBlockCssSelector = ({ rootSelector, getInnerState, getMasterState, - fromInnerBlock: false, + fromInnerBlock: true, customizedPseudoClasses, }) ); diff --git a/packages/editor/js/style-engine/test/get-normalized-selector.spec.js b/packages/editor/js/style-engine/test/get-normalized-selector.spec.js index 8b62dc7c6..94a7ccf4e 100644 --- a/packages/editor/js/style-engine/test/get-normalized-selector.spec.js +++ b/packages/editor/js/style-engine/test/get-normalized-selector.spec.js @@ -104,6 +104,7 @@ describe('getNormalizedSelector', () => { getInnerState, getMasterState, fromInnerBlock: true, + masterState: 'normal', customizedPseudoClasses, }); From eda22bd4c9ba803496eee423ab3a1be516d31aa1 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 18:52:09 +0330 Subject: [PATCH 28/40] test: update test to detect real hover --- .../extensions/libs/block-states/test/block-states.e2e.cy.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/editor/js/extensions/libs/block-states/test/block-states.e2e.cy.js b/packages/editor/js/extensions/libs/block-states/test/block-states.e2e.cy.js index be8e44908..f31b68559 100644 --- a/packages/editor/js/extensions/libs/block-states/test/block-states.e2e.cy.js +++ b/packages/editor/js/extensions/libs/block-states/test/block-states.e2e.cy.js @@ -427,10 +427,7 @@ describe('Block State E2E Test', () => { // Real hover. cy.getIframeBody() .find(`#block-${getBlockClientId(data)}`) - .realHover(); - - cy.getIframeBody() - .find(`#block-${getBlockClientId(data)}:hover`) + .realHover() .should('have.css', 'width', '100px'); // to stop hover. From e094f1e97793e5a159e87c54f468fe98f0f7f717 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 18:52:44 +0330 Subject: [PATCH 29/40] test: pass test with set delay with wait api --- .../js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js index b34acb6b2..166fd43b5 100644 --- a/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/list-item/test/block.inner-blocks.e2e.cy.js @@ -53,6 +53,8 @@ describe('List Item Block → Inner Blocks', () => { cy.get('li') .first() .within(($el) => { + cy.wait(2000); + cy.window().then((win) => { const marker = win.getComputedStyle( $el[0], From fa77bcbeb220fe90b58cda7b1472d92ce3f6604d Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 18:55:41 +0330 Subject: [PATCH 30/40] refactor: server style engine - improved, clean coded, and support & ampersand to create selectors --- packages/editor/php/StyleEngine.php | 68 ++++--- packages/editor/php/helpers.php | 183 ++++++++++++------ .../StyleEngine/block-state-selectors.php | 111 ----------- .../inner-block-state-selectors.php | 64 ++++++ packages/editor/php/tests/TestHelpers.php | 92 +++++++++ 5 files changed, 326 insertions(+), 192 deletions(-) create mode 100644 packages/editor/php/tests/Fixtures/StyleEngine/inner-block-state-selectors.php diff --git a/packages/editor/php/StyleEngine.php b/packages/editor/php/StyleEngine.php index eb281938c..3c6212d9e 100644 --- a/packages/editor/php/StyleEngine.php +++ b/packages/editor/php/StyleEngine.php @@ -3,6 +3,7 @@ namespace Blockera\Editor; use Blockera\Editor\StyleDefinitions\BaseStyleDefinition; +use Blockera\Exceptions\BaseException; /** * Class StyleEngine generating css style for any state of breakpoints with any properties. @@ -111,6 +112,12 @@ public function __construct( array $block, string $fallbackSelector, array $styl */ public function getStylesheet(): string { + // Validation: check sets anything ... + if ( empty( $this->getSettings() ) ) { + + return ''; + } + $breakpointsCssRules = array_filter( array_map( [ $this, 'prepareBreakpointStyles' ], blockera_core_config( 'breakpoints.list' ) ), 'blockera_get_filter_empty_array_item' @@ -182,10 +189,13 @@ protected function prepareBreakpointStyles( array $breakpoint ): string { */ protected function getStateCssRules( string $breakpoint ): array { + // Imagine blockera block states stack is empty. if ( empty( $this->settings['blockeraBlockStates'] ) ) { + // We should just prepare normal state styles because not exists any other states. $css_rules = $this->prepareStateStyles( 'normal', blockera_get_base_breakpoint() ); + // Exclude empty $css_rules. if ( empty( $css_rules ) ) { return []; @@ -194,6 +204,7 @@ protected function getStateCssRules( string $breakpoint ): array { return [ $css_rules ]; } + // We should process any supported pseudo classes by blockera to prepare each state styles. return array_filter( array_map( function ( string $state ) use ( $breakpoint ): array { @@ -218,12 +229,33 @@ protected function prepareStateStyles( string $pseudoClass, string $breakpoint ) $this->pseudo_state = $pseudoClass; - $blockCss = array_map( [ $this, 'generateBlockCss' ], $this->definitions ); + $selectors = blockera_get_block_state_selectors( + blockera_get_block_type_property( $this->block['blockName'], 'selectors' ), + [ + 'is-inner-block' => false, + 'block-type' => 'master', + 'fallback' => $this->selector, + 'master-block-state' => $this->pseudo_state, + 'pseudo-class' => $this->pseudo_state, + 'block-settings' => $this->getSettings(), + ] + ); + + $style_engine = $this; + + // Prepare generated block css by supported each of style definitions. + $block_css = array_map( + static function ( BaseStyleDefinition $definition ) use ( $selectors, $style_engine ): array { + + return $style_engine->generateBlockCss( $definition, $selectors ); + }, + $this->definitions + ); return $this->normalizeCssRules( blockera_convert_css_declarations_to_css_valid_rules( blockera_combine_css( - array_values( array_filter( $blockCss, 'blockera_get_filter_empty_array_item' ) ) + array_values( array_filter( $block_css, 'blockera_get_filter_empty_array_item' ) ) ) ) ); @@ -233,32 +265,16 @@ protected function prepareStateStyles( string $pseudoClass, string $breakpoint ) * Generating current block css styles. * * @param BaseStyleDefinition $definition the style definition instance. + * @param array $selectors the available css selectors in current block. * * @return array The array of collection of selector and declaration. */ - protected function generateBlockCss( BaseStyleDefinition $definition ): array { + protected function generateBlockCss( BaseStyleDefinition $definition, array $selectors ): array { $this->definition = $definition; // get current block settings. $settings = $this->getSettings(); - if ( empty( $settings ) ) { - - return []; - } - - $selectors = blockera_get_block_state_selectors( - blockera_get_block_type_property( $this->block['blockName'], 'selectors' ), - [ - 'is-inner-block' => false, - 'block-type' => 'master', - 'block-settings' => $settings, - 'fallback' => $this->selector, - 'master-block-state' => $this->pseudo_state, - 'pseudo-class' => $this->pseudo_state, - ] - ); - $this->definition->flushDeclarations(); $this->configureDefinition( $this->definition ); $this->definition->setSettings( $settings ); @@ -266,8 +282,10 @@ protected function generateBlockCss( BaseStyleDefinition $definition ): array { $cssRules = $this->definition->getCssRules(); + // Validation: Check if sets blockera inner blocks? if ( ! empty( $settings['blockeraInnerBlocks'] ) ) { + // Preparing inner blocks css ... $cssRules = array_merge( $cssRules, blockera_array_flat( @@ -293,6 +311,8 @@ protected function generateBlockCss( BaseStyleDefinition $definition ): array { * @param string $blockType the block type of available inner block. * @param string $pseudoState the pseudo state of inner block type. * + * @throws BaseException Exception for invalid selector. + * * @return array the generated css rules for inner blocks in current state. */ protected function generateInnerBlockCss( array $settings, string $blockType, string $pseudoState = '' ): array { @@ -302,11 +322,10 @@ protected function generateInnerBlockCss( array $settings, string $blockType, st return []; } - // Inner block status set TRUE. - $selectors = blockera_get_block_state_selectors( + // Preparing current inner block available selectors. + $selectors = blockera_get_inner_block_state_selectors( blockera_get_block_type_property( $this->block['blockName'], 'selectors' ), [ - 'is-inner-block' => true, 'block-type' => $blockType, 'fallback' => $this->selector, 'master-block-state' => $this->pseudo_state, @@ -315,7 +334,8 @@ protected function generateInnerBlockCss( array $settings, string $blockType, st ] ); - $selector_id = blockera_append_blockera_block_prefix( $blockType ); + // Get normalized blockera inner block identify. + $selector_id = blockera_get_normalized_inner_block_id( $blockType ); // Exclude inner blocks styles when hasn't any selectors for this context. if ( empty( $selectors[ $selector_id ] ) ) { diff --git a/packages/editor/php/helpers.php b/packages/editor/php/helpers.php index ff733f289..add6e8235 100644 --- a/packages/editor/php/helpers.php +++ b/packages/editor/php/helpers.php @@ -1,5 +1,7 @@ $block_type, - 'pseudo-class' => $pseudo_class, - 'is-inner-block' => $is_inner_block, - 'block-settings' => $block_settings, - ] = $args; + // Validation: check block type name is set? + if ( empty( $args['block-type'] ) ) { + + return []; + } // Provide fallback css selector to use this when $selectors is empty. if ( empty( $selectors['fallback'] ) && ! empty( $args['fallback'] ) ) { @@ -132,34 +136,57 @@ function blockera_get_block_state_selectors( array $selectors, array $args = [] unset( $args['fallback'] ); } - // Handle inner blocks selectors based on recieved state. - if ( $is_inner_block ) { + $inner_block_id = blockera_get_normalized_inner_block_id( $args['block-type'] ); - $inner_block_id = blockera_append_blockera_block_prefix( $block_type ); + // Validate inner block type. + if ( empty( $selectors[ $inner_block_id ] ) ) { - // Validate inner block type. - if ( empty( $selectors[ $inner_block_id ] ) ) { + return $selectors; + } - return $selectors; - } + $innerBlockSelectors = array_merge( + [ + 'fallback' => $selectors['fallback'] ?? '', + 'parentRoot' => $selectors['root'] ?? $selectors['fallback'] ?? '', + ], + $selectors[ $inner_block_id ], + ); - $innerBlockSelectors = array_merge( - [ - 'fallback' => $selectors['fallback'] ?? '', - 'parentRoot' => $selectors['root'] ?? $selectors['fallback'] ?? '', - ], - $selectors[ $inner_block_id ], - ); + $selectors[ $inner_block_id ] = blockera_get_normalized_inner_block_selectors( $innerBlockSelectors, $args ); - $selectors[ $inner_block_id ] = blockera_get_inner_block_state_selectors( $innerBlockSelectors, $args ); + // Delete custom fallback and parentRoot selector of inner block list. + unset( + $selectors[ $inner_block_id ]['fallback'], + $selectors[ $inner_block_id ]['parentRoot'] + ); - // Delete custom fallback and parentRoot selector of inner block list. - unset( - $selectors[ $inner_block_id ]['fallback'], - $selectors[ $inner_block_id ]['parentRoot'] - ); + return $selectors; + } +} - return $selectors; +if ( ! function_exists( 'blockera_get_block_state_selectors' ) ) { + + /** + * Retrieve block state selectors. + * + * @param array $selectors the recieved selectors list. + * @param array $args the extra arguments to generate unique css selectors. + * + * @return array the unique selectors list. + */ + function blockera_get_block_state_selectors( array $selectors, array $args = [] ): array { + + [ + 'pseudo-class' => $pseudo_class, + 'block-settings' => $block_settings, + ] = $args; + + // Provide fallback css selector to use this when $selectors is empty. + if ( empty( $selectors['fallback'] ) && ! empty( $args['fallback'] ) ) { + + $selectors['fallback'] = $args['fallback']; + + unset( $args['fallback'] ); } $custom_classname = $block_settings['blockeraBlockStates'][ $pseudo_class ]['css-class'] ?? null; @@ -229,17 +256,19 @@ static function ( string $item ) use ( $pseudo_class ): string { } } -if ( ! function_exists( 'blockera_get_inner_block_state_selectors' ) ) { +if ( ! function_exists( 'blockera_get_normalized_inner_block_selectors' ) ) { /** - * Retrieve inner block state selectors. + * Retrieve normalized and standardized inner block state selectors. * * @param array $selectors the recieved selectors list. * @param array $args the extra arguments to generate unique css selectors. * - * @return array the unique selectors list. + * @throws BaseException Exception for invalid selector. + * + * @return array the unique selectors list for current inner block type. */ - function blockera_get_inner_block_state_selectors( array $selectors, array $args ): array { + function blockera_get_normalized_inner_block_selectors( array $selectors, array $args ): array { [ 'pseudo-class' => $pseudoClass, @@ -260,9 +289,10 @@ function blockera_get_inner_block_state_selectors( array $selectors, array $args // Overriding selectors based on supported pseudo-class in css. Supported pseudo-classes with css: hover, active, visited, before, after. if ( $pseudoClass && 'normal' !== $pseudoClass ) { + // Handle nested selectors for inner block available features. if ( is_array( $value ) ) { - $selectors[ $key ] = blockera_get_inner_block_state_selectors( + $selectors[ $key ] = blockera_get_normalized_inner_block_selectors( array_merge( [ 'fallback' => $selectors['fallback'] ?? '', @@ -278,6 +308,7 @@ function blockera_get_inner_block_state_selectors( array $selectors, array $args continue; } + // Filters standard css pseudo classes. $parentPseudoClass = in_array( $masterBlockState, [ @@ -288,8 +319,10 @@ function blockera_get_inner_block_state_selectors( array $selectors, array $args true ) ? '' : $masterBlockState; + // Handle multiple selector where separated with comma. $parsedValue = explode( ',', trim( $value ) ); + // Assume current selector is multiple. if ( count( $parsedValue ) > 1 ) { // Add pseudo custom css class as suffix into selectors value for current key. @@ -298,13 +331,7 @@ function blockera_get_inner_block_state_selectors( array $selectors, array $args array_map( static function ( string $item ) use ( $selectors, $parentPseudoClass, $pseudoClass ): string { - return sprintf( - '%1$s%2$s%3$s:%4$s', - trim( $selectors['parentRoot'] ?? $selectors['fallback'] ?? '' ), - empty( $parentPseudoClass ) ? ' ' : ':' . $parentPseudoClass . ' ', - trim( $item ), - $pseudoClass - ); + return blockera_get_css_selector_format( $selectors, $item, compact( 'pseudoClass', 'parentPseudoClass' ) ); }, $parsedValue ) @@ -313,15 +340,12 @@ static function ( string $item ) use ( $selectors, $parentPseudoClass, $pseudoCl } else { // Add pseudo custom css class as suffix into selectors value for current key. - $selectors[ $key ] = sprintf( - '%1$s%2$s%3$s:%4$s', - trim( $selectors['parentRoot'] ?? $selectors['fallback'] ?? '' ), - empty( $parentPseudoClass ) ? ' ' : ':' . $parentPseudoClass . ' ', - trim( $value ), - $pseudoClass + $selectors[ $key ] = blockera_get_css_selector_format( + $selectors, + $value, + compact( 'pseudoClass', 'parentPseudoClass' ) ); } - // TODO: double check to we needs to customized supports selectors or not for inner blocks? continue; @@ -343,12 +367,7 @@ static function ( string $item ) use ( $selectors, $parentPseudoClass, $pseudoCl ) ? '' : $masterBlockState; // Add pseudo custom css class as suffix into selectors value for current key. - $selectors[ $key ] = sprintf( - '%1$s%2$s%3$s', - trim( $selectors['parentRoot'] ?? $selectors['fallback'] ?? '' ), - empty( $parentPseudoClass ) ? ' ' : ':' . $parentPseudoClass . ' ', - trim( $value ) - ); + $selectors[ $key ] = blockera_get_css_selector_format( $selectors, $value, compact( 'parentPseudoClass' ) ); continue; } @@ -363,6 +382,56 @@ static function ( string $item ) use ( $selectors, $parentPseudoClass, $pseudoCl } } +if ( ! function_exists( 'blockera_get_css_selector_format' ) ) { + + /** + * Get css selector valid and standard format. + * + * @param array $selectors the all selectors. + * @param string $picked_selector the picked selector. + * @param array $args the extra arguments to format css selector. + * + * @throws BaseException Exception for invalid selector. + * @return string the standard formatted css selector. + */ + function blockera_get_css_selector_format( array $selectors, string $picked_selector, array $args ): string { + + if ( str_starts_with( $picked_selector, '&' ) && ! preg_match( '/^\.|:/', substr( $picked_selector, 1 ) ) ) { + + throw new BaseException( "Invalid {$picked_selector} selector!", 500 ); + } + + $pseudo_class = $args['pseudoClass'] ?? ''; + $parent_pseudo_class = $args['parentPseudoClass'] ?? ''; + + return sprintf( + '%1$s%2$s%3$s%4$s%5$s', + trim( $selectors['parentRoot'] ?? $selectors['fallback'] ?? '' ), + ! empty( $parent_pseudo_class ) ? ':' . $parent_pseudo_class : '', + str_starts_with( $picked_selector, '&' ) || empty( $selectors ) ? '' : ' ', + blockera_process_ampersand_selector_char( $picked_selector ), + empty( $pseudo_class ) ? '' : ':' . $pseudo_class + ); + } +} + +if ( ! function_exists( 'blockera_process_ampersand_selector_char' ) ) { + + /** + * Create standard css selector with processing by '&' character. + * + * @param string $selector The selector to process. + * + * @return string the processed selector. + */ + function blockera_process_ampersand_selector_char( string $selector ): string { + + return str_starts_with( trim( $selector ), '&' ) + ? substr( trim( $selector ), 1 ) + : trim( $selector ); + } +} + if ( ! function_exists( 'blockera_get_compatible_block_css_selector' ) ) { /** diff --git a/packages/editor/php/tests/Fixtures/StyleEngine/block-state-selectors.php b/packages/editor/php/tests/Fixtures/StyleEngine/block-state-selectors.php index ad084406f..477bf2adc 100644 --- a/packages/editor/php/tests/Fixtures/StyleEngine/block-state-selectors.php +++ b/packages/editor/php/tests/Fixtures/StyleEngine/block-state-selectors.php @@ -5,7 +5,6 @@ // It Should retrieve selectors array with just fallback item because original block selectors array is empty! [ 'block-settings' => [], - 'is-inner-block' => false, 'block-type' => 'master', 'master-block-state' => 'normal', 'pseudo-class' => 'normal', @@ -20,7 +19,6 @@ // It Should retrieve selectors array include merged fallback item with original block selectors array. [ 'block-settings' => [], - 'is-inner-block' => false, 'block-type' => 'master', 'master-block-state' => 'normal', 'pseudo-class' => 'normal', @@ -42,43 +40,10 @@ 'fallback' => '.fallback-css-selector', ], ], - [ - // It Should retrieve selectors array with appending pseudo-class as suffix to "elements/link" selectors. - [ - 'block-settings' => [], - 'is-inner-block' => true, - 'block-type' => 'elements/link', - 'master-block-state' => 'normal', - 'pseudo-class' => 'hover', - 'fallback' => '.fallback-css-selector', - ], - [ - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => 'a:not(.wp-element-button)', - ], - ], - [ - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => '.fallback-css-selector a:not(.wp-element-button):hover', - ], - 'fallback' => '.fallback-css-selector', - ], - ], [ // It Should retrieve selectors array with merged fallback item with original block selectors array. [ 'block-settings' => [], - 'is-inner-block' => false, 'block-type' => 'master', 'master-block-state' => 'hover', 'pseudo-class' => 'hover', @@ -106,80 +71,4 @@ 'fallback' => '.fallback-css-selector:hover', ], ], - [ - [ - 'block-settings' => [], - 'is-inner-block' => true, - 'block-type' => 'elements/link', - 'master-block-state' => 'hover', - 'pseudo-class' => 'hover', - 'fallback' => '.fallback-css-selector', - ], - [ - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => 'a:not(.wp-element-button)', - ], - ], - [ - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => '.fallback-css-selector:hover a:not(.wp-element-button):hover', - ], - 'fallback' => '.fallback-css-selector', - ], - ], - [ - [ - 'block-settings' => [], - 'is-inner-block' => true, - 'block-type' => 'core/image', - 'master-block-state' => 'hover', - 'pseudo-class' => 'hover', - 'fallback' => '.fallback-css-selector', - ], - [ - 'root' => '.wp-block-image', - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => 'a:not(.wp-element-button), a.example-secondary-class', - ], - 'blockera/core/image' => [ - 'root' => 'img', - 'filter' => [ - 'duotone' => 'img, .components-placeholder', - ], - ], - ], - [ - 'root' => '.wp-block-image', - 'border' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'shadow' => '.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder', - 'filter' => [ - 'duotone' => '.wp-block-image img, .wp-block-image .components-placeholder', - ], - 'blockera/elements/link' => [ - 'root' => 'a:not(.wp-element-button), a.example-secondary-class', - ], - 'blockera/core/image' => [ - 'root' => '.wp-block-image:hover img:hover', - 'filter' => [ - 'duotone' => '.wp-block-image:hover img:hover, .wp-block-image:hover .components-placeholder:hover', - ], - ], - 'fallback' => '.fallback-css-selector', - ], - ], ]; diff --git a/packages/editor/php/tests/Fixtures/StyleEngine/inner-block-state-selectors.php b/packages/editor/php/tests/Fixtures/StyleEngine/inner-block-state-selectors.php new file mode 100644 index 000000000..388173db0 --- /dev/null +++ b/packages/editor/php/tests/Fixtures/StyleEngine/inner-block-state-selectors.php @@ -0,0 +1,64 @@ + [], + 'block-type' => 'core/image', + 'master-block-state' => 'hover', + 'pseudo-class' => 'hover', + 'fallback' => '.fallback-css-selector', + ], + [ + 'root' => 'img', + 'filter' => [ + 'duotone' => 'img, .components-placeholder', + ], + 'fallback' => '.wp-block-image', + 'parentRoot' => '.wp-block-image', + ], + [ + 'root' => '.wp-block-image:hover img:hover', + 'filter' => [ + 'duotone' => '.wp-block-image:hover img:hover, .wp-block-image:hover .components-placeholder:hover', + ], + 'fallback' => '.wp-block-image', + 'parentRoot' => '.wp-block-image', + ], + ], + [ + // It Should retrieve selectors array with appending pseudo-class as suffix to "elements/link" selectors. + [ + 'block-settings' => [], + 'block-type' => 'elements/link', + 'master-block-state' => 'normal', + 'pseudo-class' => 'hover', + 'fallback' => '.fallback-css-selector', + ], + [ + 'root' => 'a:not(.wp-element-button)', + 'fallback' => '.fallback-css-selector', + ], + [ + 'root' => '.fallback-css-selector a:not(.wp-element-button):hover', + 'fallback' => '.fallback-css-selector', + ], + ], + [ + [ + 'block-settings' => [], + 'block-type' => 'elements/link', + 'master-block-state' => 'hover', + 'pseudo-class' => 'hover', + 'fallback' => '.fallback-css-selector', + ], + [ + 'root' => 'a:not(.wp-element-button)', + 'fallback' => '.fallback-css-selector', + ], + [ + 'root' => '.fallback-css-selector:hover a:not(.wp-element-button):hover', + 'fallback' => '.fallback-css-selector', + ], + ], +]; diff --git a/packages/editor/php/tests/TestHelpers.php b/packages/editor/php/tests/TestHelpers.php index 5391985fc..6fa40ed50 100644 --- a/packages/editor/php/tests/TestHelpers.php +++ b/packages/editor/php/tests/TestHelpers.php @@ -2,6 +2,7 @@ namespace Blockera\Editor\Tests; +use Blockera\Exceptions\BaseException; use Blockera\WordPress\RenderBlock\Setup; class TestHelpers extends \WP_UnitTestCase { @@ -185,11 +186,36 @@ public function testItShouldRetrieveBlockStateSelectors( array $args, array $sel ); } + /** + * @group innerBlockStateSelectors + * @dataProvider getInnerBlockStateSelectorsDataProvider + * + * @param array $args + * @param array $selectors + * @param array $blockStateSelectors + * + * @throws BaseException Exception for invalid selector. + * + * @return void + */ + public function testItShouldRetrieveInnerBlockStateSelectors( array $args, array $selectors, array $blockStateSelectors = [] ): void { + + $this->assertSame( + $blockStateSelectors, + blockera_get_normalized_inner_block_selectors( $selectors, $args ) + ); + } + public function getBlockStateSelectorsDataProvider(): array { return require __DIR__ . '/Fixtures/StyleEngine/block-state-selectors.php'; } + public function getInnerBlockStateSelectorsDataProvider(): array { + + return require __DIR__ . '/Fixtures/StyleEngine/inner-block-state-selectors.php'; + } + /** * @dataProvider getCombineCssDataProvider * @@ -401,6 +427,72 @@ public function testComplexSelectorsWithSuffix() { $this->assertSame( $expected, blockera_append_css_selector_suffix( $selector, $suffix ) ); } + public function testCssSelectorFormatWithPseudoClasses() { + + $selectors = [ + 'parentRoot' => '.container', + 'fallback' => '.fallback' + ]; + $picked_selector = '.element'; + $args = [ + 'pseudoClass' => 'hover', + 'parentPseudoClass' => 'active' + ]; + + $result = blockera_get_css_selector_format( $selectors, $picked_selector, $args ); + $this->assertEquals( '.container:active .element:hover', $result ); + } + + public function testCssSelectorFormatWithoutPseudoClasses() { + + $selectors = [ + 'parentRoot' => '.container', + 'fallback' => '.fallback' + ]; + $picked_selector = '.element'; + $args = []; + + $result = blockera_get_css_selector_format( $selectors, $picked_selector, $args ); + $this->assertEquals( '.container .element', $result ); + } + + public function testCssSelectorFormatWithAmpersandInPickedSelector() { + + $selectors = [ + 'parentRoot' => '.container', + 'fallback' => '.fallback' + ]; + $picked_selector = '&.element'; + $args = [ + 'pseudoClass' => 'hover' + ]; + + $result = blockera_get_css_selector_format( $selectors, $picked_selector, $args ); + $this->assertEquals( '.container.element:hover', $result ); + } + + public function testCssSelectorFormatFallbackWhenParentRootMissing() { + + $selectors = [ + 'fallback' => '.fallback' + ]; + $picked_selector = '.element'; + $args = []; + + $result = blockera_get_css_selector_format( $selectors, $picked_selector, $args ); + $this->assertEquals( '.fallback .element', $result ); + } + + public function testCssSelectorFormatEmptySelectors() { + + $selectors = []; + $picked_selector = '.element'; + $args = []; + + $result = blockera_get_css_selector_format( $selectors, $picked_selector, $args ); + $this->assertEquals( '.element', $result ); + } + public function tear_down() { // Removes test block types registered by test cases. From a6e55bfae211ffd41be3fda28bc2f6e819e596be Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 19:17:30 +0330 Subject: [PATCH 31/40] feat: client side style engine - add spacer for processed selector --- .../get-compatible-block-css-selector.js | 27 ++++++++++++------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/packages/editor/js/style-engine/get-compatible-block-css-selector.js b/packages/editor/js/style-engine/get-compatible-block-css-selector.js index aa164fb76..a23cf2172 100644 --- a/packages/editor/js/style-engine/get-compatible-block-css-selector.js +++ b/packages/editor/js/style-engine/get-compatible-block-css-selector.js @@ -94,11 +94,17 @@ export const getNormalizedSelector = ( } = options; const parsedSelectors = selector.split(','); + let isProccedSelector = false; + // Replace '&' with the rootSelector and trim unnecessary spaces const processAmpersand = (selector: string): string => { - return selector.trim().startsWith('&') - ? `${rootSelector}${selector.trim().substring(1)}` - : selector.trim(); + if (selector.trim().startsWith('&')) { + isProccedSelector = true; + + return `${rootSelector}${selector.trim().substring(1)}`; + } + + return selector.trim(); }; // Helper to generate the appropriate selector string based on various states. @@ -108,6 +114,8 @@ export const getNormalizedSelector = ( // Current Block is inner block. if (fromInnerBlock) { + const spacer = isProccedSelector ? '' : ' '; + // Assume inner block inside pseudo-state of master. if (masterState && !isNormalState(masterState)) { if (!isNormalState(state)) { @@ -117,13 +125,13 @@ export const getNormalizedSelector = ( !isNormalState(innerStateType) && state === innerStateType ) { - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + return `${rootSelector}:${masterState}${spacer}${selector}${suffixClass}:${state}, ${rootSelector}${spacer}${selector}${suffixClass}`; } - return `${rootSelector}:${masterState} ${selector}${suffixClass}:${state}`; + return `${rootSelector}:${masterState}${spacer}${selector}${suffixClass}:${state}`; } - return `${rootSelector}:${masterState} ${selector}${suffixClass}`; + return `${rootSelector}:${masterState}${spacer}${selector}${suffixClass}`; } if (!isNormalState(state) && masterState) { @@ -131,13 +139,13 @@ export const getNormalizedSelector = ( !isNormalState(innerStateType) && state === innerStateType ) { - return `${rootSelector} ${selector}${suffixClass}:${state}, ${rootSelector} ${selector}${suffixClass}`; + return `${rootSelector}${spacer}${selector}${suffixClass}:${state}, ${rootSelector}${spacer}${selector}${suffixClass}`; } - return `${rootSelector} ${selector}${suffixClass}:${state}`; + return `${rootSelector}${spacer}${selector}${suffixClass}:${state}`; } - return `${rootSelector} ${selector}${suffixClass}`; + return `${rootSelector}${spacer}${selector}${suffixClass}`; } // Recieved state is not normal. @@ -156,6 +164,7 @@ export const getNormalizedSelector = ( // Handle single selector case. if (parsedSelectors.length === 1) { const processedSelector = processAmpersand(selector); + return customizedPseudoClasses.includes(state) ? processedSelector : generateSelector(processedSelector); From 9f64fe106b351fdf5e5f8ce37fc7063c950372cf Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Tue, 17 Sep 2024 19:25:26 +0330 Subject: [PATCH 32/40] docs: update the changelog of blockera/editor package --- packages/editor/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 9ef711c78..cbdc3c747 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -20,8 +20,11 @@ - Design of post preview link in header improved. - Enhanced the getNormalizedSelector API for better performance and functionality. +- Refactored server-side style engine with cleaner code and improved support for & ampersand in selector creation. +- Added spacer for processed selector in the client-side style engine to improved css selector normalizer. ### Automated Tests: - Completed E2E tests to verify the functionality of all advanced states in Flex Layout. - Conducted WP data compatibility test for the Spacer Block to ensure correct functionality. - Added new test suites to ensure the robustness of the getNormalizedSelector API. +- Updated tests to detect real hover states more accurately. From 1b6dd28f3247e8a2c0788156acb6edd9f4a2ea8b Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Wed, 18 Sep 2024 10:35:09 +0330 Subject: [PATCH 33/40] test: force click on query block --- .../query-no-results/test/block.inner-blocks.e2e.cy.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/blocks/core/js/wordpress/query-no-results/test/block.inner-blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/query-no-results/test/block.inner-blocks.e2e.cy.js index 22eed6625..60c9d11bc 100644 --- a/packages/blocks/core/js/wordpress/query-no-results/test/block.inner-blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/query-no-results/test/block.inner-blocks.e2e.cy.js @@ -21,8 +21,8 @@ describe('Query No Results Block → Inner Blocks', () => { appendBlocks(testContent); // Select target block - cy.getBlock('core/query').click(); - cy.getBlock('core/query-no-results').click(); + cy.getBlock('core/query').click({ force: true }); + cy.getBlock('core/query-no-results').click({ force: true }); // open inner block settings openInnerBlocksExtension(); From 9568d983408b3ed962912801f52ce502d3e78183 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Wed, 18 Sep 2024 11:08:17 +0330 Subject: [PATCH 34/40] chore: remove cypress code coverage --- cypress.config.js | 1 - package-lock.json | 989 +------------------ package.json | 1 - packages/dev-cypress/js/support/component.js | 1 - packages/dev-cypress/js/support/e2e.js | 1 - 5 files changed, 16 insertions(+), 977 deletions(-) diff --git a/cypress.config.js b/cypress.config.js index 7cdffe068..bc83f709a 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -18,7 +18,6 @@ try { const setupNodeEvents = (on, config) => { require('./packages/dev-cypress/js/plugins/index.js')(on, config); - require('@cypress/code-coverage/task')(on, config); return config; }; diff --git a/package-lock.json b/package-lock.json index 33938ecb8..1e28a6f7d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,7 +42,6 @@ "@blockera/dev-jest": "file:packages/dev-jest", "@blockera/dev-storybook": "file:packages/dev-storybook", "@cypress/browserify-preprocessor": "^3.0.2", - "@cypress/code-coverage": "^3.12.1", "@cypress/webpack-dev-server": "^3.6.1", "@cypress/webpack-preprocessor": "^6.0.0", "@emotion/styled": "^11.11.0", @@ -2685,47 +2684,6 @@ "node": ">=8" } }, - "node_modules/@cypress/code-coverage": { - "version": "3.12.39", - "resolved": "https://registry.npmjs.org/@cypress/code-coverage/-/code-coverage-3.12.39.tgz", - "integrity": "sha512-ja7I/GRmkSAW9e3O7pideWcNUEHao0WT6sRyXQEURoxkJUASJssJ7Kb/bd3eMYmkUCiD5CRFqWR5BGF4mWVaUw==", - "dev": true, - "dependencies": { - "@cypress/webpack-preprocessor": "^6.0.0", - "chalk": "4.1.2", - "dayjs": "1.11.10", - "debug": "4.3.4", - "execa": "4.1.0", - "globby": "11.1.0", - "istanbul-lib-coverage": "^3.0.0", - "js-yaml": "4.1.0", - "nyc": "15.1.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.1", - "@babel/preset-env": "^7.0.0", - "babel-loader": "^8.3 || ^9", - "cypress": "*", - "webpack": "^4 || ^5" - } - }, - "node_modules/@cypress/code-coverage/node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "dependencies": { - "ms": "2.1.2" - }, - "engines": { - "node": ">=6.0" - }, - "peerDependenciesMeta": { - "supports-color": { - "optional": true - } - } - }, "node_modules/@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -20974,18 +20932,6 @@ "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", "dev": true }, - "node_modules/append-transform": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz", - "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==", - "dev": true, - "dependencies": { - "default-require-extensions": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/arch": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", @@ -21006,12 +20952,6 @@ } ] }, - "node_modules/archy": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", - "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==", - "dev": true - }, "node_modules/are-docs-informative": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz", @@ -23184,45 +23124,6 @@ "node": ">=6" } }, - "node_modules/caching-transform": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz", - "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==", - "dev": true, - "dependencies": { - "hasha": "^5.0.0", - "make-dir": "^3.0.0", - "package-hash": "^4.0.0", - "write-file-atomic": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/caching-transform/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/caching-transform/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, "node_modules/call-bind": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", @@ -26428,21 +26329,6 @@ "node": ">=10.17.0" } }, - "node_modules/default-require-extensions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.1.tgz", - "integrity": "sha512-eXTJmRbm2TIt9MgWTsOH1wEuhew6XGZcMeGKCtLedIg/NCsg1iBePXkceTdK4Fii7pzmN9tGsZhKzZ4h7O/fxw==", - "dev": true, - "dependencies": { - "strip-bom": "^4.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/defaults": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", @@ -27507,12 +27393,6 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/es6-error": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", - "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", - "dev": true - }, "node_modules/esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -29623,19 +29503,6 @@ "node": ">=0.10.0" } }, - "node_modules/foreground-child": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", - "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", - "dev": true, - "dependencies": { - "cross-spawn": "^7.0.0", - "signal-exit": "^3.0.2" - }, - "engines": { - "node": ">=8.0.0" - } - }, "node_modules/forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", @@ -29834,26 +29701,6 @@ "node": ">= 0.6" } }, - "node_modules/fromentries": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz", - "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/feross" - }, - { - "type": "patreon", - "url": "https://www.patreon.com/feross" - }, - { - "type": "consulting", - "url": "https://feross.org/support" - } - ] - }, "node_modules/fs": { "version": "0.0.1-security", "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", @@ -30763,31 +30610,6 @@ "minimalistic-assert": "^1.0.1" } }, - "node_modules/hasha": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz", - "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==", - "dev": true, - "dependencies": { - "is-stream": "^2.0.0", - "type-fest": "^0.8.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/hasha/node_modules/type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true, - "engines": { - "node": ">=8" - } - }, "node_modules/hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -32752,18 +32574,6 @@ "node": ">=8" } }, - "node_modules/istanbul-lib-hook": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz", - "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==", - "dev": true, - "dependencies": { - "append-transform": "^2.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/istanbul-lib-instrument": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz", @@ -32789,35 +32599,6 @@ "semver": "bin/semver.js" } }, - "node_modules/istanbul-lib-processinfo": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.3.tgz", - "integrity": "sha512-NkwHbo3E00oybX6NGJi6ar0B29vxyvNwoC7eJ4G4Yq28UfY758Hgn/heV8VRFhevPED4LXfFz0DQ8z/0kw9zMg==", - "dev": true, - "dependencies": { - "archy": "^1.0.0", - "cross-spawn": "^7.0.3", - "istanbul-lib-coverage": "^3.2.0", - "p-map": "^3.0.0", - "rimraf": "^3.0.0", - "uuid": "^8.3.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/istanbul-lib-processinfo/node_modules/p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/istanbul-lib-report": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", @@ -38295,12 +38076,6 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, - "node_modules/lodash.flattendeep": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", - "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==", - "dev": true - }, "node_modules/lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", @@ -40398,18 +40173,6 @@ "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==", "dev": true }, - "node_modules/node-preload": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz", - "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==", - "dev": true, - "dependencies": { - "process-on-spawn": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -40904,226 +40667,6 @@ "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==", "dev": true }, - "node_modules/nyc": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz", - "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==", - "dev": true, - "dependencies": { - "@istanbuljs/load-nyc-config": "^1.0.0", - "@istanbuljs/schema": "^0.1.2", - "caching-transform": "^4.0.0", - "convert-source-map": "^1.7.0", - "decamelize": "^1.2.0", - "find-cache-dir": "^3.2.0", - "find-up": "^4.1.0", - "foreground-child": "^2.0.0", - "get-package-type": "^0.1.0", - "glob": "^7.1.6", - "istanbul-lib-coverage": "^3.0.0", - "istanbul-lib-hook": "^3.0.0", - "istanbul-lib-instrument": "^4.0.0", - "istanbul-lib-processinfo": "^2.0.2", - "istanbul-lib-report": "^3.0.0", - "istanbul-lib-source-maps": "^4.0.0", - "istanbul-reports": "^3.0.2", - "make-dir": "^3.0.0", - "node-preload": "^0.2.1", - "p-map": "^3.0.0", - "process-on-spawn": "^1.0.0", - "resolve-from": "^5.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "spawn-wrap": "^2.0.0", - "test-exclude": "^6.0.0", - "yargs": "^15.0.2" - }, - "bin": { - "nyc": "bin/nyc.js" - }, - "engines": { - "node": ">=8.9" - } - }, - "node_modules/nyc/node_modules/camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "dev": true, - "engines": { - "node": ">=6" - } - }, - "node_modules/nyc/node_modules/cliui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", - "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", - "dev": true, - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^6.2.0" - } - }, - "node_modules/nyc/node_modules/convert-source-map": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true - }, - "node_modules/nyc/node_modules/find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "dependencies": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/istanbul-lib-instrument": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz", - "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==", - "dev": true, - "dependencies": { - "@babel/core": "^7.7.5", - "@istanbuljs/schema": "^0.1.2", - "istanbul-lib-coverage": "^3.0.0", - "semver": "^6.3.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "dependencies": { - "p-locate": "^4.1.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/nyc/node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/nyc/node_modules/p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "dependencies": { - "p-limit": "^2.2.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "dependencies": { - "aggregate-error": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/nyc/node_modules/y18n": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", - "dev": true - }, - "node_modules/nyc/node_modules/yargs": { - "version": "15.4.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", - "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", - "dev": true, - "dependencies": { - "cliui": "^6.0.0", - "decamelize": "^1.2.0", - "find-up": "^4.1.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^4.2.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^18.1.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/nyc/node_modules/yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "dev": true, - "dependencies": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/nypm": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz", @@ -42170,21 +41713,6 @@ "node": ">= 14" } }, - "node_modules/package-hash": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz", - "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==", - "dev": true, - "dependencies": { - "graceful-fs": "^4.1.15", - "hasha": "^5.0.0", - "lodash.flattendeep": "^4.4.0", - "release-zalgo": "^1.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/pako": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", @@ -43614,18 +43142,6 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, - "node_modules/process-on-spawn": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz", - "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==", - "dev": true, - "dependencies": { - "fromentries": "^1.2.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", @@ -45096,18 +44612,6 @@ "node": ">= 0.10" } }, - "node_modules/release-zalgo": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", - "integrity": "sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==", - "dev": true, - "dependencies": { - "es6-error": "^4.0.1" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/remark-gfm": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz", @@ -46963,56 +46467,6 @@ "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", "dev": true }, - "node_modules/spawn-wrap": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz", - "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==", - "dev": true, - "dependencies": { - "foreground-child": "^2.0.0", - "is-windows": "^1.0.2", - "make-dir": "^3.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "which": "^2.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/spawn-wrap/node_modules/is-windows": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/spawn-wrap/node_modules/make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "dependencies": { - "semver": "^6.0.0" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/spawn-wrap/node_modules/semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, "node_modules/spawnd": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-9.0.2.tgz", @@ -51384,7 +50838,7 @@ }, "packages/blockera": { "name": "@blockera/blockera", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51392,7 +50846,7 @@ }, "packages/blockera-admin": { "name": "@blockera/blockera-admin", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51408,7 +50862,7 @@ }, "packages/blocks/core": { "name": "@blockera/blocks-core", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51416,7 +50870,7 @@ }, "packages/bootstrap": { "name": "@blockera/bootstrap", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51424,7 +50878,7 @@ }, "packages/classnames": { "name": "@blockera/classnames", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51441,7 +50895,7 @@ }, "packages/controls": { "name": "@blockera/controls", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51449,7 +50903,7 @@ }, "packages/data": { "name": "@blockera/data", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51457,7 +50911,7 @@ }, "packages/data-editor": { "name": "@blockera/data-editor", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51465,7 +50919,7 @@ }, "packages/dev-cypress": { "name": "@blockera/dev-cypress", - "version": "1.0.0", + "version": "0.9.2", "dev": true, "license": "ISC", "engines": { @@ -51474,7 +50928,7 @@ }, "packages/dev-jest": { "name": "@blockera/dev-jest", - "version": "1.0.0", + "version": "0.9.2", "dev": true, "license": "ISC", "engines": { @@ -51483,7 +50937,7 @@ }, "packages/dev-storybook": { "name": "@blockera/dev-storybook", - "version": "1.0.0", + "version": "0.9.2", "dev": true, "license": "ISC", "engines": { @@ -51492,7 +50946,7 @@ }, "packages/editor": { "name": "@blockera/editor", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51500,7 +50954,7 @@ }, "packages/env": { "name": "@blockera/env", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51516,7 +50970,7 @@ }, "packages/icons": { "name": "@blockera/icons", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51524,7 +50978,7 @@ }, "packages/utils": { "name": "@blockera/utils", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -51541,7 +50995,7 @@ }, "packages/wordpress": { "name": "@blockera/wordpress", - "version": "1.0.0", + "version": "0.9.2", "license": "ISC", "engines": { "node": ">=12" @@ -53299,34 +52753,6 @@ "watchify": "^4.0.0" } }, - "@cypress/code-coverage": { - "version": "3.12.39", - "resolved": "https://registry.npmjs.org/@cypress/code-coverage/-/code-coverage-3.12.39.tgz", - "integrity": "sha512-ja7I/GRmkSAW9e3O7pideWcNUEHao0WT6sRyXQEURoxkJUASJssJ7Kb/bd3eMYmkUCiD5CRFqWR5BGF4mWVaUw==", - "dev": true, - "requires": { - "@cypress/webpack-preprocessor": "^6.0.0", - "chalk": "4.1.2", - "dayjs": "1.11.10", - "debug": "4.3.4", - "execa": "4.1.0", - "globby": "11.1.0", - "istanbul-lib-coverage": "^3.0.0", - "js-yaml": "4.1.0", - "nyc": "15.1.0" - }, - "dependencies": { - "debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", - "dev": true, - "requires": { - "ms": "2.1.2" - } - } - } - }, "@cypress/request": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/@cypress/request/-/request-3.0.1.tgz", @@ -66903,27 +66329,12 @@ "integrity": "sha512-jlpIfsOoNoafl92Sz//64uQHGSyMrD2vYG5d8o2a4qGvyNCvXur7bzIsWtAC/6flI2RYAp3kv8rsfBtaLm7w0g==", "dev": true }, - "append-transform": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/append-transform/-/append-transform-2.0.0.tgz", - "integrity": "sha512-7yeyCEurROLQJFv5Xj4lEGTy0borxepjFv1g22oAdqFu//SrAlDl1O1Nxx15SH1RoliUml6p8dwJW9jvZughhg==", - "dev": true, - "requires": { - "default-require-extensions": "^3.0.0" - } - }, "arch": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz", "integrity": "sha512-Of/R0wqp83cgHozfIYLbBMnej79U/SVGOOyuB3VVFv1NRM/PSFMK12x9KVtiYzJqmnU5WR2qp0Z5rHb7sWGnFQ==", "dev": true }, - "archy": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/archy/-/archy-1.0.0.tgz", - "integrity": "sha512-Xg+9RwCg/0p32teKdGMPTPnVXKD0w3DfHnFTficozsAgsvq2XenPJq/MYpzzQ/v8zrOyJn6Ds39VA4JIDwFfqw==", - "dev": true - }, "are-docs-informative": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/are-docs-informative/-/are-docs-informative-0.0.2.tgz", @@ -68743,35 +68154,6 @@ "integrity": "sha512-9EtFOZR8g22CL7BWjJ9BUx1+A/djkofnyW3aOXZORNW2kxoUpx2h+uN2cOqwPmFhnpVmxg+KW2OjOSgChTEvsQ==", "dev": true }, - "caching-transform": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/caching-transform/-/caching-transform-4.0.0.tgz", - "integrity": "sha512-kpqOvwXnjjN44D89K5ccQC+RUrsy7jB/XLlRrx0D7/2HNcTPqzsb6XgYoErwko6QsV184CA2YgS1fxDiiDZMWA==", - "dev": true, - "requires": { - "hasha": "^5.0.0", - "make-dir": "^3.0.0", - "package-hash": "^4.0.0", - "write-file-atomic": "^3.0.0" - }, - "dependencies": { - "make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "requires": { - "semver": "^6.0.0" - } - }, - "semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true - } - } - }, "call-bind": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz", @@ -71189,15 +70571,6 @@ } } }, - "default-require-extensions": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-3.0.1.tgz", - "integrity": "sha512-eXTJmRbm2TIt9MgWTsOH1wEuhew6XGZcMeGKCtLedIg/NCsg1iBePXkceTdK4Fii7pzmN9tGsZhKzZ4h7O/fxw==", - "dev": true, - "requires": { - "strip-bom": "^4.0.0" - } - }, "defaults": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz", @@ -72058,12 +71431,6 @@ "is-symbol": "^1.0.2" } }, - "es6-error": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/es6-error/-/es6-error-4.1.1.tgz", - "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==", - "dev": true - }, "esbuild": { "version": "0.18.20", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", @@ -73696,16 +73063,6 @@ "for-in": "^1.0.1" } }, - "foreground-child": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", - "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", - "dev": true, - "requires": { - "cross-spawn": "^7.0.0", - "signal-exit": "^3.0.2" - } - }, "forever-agent": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz", @@ -73848,12 +73205,6 @@ "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", "dev": true }, - "fromentries": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/fromentries/-/fromentries-1.3.2.tgz", - "integrity": "sha512-cHEpEQHUg0f8XdtZCc2ZAhrHzKzT0MrFUTcvx+hfxYu7rGMDc5SKoXFh+n4YigxsHXRzc6OrCshdR1bWH6HHyg==", - "dev": true - }, "fs": { "version": "0.0.1-security", "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz", @@ -74545,24 +73896,6 @@ "minimalistic-assert": "^1.0.1" } }, - "hasha": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/hasha/-/hasha-5.2.2.tgz", - "integrity": "sha512-Hrp5vIK/xr5SkeN2onO32H0MgNZ0f17HRNH39WfL0SYUNOTZ5Lz1TJ8Pajo/87dYGEFlLMm7mIc/k/s6Bvz9HQ==", - "dev": true, - "requires": { - "is-stream": "^2.0.0", - "type-fest": "^0.8.0" - }, - "dependencies": { - "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true - } - } - }, "hasown": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", @@ -75959,15 +75292,6 @@ "integrity": "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==", "dev": true }, - "istanbul-lib-hook": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/istanbul-lib-hook/-/istanbul-lib-hook-3.0.0.tgz", - "integrity": "sha512-Pt/uge1Q9s+5VAZ+pCo16TYMWPBIl+oaNIjgLQxcX0itS6ueeaA+pEfThZpH8WxhFgCiEb8sAJY6MdUKgiIWaQ==", - "dev": true, - "requires": { - "append-transform": "^2.0.0" - } - }, "istanbul-lib-instrument": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.1.tgz", @@ -75989,31 +75313,6 @@ } } }, - "istanbul-lib-processinfo": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/istanbul-lib-processinfo/-/istanbul-lib-processinfo-2.0.3.tgz", - "integrity": "sha512-NkwHbo3E00oybX6NGJi6ar0B29vxyvNwoC7eJ4G4Yq28UfY758Hgn/heV8VRFhevPED4LXfFz0DQ8z/0kw9zMg==", - "dev": true, - "requires": { - "archy": "^1.0.0", - "cross-spawn": "^7.0.3", - "istanbul-lib-coverage": "^3.2.0", - "p-map": "^3.0.0", - "rimraf": "^3.0.0", - "uuid": "^8.3.2" - }, - "dependencies": { - "p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "requires": { - "aggregate-error": "^3.0.0" - } - } - } - }, "istanbul-lib-report": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-3.0.1.tgz", @@ -80308,12 +79607,6 @@ "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", "dev": true }, - "lodash.flattendeep": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz", - "integrity": "sha512-uHaJFihxmJcEX3kT4I23ABqKKalJ/zDrDg0lsFtc1h+3uw49SIJ5beyhx5ExVRti3AvKoOJngIj7xz3oylPdWQ==", - "dev": true - }, "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", @@ -81858,15 +81151,6 @@ "integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw==", "dev": true }, - "node-preload": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/node-preload/-/node-preload-0.2.1.tgz", - "integrity": "sha512-RM5oyBy45cLEoHqCeh+MNuFAxO0vTFBLskvQbOKnEE7YTTSN4tbN8QWDIPQ6L+WvKsB/qLEGpYe2ZZ9d4W9OIQ==", - "dev": true, - "requires": { - "process-on-spawn": "^1.0.0" - } - }, "node-releases": { "version": "2.0.14", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz", @@ -82237,180 +81521,6 @@ "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==", "dev": true }, - "nyc": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/nyc/-/nyc-15.1.0.tgz", - "integrity": "sha512-jMW04n9SxKdKi1ZMGhvUTHBN0EICCRkHemEoE5jm6mTYcqcdas0ATzgUgejlQUHMvpnOZqGB5Xxsv9KxJW1j8A==", - "dev": true, - "requires": { - "@istanbuljs/load-nyc-config": "^1.0.0", - "@istanbuljs/schema": "^0.1.2", - "caching-transform": "^4.0.0", - "convert-source-map": "^1.7.0", - "decamelize": "^1.2.0", - "find-cache-dir": "^3.2.0", - "find-up": "^4.1.0", - "foreground-child": "^2.0.0", - "get-package-type": "^0.1.0", - "glob": "^7.1.6", - "istanbul-lib-coverage": "^3.0.0", - "istanbul-lib-hook": "^3.0.0", - "istanbul-lib-instrument": "^4.0.0", - "istanbul-lib-processinfo": "^2.0.2", - "istanbul-lib-report": "^3.0.0", - "istanbul-lib-source-maps": "^4.0.0", - "istanbul-reports": "^3.0.2", - "make-dir": "^3.0.0", - "node-preload": "^0.2.1", - "p-map": "^3.0.0", - "process-on-spawn": "^1.0.0", - "resolve-from": "^5.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "spawn-wrap": "^2.0.0", - "test-exclude": "^6.0.0", - "yargs": "^15.0.2" - }, - "dependencies": { - "camelcase": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", - "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==", - "dev": true - }, - "cliui": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", - "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==", - "dev": true, - "requires": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^6.2.0" - } - }, - "convert-source-map": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz", - "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==", - "dev": true - }, - "find-up": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", - "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", - "dev": true, - "requires": { - "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "istanbul-lib-instrument": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-4.0.3.tgz", - "integrity": "sha512-BXgQl9kf4WTCPCCpmFGoJkz/+uhvm7h7PFKUYxh7qarQd3ER33vHG//qaE8eN25l07YqZPpHXU9I09l/RD5aGQ==", - "dev": true, - "requires": { - "@babel/core": "^7.7.5", - "@istanbuljs/schema": "^0.1.2", - "istanbul-lib-coverage": "^3.0.0", - "semver": "^6.3.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "requires": { - "p-locate": "^4.1.0" - } - }, - "make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "requires": { - "semver": "^6.0.0" - } - }, - "p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dev": true, - "requires": { - "p-try": "^2.0.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "requires": { - "p-limit": "^2.2.0" - } - }, - "p-map": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-3.0.0.tgz", - "integrity": "sha512-d3qXVTF/s+W+CdJ5A29wywV2n8CQQYahlgz2bFiA+4eVNJbHJodPZ+/gXwPGh0bOqA+j8S+6+ckmvLGPk1QpxQ==", - "dev": true, - "requires": { - "aggregate-error": "^3.0.0" - } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true - }, - "semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true - }, - "y18n": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz", - "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==", - "dev": true - }, - "yargs": { - "version": "15.4.1", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz", - "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==", - "dev": true, - "requires": { - "cliui": "^6.0.0", - "decamelize": "^1.2.0", - "find-up": "^4.1.0", - "get-caller-file": "^2.0.1", - "require-directory": "^2.1.1", - "require-main-filename": "^2.0.0", - "set-blocking": "^2.0.0", - "string-width": "^4.2.0", - "which-module": "^2.0.0", - "y18n": "^4.0.0", - "yargs-parser": "^18.1.2" - } - }, - "yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "dev": true, - "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - } - } - } - }, "nypm": { "version": "0.3.8", "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.3.8.tgz", @@ -83158,18 +82268,6 @@ "netmask": "^2.0.2" } }, - "package-hash": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/package-hash/-/package-hash-4.0.0.tgz", - "integrity": "sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==", - "dev": true, - "requires": { - "graceful-fs": "^4.1.15", - "hasha": "^5.0.0", - "lodash.flattendeep": "^4.4.0", - "release-zalgo": "^1.0.0" - } - }, "pako": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", @@ -84129,15 +83227,6 @@ "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", "dev": true }, - "process-on-spawn": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/process-on-spawn/-/process-on-spawn-1.0.0.tgz", - "integrity": "sha512-1WsPDsUSMmZH5LeMLegqkPDrsGgsWwk1Exipy2hvB0o/F0ASzbpIctSCcZIK1ykJvtTJULEH+20WOFjMvGnCTg==", - "dev": true, - "requires": { - "fromentries": "^1.2.0" - } - }, "progress": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz", @@ -85254,15 +84343,6 @@ "integrity": "sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==", "dev": true }, - "release-zalgo": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/release-zalgo/-/release-zalgo-1.0.0.tgz", - "integrity": "sha512-gUAyHVHPPC5wdqX/LG4LWtRYtgjxyX78oanFNTMMyFEfOqdC54s3eE82imuWKbOeqYht2CrNf64Qb8vgmmtZGA==", - "dev": true, - "requires": { - "es6-error": "^4.0.1" - } - }, "remark-gfm": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz", @@ -86679,43 +85759,6 @@ "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==", "dev": true }, - "spawn-wrap": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/spawn-wrap/-/spawn-wrap-2.0.0.tgz", - "integrity": "sha512-EeajNjfN9zMnULLwhZZQU3GWBoFNkbngTUPfaawT4RkMiviTxcX0qfhVbGey39mfctfDHkWtuecgQ8NJcyQWHg==", - "dev": true, - "requires": { - "foreground-child": "^2.0.0", - "is-windows": "^1.0.2", - "make-dir": "^3.0.0", - "rimraf": "^3.0.0", - "signal-exit": "^3.0.2", - "which": "^2.0.1" - }, - "dependencies": { - "is-windows": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz", - "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==", - "dev": true - }, - "make-dir": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", - "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==", - "dev": true, - "requires": { - "semver": "^6.0.0" - } - }, - "semver": { - "version": "6.3.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", - "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", - "dev": true - } - } - }, "spawnd": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/spawnd/-/spawnd-9.0.2.tgz", diff --git a/package.json b/package.json index 0d9a1874e..b75d44e7c 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,6 @@ "@blockera/dev-jest": "file:packages/dev-jest", "@blockera/dev-storybook": "file:packages/dev-storybook", "@cypress/browserify-preprocessor": "^3.0.2", - "@cypress/code-coverage": "^3.12.1", "@cypress/webpack-dev-server": "^3.6.1", "@cypress/webpack-preprocessor": "^6.0.0", "@emotion/styled": "^11.11.0", diff --git a/packages/dev-cypress/js/support/component.js b/packages/dev-cypress/js/support/component.js index c8a5a8628..7399820d3 100644 --- a/packages/dev-cypress/js/support/component.js +++ b/packages/dev-cypress/js/support/component.js @@ -5,7 +5,6 @@ import { nanoid } from 'nanoid'; import { select } from '@wordpress/data'; import { mount } from 'cypress/react'; import 'cypress-real-events/support'; -import '@cypress/code-coverage/support'; import { PanelBody, Popover, SlotFillProvider } from '@wordpress/components'; /** diff --git a/packages/dev-cypress/js/support/e2e.js b/packages/dev-cypress/js/support/e2e.js index 562e1fc32..45030c5f8 100644 --- a/packages/dev-cypress/js/support/e2e.js +++ b/packages/dev-cypress/js/support/e2e.js @@ -2,7 +2,6 @@ * External dependencies */ import 'cypress-real-events'; -import '@cypress/code-coverage/support'; import '@10up/cypress-wp-utils'; /** From c1674ee3322a1b85a916573e74b3cda76434b290 Mon Sep 17 00:00:00 2001 From: rezaelahidev Date: Wed, 18 Sep 2024 11:11:16 +0330 Subject: [PATCH 35/40] chore: increase memory size in test scripts --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index b75d44e7c..8e8835fa9 100644 --- a/package.json +++ b/package.json @@ -204,8 +204,8 @@ "prepare": "husky install", "flow": "npx flow status", "setup": "npm install && npm run build", - "test:e2e": "npx cypress run --config video=false --browser chrome", - "test:ct": "npx cypress run --component", + "test:e2e": "NODE_OPTIONS=--max_old_space_size=4096 npx cypress run --config video=false --browser chrome", + "test:ct": "NODE_OPTIONS=--max_old_space_size=4096 npx cypress run --component", "test:ct:debug": "npx cypress open --component", "test:e2e:debug": "npx cypress open --e2e", "test:e2e:headed": "npm run test:e2e --headed", From ef24f1ee158b96191c61193ba401d8286b11e7f6 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Wed, 18 Sep 2024 11:50:17 +0330 Subject: [PATCH 36/40] test: refactor tests to make sure it waits for ajax call done --- .../home-link/test/block.blocks.e2e.cy.js | 95 +++++++++------- .../test/block.blocks.e2e.cy.js | 101 +++++++++++------- 2 files changed, 116 insertions(+), 80 deletions(-) diff --git a/packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js index a7e168fe0..5b64c15ae 100644 --- a/packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js @@ -7,52 +7,69 @@ import { openInnerBlocksExtension, } from '@blockera/dev-cypress/js/helpers'; -describe('Home Link Block', () => { - beforeEach(() => { - createPost(); - }); +describe( + 'Home Link Block', + { + defaultCommandTimeout: 50000, + }, + () => { + beforeEach(() => { + createPost(); + }); + + it('Block should be supported + switch to parent should work', () => { + appendBlocks(''); + + cy.getBlock('core/navigation').click(); - it('Block should be supported + switch to parent should work', () => { - appendBlocks(''); + // Make sure the tree is visible (Ajax call done) + cy.get('.block-editor-list-view-tree').should('be.visible'); - cy.getBlock('core/navigation').click(); + cy.get('.block-editor-list-view-tree').within(() => { + // Open blocks menu + cy.get('[aria-label="Add block"]').first().click(); + }); - // Open blocks menu - cy.get('[aria-label="Add block"]').first().click(); + // search for home link + cy.get('.block-editor-inserter__popover input[type="search"]').type( + 'Home Link' + ); - // search for custom link - cy.get('input[type="search"]:focus').last().type('Home Link'); + // insert + cy.get('button.editor-block-list-item-home-link').last().click(); - // insert - cy.get('button.editor-block-list-item-home-link').last().click(); + // switch to target block + cy.getBlock('core/home-link').first().click(); - // switch to target block - cy.getBlock('core/home-link').first().click(); + // assert block card + cy.get('.blockera-extension-block-card.master-block-card').should( + 'exist' + ); - // assert block card - cy.get('.blockera-extension-block-card.master-block-card').should( - 'exist' - ); + // switch to parent navigation block + cy.get('.blockera-extension-block-card.master-block-card').within( + () => { + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).should('exist'); + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).click(); + } + ); - // switch to parent navigation block - cy.get('.blockera-extension-block-card.master-block-card').within( - () => { - cy.get('button[data-test="back-to-parent-navigation"]').should( - 'exist' + // + // Assert block switched to parent navigation block + // + cy.get('.blockera-extension-block-card.master-block-card').should( + 'not.exist' + ); + cy.get('.block-editor-block-card').should('exist'); + cy.get('.block-editor-block-card').within(() => { + cy.get('.block-editor-block-card__title').contains( + 'Navigation' ); - cy.get('button[data-test="back-to-parent-navigation"]').click(); - } - ); - - // - // Assert block switched to parent navigation block - // - cy.get('.blockera-extension-block-card.master-block-card').should( - 'not.exist' - ); - cy.get('.block-editor-block-card').should('exist'); - cy.get('.block-editor-block-card').within(() => { - cy.get('.block-editor-block-card__title').contains('Navigation'); + }); }); - }); -}); + } +); diff --git a/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js index 22882e905..a64b34e1b 100644 --- a/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js @@ -7,55 +7,74 @@ import { openInnerBlocksExtension, } from '@blockera/dev-cypress/js/helpers'; -describe('Navigation Link Block', () => { - beforeEach(() => { - createPost(); - }); +describe( + 'Navigation Link Block', + { + defaultCommandTimeout: 50000, + }, + () => { + beforeEach(() => { + createPost(); + }); + + it('Block should be supported + switch to parent should work', () => { + appendBlocks(''); + + cy.getBlock('core/navigation').click(); - it('Block should be supported + switch to parent should work', () => { - appendBlocks(''); + // Make sure the tree is visible (Ajax call done) + cy.get('.block-editor-list-view-tree').should('be.visible'); - cy.getBlock('core/navigation').click(); + cy.get('.block-editor-list-view-tree').within(() => { + // Open blocks menu + cy.get('[aria-label="Add block"]').first().click(); + }); - // Open blocks menu - cy.get('[aria-label="Add block"]').first().click(); + // search for custom link + cy.get('.block-editor-inserter__popover input[type="search"]').type( + 'Custom Link' + ); - // search for custom link - cy.get('input[type="search"]:focus').last().type('Custom Link'); + // insert + cy.get('button.editor-block-list-item-navigation-link') + .last() + .click(); - // insert - cy.get('button.editor-block-list-item-navigation-link').last().click(); + // enter link value + cy.get('input[type="text"]:focus').type('#test{enter}'); - // enter link value - cy.get('input[type="text"]:focus').type('#test{enter}'); + // switch to target block + cy.getBlock('core/navigation-link').first().click(); - // switch to target block - cy.getBlock('core/navigation-link').first().click(); + // assert block card + cy.get('.blockera-extension-block-card.master-block-card').should( + 'exist' + ); - // assert block card - cy.get('.blockera-extension-block-card.master-block-card').should( - 'exist' - ); + // switch to parent navigation block + cy.get('.blockera-extension-block-card.master-block-card').within( + () => { + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).should('exist'); + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).click(); + } + ); - // switch to parent navigation block - cy.get('.blockera-extension-block-card.master-block-card').within( - () => { - cy.get('button[data-test="back-to-parent-navigation"]').should( - 'exist' + // + // Assert block switched to parent navigation block + // + cy.get('.blockera-extension-block-card.master-block-card').should( + 'not.exist' + ); + cy.get('.block-editor-block-card').should('exist'); + cy.get('.block-editor-block-card').within(() => { + cy.get('.block-editor-block-card__title').contains( + 'Navigation' ); - cy.get('button[data-test="back-to-parent-navigation"]').click(); - } - ); - - // - // Assert block switched to parent navigation block - // - cy.get('.blockera-extension-block-card.master-block-card').should( - 'not.exist' - ); - cy.get('.block-editor-block-card').should('exist'); - cy.get('.block-editor-block-card').within(() => { - cy.get('.block-editor-block-card__title').contains('Navigation'); + }); }); - }); -}); + } +); From f14cb9cba95ec83d910cac24c4deab83f2c636ef Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Wed, 18 Sep 2024 11:59:39 +0330 Subject: [PATCH 37/40] test: refactor tests to make sure it waits for ajax call done --- .../test/block.blocks.e2e.cy.js | 103 ++++++++++-------- 1 file changed, 60 insertions(+), 43 deletions(-) diff --git a/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js index 2371f5865..6503c9f0b 100644 --- a/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js +++ b/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js @@ -7,57 +7,74 @@ import { openInnerBlocksExtension, } from '@blockera/dev-cypress/js/helpers'; -describe('Navigation Link Block', () => { - beforeEach(() => { - createPost(); - }); +describe( + 'Navigation Submenu Block', + { + defaultCommandTimeout: 50000, + }, + () => { + beforeEach(() => { + createPost(); + }); + + it('Block should be supported + switch to parent should work', () => { + appendBlocks(''); + + cy.getBlock('core/navigation').click(); - it('Block should be supported + switch to parent should work', () => { - appendBlocks(''); + // Make sure the tree is visible (Ajax call done) + cy.get('.block-editor-list-view-tree').should('be.visible'); - cy.getBlock('core/navigation').click(); + cy.get('.block-editor-list-view-tree').within(() => { + // Open blocks menu + cy.get('[aria-label="Add block"]').first().click(); + }); - // Open blocks menu - cy.get('[aria-label="Add block"]').first().click(); + // search for Submenu + cy.get('.block-editor-inserter__popover input[type="search"]').type( + 'Submenu' + ); - // search for custom link - cy.get('input[type="search"]:focus').last().type('Submenu'); + // insert + cy.get('button.editor-block-list-item-navigation-submenu') + .last() + .click(); - // insert - cy.get('button.editor-block-list-item-navigation-submenu') - .last() - .click(); + // enter link value + cy.get('input[type="text"]:focus').type('#test{enter}'); - // enter link value - cy.get('input[type="text"]:focus').type('#test{enter}'); + // switch to target block + cy.getBlock('core/navigation-submenu').first().click(); - // switch to target block - cy.getBlock('core/navigation-submenu').first().click(); + // assert block card + cy.get('.blockera-extension-block-card.master-block-card').should( + 'exist' + ); - // assert block card - cy.get('.blockera-extension-block-card.master-block-card').should( - 'exist' - ); + // switch to parent navigation block + cy.get('.blockera-extension-block-card.master-block-card').within( + () => { + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).should('exist'); + cy.get( + 'button[data-test="back-to-parent-navigation"]' + ).click(); + } + ); - // switch to parent navigation block - cy.get('.blockera-extension-block-card.master-block-card').within( - () => { - cy.get('button[data-test="back-to-parent-navigation"]').should( - 'exist' + // + // Assert block switched to parent navigation block + // + cy.get('.blockera-extension-block-card.master-block-card').should( + 'not.exist' + ); + cy.get('.block-editor-block-card').should('exist'); + cy.get('.block-editor-block-card').within(() => { + cy.get('.block-editor-block-card__title').contains( + 'Navigation' ); - cy.get('button[data-test="back-to-parent-navigation"]').click(); - } - ); - - // - // Assert block switched to parent navigation block - // - cy.get('.blockera-extension-block-card.master-block-card').should( - 'not.exist' - ); - cy.get('.block-editor-block-card').should('exist'); - cy.get('.block-editor-block-card').within(() => { - cy.get('.block-editor-block-card__title').contains('Navigation'); + }); }); - }); -}); + } +); From 5b016f0f536c671524c982b1c455820929220e78 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Wed, 18 Sep 2024 12:15:17 +0330 Subject: [PATCH 38/40] test: separate test category temporarily --- .../test/{block.blocks.e2e.cy.js => block.blocks-2.e2e.cy.js} | 0 .../test/{block.blocks.e2e.cy.js => block.blocks-2.e2e.cy.js} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/blocks/core/js/wordpress/navigation-link/test/{block.blocks.e2e.cy.js => block.blocks-2.e2e.cy.js} (100%) rename packages/blocks/core/js/wordpress/navigation-submenu/test/{block.blocks.e2e.cy.js => block.blocks-2.e2e.cy.js} (100%) diff --git a/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-2.e2e.cy.js similarity index 100% rename from packages/blocks/core/js/wordpress/navigation-link/test/block.blocks.e2e.cy.js rename to packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-2.e2e.cy.js diff --git a/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-2.e2e.cy.js similarity index 100% rename from packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks.e2e.cy.js rename to packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-2.e2e.cy.js From aaee50ebfda9b36362f85cbe929204971c88111e Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Wed, 18 Sep 2024 12:25:08 +0330 Subject: [PATCH 39/40] =?UTF-8?q?test:=20Blocks=20=E2=86=92=20Navigation?= =?UTF-8?q?=20sub=20category?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{block.blocks.e2e.cy.js => block.blocks-navigation.e2e.cy.js} | 0 ...block.blocks-2.e2e.cy.js => block.blocks-navigation.e2e.cy.js} | 0 ...block.blocks-2.e2e.cy.js => block.blocks-navigation.e2e.cy.js} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename packages/blocks/core/js/wordpress/home-link/test/{block.blocks.e2e.cy.js => block.blocks-navigation.e2e.cy.js} (100%) rename packages/blocks/core/js/wordpress/navigation-link/test/{block.blocks-2.e2e.cy.js => block.blocks-navigation.e2e.cy.js} (100%) rename packages/blocks/core/js/wordpress/navigation-submenu/test/{block.blocks-2.e2e.cy.js => block.blocks-navigation.e2e.cy.js} (100%) diff --git a/packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js b/packages/blocks/core/js/wordpress/home-link/test/block.blocks-navigation.e2e.cy.js similarity index 100% rename from packages/blocks/core/js/wordpress/home-link/test/block.blocks.e2e.cy.js rename to packages/blocks/core/js/wordpress/home-link/test/block.blocks-navigation.e2e.cy.js diff --git a/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-2.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-navigation.e2e.cy.js similarity index 100% rename from packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-2.e2e.cy.js rename to packages/blocks/core/js/wordpress/navigation-link/test/block.blocks-navigation.e2e.cy.js diff --git a/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-2.e2e.cy.js b/packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-navigation.e2e.cy.js similarity index 100% rename from packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-2.e2e.cy.js rename to packages/blocks/core/js/wordpress/navigation-submenu/test/block.blocks-navigation.e2e.cy.js From 2d25e9c3487bffa4d3e726d925ca62abfe54f995 Mon Sep 17 00:00:00 2001 From: Ali Aghdam Date: Wed, 18 Sep 2024 12:35:38 +0330 Subject: [PATCH 40/40] feat: memory management config for cypress --- cypress.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/cypress.config.js b/cypress.config.js index bc83f709a..5ce90d76f 100644 --- a/cypress.config.js +++ b/cypress.config.js @@ -30,6 +30,8 @@ module.exports = defineConfig({ specPattern: env.e2e.specPattern, excludeSpecPattern: env.e2e.excludeSpecPattern, supportFile: 'packages/dev-cypress/js/support/e2e.js', + experimentalMemoryManagement: true, + numTestsKeptInMemory: 10, }, env, fixturesFolder: 'packages/dev-cypress/js/fixtures',