Build tools: Allow building WordPress to src.

After the JavaScript reorganization in [43309], it was no longer possible to test WordPress from the `src` folder. That meant a build step was required to test PHP modifications. That is suboptimal as even a simple copy is slower than a web server just serving the new file. We achieve building to `src` by setting a `WORKING_DIR` constant in the Gruntfile that is `build` by default, but changes to `src` when the `--dev` flag is present on any Grunt command. We provide sensible defaults so some commands, such as copying `version.php`, always build to `build`. Because testing from `build` is no longer required, we change the messages present in `index.php` and `wp-admin/index.php` to be more broadly about building WordPress. We also change the webpack config to have more straightforward behavior based on the `buildTarget` argument. It only determines the build target now and has no implicit behavior anymore. `grunt build` still works as it worked before, to make sure that the build server produces the same `wordpress.zip` we are used to. We do all this instead of a symlink setup because symlinks don't work on every platform. Props omarreiss, netweb, flixos90, SergeyBiryukov. Fixes #44492. git-svn-id: https://develop.svn.wordpress.org/trunk@44359 602fd350-edb4-49c9-b593-d223f7449a82
Rarst · Dec 24, 2018 · d2d7243 · d2d7243
1 parent 29cb0f5
commit d2d7243
Show file tree

Hide file tree

Showing 9 changed files with 345 additions and 302 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,6 +21,10 @@ wp-tests-config.php
 /jsdoc
 /src/wp-includes/js
 /src/wp-includes/css/dist
+/src/wp-admin/css/*.min.css
+/src/wp-admin/css/*-rtl.css
+/src/wp-includes/css/*.min.css
+/src/wp-admin/css/colors/*/*.css
 
 # Files and folders that get created in wp-content
 /src/wp-content/blogs.dir

diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/index.php b/src/index.php
@@ -1,8 +1,8 @@
 <?php
 
 /**
- * Note: this file exists only to remind developers to run WordPress from the
- * build directory. For the real index.php that gets built and boots WordPress,
+ * Note: this file exists only to remind developers to build the assets.
+ * For the real index.php that gets built and boots WordPress,
  * please refer to _index.php.
  */
 
@@ -11,6 +11,11 @@
 	define( 'ABSPATH', dirname( __FILE__ ) . '/' );
 }
 
+if ( file_exists( ABSPATH . 'wp-includes/js/dist/edit-post.js' ) ) {
+	require_once ABSPATH . '/_index.php';
+	return;
+}
+
 define( 'WPINC', 'wp-includes' );
 require_once( ABSPATH . WPINC . '/load.php' );
 
@@ -26,18 +31,34 @@
 
 // Die with an error message
 $die = sprintf(
-	/* translators: %1$s: WordPress, %2$s: src, %3$s: build */
-	__( 'You seem to be running %1$s from the %2$s directory. %1$s needs to be built and run from the %3$s directory before we can get started.' ),
-	'WordPress',
-	'<code>src</code>',
-	'<code>build</code>'
-) . '</p>';
-$die .= '<p>' . sprintf(
-	/* translators: %s: WordPress */
-	__( 'You can build %s by running:' ),
+	/* translators: %1$s: WordPress */
+	__( 'You are running %1$s without JavaScript and CSS files. These need to be built.' ),
 	'WordPress'
 ) . '</p>';
