Handle restricted filesystem permissions and allow for disabling block editor support (#243)

* update theme-alpha to derive from twenty-twenty-five

* add try / catch / notify in activator

* add more custom exceptions

* Enable fallback checking for svg stylesheet using HEAD request

* enable differentiating admin warnings from fatal errors

and allow for multiline exception messages.

* check for svg styles with fallback warning notice when in WP admin

* use the warning version of fetch_svg_styles from the config controller too

* make the block editor support actions disableable

* rename function as ensure_

* on activation, initialize svg styles conditionally

* pre-release 5.0.2-1

* re-work the classic editor support

- handle null results when querying for editorId element
- use jQuery to handle binding click events to editors to avoid loss of
  click event bindings due to interaction with other plugin

* rebuild classic-editor bundle

* comment out special filters in theme-alpha/functions.php

* fix translators comment for phpcs

* make jquery dependence explicit for classic-editor

* move maybe_refresh_releases into initialize_admin()

* add default SVG styles

* maybe_refresh_releases only on the plugin's settings page

* reduce admin notices to warnings

* bump version

* wp_die with descriptive message on failed activation

* Fixes for phpcs

* update actions/cache version

* Update Dockerfile-latest to add uopz extension

* migrate SVG styles manager away from being a singleton

- make it more testable with uopz

* update multi-site activation tests to use non-singleton SVG styles
manager

* add uopz extension to CI

* add test coverage for svg styles on activation

* cleanup and auto-formatting

* cleanup and focus ActivationTest

* move svg-styles-manager tests into a separate test module

* add test coverage for filesystem permissions error on activation

* add coverage for throwing a specific exception when lacking filesystem
permissions

* add test coverage for stylesheet presence with and without filesystem permissions

* add more test coverage for loading including wp-admin

* enable uopz extension only for phpunit runs

Author: mlwilkerson

.github/workflows/jest.yml

@@ -21,7 +21,7 @@ jobs:
 
       - name: Cache node_module
         id: node-modules-cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: admin/node_modules
           key: ${{ runner.os }}-node-modules-${{ hashFiles('admin/package-lock.json') }}

.github/workflows/php.yml

@@ -46,6 +46,7 @@ jobs:
       - uses: shivammathur/setup-php@v2
         with:
           php-version: ${{ matrix.php }}
+          extensions: uopz
 
       - name: Validate composer.json and composer.lock
         id: composer-lock

bin/phpunit

@@ -4,4 +4,6 @@ DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"
 source $DIR/.common.bash
 source $DIR/.resolve-container.bash
 
-$WP_SUDO $DOCKER exec -it -w /var/www/html/wp-content/plugins/font-awesome $WP_CONTAINER composer exec phpunit -- $@
+# We need to add the uopz extension to the phpunit command, to enable that extension
+# that is used in the tests for mocking.
+$WP_SUDO $DOCKER exec -it -w /var/www/html/wp-content/plugins/font-awesome $WP_CONTAINER php -d extension=uopz /var/tmp/composer/vendor/bin/phpunit $@

classic-editor/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-i18n'), 'version' => '16532cdc2e9643455c8b');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-i18n'), 'version' => '7d5db1cbc6bf460346ff');

classic-editor/build/index.js

@@ -8,6 +8,8 @@ import { __ } from '@wordpress/i18n'
 
 const { IconChooserModal } = get(window, [GLOBAL_KEY, 'iconChooser'], {})
 
+const ICON_CHOOSER_OPEN_MODAL_BY_EDITOR_ID = {}
+
 // Creates a new icon chooser with its own open event and submit handler.
 function newIconChooser(editorId, container, editorInsert) {
   const modalOpenEvent = createCustomEvent()
@@ -72,31 +74,36 @@ function insertContentIntoEditor(editorId, content) {
   }
 }
 
