Update custom URL components and inputs and fix tests

.dev/tests/cypress/plugins/index.js

@@ -1,3 +1,12 @@
 module.exports = ( on ) => {
 	require( 'cypress-log-to-output' ).install( on, ( type, event ) => event.level === 'error' || event.type === 'error' );
+
+	// Simple task to print diagnostic info from specs into the Node process output
+	on( 'task', {
+		log( message ) {
+			// eslint-disable-next-line no-console
+			console.log( '[cy.task log]', typeof message === 'object' ? JSON.stringify( message, null, 2 ) : message );
+			return null;
+		},
+	} );
 };

.dev/tests/cypress/support/commands.js

@@ -1,10 +1,12 @@
-import { disableGutenbergFeatures, goTo, loginToSite } from '../helpers';
+import { disableGutenbergFeatures, goTo, loginToSite, waitForDataStores } from '../helpers';
 
 before( function() {
 	loginToSite().then( () => {
 		goTo( '/wp-admin/post-new.php?post_type=post' ).then( () => {
-			cy.wait( 2000 );
-			disableGutenbergFeatures();
+			// Wait for WordPress data stores to be ready instead of arbitrary wait
+			waitForDataStores().then( () => {
+				disableGutenbergFeatures();
+			} );
 		} );
 	} );
 } );

src/blocks/gallery-collage/edit.js

