v0.7.0

.github/workflows/unit_tests.yml

@@ -33,7 +33,7 @@ jobs:
         env:
           MYSQL_DATABASE: wordpress_test
           MYSQL_ROOT_PASSWORD: root
-        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3
+        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3 
 
     steps:
       - uses: actions/checkout@v4
@@ -65,7 +65,7 @@ jobs:
 
       - name: Install WP test suite
         run: |
-          mysql -u root -proot -h mysql -P 3306 -e "DROP DATABASE IF EXISTS wordpress_test;"
+          mysql --skip-ssl -u root -proot -h mysql -P 3306 -e "DROP DATABASE IF EXISTS wordpress_test;"
           bash ./bin/install-wp-tests.sh wordpress_test root 'root' mysql ${{ matrix.wp-version }}
 
       - name: Run PHPUnit with coverage

.gitignore

@@ -1,5 +1,6 @@
 .svn
 .DS_Store
+node_modules
 
 # WordPress Dev Environment
 src/wordpress
@@ -9,4 +10,7 @@ dist
 **/vendor
 
 # Testing
-.phpunit.cache
+.phpunit.cache
+
+# Claude Code
+CLAUDE.md

README.md

@@ -45,6 +45,12 @@ To embed a note, use any note-specific URL. Notes ignore `width/height` and alwa
 
     [documentcloud url="https://www.documentcloud.org/documents/282753-lefler-thesis.html#document/p1/a53674"]
 
+To control which view is displayed by default, use the `mode` parameter:
+
+    [documentcloud url="https://www.documentcloud.org/documents/282753-lefler-thesis.html" mode="notes"]
+    [documentcloud url="https://www.documentcloud.org/documents/282753-lefler-thesis.html" mode="text"]
+    [documentcloud url="https://www.documentcloud.org/documents/282753-lefler-thesis.html" mode="grid"]
+
 Here's the full list of embed options you can pass via shortcode attributes; some are specific to the type of resource you're embedding.
 
 
@@ -55,10 +61,8 @@ Here's the full list of embed options you can pass via shortcode attributes; som
 
 ### Documents only:
 
-- `height` (integer): Height (in pixels) of the embed.
-- `width` (integer): Width (in pixels) of the embed. If used, will implicitly set `responsive="false"`.
-- `responsive` (boolean): Use responsive layout, which dynamically adjusts width to fill content area. Defaults `true`.
-- `responsive_offset` (integer): Distance (in pixels) to vertically offset the viewer for some responsive embeds.
+- `height` (integer): Maximum height (in pixels) of the embed.
+- `width` (integer): Maximum width (in pixels) of the embed.
 - `page` (integer): Page number to have the document scroll to by default.
 - `note` (integer): ID of the note that the document should highlight by default.
 - `notes` (boolean): Hide or show notes.
@@ -67,6 +71,7 @@ Here's the full list of embed options you can pass via shortcode attributes; som
 - `pdf` (boolean): Hide or show link to download original PDF.
 - `text` (boolean): Hide or show text tab.
 - `zoom` (boolean): Hide or show zoom slider.
+- `mode` (string): Display mode for the document viewer. Valid values: `document`, `notes`, `text`, `grid`. Controls which view is shown by default.
 - `format` (string): Indicate to the theme that this is a wide asset by setting this to `wide`. Defaults `normal`.
 
 Or as a Gutenberg Block :
@@ -153,7 +158,7 @@ docker compose exec -it testing bash
 cd src/documentcloud/blocks
 
 # 3. Install Node modules
-npm i
+npm i --force
 
 # 4. Now the container is ready to run Jest tests
 npm test
@@ -171,6 +176,12 @@ To create a new release:
 
 ## Changelog
 
+### 0.7.0
+* Removes the `responsive` and `responsive_offset` options.
+    All embeds are rendered responsively, so this option is now deprecated.
+    The `height` and `width` of the embed can still be limited with their respective options, but the embeds will respond to the size of their container.
+* Add `mode` parameter to control document viewer display mode. Valid values: `document`, `notes`, `text`, `grid`.
+
 ### 0.6.0
 * Add Gutenberg block for embedding DocumentCloud documents resonating a functionality similar to the shortcode.
 * Update the shortcode to support the following attributes

bin/install-wp-tests.sh