-function initialize() {
-  const editorIds = get(window, '__FontAwesomeOfficialPlugin_tinymce__.editors', [])
-
-  for (const editorId of editorIds) {
-    const button = document.querySelector(`#fawp-tinymce-${editorId}`)
-    const editor = document.querySelector(`#${editorId}`)
-    const editorContainer = editor.parentElement
-
-    if (!editor || !button || !editorContainer) {
-      console.error(__('Font Awesome Plugin: could not attach to editor id:', 'font-awesome'), editorId)
-      continue
-    }
+function getIconChooserOpenModal(editorId) {
+  if (ICON_CHOOSER_OPEN_MODAL_BY_EDITOR_ID[editorId]) {
+    return ICON_CHOOSER_OPEN_MODAL_BY_EDITOR_ID[editorId]
+  }
 
-    const openIconChooser = newIconChooser(editorId, editorContainer, (editorId, content) => {
-      insertContentIntoEditor(editorId, content)
-    })
+  const editor = document.querySelector(`#${editorId}`)
+  const editorContainer = editor?.parentElement
 
-    button.addEventListener('click', openIconChooser)
+  if (!editorContainer) {
+    // The editor might be hidden. Bail early.
+    return
   }
-}
 
-if (document.readyState === 'complete') {
-  initialize()
-} else {
-  window.addEventListener('DOMContentLoaded', () => {
-    initialize()
+  const openIconChooser = newIconChooser(editorId, editorContainer, (editorId, content) => {
+    insertContentIntoEditor(editorId, content)
   })
+
+  ICON_CHOOSER_OPEN_MODAL_BY_EDITOR_ID[editorId] = openIconChooser
+
+  return openIconChooser
 }
+
+// Using jQuery seems to be the more idiomatic way to bind click events to the media button
+// in the WordPress editor. Doing it this way seems to resolve a conflict with the ACF plugin,
+// where our click event binding on the media button seemed to be removed on us.
+jQuery(document).on('click', '.font-awesome-icon-chooser-media-button', function(e) {
+  const editorId = e.target.getAttribute('data-fa-editor-id')
+  const iconChooserOpenModal = getIconChooserOpenModal(editorId)
+  // This setTimeout allow for the React component that is the Icon Chooser to be mounted
+  // and ready to receive the event. After the timeout expires, then the "open" event is dispatched.
+  // Without this, the event is dispatched before the React component is mounted and ready to receive it.
+  setTimeout(iconChooserOpenModal, 0)
+});

classic-editor/src/index.js

@@ -4,7 +4,7 @@ FROM wordpress:latest
 # See: https://deb.nodesource.com/
 RUN apt-get update && apt-get install -y ca-certificates curl gnupg
 RUN curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /tmp/nodesource.gpg
-ENV NODE_MAJOR=20
+ENV NODE_MAJOR=22
 RUN echo "deb [signed-by=/tmp/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list
 
 # Install packages
@@ -18,7 +18,12 @@ RUN curl -L -s https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-
 RUN groupadd -r user && useradd --no-log-init -r -g user user
 
 # Install composer
-RUN curl https://raw.githubusercontent.com/composer/getcomposer.org/76a7060ccb93902cd7576b67264ad91c8a2700e2/web/installer | php -- --quiet && chmod +x composer.phar && mv composer.phar /usr/local/bin/composer
+RUN php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" && \
+    php -r "if (hash_file('sha384', 'composer-setup.php') === 'dac665fdc30fdd8ec78b38b9800061b4150413ff2e3b6f88543c636f7cd84f6db9189d43a81e5503cda447da73c7e5b6') { echo 'Installer verified'.PHP_EOL; } else { echo 'Installer corrupt'.PHP_EOL; unlink('composer-setup.php'); exit(1); }" && \
+    php composer-setup.php && \
+    php -r "unlink('composer-setup.php');" && \
+    mv composer.phar /usr/local/bin/composer && \
+    chmod +x /usr/local/bin/composer
 
 COPY ./install-wp-tests-docker.sh /tmp
 
@@ -39,4 +44,6 @@ COPY ./setup-owasp.sh /tmp
 
 RUN /tmp/setup-owasp.sh
 
+RUN pecl install uopz
+
 CMD ["docker-entrypoint.sh"]

docker/Dockerfile-latest

@@ -209,14 +209,14 @@ public function init_plugin() {
 				add_action(
 					'admin_notices',
 					function() use ( $e ) {
-						self::emit_admin_error_output( $e );
+						self::emit_admin_error_output( $e, 'error' );
 					}
 				);
 			} catch ( Error $e ) {
 				add_action(
 					'admin_notices',
 					function() use ( $e ) {
-						self::emit_admin_error_output( $e );
+						self::emit_admin_error_output( $e, 'error' );
 					}
 				);
 			}
@@ -249,10 +249,10 @@ public function activate_plugin() {
 				require_once self::$loaded['path'] . 'includes/class-fontawesome-activator.php';
 				FontAwesome_Activator::activate();
 			} catch ( Exception $e ) {
-				self::emit_admin_error_output( $e, $activation_failed_message );
+				self::emit_admin_error_output( $e, 'error', $activation_failed_message );
 				exit;
 			} catch ( Error $e ) {
-				self::emit_admin_error_output( $e, $activation_failed_message );
+				self::emit_admin_error_output( $e, 'error', $activation_failed_message );
 				exit;
 			}
 		}
@@ -263,28 +263,41 @@ public function activate_plugin() {
 		 * @internal
 		 * @ignore
 		 */
-		public static function emit_admin_error_output( $e, $context_message = '' ) {
+		public static function emit_admin_error_output( $e, $level, $context_message = '' ) {
+			$message_level_class = $level === 'warning' ? 'notice notice-warning is-dismissible' : 'notice notice-error is-dismissible';
+			$header_messsage_error = esc_html__( 'The Font Awesome plugin caught a fatal error', 'font-awesome' );
+			$header_messsage_warning = esc_html__( 'The Font Awesome plugin has a warning', 'font-awesome' );
+			$header_message = $level === 'warning' ? $header_messsage_warning : $header_messsage_error;
+
 			if ( is_admin() && current_user_can( 'manage_options' ) ) {
-				echo '<div class="error">';
-				echo '<p>' . esc_html__( 'The Font Awesome plugin caught a fatal error', 'font-awesome' );
+				echo '<div class="' . esc_html( $message_level_class ) . '">';
+				echo '<p>' . $header_message;
 				if ( is_string( $context_message ) && '' !== $context_message ) {
 					echo ': ' . esc_html( $context_message );
 				} else {
 					echo '.';
 				}
-				echo '</p><p>';
+				echo '</p>';
 
 				if ( ! is_a( $e, 'Exception' ) && ! is_a( $e, 'Error' ) ) {
+					echo '<p>';
 					esc_html_e( 'No error message available.', 'font-awesome' );
+					echo '</p>';
 				} else {
 					self::emit_error_output_to_console( $e );
 
 					if ( boolval( $e->getMessage() ) ) {
-						echo esc_html( $e->getMessage() );
+						$lines = explode("\n", $e->getMessage());
+
+						foreach ($lines as $line) {
+							echo '<p>';
+						    echo esc_html( $line );
+							echo '</p>';
+						}
 					}
 				}
 
-				echo '</p></div>';
+				echo '</div>';
 			}
 		}
 
@@ -408,10 +421,10 @@ public static function initialize() {
 				require_once self::$loaded['path'] . 'includes/class-fontawesome-activator.php';
 				FontAwesome_Activator::initialize();
 			} catch ( Exception $e ) {
-				self::emit_admin_error_output( $e, $initialization_failed_msg );
+				self::emit_admin_error_output( $e, 'error', $initialization_failed_msg );
 				exit;
 			} catch ( Error $e ) {
-				self::emit_admin_error_output( $e, $initialization_failed_msg );
+				self::emit_admin_error_output( $e, 'error', $initialization_failed_msg );
 				exit;
 			}
 		}

font-awesome.php

@@ -5,6 +5,7 @@
 require_once trailingslashit( __DIR__ ) . 'class-fontawesome.php';
 require_once trailingslashit( __DIR__ ) . 'class-fontawesome-release-provider.php';
 require_once trailingslashit( __DIR__ ) . 'class-fontawesome-svg-styles-manager.php';
+require_once trailingslashit( FONTAWESOME_DIR_PATH ) . 'includes/error-util.php';
 
 /**
  * Plugin activation logic.
@@ -24,7 +25,21 @@ class FontAwesome_Activator {
 	 * @throws ReleaseProviderStorageException
 	 */
 	public static function activate() {
-		self::initialize();
+		try {
+			self::initialize();
+		} catch ( \Exception $e ) {
+			wp_die(
+				esc_html( $e->getMessage() ),
+				esc_html( __( 'Font Awesome Activation Error', 'font-awesome' ) ),
+				array( 'back_link' => true )
+			);
+		} catch ( \Error $e ) {
+			wp_die(
+				esc_html( $e->getMessage() ),
+				esc_html( __( 'Font Awesome Activation Error', 'font-awesome' ) ),
+				array( 'back_link' => true )
+			);
+		}
 	}
 
 	/**
@@ -84,7 +99,9 @@ public static function initialize_current_site( $force ) {
 			self::initialize_conflict_detection_options();
 		}
 
-		self::initialize_svg_styles();
+		if ( fa()->is_block_editor_support_enabled() ) {
+			self::initialize_svg_styles();
+		}
 	}
 
 	/**
@@ -140,6 +157,6 @@ private static function initialize_conflict_detection_options() {
 	 * @throws ConfigCorruptionException
 	 */
 	private static function initialize_svg_styles() {
-		FontAwesome_SVG_Styles_Manager::instance()->fetch_svg_styles( fa(), fa_release_provider() );
+		FontAwesome_SVG_Styles_Manager::ensure_svg_styles_with_admin_notice_warning( fa(), fa_release_provider() );
 	}
 }

includes/class-fontawesome-activator.php

@@ -135,7 +135,15 @@ public function update_item( $request ) {
 				$db_item
 			);
 
-			FontAwesome_SVG_Styles_Manager::instance()->fetch_svg_styles( fa(), $this->release_provider() );
+			/**
+			 * The admin notices will not be shown as a consequence of any failure in this
+			 * function call, since this is a REST controller.
+			 * However, this will allow us attempt the fetch, without it causing a fatal error
+			 * if it fails.
+			 */
+			if ( fa()->is_block_editor_support_enabled() ) {
+				FontAwesome_SVG_Styles_Manager::ensure_svg_styles_with_admin_notice_warning( fa(), $this->release_provider() );
+			}
 
 			$return_data = $this->build_item( fa() );
 			return new FontAwesome_REST_Response( $return_data, 200 );