@@ -176,18 +176,36 @@ const GalleryCollageEdit = ( props ) => {
 						{ selectedImage === image.index && attributes.linkTo === 'custom' &&
 							<form
 								className="components-coblocks-gallery-item__image-link"
-								onSubmit={ ( event ) => event.preventDefault() }>
+								onSubmit={ ( event ) => {
+									event.preventDefault();
+									saveCustomLink();
+								} }>
 								<Dashicon icon="admin-links" />
 								<URLInput
-									onChange={ ( imgLink ) => updateImageAttributes( index, { imgLink } ) }
-									value={ image.imgLink }
+									key="url-input"
+									onChange={ ( imgLink ) => {
+										// Ensure the value is properly handled
+										const urlValue = imgLink || '';
+										updateImageAttributes( index, { imgLink: urlValue } );
+									} }
+									value={ image.imgLink || '' }
+									placeholder={ __( 'Enter URL', 'coblocks' ) }
+									disableSuggestions={ false }
+									__nextHasNoMarginBottom={ true }
+								/>
+								<Button
+									icon={ isSaved ? 'saved' : 'editor-break' }
+									label={ isSaved ? __( 'Saved', 'coblocks' ) : __( 'Apply', 'coblocks' ) }
+									onClick={ saveCustomLink }
+									type="submit"
+									variant="primary"
+									size="compact"
 								/>
-								<Button icon={ isSaved ? 'saved' : 'editor-break' } label={ isSaved ? __( 'Saving', 'coblocks' ) : __( 'Apply', 'coblocks' ) } onClick={ saveCustomLink } type="submit" />
 							</form>
 						}
 						{ dropZone }
 						{ isBlobURL( image.url ) && <Spinner /> }
-						<img alt={ image.alt } src={ image.url } />
+						<img alt={ image.alt } src={ image.url } data-imglink={ image.imgLink } />
 						{ enableCaptions && attributes.captions && ( image.caption || isImageSelected ) &&
 							<RichText
 								className="coblocks-gallery--caption"

src/blocks/gallery-collage/test/gallery-collage.cypress.js

@@ -88,6 +88,9 @@ describe( 'Test CoBlocks Gallery Collage Block', function() {
 
 		helpers.toggleSettingCheckbox( /captions/i );
 
+		// Dismiss any popovers that might interfere with clicking
+		helpers.dismissPopovers();
+
 		cy.get( '.wp-block-coblocks-gallery-collage__item' ).first().click()
 			.find( 'figcaption' ).focus().type( caption, { force: true } );
 
@@ -117,6 +120,9 @@ describe( 'Test CoBlocks Gallery Collage Block', function() {
 
 		helpers.toggleSettingCheckbox( /captions/i );
 
+		// Dismiss any popovers that might interfere with clicking
+		helpers.dismissPopovers();
+
 		// Focus the image
 		cy.get( '.wp-block-coblocks-gallery-collage__item' ).first().click();
 
@@ -144,4 +150,28 @@ describe( 'Test CoBlocks Gallery Collage Block', function() {
 
 		helpers.checkForBlockErrors( 'coblocks/gallery-collage' );
 	} );
+
+	/**
+	 * Test that custom link editing works properly for collage block images.
+	 */
+	it( 'Test collage block custom link functionality.', function() {
+		helpers.addBlockToPost( 'coblocks/gallery-collage', true );
+
+		// Upload image to the block
+		helpers.upload.imageToBlock( 'coblocks/gallery-collage' );
+
+		// Wait for image to load
+		cy.get( '.wp-block-coblocks-gallery-collage__item img[src*="http"]' ).should( 'be.visible' );
+
+		// Use the helper function to set custom link
+		helpers.setGalleryCustomLink(
+			'coblocks/gallery-collage',
+			'https://example.com',
+			'.wp-block-coblocks-gallery-collage__item img'
+		);
+
+		helpers.savePage();
+
+		helpers.checkForBlockErrors( 'coblocks/gallery-collage' );
+	} );
 } );

src/blocks/gallery-offset/test/gallery-offset.cypress.js

@@ -96,11 +96,35 @@ describe( 'Test CoBlocks Gallery Offset Block', function() {
 		cy.get( 'button' ).contains( /create a new gallery/i ).click();
 		cy.get( 'button' ).contains( /insert gallery/i ).click();
 
+		// Ensure inspector is open and Block tab is active for captions toggle to work
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).click();
+		helpers.openInspectorPanel();
+
 		helpers.toggleSettingCheckbox( /captions/i );
 
-		cy.get( '.coblocks-gallery--item' ).find( 'img' ).first().click();
+		// Click the block first to ensure it's selected, then click the image container
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).click();
+
+		// Wait for block to be selected (has is-selected class)
+		cy.get( '[data-type="coblocks/gallery-offset"].is-selected' );
+
+		// Dismiss any popovers that might interfere with clicking
+		helpers.dismissPopovers();
 
-		cy.get( '.coblocks-gallery--item' ).find( 'figcaption' ).focus().type( caption );
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).within( () => {
+			cy.get( '.coblocks-gallery--item' ).first().click();
+		} );
+
+		// Wait for caption element to appear after clicking
+		cy.get( '.coblocks-gallery--item' ).within( () => {
+			cy.get( 'figcaption, [data-rich-text-placeholder], [contenteditable="true"]' );
+		} );
+
+		// Wait for figcaption to appear or try alternative selectors
+		cy.get( '.coblocks-gallery--item' ).within( () => {
+			// Try multiple approaches to find and interact with caption
+			cy.get( 'figcaption, [data-rich-text-placeholder], [contenteditable="true"]' ).first().focus().type( caption );
+		} );
 
 		helpers.savePage();
 
@@ -127,14 +151,36 @@ describe( 'Test CoBlocks Gallery Offset Block', function() {
 		cy.get( 'button' ).contains( /create a new gallery/i ).click();
 		cy.get( 'button' ).contains( /insert gallery/i ).click();
 
+		// Ensure inspector is open and Block tab is active for captions toggle to work
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).click();
+		helpers.openInspectorPanel();
+
 		helpers.toggleSettingCheckbox( /captions/i );
 
 		cy.get( '.block-editor-format-toolbar' ).should( 'not.exist' );
 
-		cy.get( '.coblocks-gallery--item' ).find( 'img' ).click();
+		// Click the block first to ensure it's selected, then click the image container
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).click();
+
+		// Wait for block to be selected (has is-selected class)
+		cy.get( '[data-type="coblocks/gallery-offset"].is-selected' );
+
+		// Dismiss any popovers that might interfere with clicking
+		helpers.dismissPopovers();
+
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).within( () => {
+			cy.get( '.coblocks-gallery--item' ).first().click();
+		} );
 
-		cy.get( '.coblocks-gallery--item' )
-			.find( 'figcaption' ).focus();
+		// Wait for caption element to appear after clicking
+		cy.get( '.coblocks-gallery--item' ).within( () => {
+			cy.get( 'figcaption, [data-rich-text-placeholder], [contenteditable="true"]' );
+		} );
+
+		cy.get( '.coblocks-gallery--item' ).within( () => {
+			// Try multiple approaches to find and focus caption
+			cy.get( 'figcaption, [data-rich-text-placeholder], [contenteditable="true"]' ).first().focus();
+		} );
 
 		cy.get( '.block-editor-format-toolbar, .block-editor-rich-text__inline-format-toolbar-group' );
 
@@ -155,4 +201,117 @@ describe( 'Test CoBlocks Gallery Offset Block', function() {
 
 		helpers.checkForBlockErrors( 'coblocks/gallery-offset' );
 	} );
+
+	/**
+	 * Test that custom link editing works properly for offset block images.
+	 */
+	it( 'Test offset block custom link functionality.', function() {
+		helpers.addBlockToPost( 'coblocks/gallery-offset', true );
+
+		// Upload image to the block
+		helpers.upload.imageToBlock( 'coblocks/gallery-offset' );
+
+		// Wait for image to load and block to stabilize
+		cy.get( '.coblocks-gallery--item img[src*="http"]' ).should( 'be.visible' );
+
+		// Use the helper function to set custom link
+		helpers.setGalleryCustomLink(
+			'coblocks/gallery-offset',
+			'https://example.com',
+			'.coblocks-gallery--item img'
+		);
+
+		helpers.savePage();
+		helpers.checkForBlockErrors( 'coblocks/gallery-offset' );
+	} );
+
+	/**
+	 * Test that other link options work correctly with offset block.
+	 */
+	it( 'Test offset block link options functionality.', function() {
+		helpers.addBlockToPost( 'coblocks/gallery-offset', true );
+
+		// Upload image to the block
+		helpers.upload.imageToBlock( 'coblocks/gallery-offset' );
+
+		// Wait for image to load and block to stabilize
+		cy.get( '.coblocks-gallery--item img[src*="http"]' ).should( 'be.visible' );
+
+		// Ensure block is selected for Link Settings to render
+		cy.get( '[data-type="coblocks/gallery-offset"]' ).click();
+		cy.window().then( ( win ) => {
+			if ( win.wp && win.wp.data ) {
+				const blockEditor = win.wp.data.select( 'core/block-editor' );
+				const selectedBlock = blockEditor.getSelectedBlock();
+
+				// ASSERT: Block must be selected for Link Settings to render
+				if ( selectedBlock ) {
+					expect( selectedBlock.name ).to.equal( 'coblocks/gallery-offset' );
+					expect( selectedBlock.attributes.images ).to.have.length.at.least( 1 );
+				}
+			}
+		} );
+
+		// Reset any open inspector and reopen cleanly
+		cy.get( 'body' ).then( ( $body ) => {
+			const sidebar = $body.find( '.interface-interface-skeleton__sidebar' );
+			if ( sidebar.is( ':visible' ) ) {
+				// Close inspector if already open
+				cy.get( '.editor-header__settings, .edit-post-header__settings' ).click();
+				// Wait for sidebar to close
+				cy.get( '.interface-interface-skeleton__sidebar' ).should( 'not.be.visible' );
+			}
+		} );
+
+		// Open inspector fresh
+		cy.get( '.editor-header__settings, .edit-post-header__settings' ).click();
+		cy.get( '.interface-interface-skeleton__sidebar' ).should( 'be.visible' );
+
+		// CRITICAL: Ensure Block tab is active and panels are loaded
+		cy.get( '[data-tab-id="edit-post/block"]' ).should( 'exist' ).then( ( $blockTab ) => {
+			if ( $blockTab.attr( 'aria-selected' ) !== 'true' ) {
+				cy.get( '[data-tab-id="edit-post/block"]' ).click();
+				// Wait for tab switch and panel loading
+				cy.get( '[data-tab-id="edit-post/block"]' ).should( 'have.attr', 'aria-selected', 'true' );
+			}
+		} );
+
+		// Wait for panels to load and ensure Link Settings panel exists
+		cy.get( '.components-panel__body-title' ).should( 'have.length.at.least', 3 );
+		cy.get( '.components-panel__body-title' ).contains( /link/i ).should( 'exist' );
+
+		// Expand Link Settings panel if needed
+		cy.get( '.components-panel__body-title button' ).contains( /link/i ).then( ( $button ) => {
+			const isExpanded = $button.attr( 'aria-expanded' ) === 'true';
+
+			if ( ! isExpanded ) {
+				cy.wrap( $button ).click();
+				cy.get( '.components-panel__body-title button' ).contains( /link/i ).should( 'have.attr', 'aria-expanded', 'true' );
+			}
+		} );
+
+		// Wait for SelectControl to render and test all link options
+		cy.get( '.components-panel__body' ).contains( /link/i ).closest( '.components-panel__body' ).within( () => {
+			cy.get( 'select' );
+			cy.get( 'select' ).select( 'none' );
+		} );
+
+		// Test all link options comprehensively
+		cy.get( '.components-panel__body' ).contains( /link/i ).closest( '.components-panel__body' ).within( () => {
+			// Test Media link
+			cy.get( 'select' ).select( 'media' );
+
+			// Test Attachment link
+			cy.get( 'select' ).select( 'attachment' );
+
+			// Test Custom link
+			cy.get( 'select' ).select( 'custom' );
+
+			// Test back to None
+			cy.get( 'select' ).select( 'none' );
+		} );
+
+		helpers.savePage();
+		helpers.checkForBlockErrors( 'coblocks/gallery-offset' );
+	} );
 } );