@@ -130,7 +130,7 @@ recreate_db() {
 	shopt -s nocasematch
 	if [[ $1 =~ ^(y|yes)$ ]]
 	then
-		mysqladmin drop $DB_NAME -f --user="$DB_USER" --password="$DB_PASS"$EXTRA
+		mysqladmin drop $DB_NAME -f --skip-ssl --user="$DB_USER" --password="$DB_PASS"$EXTRA
 		create_db
 		echo "Recreated the database ($DB_NAME)."
 	else
@@ -140,7 +140,7 @@ recreate_db() {
 }
 
 create_db() {
-	mysqladmin create $DB_NAME --user="$DB_USER" --password="$DB_PASS"$EXTRA
+	mysqladmin create $DB_NAME --skip-ssl --user="$DB_USER" --password="$DB_PASS"$EXTRA
 }
 
 install_db() {
@@ -166,7 +166,7 @@ install_db() {
 	fi
 
 	# create database
-	if [ $(mysql --user="$DB_USER" --password="$DB_PASS"$EXTRA --execute='show databases;' | grep ^$DB_NAME$) ]
+	if [ $(mysql --skip-ssl --user="$DB_USER" --password="$DB_PASS"$EXTRA --execute='show databases;' | grep ^$DB_NAME$) ]
 	then
 		echo "Reinstalling will delete the existing test database ($DB_NAME)"
 		read -p 'Are you sure you want to proceed? [y/N]: ' DELETE_EXISTING_DB

src/documentcloud/blocks/.eslintrc.json

@@ -1,19 +1,17 @@
 {
-	"extends": [
-	"plugin:@wordpress/eslint-plugin/recommended"
-],
+	"extends": [ "plugin:@wordpress/eslint-plugin/recommended" ],
 	"parserOptions": {
-	"ecmaVersion": 2021,
+		"ecmaVersion": 2021,
 		"sourceType": "module",
 		"ecmaFeatures": {
-		"jsx": true
-	}
-},
+			"jsx": true
+		}
+	},
 	"env": {
-	"browser": true,
+		"browser": true,
 		"es6": true
-},
+	},
 	"rules": {
-	// Any custom rules you want to add or override
-}
+		// Any custom rules you want to add or override
+	}
 }

src/documentcloud/blocks/__mocks__/@wordpress/components.js

@@ -40,6 +40,31 @@ export const ToggleControl = ( { label, checked, onChange } ) => {
 		</div>
 	);
 };
+export const SelectControl = ( { label, value, options, onChange, help } ) => {
+	const id = label
+		? `select-control-${ label.replace( /\s+/g, '-' ).toLowerCase() }`
+		: 'select-control-undefined';
+	return (
+		<div>
+			{ label && <label htmlFor={ id }>{ label }</label> }
+			<select
+				id={ id }
+				value={ value || '' }
+				onChange={ ( e ) => onChange( e.target.value ) }
+			>
+				{ options &&
+					options.map( ( option ) => (
+						<option key={ option.value } value={ option.value }>
+							{ option.label }
+						</option>
+					) ) }
+			</select>
+			{ help && (
+				<p className="components-base-control__help">{ help }</p>
+			) }
+		</div>
+	);
+};
 export const Placeholder = ( { children, instructions } ) => (
 	<div>
 		{ instructions && <p>{ instructions }</p> }

src/documentcloud/blocks/__tests__/edit.test.js

@@ -17,6 +17,7 @@ describe( 'DocumentCloud Block Edit Component', () => {
 		fullscreen: false,
 		onlyshoworg: false,
 		pdf: false,
+		mode: 'document',
 		style: '',
 		embeddedHtml: '',
 	};
@@ -264,4 +265,28 @@ describe( 'DocumentCloud Block Edit Component', () => {
 		} );
 		expect( mockSetAttributes ).toHaveBeenCalledWith( { pdf: true } );
 	} );
+
+	// Test: Mode selector calls setAttributes when changed
+	it( 'calls setAttributes when mode selector is changed', () => {
+		const attributesWithUrl = {
+			...defaultAttributes,
+			url: 'https://www.documentcloud.org/documents/282753-lefler-thesis/',
+		};
+
+		render(
+			<Edit
+				attributes={ attributesWithUrl }
+				setAttributes={ mockSetAttributes }
+			/>
+		);
+
+		// Find the mode selector
+		const modeSelector = screen.getByLabelText( 'Default Viewer Mode' );
+
+		// Change the mode to 'notes'
+		fireEvent.change( modeSelector, { target: { value: 'notes' } } );
+
+		// Check that setAttributes is called with the new mode
+		expect( mockSetAttributes ).toHaveBeenCalledWith( { mode: 'notes' } );
+	} );
 } );

src/documentcloud/blocks/__tests__/utils.test.js