-$die .= '<p><code>npm install && grunt build</code></p>';
+
+$die .= '<p>' . __( 'Before running any grunt tasks you need to make sure the dependencies are installed. You can install these by running ');
+$die .= '<code style="color: green;">npm install</code>.</p>';
+
+$die .= '<ul>';
+$die .= '<li>' . sprintf(
+	/* translators: %s: WordPress */
+		__( 'To build %s while developing run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt build --dev</code></li>';
+$die .= '<li>' . sprintf(
+		__( 'To build files automatically when changing the source files run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt watch</code></li>';
+$die .= '<li>' . sprintf(
+		__( 'To create a production build of %s run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt build</code></li>';
+$die .= '</ul>';
+
+
 $die .= '<p>' . sprintf(
 	/* translators: %1$s: NPM URL, %2$s: Grunt URL */
 	__( 'This requires <a href="%1$s">NPM</a> and <a href="%2$s">Grunt</a>. <a href="%3$s">Read more about setting up your local development environment</a>.' ),

diff --git a/src/wp-admin/index.php b/src/wp-admin/index.php
@@ -1,11 +1,16 @@
 <?php
 
 /**
- * Note: this file exists only to remind developers to run WordPress from the
- * build directory. For the real wp-admin/index.php that gets built and boots
- * the WordPress admin, please refer to wp-admin/_index.php.
+ * Note: this file exists only to remind developers to build the assets.
+ * For the real wp-admin/index.php that gets built and boots WordPress,
+ * please refer to wp-admin/_index.php.
  */
 
+if ( file_exists( dirname( __FILE__ ) . '/../wp-includes/js/dist/edit-post.js' ) ) {
+	require_once dirname( __FILE__ ) . '/_index.php';
+	return;
+}
+
 /** Define ABSPATH as this file's directory */
 if ( ! defined( 'ABSPATH' ) ) {
 	define( 'ABSPATH', dirname( __FILE__ ) . '/../' );
@@ -26,24 +31,40 @@
 
 // Die with an error message
 $die = sprintf(
-	/* translators: %1$s: WordPress, %2$s: src, %3$s: build */
-	__( 'You seem to be running %1$s from the %2$s directory. %1$s needs to be built and run from the %3$s directory before we can get started.' ),
-	'WordPress',
-	'<code>src</code>',
-	'<code>build</code>'
-) . '</p>';
-$die .= '<p>' . sprintf(
-	/* translators: %s: WordPress */
-	__( 'You can build %s by running:' ),
+	/* translators: %1$s: WordPress */
+	__( 'You are running %1$s without JavaScript and CSS files. These need to be built.' ),
 	'WordPress'
 ) . '</p>';
-$die .= '<p><code>npm install && grunt build</code></p>';
+
+$die .= '<p>' . __( 'Before running any grunt tasks you need to make sure the dependencies are installed. You can install these by running ');
+$die .= '<code style="color: green;">npm install</code>.</p>';
+
+$die .= '<ul>';
+$die .= '<li>' . sprintf(
+	/* translators: %s: WordPress */
+		__( 'To build %s while developing run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt build --dev</code></li>';
+$die .= '<li>' . sprintf(
+		__( 'To build files automatically when changing the source files run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt watch</code></li>';
+$die .= '<li>' . sprintf(
+		__( 'To create a production build of %s run:' ),
+		'WordPress'
+	) . '<br /><br />';
+$die .= '<code style="color: green;">grunt build</code></li>';
+$die .= '</ul>';
+
+
 $die .= '<p>' . sprintf(
 	/* translators: %1$s: NPM URL, %2$s: Grunt URL */
-	__( 'This requires <a href="%1$s">NPM</a> and <a href="%2$s">Grunt</a>. <a href="%3$s">Read more about setting up your local development environment</a>.' ),
-	'https://www.npmjs.com/',
-	'https://gruntjs.com/',
-	__( 'https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/' )
-) . '</p>';
+		__( 'This requires <a href="%1$s">NPM</a> and <a href="%2$s">Grunt</a>. <a href="%3$s">Read more about setting up your local development environment</a>.' ),
+		'https://www.npmjs.com/',
+		'https://gruntjs.com/',
+		__( 'https://make.wordpress.org/core/handbook/tutorials/installing-wordpress-locally/' )
+	) . '</p>';
 
 wp_die( $die, __( 'WordPress &rsaquo; Error' ) );
diff --git a/src/wp-includes/class-wp-block-parser.php b/src/wp-includes/class-wp-block-parser.php
@@ -63,10 +63,10 @@ class WP_Block_Parser_Block {
 	public $innerContent;
 
 	function __construct( $name, $attrs, $innerBlocks, $innerHTML, $innerContent ) {
-		$this->blockName    = $name;
-		$this->attrs        = $attrs;
-		$this->innerBlocks  = $innerBlocks;
-		$this->innerHTML    = $innerHTML;
+		$this->blockName   = $name;
+		$this->attrs       = $attrs;
+		$this->innerBlocks = $innerBlocks;
+		$this->innerHTML   = $innerHTML;
 		$this->innerContent = $innerContent;
 	}
 }
@@ -269,17 +269,15 @@ function proceed() {
 				 */
 				if ( 0 === $stack_depth ) {
 					if ( isset( $leading_html_start ) ) {
-						$this->output[] = (array) self::freeform(
-							substr(
-								$this->document,
-								$leading_html_start,
-								$start_offset - $leading_html_start
-							)
-						);
+						$this->output[] = (array) self::freeform( substr(
+							$this->document,
+							$leading_html_start,
+							$start_offset - $leading_html_start
+						) );
 					}
 
 					$this->output[] = (array) new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() );
-					$this->offset   = $start_offset + $token_length;
+					$this->offset = $start_offset + $token_length;
 					return true;
 				}
 
@@ -294,16 +292,13 @@ function proceed() {
 
 			case 'block-opener':
 				// track all newly-opened blocks on the stack
-				array_push(
-					$this->stack,
-					new WP_Block_Parser_Frame(
-						new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
-						$start_offset,
-						$token_length,
-						$start_offset + $token_length,
-						$leading_html_start
-					)
-				);
+				array_push( $this->stack, new WP_Block_Parser_Frame(
+					new WP_Block_Parser_Block( $block_name, $attrs, array(), '', array() ),
+					$start_offset,
+					$token_length,
+					$start_offset + $token_length,
+					$leading_html_start
+				) );
 				$this->offset = $start_offset + $token_length;
 				return true;
 
@@ -334,11 +329,11 @@ function proceed() {
 				 * otherwise we're nested and we have to close out the current
 				 * block and add it as a new innerBlock to the parent
 				 */
-				$stack_top                        = array_pop( $this->stack );
-				$html                             = substr( $this->document, $stack_top->prev_offset, $start_offset - $stack_top->prev_offset );
-				$stack_top->block->innerHTML     .= $html;
+				$stack_top = array_pop( $this->stack );
+				$html = substr( $this->document, $stack_top->prev_offset, $start_offset - $stack_top->prev_offset );
+				$stack_top->block->innerHTML .= $html;
 				$stack_top->block->innerContent[] = $html;
-				$stack_top->prev_offset           = $start_offset + $token_length;
+				$stack_top->prev_offset = $start_offset + $token_length;
 
 				$this->add_inner_block(
 					$stack_top->block,
@@ -396,22 +391,22 @@ function next_token() {
 			return array( 'no-more-tokens', null, null, null, null );
 		}
 
-		list( $match, $started_at ) = $matches[0];
+		list( $match, $started_at ) = $matches[ 0 ];
 
 		$length    = strlen( $match );
-		$is_closer = isset( $matches['closer'] ) && -1 !== $matches['closer'][1];
-		$is_void   = isset( $matches['void'] ) && -1 !== $matches['void'][1];
-		$namespace = $matches['namespace'];
-		$namespace = ( isset( $namespace ) && -1 !== $namespace[1] ) ? $namespace[0] : 'core/';
-		$name      = $namespace . $matches['name'][0];
-		$has_attrs = isset( $matches['attrs'] ) && -1 !== $matches['attrs'][1];
+		$is_closer = isset( $matches[ 'closer' ] ) && -1 !== $matches[ 'closer' ][ 1 ];
+		$is_void   = isset( $matches[ 'void' ] ) && -1 !== $matches[ 'void' ][ 1 ];
+		$namespace = $matches[ 'namespace' ];
+		$namespace = ( isset( $namespace ) && -1 !== $namespace[ 1 ] ) ? $namespace[ 0 ] : 'core/';
+		$name      = $namespace . $matches[ 'name' ][ 0 ];
+		$has_attrs = isset( $matches[ 'attrs' ] ) && -1 !== $matches[ 'attrs' ][ 1 ];
 
 		/*
 		 * Fun fact! It's not trivial in PHP to create "an empty associative array" since all arrays
 		 * are associative arrays. If we use `array()` we get a JSON `[]`
 		 */
 		$attrs = $has_attrs
-			? json_decode( $matches['attrs'][0], /* as-associative */ true )
+			? json_decode( $matches[ 'attrs' ][ 0 ], /* as-associative */ true )
 			: $this->empty_attrs;
 
 		/*
@@ -476,17 +471,17 @@ function add_freeform( $length = null ) {
 	 * @param int|null $last_offset last byte offset into document if continuing form earlier output
 	 */
 	function add_inner_block( WP_Block_Parser_Block $block, $token_start, $token_length, $last_offset = null ) {
-		$parent                       = $this->stack[ count( $this->stack ) - 1 ];
+		$parent = $this->stack[ count( $this->stack ) - 1 ];
 		$parent->block->innerBlocks[] = (array) $block;
-		$html                         = substr( $this->document, $parent->prev_offset, $token_start - $parent->prev_offset );
+		$html = substr( $this->document, $parent->prev_offset, $token_start - $parent->prev_offset );
 
 		if ( ! empty( $html ) ) {
-			$parent->block->innerHTML     .= $html;
+			$parent->block->innerHTML .= $html;
 			$parent->block->innerContent[] = $html;
 		}
 
 		$parent->block->innerContent[] = null;
-		$parent->prev_offset           = $last_offset ? $last_offset : $token_start + $token_length;
+		$parent->prev_offset = $last_offset ? $last_offset : $token_start + $token_length;
 	}
 
 	/**
@@ -505,18 +500,16 @@ function add_block_from_stack( $end_offset = null ) {
 			: substr( $this->document, $prev_offset );
 
 		if ( ! empty( $html ) ) {
-			$stack_top->block->innerHTML     .= $html;
+			$stack_top->block->innerHTML .= $html;
 			$stack_top->block->innerContent[] = $html;
 		}
 
 		if ( isset( $stack_top->leading_html_start ) ) {
-			$this->output[] = (array) self::freeform(
-				substr(
-					$this->document,
-					$stack_top->leading_html_start,
-					$stack_top->token_start - $stack_top->leading_html_start
-				)
-			);
+			$this->output[] = (array) self::freeform( substr(
+				$this->document,
+				$stack_top->leading_html_start,
+				$stack_top->token_start - $stack_top->leading_html_start
+			) );
 		}
 
 		$this->output[] = (array) $stack_top->block;