diff --git a/projects/packages/jetpack-mu-wpcom/.phan/baseline.php b/projects/packages/jetpack-mu-wpcom/.phan/baseline.php index f8dea226fcd09..6865fcfd0af51 100644 --- a/projects/packages/jetpack-mu-wpcom/.phan/baseline.php +++ b/projects/packages/jetpack-mu-wpcom/.phan/baseline.php @@ -9,46 +9,31 @@ */ return [ // # Issue statistics: - // PhanTypeMismatchArgument : 35+ occurrences - // PhanPluginDuplicateConditionalNullCoalescing : 20+ occurrences - // PhanUndeclaredClassMethod : 20+ occurrences + // PhanTypeMismatchArgument : 15+ occurrences // PhanTypeMismatchArgumentProbablyReal : 15+ occurrences - // PhanTypeMismatchReturnProbablyReal : 10+ occurrences - // PhanUndeclaredFunction : 10+ occurrences - // PhanTypeMismatchReturn : 8 occurrences - // PhanUndeclaredConstant : 7 occurrences - // PhanTypeArraySuspiciousNullable : 6 occurrences + // PhanPluginDuplicateConditionalNullCoalescing : 8 occurrences + // PhanTypeMismatchReturn : 6 occurrences + // PhanUndeclaredClassMethod : 6 occurrences // PhanNoopNew : 5 occurrences - // PhanParamTooMany : 4 occurrences - // PhanUnextractableAnnotationSuffix : 4 occurrences - // PhanDeprecatedProperty : 3 occurrences - // PhanPluginDuplicateExpressionAssignmentOperation : 3 occurrences + // PhanTypeMismatchArgumentInternal : 4 occurrences + // PhanTypeMismatchReturnProbablyReal : 4 occurrences // PhanTypePossiblyInvalidDimOffset : 3 occurrences - // PhanTypeSuspiciousNonTraversableForeach : 3 occurrences - // PhanUndeclaredClassReference : 3 occurrences - // PhanUndeclaredGlobalVariable : 3 occurrences // PhanEmptyFQSENInCallable : 2 occurrences - // PhanPluginMixedKeyNoKey : 2 occurrences + // PhanParamTooMany : 2 occurrences // PhanTypeArraySuspicious : 2 occurrences - // PhanTypeMismatchArgumentInternal : 2 occurrences + // PhanTypeArraySuspiciousNullable : 2 occurrences // PhanTypeMismatchDefault : 2 occurrences // PhanTypeMissingReturn : 2 occurrences + // PhanUndeclaredFunction : 2 occurrences // PhanDeprecatedFunction : 1 occurrence // PhanImpossibleTypeComparison : 1 occurrence // PhanNonClassMethodCall : 1 occurrence // PhanNoopArrayAccess : 1 occurrence - // PhanPluginRedundantAssignment : 1 occurrence // PhanPluginSimplifyExpressionBool : 1 occurrence - // PhanPossiblyUndeclaredVariable : 1 occurrence // PhanRedefineFunction : 1 occurrence // PhanRedundantCondition : 1 occurrence // PhanTypeComparisonToArray : 1 occurrence - // PhanTypeInvalidLeftOperandOfBitwiseOp : 1 occurrence - // PhanTypeInvalidRightOperandOfBitwiseOp : 1 occurrence - // PhanTypeMismatchArgumentNullable : 1 occurrence - // PhanTypeMismatchArgumentNullableInternal : 1 occurrence // PhanTypeMismatchDimFetch : 1 occurrence - // PhanTypeMismatchProperty : 1 occurrence // PhanTypeMismatchReturnNullable : 1 occurrence // PhanTypeNonVarPassByRef : 1 occurrence // PhanTypeVoidArgument : 1 occurrence @@ -68,14 +53,6 @@ 'src/features/launchpad/launchpad.php' => ['PhanTypeArraySuspiciousNullable', 'PhanTypeMismatchArgument', 'PhanTypeMismatchReturn', 'PhanTypeMismatchReturnProbablyReal'], 'src/features/marketplace-products-updater/class-marketplace-products-updater.php' => ['PhanTypeMismatchDimFetch', 'PhanTypeMismatchReturn'], 'src/features/media/heif-support.php' => ['PhanPluginSimplifyExpressionBool'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/view.php' => ['PhanParamTooMany', 'PhanPluginDuplicateConditionalNullCoalescing', 'PhanPossiblyUndeclaredVariable', 'PhanTypeMismatchArgument', 'PhanTypeMismatchReturnProbablyReal'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php' => ['PhanTypeArraySuspiciousNullable'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/article.php' => ['PhanTypeMismatchArgument', 'PhanUndeclaredGlobalVariable'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/articles-list.php' => ['PhanUndeclaredGlobalVariable'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/articles-loop.php' => ['PhanUndeclaredGlobalVariable'], - 'src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.php' => ['PhanPluginDuplicateExpressionAssignmentOperation', 'PhanTypeArraySuspiciousNullable', 'PhanTypeMismatchArgumentNullableInternal', 'PhanTypeMismatchReturnProbablyReal', 'PhanUndeclaredClassMethod'], - 'src/features/newspack-blocks/synced-newspack-blocks/class-newspack-blocks-api.php' => ['PhanParamTooMany', 'PhanTypeMismatchArgument', 'PhanTypeMismatchReturn', 'PhanTypeMismatchReturnProbablyReal', 'PhanUndeclaredClassMethod', 'PhanUndeclaredFunction', 'PhanUnextractableAnnotationSuffix'], - 'src/features/newspack-blocks/synced-newspack-blocks/class-newspack-blocks.php' => ['PhanDeprecatedProperty', 'PhanPluginDuplicateConditionalNullCoalescing', 'PhanPluginDuplicateExpressionAssignmentOperation', 'PhanPluginMixedKeyNoKey', 'PhanPluginRedundantAssignment', 'PhanTypeInvalidLeftOperandOfBitwiseOp', 'PhanTypeInvalidRightOperandOfBitwiseOp', 'PhanTypeMismatchArgument', 'PhanTypeMismatchArgumentNullable', 'PhanTypeMismatchProperty', 'PhanTypeMismatchReturn', 'PhanTypeMismatchReturnProbablyReal', 'PhanTypeSuspiciousNonTraversableForeach', 'PhanUndeclaredClassMethod', 'PhanUndeclaredClassReference', 'PhanUndeclaredConstant', 'PhanUndeclaredFunction'], 'src/features/verbum-comments/class-verbum-comments.php' => ['PhanImpossibleTypeComparison', 'PhanNoopNew', 'PhanParamTooMany', 'PhanTypeMismatchArgumentProbablyReal', 'PhanUndeclaredFunction'], 'src/features/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-launchpad.php' => ['PhanPluginDuplicateConditionalNullCoalescing'], 'src/features/wpcom-endpoints/class-wpcom-rest-api-v2-endpoint-site-migration-migrate-guru-key.php' => ['PhanUndeclaredClassMethod'], diff --git a/projects/packages/jetpack-mu-wpcom/.phan/config.php b/projects/packages/jetpack-mu-wpcom/.phan/config.php index 8680d589c96a7..b69eda7cb1aef 100644 --- a/projects/packages/jetpack-mu-wpcom/.phan/config.php +++ b/projects/packages/jetpack-mu-wpcom/.phan/config.php @@ -32,6 +32,8 @@ // This file breaks analysis, Phan gets lost recursing in trying to figure out some types. // @todo Add type declarations so Phan won't have to do it itself. Or update to a modern less lib. 'src/features/custom-css/custom-css/preprocessors/lessc.inc.php', + // This is synced from the Newspack Blocks repo. + 'src/features/newspack-blocks/synced-newspack-blocks/', ), ) ); diff --git a/projects/packages/jetpack-mu-wpcom/.phpcsignore b/projects/packages/jetpack-mu-wpcom/.phpcsignore new file mode 100644 index 0000000000000..6a0ddf86aeb10 --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/.phpcsignore @@ -0,0 +1 @@ +src/features/newspack-blocks/synced-newspack-blocks diff --git a/projects/packages/jetpack-mu-wpcom/bin/sync-newspack-blocks.sh b/projects/packages/jetpack-mu-wpcom/bin/sync-newspack-blocks.sh index 55fda6a5bac10..89a1cf6b9c348 100755 --- a/projects/packages/jetpack-mu-wpcom/bin/sync-newspack-blocks.sh +++ b/projects/packages/jetpack-mu-wpcom/bin/sync-newspack-blocks.sh @@ -14,7 +14,7 @@ fi # pick up value considering that the argument # has the --key=value shape. -key_value=$(echo ${1} | cut -d'=' -f 2) +key_value=$(echo "${1}" | cut -d'=' -f 2) # Set mode depending on first argument if [[ $1 =~ ^--release= ]] then @@ -44,7 +44,7 @@ then echo --branch=master echo "--nodemodules (to use defined in package.json)" echo "--path=/path/to/newspack-blocks" - echo --release=v2.0.0 + echo --release=v4.0.0 echo echo You can find the latest release ID on https://github.com/Automattic/newspack-blocks/releases/latest echo @@ -52,7 +52,6 @@ then fi TARGET=./src/features/newspack-blocks/synced-newspack-blocks -ENTRY=./src/features/newspack-blocks/index.php if [[ ( "$MODE" != "path" ) && ( "$MODE" != "npm" ) ]]; then @@ -62,20 +61,23 @@ then if [[ "$CURRENT_VERSION" == "$NAME" ]]; then echo "The current version $CURRENT_VERSION of the newspack-blocks is synced." - exit 0 + read -rp "Do you want to proceed anyway? (y/N): " proceed + if [[ ! "$proceed" =~ ^[Yy]$ ]]; then + exit 0 + fi fi fi # make a temp directory - TEMP_DIR=`mktemp -d` + TEMP_DIR=$(mktemp -d) CODE=$TEMP_DIR/code # download zip file - echo Downloading $MODE $NAME into $TEMP_DIR - (cd $TEMP_DIR && curl -L --fail -s -O $URL) + echo "Downloading $MODE $NAME into $TEMP_DIR" + (cd "$TEMP_DIR" && curl -L --fail -s -O "$URL") # handle download error - ZIPS=( $TEMP_DIR/*.zip ) + ZIPS=( "$TEMP_DIR"/*.zip ) ZIP=${ZIPS[0]} if [ ! -f "$ZIP" ]; then echo "Tried to download $URL" @@ -90,13 +92,13 @@ then fi # extract zip - echo Extracting into $CODE - mkdir -p $CODE - unzip -q $ZIP -d $CODE + echo "Extracting into $CODE" + mkdir -p "$CODE" + unzip -q "$ZIP" -d "$CODE" # find the main file and use its directory as the root of our source dir - MAIN_FILE=`find $CODE -name "newspack-blocks.php"` - CODE=`dirname $MAIN_FILE` + MAIN_FILE=$(find "$CODE" -name "newspack-blocks.php") + CODE=$(dirname "$MAIN_FILE") # handle unzip error if [ ! -f "$CODE/newspack-blocks.php" ]; then @@ -127,18 +129,22 @@ mkdir -p $TARGET/components mkdir -p $TARGET/shared mkdir -p $TARGET/types -# copy files and directories -NEW_VERSION=v`jq -r .version $CODE/package.json` +# Update Newspack Blocks version number in the package. +NEW_VERSION=v$(jq -r .version "$CODE"/package.json) echo "$NEW_VERSION" > $TARGET/version.txt -cp $CODE/includes/class-newspack-blocks-api.php $TARGET/ -cp $CODE/includes/class-newspack-blocks.php $TARGET/ -cp -R $CODE/src/blocks/homepage-articles $TARGET/blocks/ -cp -R $CODE/src/blocks/carousel $TARGET/blocks/ -cp -R $CODE/src/shared $TARGET/ -cp -R $CODE/src/components $TARGET/ +sed -E -i.bak "s|^define\( 'NEWSPACK_BLOCKS__VERSION', '.*' \);$|define( 'NEWSPACK_BLOCKS__VERSION', '$NEW_VERSION' );|" "$TARGET"/../index.php +rm "$TARGET"/../index.php.bak + +# copy files and directories +cp "$CODE"/includes/class-newspack-blocks-api.php $TARGET/ +cp "$CODE"/includes/class-newspack-blocks.php $TARGET/ +cp -R "$CODE"/src/blocks/homepage-articles $TARGET/blocks/ +cp -R "$CODE"/src/blocks/carousel $TARGET/blocks/ +cp -R "$CODE"/src/shared $TARGET/ +cp -R "$CODE"/src/components $TARGET/ # Get Typescript working by copying the main type defs over. -cp $CODE/src/types/index.d.ts $TARGET/types/ +cp "$CODE"/src/types/index.d.ts $TARGET/types/ # Function types need to be capitalized in our system. We only match " function" # beginning with a space to avoid matching it as a substring. (Not perfect, but # imperfections will be caught by CI with failing tsc, etc.) @@ -146,12 +152,61 @@ sed "${sedi[@]}" -e "s| function| Function|g" "$TARGET/types/index.d.ts" # Note: I would have used eslint-nibble, but it doesn't support autofixing via the CLI. echo "Changing JS textdomain to match jetpack-mu-wpcom..." -pnpm --package=eslint@8.57.0 dlx eslint --no-ignore --rule '"@wordpress/i18n-text-domain":["error",{"allowedTextDomain":"jetpack-mu-wpcom"}]' --fix $TARGET > /dev/null +BASE=$(cd "$(dirname "${BASH_SOURCE[0]}")"/../../../.. && pwd) +FULLTARGET="$PWD/$TARGET" + +# Add a temporary single-rule eslint.config.mjs file. +cat > "$TARGET/eslint.config.mjs" < ( { ...block, rules: {} } ) ), + // Enable just this one rule. + { + rules: { + "@wordpress/i18n-text-domain": [ "error", { allowedTextDomain: "jetpack-mu-wpcom" } ], + } + }, +]; +EOF +( cd "$BASE" && pnpm run lint-file --no-inline-config --no-ignore --fix "$FULLTARGET" ) +rm "$TARGET/eslint.config.mjs" echo "Changing JS translation function call to avoid bad minification..." pnpm --package=jscodeshift dlx jscodeshift -t ./bin/sync-newspack-blocks-formatter.js --extensions=js $TARGET +# Add temporary PHPCS config file. +PHPCSSTANDARDFILE="$TARGET/phpcs.tmp.xml" +cat > "$PHPCSSTANDARDFILE" < + + + + + + + + + + + + + + + + +EOF echo "Changing PHP textdomain to match jetpack-mu-wpcom..." -../../../vendor/bin/phpcbf --standard=./.phpcs.dir.xml --filter=../../../vendor/automattic/jetpack-phpcs-filter/src/PhpcsFilter.php --runtime-set jetpack-filter-no-ignore -q $TARGET - +"$BASE"/vendor/bin/phpcbf --standard="$PHPCSSTANDARDFILE" "$TARGET" +rm "$PHPCSSTANDARDFILE" + +# Add textdomain to block.json +echo "Adding textdomain to all block.json files..." +for block_json_file in "$TARGET"/blocks/*/block.json; do + TMPFILE=$(mktemp) + jq --tab '. += {"textdomain": "jetpack-mu-wpcom"}' "$block_json_file" > "$TMPFILE" + mv "$TMPFILE" "$block_json_file" +done echo Sync done. diff --git a/projects/packages/jetpack-mu-wpcom/changelog/update-synced_newspack_blocks b/projects/packages/jetpack-mu-wpcom/changelog/update-synced_newspack_blocks new file mode 100644 index 0000000000000..15206e680281d --- /dev/null +++ b/projects/packages/jetpack-mu-wpcom/changelog/update-synced_newspack_blocks @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Newspack Blocks: Updated to version 4.5.2. diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/README.md b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/README.md index a4cc12220990b..b712c4428c0cd 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/README.md +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/README.md @@ -1,56 +1,56 @@ # Newspack Blocks -Some of the Newspack blocks were added to this repository in order to make it available to other parts of the FSE plugin, such as Starter Page Templates where these blocks will be used. +Some of the Newspack blocks were added to this repository so they would be available to other parts of the FSE plugin where these blocks will be used, such as Starter Page Templates. ## Block Posts Block This block allows you to list your posts in various layouts and filter them by criteria like category, tag or author. -It originally comes from the [Newspack Blocks collection](https://github.com/automattic/newspack-blocks) and the block is still being developed there. +It originally comes from the [Newspack Blocks collection](https://github.com/automattic/newspack-blocks) and the block is still being developed there as the `homepage-articles` block. -## Post Carousel Block +## Carousel Block -This block allows you to create a carousel of post's featured images and filter them by criteria like category, tag or author. +This block allows you to create a carousel of post featured images and filter them by criteria (e.g. category, tag or author). -It originally comes from the [Newspack Blocks collection](https://github.com/automattic/newspack-blocks) and the block is still being developed there. +It originally comes from the [Newspack Blocks collection](https://github.com/automattic/newspack-blocks) and the block is still being developed there as the `carousel` block. ## Structure ``` index.php — main entry file, registers the blocks on backend -blog-posts-block-editor.min.js — assets for the blog-posts-block editor -blog-posts-block-view.min.js — assets for the blog-posts-block rendered on frontend -carousel-block-editor.min.js — assets for the carousel-block editor -carousel-block-view.min.js — assets for the carousel-block rendered on frontend -synced-newspack-blocks/** — source code synced from the Newspack Blocks repository, not tracked in Jetpack git repo +blog-posts/ — assets for the blog-posts block frontend and editor +carousel/ — assets for the carousel block frontend and editor +synced-newspack-blocks/ — source code synced from the Newspack Blocks repository ``` -`blog-posts-block-editor.min.js`, `blog-posts-block-view.min.js`, `carousel-block-editor.min.js`, `carousel-block-view.min.js` and `index.php` are files written in order to bridge the parent plugin with the Newspack Blocks. It changes the block names to an `a8c/` namespace and does things like registering REST fields or styles and scripts. In these files we are free to do all those changes because they are not shared with Newspack and only live here in this repository. +Other than the `synced-newspack-blocks` directory, the above are files written in order to bridge the parent plugin with Newspack Blocks. They change the block names to an `a8c/` namespace and register REST fields, styles, and scripts. In these files we are free to make changes because they are not shared with Newspack and only live here in this repository. + ### Synchronizing the code -You can see that `synced-newspack-blocks` is being synced with the Newspack Blocks repository. Please make all improvements and additions on the Newspack side. Please don't make any direct changes to files in this directory as the next synchronization will overwrite them. Synced files are not being tracked in git and they are always downloaded fresh using the sync script explained further in this document. +The `synced-newspack-blocks` is synced with the Newspack Blocks repository. *Please make all improvements and additions upstream in the Newspack Blocks repo. Do not make any direct changes to files in this directory, as the next synchronization will overwrite them.* -Once your changes land on the Newspack side, coordinate with the team (over issues/PRs) to [make a new release](https://github.com/Automattic/newspack-blocks/releases) and once you have the release ID, you can pull the code into here. +Once your changes land in the Newspack Blocks repo, coordinate with the team (over issues/PRs) to [make a new release](https://github.com/Automattic/newspack-blocks/releases). Once you have the release ID (e.g. `v4.0.0`, you start a sync. -While being in `projects/packages/jetpack-mu-wpcom` directory, you can run: +While in the `projects/packages/jetpack-mu-wpcom` directory, run the following: ``` pnpm run sync:newspack-blocks --release= ``` -This will pull the code from the release and integrate it into this repository. Please: - 1. Review changes - 2. Keep the PHPCS config if still necessary - 3. Ensure [htmlentities uses ENT_COMPAT](https://github.com/Automattic/jetpack/pull/38873/commits/16f57e6f01b6eed98a19cd0299261ce5ac075b8e) - 4. Update the phan baseline with `jetpack phan --update-baseline packages/jetpack-mu-wpcom` - 4. Update `NEWSPACK_BLOCKS__VERSION` in [index.php](./index.php) - 5. Ensure that the blocks `block.json` has `"textdomain": "jetpack-mu-wpcom"` - 6. Commit. +This will pull the code from the release into this repository and perform the following tasks: +* Copies TypeScript types into place. +* Changes JS and PHP textdomain refs to `jetpack-mu-wpcom`. +* Adjusts JS translation function calls to avoid minification issues. +* Checks for potential places where `ENT_COMPAT` should be used. + +Once the script has completed: +1. Ensure the changes shown match the changes in the release. +2. Commit. ### Local development -Sometimes, probably, you will need to sync the NHA code straight in your local environment. It means you will get working on both projects at the same time. For this situation, you'd like to reference the code source through the `path` bin script argument. +Sometimes, probably, you will need to sync the code straight in your local environment. It means you will get working on both projects at the same time. For this situation, you'd like to reference the code source through the `path` bin script argument. ``` pnpm run sync:newspack-blocks --path=/Absolute/path/of/newspack-blocks/ diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/index.php b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/index.php index 83bbe4855c5d9..f5e9e3b03bdbe 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/index.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/index.php @@ -11,7 +11,7 @@ define( 'NEWSPACK_BLOCKS__BLOCKS_DIRECTORY', Jetpack_Mu_Wpcom::BASE_DIR . 'build/' ); define( 'NEWSPACK_BLOCKS__PLUGIN_DIR', plugin_dir_path( __FILE__ ) ); -define( 'NEWSPACK_BLOCKS__VERSION', '4.0.1' ); +define( 'NEWSPACK_BLOCKS__VERSION', 'v4.5.2' ); require_once __DIR__ . '/../../utils.php'; require_once __DIR__ . '/synced-newspack-blocks/class-newspack-blocks.php'; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/.phpcs.dir.xml b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/.phpcs.dir.xml deleted file mode 100644 index c49f51983d12d..0000000000000 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/.phpcs.dir.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/create-swiper.js b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/create-swiper.js index 151b9a0000201..661d61244b2ae 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/create-swiper.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/create-swiper.js @@ -14,8 +14,8 @@ const autoplayClassName = 'wp-block-newspack-blocks-carousel__autoplay-playing'; /** * A helper for IE11-compatible iteration over NodeList elements. * - * @param {object} nodeList - List of nodes to be iterated over. - * @param {Function} cb - Invoked for each iteratee. + * @param {Object} nodeList List of nodes to be iterated over. + * @param {Function} cb Invoked for each iteratee. */ function forEachNode( nodeList, cb ) { /** @@ -29,7 +29,7 @@ function forEachNode( nodeList, cb ) { /** * Modifies attributes on slide HTML to make it accessible. * - * @param {HTMLElement} slide - Slide DOM element + * @param {HTMLElement} slide Slide DOM element */ function activateSlide( slide ) { if ( slide ) { @@ -41,7 +41,7 @@ function activateSlide( slide ) { /** * Modifies attributes on slide HTML to make it accessible. * - * @param {HTMLElement} slide - Slide DOM element + * @param {HTMLElement} slide Slide DOM element */ function deactivateSlide( slide ) { if ( slide ) { @@ -54,15 +54,15 @@ function deactivateSlide( slide ) { * Creates a Swiper instance with predefined config used by the Articles * Carousel block in both front-end and editor. * - * @param {object} els - Swiper elements - * @param {Element} els.block - Block element - * @param {Element} els.container - Swiper container element - * @param {Element} els.next - Next button element - * @param {Element} els.prev - Previous button element - * @param {Element} els.play - Play button element - * @param {Element} els.pause - Pause button element - * @param {Element} els.pagination - Pagination element - * @param {Object} config - Swiper config + * @param {Object} els Swiper elements + * @param {Element} els.block Block element + * @param {Element} els.container Swiper container element + * @param {Element} els.next Next button element + * @param {Element} els.prev Previous button element + * @param {Element} els.play Play button element + * @param {Element} els.pause Pause button element + * @param {Element} els.pagination Pagination element + * @param {Object} config Swiper config * @return {Object} Swiper instance */ export default function createSwiper( els, config = {} ) { @@ -161,13 +161,13 @@ export default function createSwiper( els, config = {} ) { escapeHTML( `${ currentSlide.innerText }, ${ - alt - ? /* translators: the title of the image. */ sprintf( - __( 'Image: %s, ', 'jetpack-mu-wpcom' ), - alt - ) - : '' - } + alt + ? /* translators: the title of the image. */ sprintf( + __( 'Image: %s, ', 'jetpack-mu-wpcom' ), + alt + ) + : '' +} ${ slideInfo }` ), 'assertive' diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/edit.js b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/edit.js index c4a066ae61f1f..62a738282263b 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/edit.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/edit.js @@ -3,12 +3,17 @@ /** * External dependencies */ +import { isEqual } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; import { InspectorControls } from '@wordpress/block-editor'; // eslint-disable-next-line @wordpress/no-unsafe-wp-apis +import { dateI18n, __experimentalGetSettings } from '@wordpress/date'; +import { Component, createRef, Fragment, RawHTML } from '@wordpress/element'; import { BaseControl, Button, @@ -20,20 +25,16 @@ import { Spinner, ToggleControl, } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import { dateI18n, __experimentalGetSettings } from '@wordpress/date'; -import { Component, createRef, Fragment, RawHTML } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { decodeEntities } from '@wordpress/html-entities'; -import { __ } from '@wordpress/i18n'; -import classnames from 'classnames'; -import { isEqual } from 'lodash'; /** * Internal dependencies */ -import { PostTypesPanel, PostStatusesPanel } from '../../components/editor-panels'; import QueryControls from '../../components/query-controls'; +import { PostTypesPanel, PostStatusesPanel } from '../../components/editor-panels'; +import createSwiper from './create-swiper'; import { formatAvatars, formatByline, @@ -43,7 +44,6 @@ import { } from '../../shared/js/utils'; // Use same posts store as Homepage Posts block. import { postsBlockSelector, postsBlockDispatch, shouldReflow } from '../homepage-articles/utils'; -import createSwiper from './create-swiper'; // Max number of slides that can be shown at once. const MAX_NUMBER_OF_SLIDES = 6; @@ -242,9 +242,7 @@ class Edit extends Component {
{ hasNoPosts && ( -
- { __( 'Sorry, no posts were found.', 'jetpack-mu-wpcom' ) } -
+
{ __( 'Sorry, no posts were found.', 'jetpack-mu-wpcom' ) }
 ) } { ( ! this.state.swiperInitialized || ! latestPosts ) && ( @@ -302,9 +300,7 @@ class Edit extends Component { ) } { showCategory && ( ! post.newspack_post_sponsors || - post.newspack_sponsors_show_categories ) && ( - { decodeEntities( post.newspack_category_info ) } - ) } + post.newspack_sponsors_show_categories ) && ( { decodeEntities( post.newspack_category_info ) } ) }
) } { showTitle && ( @@ -337,15 +333,14 @@ class Edit extends Component { { dateI18n( dateFormat, post.date ) } ) } - { ( showCaption || showCredit ) && - post.newspack_featured_image_caption && ( -
- ) } + { ( showCaption || showCredit ) && post.newspack_featured_image_caption && ( +
+ ) }
) } @@ -433,10 +428,9 @@ class Edit extends Component { help={ 'cover' === imageFit ? __( - 'The image will fill the entire slide and will be cropped if necessary.', - 'jetpack-mu-wpcom' - ) - : __( + 'The image will fill the entire slide and will be cropped if necessary.', + 'jetpack-mu-wpcom' + ) : __( 'The image will be resized to fit inside the slide without being cropped.', 'jetpack-mu-wpcom', 0 @@ -470,10 +464,7 @@ class Edit extends Component { { setAttributes( { hideControls: _hideControls } ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/index.js b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/index.js index 37b562d71a759..796eacfc27460 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/index.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/index.js @@ -36,11 +36,7 @@ export const settings = { foreground: '#36f', }, category: 'newspack', - keywords: [ - __( 'posts', 'jetpack-mu-wpcom' ), - __( 'slideshow', 'jetpack-mu-wpcom' ), - __( 'carousel', 'jetpack-mu-wpcom' ), - ], + keywords: [ __( 'posts', 'jetpack-mu-wpcom' ), __( 'slideshow', 'jetpack-mu-wpcom' ), __( 'carousel', 'jetpack-mu-wpcom' ) ], description: __( 'A carousel of posts.', 'jetpack-mu-wpcom' ), attributes: { className: { diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/view.php b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/view.php index 87000f1e301fd..3d32080ba2eb2 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/view.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/carousel/view.php @@ -19,7 +19,7 @@ function newspack_blocks_render_block_carousel( $attributes ) { // This will let the FSE plugin know we need CSS/JS now. do_action( 'newspack_blocks_render_post_carousel' ); - ++$newspack_blocks_carousel_id; + $newspack_blocks_carousel_id++; $autoplay = isset( $attributes['autoplay'] ) ? $attributes['autoplay'] : false; $delay = isset( $attributes['delay'] ) ? absint( $attributes['delay'] ) : 3; $authors = isset( $attributes['authors'] ) ? $attributes['authors'] : array(); @@ -47,10 +47,10 @@ function newspack_blocks_render_block_carousel( $attributes ) { $authors = Newspack_Blocks::prepare_authors(); $newspack_blocks_post_id[ $post_id ] = true; - $article_classes = array( + $article_classes = [ 'post-has-image', 'swiper-slide', - ); + ]; // Add classes based on the post's assigned categories and tags. $article_classes[] = Newspack_Blocks::get_term_classes( $post_id ); @@ -58,7 +58,7 @@ function newspack_blocks_render_block_carousel( $attributes ) { // Get sponsors for this post. $sponsors = Newspack_Blocks::get_all_sponsors( $post_id ); - ++$counter; + $counter++; $has_featured_image = has_post_thumbnail(); $post_type = get_post_type(); $post_link = Newspack_Blocks::get_post_link( $post_id ); @@ -72,7 +72,7 @@ function newspack_blocks_render_block_carousel( $attributes ) { $show_credit = $attributes['showCredit']; // Validate the value of the "image fit" attribute. - $image_fits = array( 'cover', 'contain' ); + $image_fits = [ 'cover', 'contain' ]; $image_fit = in_array( $attributes['imageFit'], $image_fits, true ) ? $attributes['imageFit'] : $image_fits[0]; ?> @@ -129,7 +129,7 @@ function newspack_blocks_render_block_carousel( $attributes ) {
'newspack_blocks_render_block_carousel', - 'supports' => array(), + 'supports' => [], ), 'carousel' ) diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/block.json b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/block.json index 55143540cbf39..2957eb0b9b96e 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/block.json +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/block.json @@ -1,7 +1,7 @@ { "name": "homepage-articles", "category": "newspack", - "textdomain": "jetpack-mu-wpcom", + "apiVersion": 3, "attributes": { "className": { "type": "string", @@ -11,6 +11,10 @@ "type": "boolean", "default": true }, + "showFullContent": { + "type": "boolean", + "default": false + }, "excerptLength": { "type": "number", "default": 55 @@ -19,6 +23,10 @@ "type": "boolean", "default": false }, + "infiniteScroll": { + "type": "boolean", + "default": false + }, "readMoreLabel": { "type": "string", "default": "Keep reading" @@ -239,5 +247,6 @@ "type": "boolean", "default": true } - } + }, + "textdomain": "jetpack-mu-wpcom" } diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php index d35a74895283f..4209c0b1f2dc9 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/class-wp-rest-newspack-articles-controller.php @@ -38,87 +38,87 @@ public function register_routes() { register_rest_route( $this->namespace, '/articles', - array( - array( + [ + [ 'methods' => WP_REST_Server::READABLE, - 'callback' => array( $this, 'get_items' ), + 'callback' => [ $this, 'get_items' ], 'args' => $this->get_attribute_schema(), 'permission_callback' => '__return_true', - ), - ) + ], + ] ); // Endpoint to get articles in the editor, in regular/query mode. register_rest_route( $this->namespace, '/newspack-blocks-posts', - array( + [ 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( 'Newspack_Blocks_API', 'posts_endpoint' ), + 'callback' => [ 'Newspack_Blocks_API', 'posts_endpoint' ], 'args' => array_merge( $this->get_attribute_schema(), - array( - 'exclude' => array( // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude + [ + 'exclude' => [ // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude 'type' => 'array', 'items' => array( 'type' => 'integer', ), 'default' => array(), - ), - 'include' => array( + ], + 'include' => [ 'type' => 'array', 'items' => array( 'type' => 'integer', ), 'default' => array(), - ), - ) + ], + ] ), - 'permission_callback' => function () { + 'permission_callback' => function() { return current_user_can( 'edit_posts' ); }, - ) + ] ); // Endpoint to get articles in the editor, in specific posts mode. register_rest_route( $this->namespace, '/newspack-blocks-specific-posts', - array( + [ 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( 'Newspack_Blocks_API', 'specific_posts_endpoint' ), - 'args' => array( - 'search' => array( + 'callback' => [ 'Newspack_Blocks_API', 'specific_posts_endpoint' ], + 'args' => [ + 'search' => [ 'sanitize_callback' => 'sanitize_text_field', - ), - 'postsToShow' => array( + ], + 'postsToShow' => [ 'sanitize_callback' => 'absint', - ), - 'postType' => array( + ], + 'postType' => [ 'type' => 'array', 'items' => array( 'type' => 'string', ), 'default' => array(), - ), - ), - 'permission_callback' => function () { + ], + ], + 'permission_callback' => function() { return current_user_can( 'edit_posts' ); }, - ) + ] ); // Endpoint to get styles in the editor. register_rest_route( $this->namespace, '/homepage-articles-css', - array( + [ 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( 'Newspack_Blocks_API', 'css_endpoint' ), - 'permission_callback' => function () { + 'callback' => [ 'Newspack_Blocks_API', 'css_endpoint' ], + 'permission_callback' => function() { return current_user_can( 'edit_posts' ); }, - ) + ] ); } @@ -129,37 +129,42 @@ public function register_routes() { * @return WP_REST_Response */ public function get_items( $request ) { - $page = $request->get_param( 'page' ) ?? 1; - $exclude_ids = $request->get_param( 'exclude_ids' ) ?? array(); + $page = (int) $request->get_param( 'page' ) ?? 1; + $exclude_ids = $request->get_param( 'exclude_ids' ) ?? []; $next_page = $page + 1; $attributes = wp_parse_args( - $request->get_params() ?? array(), + $request->get_params() ?? [], wp_list_pluck( $this->get_attribute_schema(), 'default' ) ); + $deduplicate = $request->get_param( 'deduplicate' ) ?? 1; + if ( ! $deduplicate ) { + $exclude_ids = []; + } + $article_query_args = Newspack_Blocks::build_articles_query( $attributes, apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/homepage-articles' ) ); // If using exclude_ids, don't worry about pagination. Just get the next postsToShow number of results without the excluded posts. Otherwise, use standard WP pagination. $query = ! empty( $exclude_ids ) ? array_merge( $article_query_args, - array( + [ 'post__not_in' => $exclude_ids, // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_post__not_in - ) + ] ) : array_merge( $article_query_args, - array( + [ 'paged' => $page, - ) + ] ); // Run Query. $article_query = new WP_Query( $query ); // Defaults. - $items = array(); - $ids = array(); + $items = []; + $ids = []; $next_url = ''; Newspack_Blocks::filter_excerpt( $attributes ); @@ -169,9 +174,9 @@ public function get_items( $request ) { $article_query->the_post(); $html = Newspack_Blocks::template_inc( __DIR__ . '/templates/article.php', - array( + [ 'attributes' => $attributes, - ) + ] ); $items[]['html'] = $html; @@ -186,26 +191,26 @@ public function get_items( $request ) { $next_url = add_query_arg( array_merge( array_map( - function ( $attribute ) { + function( $attribute ) { return false === $attribute ? '0' : $attribute; }, $attributes ), - array( + [ 'exclude_ids' => false, 'page' => $next_page, - ) + ] ), rest_url( '/newspack-blocks/v1/articles' ) ); } return rest_ensure_response( - array( + [ 'items' => $items, 'ids' => $ids, 'next' => $next_url, - ) + ] ); } @@ -223,15 +228,15 @@ public function get_attribute_schema() { $this->attribute_schema = array_merge( $block_json['attributes'], - array( - 'exclude_ids' => array( + [ + 'exclude_ids' => [ 'type' => 'array', - 'default' => array(), - 'items' => array( + 'default' => [], + 'items' => [ 'type' => 'integer', - ), - ), - ) + ], + ], + ] ); } return $this->attribute_schema; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/edit.tsx b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/edit.tsx index f0b03e754c1d1..f02e884e7c2e1 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/edit.tsx +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/edit.tsx @@ -3,14 +3,27 @@ /** * Internal dependencies */ +import QueryControls from '../../components/query-controls'; +import { postsBlockSelector, postsBlockDispatch, isBlogPrivate, shouldReflow } from './utils'; +import { + formatAvatars, + formatByline, + formatSponsorLogos, + formatSponsorByline, + getPostStatusLabel, +} from '../../shared/js/utils'; +import { PostTypesPanel, PostStatusesPanel } from '../../components/editor-panels'; /** * External dependencies */ +import classNames from 'classnames'; /** * WordPress dependencies */ +import { __ } from '@wordpress/i18n'; +import { Component, Fragment, RawHTML } from '@wordpress/element'; import { BlockControls, InspectorControls, @@ -34,11 +47,9 @@ import { Path, SVG, } from '@wordpress/components'; -import { compose } from '@wordpress/compose'; import { withDispatch, withSelect } from '@wordpress/data'; -import { Component, Fragment, RawHTML } from '@wordpress/element'; +import { compose } from '@wordpress/compose'; import { decodeEntities } from '@wordpress/html-entities'; -import { __ } from '@wordpress/i18n'; import { Icon, formatListBullets, @@ -49,17 +60,6 @@ import { pullLeft, pullRight, } from '@wordpress/icons'; -import classNames from 'classnames'; -import { PostTypesPanel, PostStatusesPanel } from '../../components/editor-panels'; -import QueryControls from '../../components/query-controls'; -import { - formatAvatars, - formatByline, - formatSponsorLogos, - formatSponsorByline, - getPostStatusLabel, -} from '../../shared/js/utils'; -import { postsBlockSelector, postsBlockDispatch, isBlogPrivate, shouldReflow } from './utils'; let IS_SUBTITLE_SUPPORTED_IN_THEME: boolean; if ( @@ -111,6 +111,7 @@ class Edit extends Component< HomepageArticlesProps > { showCaption, showCredit, showExcerpt, + showFullContent, showReadMore, readMoreLabel, showSubtitle, @@ -185,8 +186,8 @@ class Edit extends Component< HomepageArticlesProps > { ) } { showCategory && ( ! post.newspack_post_sponsors || post.newspack_sponsors_show_categories ) && ( - { decodeEntities( post.newspack_category_info ) } - ) } + { decodeEntities( post.newspack_category_info ) } + ) }
) } { RichText.isEmpty( sectionHeader ) ? ( @@ -206,11 +207,16 @@ class Edit extends Component< HomepageArticlesProps > { { post.meta.newspack_post_subtitle || '' } ) } - { showExcerpt && ( + { showExcerpt && ! showFullContent && ( { post.excerpt.rendered } ) } + { ! showExcerpt && showFullContent && ( + + { post.full_content } + + ) } { showReadMore && post.post_link && ( { readMoreLabel } @@ -280,7 +286,9 @@ class Edit extends Component< HomepageArticlesProps > { mobileStack, minHeight, moreButton, + infiniteScroll, showExcerpt, + showFullContent, showReadMore, readMoreLabel, excerptLength, @@ -434,11 +442,20 @@ class Edit extends Component< HomepageArticlesProps > { ) : ( ! specificMode && ( - setAttributes( { moreButton: ! moreButton } ) } - /> + <> + setAttributes( { moreButton: ! moreButton } ) } + /> + { moreButton && ( + setAttributes( { infiniteScroll: ! infiniteScroll } ) } + /> + ) } + ) ) } { setAttributes( { showExcerpt: ! showExcerpt } ) } + onChange={ () => { + setAttributes({ + showExcerpt: !showExcerpt, + showFullContent: showFullContent ? false : showFullContent + }) + } } /> { showExcerpt && ( - setAttributes( { excerptLength: value } ) } - min={ 10 } - max={ 100 } - /> + + setAttributes( { excerptLength: value } ) } + min={ 10 } + max={ 100 } + /> + ) } - setAttributes( { showReadMore: ! showReadMore } ) } - /> + + { + setAttributes({ + showFullContent: !showFullContent, + showExcerpt: showExcerpt ? false : showExcerpt + }) + } } + /> + + + setAttributes( { showReadMore: ! showReadMore } ) } + /> + { showReadMore && ( { yield put( { type: 'DISABLE_UI' } ); - // Ensure innerBlocks are populated for widget area blocks. - // See https://github.com/WordPress/gutenberg/issues/32607#issuecomment-890728216. - const blocks = getBlocks().map( block => { - const innerBlocks = select( 'core/block-editor' ).getBlocks( block.clientId ); - return { - ...block, - innerBlocks, - }; - } ); + const blocks = recursivelyGetBlocks( getBlocks ); const blockQueries = getBlockQueries( blocks, blockNames ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/article.php b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/article.php index 2a0f2e109f2e0..eb74101785a04 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/article.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/templates/article.php @@ -7,7 +7,7 @@ */ call_user_func( - function ( $data ) { + function( $data ) { $attributes = apply_filters( 'newspack_blocks_homepage_posts_block_attributes', $data['attributes'] ); $authors = Newspack_Blocks::prepare_authors(); $classes = array(); @@ -42,14 +42,14 @@ function ( $data ) { // This global will be used by the newspack_blocks_filter_hpb_srcset filter. global $newspack_blocks_hpb_rendering_context; - $newspack_blocks_hpb_rendering_context = array( 'attrs' => $attributes ); + $newspack_blocks_hpb_rendering_context = [ 'attrs' => $attributes ]; // Disable lazy loading by using an arbitraty `loading` attribute other than `lazy`. // Empty string or `false` would still result in `lazy`. if ( $attributes['disableImageLazyLoad'] ) { $thumbnail_args['loading'] = 'none'; } - if ( $attributes['fetchPriority'] && in_array( $attributes['fetchPriority'], array( 'high', 'low', 'auto' ), true ) ) { + if ( $attributes['fetchPriority'] && in_array( $attributes['fetchPriority'], [ 'high', 'low', 'auto' ], true ) ) { $thumbnail_args['fetchpriority'] = $attributes['fetchPriority']; } @@ -147,9 +147,12 @@ class="" @@ -162,7 +165,7 @@ class=""
{ const { @@ -91,23 +89,22 @@ export const queryCriteriaFromAttributes = ( attributes: Block[ 'attributes' ] ) const criteria: PostsQuery = pickBy( isSpecificPostModeActive ? { - include: cleanPosts, - postsToShow: specificPosts.length, - postType, - } - : { - postsToShow, - categories: validateAttributeCollection( categories ), - includeSubcategories, - authors: validateAttributeCollection( authors ), - tags: validateAttributeCollection( tags ), - tagExclusions: validateAttributeCollection( tagExclusions ), - categoryExclusions: validateAttributeCollection( categoryExclusions ), - customTaxonomyExclusions, - customTaxonomies, - postType, - includedPostStatuses, - }, + include: cleanPosts, + postsToShow: specificPosts.length, + postType, + } : { + postsToShow, + categories: validateAttributeCollection( categories ), + includeSubcategories, + authors: validateAttributeCollection( authors ), + tags: validateAttributeCollection( tags ), + tagExclusions: validateAttributeCollection( tagExclusions ), + categoryExclusions: validateAttributeCollection( categoryExclusions ), + customTaxonomyExclusions, + customTaxonomies, + postType, + includedPostStatuses, + }, ( value: unknown ) => ! isUndefined( value ) ); criteria.excerptLength = excerptLength; @@ -128,8 +125,6 @@ export const validateAttributeCollection = ( attr: Array< number > ) => * This function is recursively traversing an array of blocks and creating an aray * of {postsQuery, clientId} objects. * The eligible blocks are identified by block name, passed in the second argument. - * @param blocks - * @param blockNames */ export const getBlockQueries = ( blocks: Block[], @@ -166,6 +161,7 @@ const generatePreviewPost = ( id: PostId ) => { excerpt: { rendered: '

' + __( 'The post excerpt.', 'jetpack-mu-wpcom' ) + '

', }, + full_content: __('Full post content.', 'jetpack-mu-wpcom'), post_link: '/', featured_media: '1', id, @@ -218,10 +214,6 @@ type Select = ( namespace: string ) => { /** * wordpress/data selector for blocks using this custom store. - * @param select - * @param root0 - * @param root0.clientId - * @param root0.attributes */ export const postsBlockSelector = ( select: Select, @@ -259,7 +251,9 @@ export const postsBlockSelector = ( isUIDisabled: isUIDisabled(), error: getError( { clientId } ), topBlocksClientIdsInOrder: blocks.map( block => block.clientId ), - latestPosts: isEditorBlock ? getPosts( { clientId } ) : getPreviewPosts( attributes ), // For block preview, display static content. + latestPosts: isEditorBlock + ? getPosts( { clientId } ) + : getPreviewPosts( attributes ), // For block preview, display static content. }; return props; @@ -267,9 +261,6 @@ export const postsBlockSelector = ( /** * wordpress/data dispatch for blocks using this custom store. - * @param dispatch - * @param root0 - * @param root0.isEditorBlock */ export const postsBlockDispatch = ( dispatch: typeof wpDataDispatch, @@ -281,3 +272,23 @@ export const postsBlockDispatch = ( triggerReflow: isEditorBlock ? dispatch( STORE_NAMESPACE ).reflow : () => undefined, }; }; + +// Ensure innerBlocks are populated for some blocks (e.g. `widget-area` and `post-content`). +// See https://github.com/WordPress/gutenberg/issues/32607#issuecomment-890728216. +// See https://github.com/Automattic/wp-calypso/issues/91839. +export const recursivelyGetBlocks = ( + getBlocks: ( clientId?: string ) => Block[], + blocks: Block[] = getBlocks() +) => { + return blocks.map( ( block ) => { + let innerBlocks = + block.innerBlocks.length === 0 + ? getBlocks( block.clientId ) + : block.innerBlocks; + innerBlocks = recursivelyGetBlocks( getBlocks, innerBlocks ); + return { + ...block, + innerBlocks, + }; + }); +}; diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.js b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.js index 92dabb4c5f45b..04394b396668c 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.js +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.js @@ -27,7 +27,7 @@ Array.prototype.forEach.call( * Creates internal state via closure to ensure all state is * isolated to a single Block + button instance. * - * @param {HTMLElement} blockWrapperEl - the button that was clicked + * @param {HTMLElement} blockWrapperEl the button that was clicked */ function buildLoadMoreHandler( blockWrapperEl ) { const btnEl = blockWrapperEl.querySelector( '[data-next]' ); @@ -35,18 +35,27 @@ function buildLoadMoreHandler( blockWrapperEl ) { return; } const postsContainerEl = blockWrapperEl.querySelector( '[data-posts]' ); + const isInfiniteScroll = btnEl.getAttribute( 'data-infinite-scroll' ); // Set initial state flags. - let isFetching = false; + window.newspackBlocksIsFetching = window.newspackBlocksIsFetching || false; + window.newspackBlocksFetchQueue = window.newspackBlocksFetchQueue || []; let isEndOfData = false; + let isPending = false; - btnEl.addEventListener( 'click', () => { - // Early return if still fetching or no more posts to render. - if ( isFetching || isEndOfData ) { - return false; + const maybeLoadMore = () => { + if ( isPending ) { + return; } + isPending = true; + loadMore(); + }; - isFetching = true; + const loadMore = () => { + // Early return if no more posts to render. + if ( isEndOfData ) { + return false; + } blockWrapperEl.classList.remove( 'is-error' ); blockWrapperEl.classList.add( 'is-loading' ); @@ -55,48 +64,86 @@ function buildLoadMoreHandler( blockWrapperEl ) { const requestURL = btnEl.getAttribute( 'data-next' ) + '&exclude_ids=' + getRenderedPostsIds().join( ',' ); + // If there's already a fetch in progress, queue this one to run after it ends. + if ( window.newspackBlocksIsFetching ) { + window.newspackBlocksFetchQueue.push( loadMore ); + return false; + } + + window.newspackBlocksIsFetching = true; fetchWithRetry( { url: requestURL, onSuccess, onError }, fetchRetryCount ); + }; - /** - * @param {object} data - Post data - */ - function onSuccess( data ) { - // Validate received data. - if ( ! isPostsDataValid( data ) ) { - return onError(); - } + /** + * @param {Object} data Post data + */ + function onSuccess( data ) { + // Validate received data. + if ( ! isPostsDataValid( data ) ) { + return onError(); + } - if ( data.items.length ) { - // Render posts' HTML from string. - const postsHTML = data.items.map( item => item.html ).join( '' ); - postsContainerEl.insertAdjacentHTML( 'beforeend', postsHTML ); - } + if ( data.items.length ) { + // Render posts' HTML from string. + const postsHTML = data.items.map( item => item.html ).join( '' ); + postsContainerEl.insertAdjacentHTML( 'beforeend', postsHTML ); + } - if ( data.next ) { - // Save next URL as button's attribute. - btnEl.setAttribute( 'data-next', data.next ); - } + if ( data.next ) { + // Save next URL as button's attribute. + btnEl.setAttribute( 'data-next', data.next ); + } - if ( ! data.items.length || ! data.next ) { - isEndOfData = true; - blockWrapperEl.classList.remove( 'has-more-button' ); - } + if ( ! data.items.length || ! data.next ) { + isEndOfData = true; + blockWrapperEl.classList.remove( 'has-more-button' ); + } - isFetching = false; + onEnd(); + } - blockWrapperEl.classList.remove( 'is-loading' ); - } + /** + * Handle fetching error + */ + function onError() { + blockWrapperEl.classList.add( 'is-error' ); + onEnd(); + } - /** - * Handle fetching error - */ - function onError() { - isFetching = false; + /** + * Callback to run after a fetch request is completed. + */ + function onEnd() { + window.newspackBlocksIsFetching = false; + blockWrapperEl.classList.remove( 'is-loading' ); - blockWrapperEl.classList.remove( 'is-loading' ); - blockWrapperEl.classList.add( 'is-error' ); + // If there are queued fetches, run the next one. + if ( window.newspackBlocksFetchQueue.length ) { + window.newspackBlocksFetchQueue.shift()(); } - } ); + isPending = false; + } + + btnEl.addEventListener( 'click', maybeLoadMore ); + + if ( isInfiniteScroll ) { + // Create an intersection observer instance + const btnObserver = new IntersectionObserver( + entries => { + entries.forEach( entry => { + if ( entry.isIntersecting ) { + maybeLoadMore(); + } + } ); + }, + { + root: null, + rootMargin: '0px', + threshold: 1, + } + ); + btnObserver.observe( btnEl ); + } } /** @@ -117,8 +164,8 @@ function getRenderedPostsIds() { * Wrapper for XMLHttpRequest that performs given number of retries when error * occurs. * - * @param {object} options - XMLHttpRequest options - * @param {number} n - retry count before throwing + * @param {Object} options XMLHttpRequest options + * @param {number} n retry count before throwing */ function fetchWithRetry( options, n ) { const xhr = new XMLHttpRequest(); @@ -174,7 +221,7 @@ function fetchWithRetry( options, n ) { * "required": ["items", "next"] * } * - * @param {object} data - posts endpoint payload + * @param {Object} data posts endpoint payload */ function isPostsDataValid( data ) { let isValid = false; @@ -202,8 +249,8 @@ function isPostsDataValid( data ) { /** * Checks if object has own property. * - * @param {object} obj - Object - * @param {string} prop - Property to check + * @param {Object} obj Object + * @param {string} prop Property to check */ function hasOwnProp( obj, prop ) { return Object.prototype.hasOwnProperty.call( obj, prop ); diff --git a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.php b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.php index 8e540d87bd481..9d1239ef8aefa 100644 --- a/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.php +++ b/projects/packages/jetpack-mu-wpcom/src/features/newspack-blocks/synced-newspack-blocks/blocks/homepage-articles/view.php @@ -17,13 +17,13 @@ function newspack_blocks_hpb_maximum_image_width() { if ( empty( $attributes ) ) { return $max_width; } - if ( isset( $attributes['align'] ) && in_array( $attributes['align'], array( 'full', 'wide' ), true ) ) { + if ( isset( $attributes['align'] ) && in_array( $attributes['align'], [ 'full', 'wide' ], true ) ) { // For full and wide alignments, the image width is more than 100% of the content width // and depends on site width. Can't make assumptions about the site width. return $max_width; } $site_content_width = 1200; - $is_image_half_width = in_array( $attributes['mediaPosition'], array( 'left', 'right' ), true ); + $is_image_half_width = in_array( $attributes['mediaPosition'], [ 'left', 'right' ], true ); if ( 'grid' === $attributes['postLayout'] ) { $columns = absint( $attributes['columns'] ); if ( $is_image_half_width ) { @@ -77,10 +77,10 @@ function newspack_blocks_filter_hpb_sizes( $sizes ) { * @param string $block_name The block name to search for. */ function newspack_blocks_retrieve_homepage_articles_blocks( $blocks, $block_name ) { - $ha_blocks = array(); + $ha_blocks = []; foreach ( $blocks as $block ) { if ( $block_name === $block['blockName'] ) { - $ha_blocks = array_merge( $ha_blocks, array( $block ) ); + $ha_blocks = array_merge( $ha_blocks, [ $block ] ); } if ( is_array( $block['innerBlocks'] ) ) { $ha_blocks = array_merge( $ha_blocks, newspack_blocks_retrieve_homepage_articles_blocks( $block['innerBlocks'], $block_name ) ); @@ -95,12 +95,12 @@ function newspack_blocks_retrieve_homepage_articles_blocks( $blocks, $block_name * @param array $blocks The blocks to search. */ function newspack_blocks_collect_all_attribute_values( $blocks ) { - $result = array(); + $result = []; foreach ( $blocks as $block ) { foreach ( $block as $key => $value ) { if ( ! isset( $result[ $key ] ) ) { - $result[ $key ] = array(); + $result[ $key ] = []; } if ( ! in_array( $value, $result[ $key ], true ) ) { $result[ $key ][] = $value; @@ -119,7 +119,7 @@ function newspack_blocks_collect_all_attribute_values( $blocks ) { * @param array $attrs The attributes used in the blocks. */ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { - $entry_title_type_scale = array( + $entry_title_type_scale = [ '0.7em', '0.9em', '1em', @@ -130,38 +130,38 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { '2.2em', '2.4em', '2.6em', - ); + ]; ob_start(); ?> - .wpnbha article .entry-title { + .wp-block-newspack-blocks-homepage-articles article .entry-title { font-size: 1.2em; } - .wpnbha .entry-meta { + .wp-block-newspack-blocks-homepage-articles .entry-meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 0.5em; } - .wpnbha article .entry-meta { + .wp-block-newspack-blocks-homepage-articles article .entry-meta { font-size: 0.8em; } - .wpnbha article .avatar { + .wp-block-newspack-blocks-homepage-articles article .avatar { height: 25px; width: 25px; } - .wpnbha .post-thumbnail{ + .wp-block-newspack-blocks-homepage-articles .post-thumbnail{ margin: 0; margin-bottom: 0.25em; } - .wpnbha .post-thumbnail img { + .wp-block-newspack-blocks-homepage-articles .post-thumbnail img { height: auto; width: 100%; } - .wpnbha .post-thumbnail figcaption { + .wp-block-newspack-blocks-homepage-articles .post-thumbnail figcaption { margin-bottom: 0.5em; } - .wpnbha p { + .wp-block-newspack-blocks-homepage-articles p { margin: 0.5em 0; } @@ -171,27 +171,27 @@ function newspack_blocks_get_homepage_articles_css_string( $attrs ) { echo esc_html( ".wpnbha.ts-$scale .entry-title{font-size: {$entry_title_type_scale[$scale - 1]}}" ); - if ( in_array( $scale, array( 8, 9, 10 ), true ) ) { + if ( in_array( $scale, [ 8, 9, 10 ], true ) ) { echo esc_html( ".wpnbha.ts-$scale .entry-title {line-height: 1.1;}" ); } - if ( in_array( $scale, array( 7, 8, 9, 10 ), true ) ) { + if ( in_array( $scale, [ 7, 8, 9, 10 ], true ) ) { echo esc_html( ".wpnbha.ts-$scale .newspack-post-subtitle {font-size: 1.4em;}" ); } - if ( in_array( $scale, array( 6 ), true ) ) { + if ( in_array( $scale, [ 6 ], true ) ) { echo esc_html( ".wpnbha.ts-$scale article .newspack-post-subtitle {font-size: 1.4em;}" ); } - if ( in_array( $scale, array( 5 ), true ) ) { + if ( in_array( $scale, [ 5 ], true ) ) { echo esc_html( ".wpnbha.ts-$scale article .newspack-post-subtitle {font-size: 1.2em;}" ); } - if ( in_array( $scale, array( 1, 2, 3 ), true ) ) { + if ( in_array( $scale, [ 1, 2, 3 ], true ) ) { echo esc_html( ".wpnbha.ts-$scale article .newspack-post-subtitle, .wpnbha.ts-$scale article .entry-wrapper p, .wpnbha.ts-$scale article .entry-wrapper .more-link, .wpnbha.ts-$scale article .entry-meta {font-size: 0.8em;}" ); @@ -226,7 +226,7 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) { return; } - $block_name = apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/homepage-articles' ); + $block_name = apply_filters( 'newspack_blocks_block_name', 'newspack-blocks/homepage-articles' ); $article_query = new WP_Query( Newspack_Blocks::build_articles_query( $attributes, $block_name ) ); if ( ! $article_query->have_posts() ) { return; @@ -253,7 +253,7 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) { // This will let the FSE plugin know we need CSS/JS now. do_action( 'newspack_blocks_render_homepage_articles' ); - $classes = Newspack_Blocks::block_classes( 'homepage-articles', $attributes, array( 'wpnbha' ) ); + $classes = Newspack_Blocks::block_classes( 'homepage-articles', $attributes, [ 'wpnbha' ] ); if ( isset( $attributes['postLayout'] ) && 'grid' === $attributes['postLayout'] ) { $classes .= ' is-grid'; @@ -325,13 +325,13 @@ function newspack_blocks_render_block_homepage_articles( $attributes ) { array_merge( map_deep( $attributes, - function ( $attribute ) { + function( $attribute ) { return false === $attribute ? '0' : rawurlencode( $attribute ); } ), - array( + [ 'page' => 2, - ) + ] ), rest_url( '/newspack-blocks/v1/articles' ) ); @@ -372,19 +372,23 @@ class="" $articles_rest_url, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 'article_query' => $article_query, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped 'attributes' => $attributes, // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - ) + ] ); ?>
-