@@ -4,6 +4,7 @@ import {
 	getOEmbedApiUrl,
 	parseDocumentCloudUrl,
 	cleanDocumentCloudUrl,
+	validateMode,
 } from '../src/documentcloud/utils/utils';
 
 describe( 'DocumentCloud Utils', () => {
@@ -59,10 +60,10 @@ describe( 'DocumentCloud Utils', () => {
 				onlyshoworg: false,
 				pdf: true,
 				style: 'custom-style',
-				responsive: true,
+				responsive: true, // Check that we ignore the responsive option
 			};
 			expect( getEmbedUrl( params ) ).toBe(
-				'https://www.documentcloud.org/documents/123?embed=1&title=1&fullscreen=0&onlyshoworg=0&pdf=1&style=custom-style&responsive=1'
+				'https://www.documentcloud.org/documents/123?embed=1&title=1&fullscreen=0&onlyshoworg=0&pdf=1&style=custom-style'
 			);
 		} );
 
@@ -76,12 +77,63 @@ describe( 'DocumentCloud Utils', () => {
 				onlyshoworg: true,
 				pdf: false,
 				style: 'border: 1px solid #000;',
-				responsive: false,
+				responsive: false, // Check that we ignore the responsive option
 			};
 			expect( getEmbedUrl( params ) ).toBe(
-				'https://embed.documentcloud.org/documents/24479621-24-03-13-epic-motion-to-enforce-injunction?embed=1&title=0&fullscreen=1&onlyshoworg=1&pdf=0&style=border%3A%201px%20solid%20%23000%3B&responsive=0'
+				'https://embed.documentcloud.org/documents/24479621-24-03-13-epic-motion-to-enforce-injunction?embed=1&title=0&fullscreen=1&onlyshoworg=1&pdf=0&style=border%3A%201px%20solid%20%23000%3B'
 			);
 		} );
+
+		it( 'should include valid mode parameter in embed URL', () => {
+			// Validates that valid mode values are included in the embed URL
+			const validModes = [ 'document', 'notes', 'text', 'grid' ];
+
+			validModes.forEach( ( mode ) => {
+				const params = {
+					useDocumentId: true,
+					documentId: '123',
+					mode: mode,
+				};
+				const result = getEmbedUrl( params );
+				expect( result ).toContain( `mode=${ mode }` );
+			} );
+		} );
+
+		it( 'should exclude invalid mode parameter from embed URL', () => {
+			// Validates that invalid mode values are not included in the embed URL
+			const invalidModes = [
+				'invalid',
+				'foo',
+				'bar',
+				'',
+				null,
+				undefined,
+			];
+
+			invalidModes.forEach( ( mode ) => {
+				const params = {
+					useDocumentId: true,
+					documentId: '123',
+					mode: mode,
+				};
+				const result = getEmbedUrl( params );
+				if ( mode && mode !== '' ) {
+					expect( result ).not.toContain( `mode=${ mode }` );
+				}
+				expect( result ).not.toContain( 'mode=' );
+			} );
+		} );
+
+		it( 'should not include mode parameter when not specified', () => {
+			// Validates that no mode parameter is added when not specified
+			const params = {
+				useDocumentId: true,
+				documentId: '123',
+				title: true,
+			};
+			const result = getEmbedUrl( params );
+			expect( result ).not.toContain( 'mode=' );
+		} );
 	} );
 
 	// Tests for getOEmbedApiUrl
@@ -143,4 +195,30 @@ describe( 'DocumentCloud Utils', () => {
 			} );
 		} );
 	} );
+
+	// Tests for validateMode
+	describe( 'validateMode', () => {
+		it( 'should return valid mode values', () => {
+			// Tests that valid mode values are returned unchanged
+			const validModes = [ 'document', 'notes', 'text', 'grid' ];
+			validModes.forEach( ( mode ) => {
+				expect( validateMode( mode ) ).toBe( mode );
+			} );
+		} );
+
+		it( 'should return null for invalid mode values', () => {
+			// Tests that invalid mode values return null
+			const invalidModes = [
+				'invalid',
+				'foo',
+				'bar',
+				'',
+				null,
+				undefined,
+			];
+			invalidModes.forEach( ( mode ) => {
+				expect( validateMode( mode ) ).toBeNull();
+			} );
+		} );
+	} );
 } );

src/documentcloud/blocks/build/blocks-manifest.php

@@ -49,6 +49,10 @@
 				'type' => 'boolean',
 				'default' => null
 			),
+			'mode' => array(
+				'type' => 'string',
+				'default' => 'document'
+			),
 			'embeddedHtml' => array(
 				'type' => 'string',
 				'default' => ''

src/documentcloud/blocks/build/documentcloud/block.json

@@ -44,6 +44,10 @@
       "type": "boolean",
       "default": null
     },
+    "mode": {
+      "type": "string",
+      "default": "document"
+    },
     "embeddedHtml": {
       "type": "string",
       "default": ""

src/documentcloud/blocks/build/documentcloud/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n'), 'version' => 'd389acc9710d4bc5b62a');
+<?php return array('dependencies' => array('react', 'react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n'), 'version' => '4cbafde8dfd690bf44f0');