diff --git a/assets/js/frontend/frontend.js b/assets/js/frontend/frontend.js index d78feb8..cc927d4 100755 --- a/assets/js/frontend/frontend.js +++ b/assets/js/frontend/frontend.js @@ -1,7 +1 @@ // import foo from './components/bar'; -import Tabs from '@10up/component-tabs'; - -// eslint-disable-next-line no-new -new Tabs('.tabs', { - orientation: 'horizontal', -}); diff --git a/includes/blocks/block-editor/tabs-item/block.json b/includes/blocks/block-editor/tabs-item/block.json index d48eaa8..433d47d 100644 --- a/includes/blocks/block-editor/tabs-item/block.json +++ b/includes/blocks/block-editor/tabs-item/block.json @@ -1,5 +1,7 @@ { "name": "tenup/tabs-item", + "editorScript": "file:./register.js", + "viewScript": "file:../tabs/view.js", "attributes":{ "header": { "type": "string" diff --git a/includes/blocks/block-editor/tabs-item/register.php b/includes/blocks/block-editor/tabs-item/register.php index 33eea01..f6193bf 100644 --- a/includes/blocks/block-editor/tabs-item/register.php +++ b/includes/blocks/block-editor/tabs-item/register.php @@ -17,30 +17,12 @@ function register() { if ( function_exists( 'register_block_type_from_metadata' ) ) { register_block_type_from_metadata( - PUBLISHER_MEDIA_KIT_BLOCKS_PATH . '/tabs-item', // this is the directory where the block.json is found. + PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/block-editor/tabs-item', // this is the directory where the block.json is found. [ 'render_callback' => $n( 'render_tabs_item_block_callback' ), ] ); } - - // Enqueue assets. - add_action( 'enqueue_block_assets', $n( 'enqueue_block_assets' ) ); -} - -/** - * Enqueue block assets. - */ -function enqueue_block_assets() { - $asset_file = include PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/tabs-item-block.asset.php'; - - wp_enqueue_script( - 'publisher-media-kit-tabs-item-block', - PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-item-block.js', - $asset_file['dependencies'], - $asset_file['version'], - true - ); } /** diff --git a/includes/blocks/block-editor/tabs/block.json b/includes/blocks/block-editor/tabs/block.json index d896983..da5f957 100644 --- a/includes/blocks/block-editor/tabs/block.json +++ b/includes/blocks/block-editor/tabs/block.json @@ -4,6 +4,10 @@ "description": "Display sections of content with brief headings in a compact tab layout that shows one section at a time.", "text-domain": "publisher-media-kit", "category": "common", + "editorScript": "file:./register.js", + "editorStyle": "file:./editor.css", + "style": "file:./editor.css", + "viewScript": "file:./view.js", "example": { "innerBlocks": [ { diff --git a/includes/blocks/block-editor/tabs/register.php b/includes/blocks/block-editor/tabs/register.php index 0e0dd61..6acaaad 100644 --- a/includes/blocks/block-editor/tabs/register.php +++ b/includes/blocks/block-editor/tabs/register.php @@ -17,37 +17,12 @@ function register() { if ( function_exists( 'register_block_type_from_metadata' ) ) { register_block_type_from_metadata( - PUBLISHER_MEDIA_KIT_BLOCKS_PATH . '/tabs', // this is the directory where the block.json is found. + PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/block-editor/tabs', // this is the directory where the block.json is found. [ 'render_callback' => $n( 'render_tabs_block_callback' ), ] ); } - - // Enqueue assets. - add_action( 'enqueue_block_assets', $n( 'enqueue_block_assets' ) ); -} - -/** - * Enqueue block assets. - */ -function enqueue_block_assets() { - $asset_file = include PUBLISHER_MEDIA_KIT_PATH . 'dist/blocks/tabs-block.asset.php'; - - wp_enqueue_script( - 'publisher-media-kit-tabs-block', - PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-block.js', - $asset_file['dependencies'], - $asset_file['version'], - true - ); - - wp_enqueue_style( - 'publisher-media-kit-tabs-block', - PUBLISHER_MEDIA_KIT_URL . '/dist/blocks/tabs-block.css', - [], - $asset_file['version'] - ); } /** diff --git a/includes/blocks/block-editor/tabs/view.js b/includes/blocks/block-editor/tabs/view.js new file mode 100644 index 0000000..f13394b --- /dev/null +++ b/includes/blocks/block-editor/tabs/view.js @@ -0,0 +1,13 @@ +/** + * Tabs Block - Frontend View Script + * + * @package PublisherMediaKit\Blocks\Tabs + */ + +import Tabs from '@10up/component-tabs'; + +// Initialize tabs on frontend +// eslint-disable-next-line no-new +new Tabs('.tabs', { + orientation: 'horizontal', +}); diff --git a/package.json b/package.json index 8eeda02..d0e1902 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,8 @@ "shared-style": "./assets/css/shared/shared-style.css", "style": "./assets/css/frontend/style.css", "tabs-block": "./includes/blocks/block-editor/tabs/register.js", - "tabs-item-block": "./includes/blocks/block-editor/tabs-item/register.js" + "tabs-item-block": "./includes/blocks/block-editor/tabs-item/register.js", + "tabs-view": "./includes/blocks/block-editor/tabs/view.js" } } } diff --git a/tests/cypress/integration/pmk-block-patterns.test.js b/tests/cypress/integration/pmk-block-patterns.test.js index b06c878..8053abf 100644 --- a/tests/cypress/integration/pmk-block-patterns.test.js +++ b/tests/cypress/integration/pmk-block-patterns.test.js @@ -25,9 +25,9 @@ describe('Check if Media Kit Block Pattern is available for use', () => { } else if ($body.find(':contains("Publisher Media Kit")').length > 0) { cy.contains(/^Publisher Media Kit$/).click(); } - - // Check if cover patter exist in the list - cy.get('[aria-label="Publisher Media Kit - Cover"]').should('exist'); }); + + // Wait for patterns to load, then verify cover pattern exists + cy.get('[aria-label="Publisher Media Kit - Cover"]', { timeout: 10000 }).should('exist'); }); });