[ { "path": ".allstar/branch_protection.yaml", "content": "# Copyright 2022 Google LLC\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n\ndismissStale: false\n" }, { "path": ".browserslistrc", "content": "last 2 Chrome versions\nlast 2 Firefox versions\nlast 2 Safari versions\nlast 2 iOS versions\nlast 2 Edge versions\nlast 2 Opera versions\n" }, { "path": ".distignore", "content": ".allstar\n.git\n.github\n.husky\n.idea\n.rollup.cache\n.storybook\n.wordpress-org\n__mocks__\n__static__\nassets/testjs\nbin\nbuild\ndocs\nincludes/composer.json\nkarma\nnode_modules\npackages\npatches\nplugin-assets\npublic\nsitemap-generator\nstatic\ntests\nthird-party/composer.json\n/vendor\nweb-stories-scraper\n.browserslistrc\n.DS_Store\n.distignore\n.editorconfig\n.eslintignore\n.eslintrc\n.git-blame-ignore-revs\n.gitattributes\n.gitignore\n.markdownlint.json\n.markdownlintignore\n.npmignore\n.npmpackagejsonlintrc.json\n.npmrc\n.nvmrc\n.oxlintrc.json\n.phpstorm.config.js\n.phpstorm.meta.php\n.phpunit.result.cache\n.prettierignore\n.prettierrc\n.stylelintignore\n.stylelintrc\n.test_artifacts\nbabel.config.cjs\nbun.lockb\ncodecov.yml\ncomposer.lock\nCONTRIBUTING.md\njest-puppeteer.config.cjs\njsconfig.json\nkarma-story-editor.config.cjs\nkarma-dashboard.config.cjs\npackage.json\npackage-lock.json\npercy.config.karma.yml\npercy.config.yml\nphpcs.xml\nphpcs.xml.dist\nphpmd.xml\nphpstan.neon\nphpstan.neon.dist\nphpunit.xml\nphpunit.xml.dist\nphpunit-integration.xml\nphpunit-integration.xml.dist\nphpunit-integration-multisite.xml\nphpunit-integration-multisite.xml.dist\nREADME.md\nrollup.config.js\nscoper.inc.php\ntsconfig.json\ntsconfig.shared.json\nwebpack.config.cjs\nwebpack.config.test.cjs\n" }, { "path": ".editorconfig", "content": "# WordPress Coding Standards\n# https://make.wordpress.org/core/handbook/coding-standards/\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\ntrim_trailing_whitespace = true\nindent_style = space\nindent_size = 2\n\n[*.php]\nindent_style = tab\nindent_size = 4\n\n[*.md]\ntrim_trailing_whitespace = false\n" }, { "path": ".eslintignore", "content": "**/node_modules/**\n**/vendor/**\n**/dist/**\n**/dist-module/**\n**/dist-types/**\n**/assets/js/*.js\n**/packages/migration/scripts/module.js\nbin/build/*\nbuild/*\n!.storybook\n" }, { "path": ".eslintrc", "content": "{\n \"root\": true,\n \"parser\": \"@babel/eslint-parser\",\n \"extends\": [\n \"plugin:@wordpress/eslint-plugin/i18n\",\n \"eslint:recommended\",\n \"plugin:import/recommended\",\n \"plugin:@eslint-community/eslint-comments/recommended\",\n \"plugin:react/recommended\",\n \"plugin:react-hooks/recommended-latest\",\n \"plugin:prettier/recommended\",\n \"plugin:jsx-a11y/recommended\",\n \"plugin:jsdoc/recommended\",\n \"plugin:styled-components-a11y/recommended\",\n \"plugin:oxlint/recommended\"\n ],\n \"plugins\": [\n \"@babel\",\n \"@wordpress\",\n \"header\",\n \"jsdoc\",\n \"jsx-a11y\",\n \"markdown\",\n \"react\",\n \"react-hooks\",\n \"styled-components-a11y\"\n ],\n \"parserOptions\": {\n \"ecmaVersion\": \"latest\",\n \"ecmaFeatures\": {\n \"jsx\": true\n }\n },\n \"rules\": {\n \"array-callback-return\": \"error\",\n \"block-scoped-var\": \"error\",\n \"complexity\": [\"error\", {\"max\": 20}],\n \"consistent-return\": \"error\",\n \"curly\": [\"error\", \"all\"],\n \"default-case\": \"error\",\n \"eol-last\": \"error\",\n \"eqeqeq\": \"error\",\n \"guard-for-in\": \"error\",\n \"no-await-in-loop\": \"error\",\n \"no-constant-binary-expression\": \"error\",\n \"no-extra-bind\": \"error\",\n \"no-extra-label\": \"error\",\n \"no-floating-decimal\": \"error\",\n \"no-implicit-coercion\": \"error\",\n \"no-implicit-globals\": \"error\",\n \"no-implied-eval\": \"error\",\n \"no-loop-func\": \"error\",\n \"no-new\": \"error\",\n \"no-new-func\": \"error\",\n \"no-new-wrappers\": \"error\",\n \"no-multiple-empty-lines\": \"error\",\n \"no-trailing-spaces\": \"error\",\n \"header/header\": [ \"error\", \"block\", [\n \"\",\n {\n \"pattern\": \" \\\\* Copyright \\\\d{4} Google LLC\",\n \"template\": \" * Copyright 2025 Google LLC\"\n },\n \" *\",\n \" * Licensed under the Apache License, Version 2.0 (the \\\"License\\\");\",\n \" * you may not use this file except in compliance with the License.\",\n \" * You may obtain a copy of the License at\",\n \" *\",\n \" * https://www.apache.org/licenses/LICENSE-2.0\",\n \" *\",\n \" * Unless required by applicable law or agreed to in writing, software\",\n \" * distributed under the License is distributed on an \\\"AS IS\\\" BASIS,\",\n \" * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\",\n \" * See the License for the specific language governing permissions and\",\n \" * limitations under the License.\",\n \" \"\n ] ],\n \"import/no-cycle\": \"error\",\n \"import/no-restricted-paths\": [ \"error\", {\n \"zones\": [ {\n \"target\": \"./packages/migration/src/migrations\",\n \"from\": \"./packages/story-editor/src\",\n \"except\": [ \"./migration/migrations\" ]\n }, {\n \"target\": \"./packages/story-editor/src\",\n \"from\": \"./packages/story-editor/src/utils/useWhyDidYouUpdate.js\"\n } ]\n } ],\n \"import/dynamic-import-chunkname\": [ \"error\", {\n \"webpackChunknameFormat\": \"[0-9a-zA-Z-_/.[\\\\]]+\"\n } ],\n \"import/no-useless-path-segments\": [\"error\", {\n \"noUselessIndex\": true\n }],\n \"import/no-relative-packages\": \"error\",\n \"import/no-internal-modules\": [ \"error\", {\n \"forbid\": [ \"@googleforcreators/**/*\" ]\n } ],\n \"jsx-a11y/label-has-for\": \"off\",\n \"jsx-a11y/media-has-caption\": [ \"error\", {\n \"audio\": [ \"Audio\" ],\n \"video\": [ \"Video\", \"FadedVideo\", \"CropVideo\", \"StyledVideo\" ],\n \"track\": [ \"Track\" ]\n }],\n \"no-restricted-properties\": \"error\",\n \"no-return-assign\": \"error\",\n \"no-return-await\": \"error\",\n \"no-sequences\": \"error\",\n \"no-shadow\": [\"error\",\n {\n \"ignoreOnInitialization\": true\n }\n ],\n \"no-template-curly-in-string\": \"error\",\n \"no-throw-literal\": \"error\",\n \"no-unmodified-loop-condition\": \"error\",\n \"no-unused-vars\": [\n \"error\",\n {\n \"ignoreRestSiblings\": true\n }\n ],\n \"no-useless-call\": \"error\",\n \"jsx-a11y/anchor-has-content\": \"off\",\n \"no-useless-concat\": \"error\",\n \"no-console\": \"error\",\n \"no-duplicate-imports\": \"error\",\n \"no-var\": \"error\",\n \"prefer-arrow-callback\": [\n \"error\",\n {\n \"allowNamedFunctions\": true\n }\n ],\n \"prefer-const\": \"error\",\n \"prefer-object-spread\": \"error\",\n \"prefer-promise-reject-errors\": \"error\",\n \"prefer-rest-params\": \"error\",\n \"prefer-spread\": \"error\",\n \"radix\": [\"error\", \"as-needed\"],\n \"require-await\": \"error\",\n \"rest-spread-spacing\": [\"error\", \"never\"],\n \"react/forbid-component-props\": [\"error\", {\n \"forbid\": [\"for\"]\n }],\n \"react/jsx-key\": \"error\",\n \"react/no-array-index-key\": \"error\",\n \"react/no-unknown-property\": [\n \"error\",\n {\n \"ignore\": [\n \"amp\",\n \"amp-boilerplate\",\n \"amp-custom\",\n \"animate-in\",\n \"animate-in-delay\",\n \"animate-in-duration\",\n \"custom-element\"\n ]\n }\n ],\n \"react/prop-types\": \"error\",\n \"react-hooks/rules-of-hooks\": \"error\",\n \"react-hooks/exhaustive-deps\": [\n \"error\",\n {\n \"enableDangerousAutofixThisMayCauseInfiniteLoops\": false,\n \"additionalHooks\": [\n {\n \"test\": \"useSelect$\",\n \"callbackIndex\": 0\n },\n {\n \"test\": \"useBatchingCallback\",\n \"callbackIndex\": 0\n },\n {\n \"test\": \"useKeyEffectInternal\",\n \"callbackIndex\": 3\n },\n {\n \"test\": \"useKeyEffect\",\n \"callbackIndex\": 2\n },\n {\n \"test\": \"useKeyDownEffect\",\n \"callbackIndex\": 2\n },\n {\n \"test\": \"useKeyUpEffect\",\n \"callbackIndex\": 2\n },\n {\n \"test\": \"useGlobalKeyDownEffect\",\n \"callbackIndex\": 1\n },\n {\n \"test\": \"useGlobalKeyUpEffect\",\n \"callbackIndex\": 1\n },\n {\n \"test\": \"useIntersectionEffect\",\n \"callbackIndex\": 2\n },\n {\n \"test\": \"useResizeEffect\",\n \"callbackIndex\": 1\n }\n ]\n }\n ],\n \"react/jsx-boolean-value\": \"error\",\n \"react/jsx-fragments\": \"error\",\n \"react/jsx-no-literals\": \"error\",\n \"react/jsx-no-useless-fragment\": \"error\",\n \"react/no-unused-prop-types\": \"error\",\n \"react/react-in-jsx-scope\": \"off\",\n \"react/self-closing-comp\": \"error\",\n \"react-hooks/config\": \"error\",\n \"react-hooks/error-boundaries\": \"error\",\n \"react-hooks/component-hook-factories\": \"error\",\n \"react-hooks/gating\": \"error\",\n \"react-hooks/globals\": \"error\",\n \"react-hooks/immutability\": \"error\",\n \"react-hooks/preserve-manual-memoization\": \"error\",\n \"react-hooks/purity\": \"error\",\n \"react-hooks/refs\": \"error\",\n \"react-hooks/set-state-in-effect\": \"error\",\n \"react-hooks/set-state-in-render\": \"error\",\n \"react-hooks/static-components\": \"error\",\n \"react-hooks/unsupported-syntax\": \"warn\",\n \"react-hooks/use-memo\": \"error\",\n \"react-hooks/incompatible-library\": \"warn\",\n \"import/no-extraneous-dependencies\": \"error\",\n \"import/no-unresolved\": \"error\",\n \"import/order\": [\n \"error\",\n {\n \"groups\": [\n \"builtin\",\n [\"external\", \"unknown\"],\n \"internal\",\n \"parent\",\n \"sibling\",\n \"index\"\n ]\n }\n ],\n \"jsdoc/check-indentation\": \"error\",\n \"jsdoc/check-syntax\": \"error\",\n \"jsdoc/check-tag-names\": [\"error\", {\n \"definedTags\": [ \"jest-environment\" ]\n }],\n \"jsdoc/reject-any-type\": \"off\",\n \"jsdoc/reject-function-type\": \"off\",\n \"jsdoc/require-jsdoc\": [\"off\", {\n \"publicOnly\": true\n }],\n \"jsdoc/require-returns\": \"error\",\n \"jsdoc/require-param-description\": \"error\",\n \"jsdoc/tag-lines\": [\n \"error\",\n \"any\",\n { \"startLines\": 1 }\n ],\n \"jsdoc/valid-types\": \"error\",\n \"@eslint-community/eslint-comments/no-unused-disable\": \"error\",\n \"@eslint-community/eslint-comments/require-description\": \"error\",\n \"@wordpress/dependency-group\": \"error\",\n \"@wordpress/i18n-no-flanking-whitespace\": \"error\",\n \"@wordpress/no-unused-vars-before-return\": [\"error\", {\n \"excludePattern\": \"^use\"\n }],\n \"@wordpress/react-no-unsafe-timeout\": \"error\",\n \"@wordpress/i18n-text-domain\": [\"error\", {\n \"allowedTextDomain\": \"web-stories\"\n }],\n \"@wordpress/valid-sprintf\": \"error\",\n \"@babel/no-unused-expressions\": [\n \"error\",\n {\n \"allowShortCircuit\": true\n }\n ]\n },\n \"env\": {\n \"browser\": true,\n \"es2020\": true\n },\n \"globals\": {\n \"__webpack_public_path__\": \"writable\",\n \"WEB_STORIES_CI\": \"readonly\",\n \"WEB_STORIES_DISABLE_ERROR_BOUNDARIES\": \"readonly\",\n \"WEB_STORIES_DISABLE_OPTIMIZED_RENDERING\": \"readonly\",\n \"WEB_STORIES_DISABLE_PREVENT\": \"readonly\",\n \"WEB_STORIES_DISABLE_QUICK_TIPS\": \"readonly\",\n \"WEB_STORIES_ENV\": \"readonly\"\n },\n \"settings\": {\n \"import/resolver\": {\n \"@web-stories-wp/eslint-import-resolver\": {\n \"mapping\": {\n \"^@googleforcreators\\\\/(.*)\\\\/(.*)\": \"./packages/$1/src/$2\",\n \"^@googleforcreators\\\\/(.*)\": \"./packages/$1/src/\",\n \"^@web-stories-wp\\\\/(.*)\": \"./packages/$1/src/\"\n },\n \"extensions\": [ \".js\", \".jsx\", \".ts\", \".tsx\" ]\n }\n },\n \"jsdoc\": {\n \"mode\": \"typescript\",\n \"preferredTypes\": {\n \"object\": \"Object\"\n },\n \"tagNamePreference\": {\n \"returns\": \"return\",\n \"yields\": \"yield\"\n }\n },\n \"react\": {\n \"version\": \"detect\"\n },\n \"linkComponents\": [\n \"Link\",\n {\"name\": \"Plain\", \"linkAttribute\": \"href\"},\n {\"name\": \"Primary\", \"linkAttribute\": \"href\"},\n \"PrimaryLink\",\n \"SecondaryLink\",\n \"ExternalLink\",\n \"ScrimAnchor\"\n ],\n \"testing-library/custom-renders\": [\n \"arrange\",\n \"renderWithTheme\",\n \"renderWithProviders\",\n \"renderPanel\",\n \"setup\"\n ]\n },\n \"overrides\": [\n {\n \"files\": [\n \"**/*.ts\",\n \"**/*.tsx\"\n ],\n \"plugins\": [\n \"@typescript-eslint\"\n ],\n \"extends\": [\n \"plugin:@typescript-eslint/recommended\",\n \"plugin:@typescript-eslint/recommended-type-checked\"\n ],\n \"parser\": \"@typescript-eslint/parser\",\n \"parserOptions\": {\n \"projectService\": true,\n \"warnOnUnsupportedTypeScriptVersion\": false\n },\n \"rules\": {\n \"@typescript-eslint/no-shadow\": [\"error\",\n {\n \"ignoreOnInitialization\": true\n }\n ],\n \"@typescript-eslint/unbound-method\": [\n \"error\",\n {\n \"ignoreStatic\": true\n }\n ],\n \"@typescript-eslint/no-unused-vars\": [\n \"error\",\n {\n \"ignoreRestSiblings\": true\n }\n ],\n \"react/prop-types\": \"off\",\n \"getter-return\": \"off\",\n \"jsdoc/check-param-names\": \"off\",\n \"jsdoc/require-param\": \"off\",\n \"jsdoc/require-param-type\": \"off\",\n \"jsdoc/require-returns\": \"off\",\n \"jsdoc/require-returns-check\": \"off\",\n \"jsdoc/require-returns-type\": \"off\",\n \"jsdoc/no-types\": \"error\",\n \"no-duplicate-imports\": \"off\",\n \"no-unused-vars\": \"off\",\n \"no-shadow\": \"off\",\n \"no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"prop-types\",\n \"message\": \"Use TypeScript instead.\"\n }\n ]\n }\n ],\n \"import/no-unresolved\": \"off\",\n \"import/default\": \"off\",\n \"import/named\": \"off\"\n }\n },\n {\n \"files\": [\n \"typings/**/*.ts\",\n \"**/*.d.ts\"\n ],\n \"rules\": {\n \"no-undef\": \"off\",\n \"no-unused-vars\": \"off\",\n \"no-var\": \"off\",\n \"@wordpress/dependency-group\": \"off\"\n }\n },\n {\n \"files\": [\n \"__mocks__/**/*.js\",\n \"**/test/**/*.js\",\n \"**/test/**/*.ts\",\n \"**/testUtils/**/*.js\",\n \"**/testUtils/**/*.ts\",\n \"tests/js/**/*.js\"\n ],\n \"excludedFiles\": [\n \"**/karma/**/*.js\",\n \"**/test/**/*.karma.js\"\n ],\n \"extends\": [\n \"plugin:jest/all\",\n \"plugin:testing-library/react\",\n \"plugin:jest-dom/recommended\",\n \"plugin:jest-extended/all\"\n ],\n \"plugins\": [\n \"jsx-a11y\",\n \"header\",\n \"testing-library\",\n \"jest-dom\"\n ],\n \"env\": {\n \"node\": true\n },\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"react/prop-types\": \"off\",\n \"react-hooks/globals\": \"off\",\n \"react-hooks/immutability\": \"off\",\n \"jest/no-hooks\": \"off\",\n \"jest/no-untyped-mock-factory\": \"off\",\n \"jest/max-expects\": \"off\",\n \"jest/prefer-expect-assertions\": \"off\",\n \"jest/prefer-importing-jest-globals\": \"off\",\n \"jest/prefer-inline-snapshots\": \"off\",\n \"jest/prefer-lowercase-title\": [\n \"error\",\n {\n \"ignore\": [\"describe\"]\n }\n ],\n \"jest/prefer-mock-promise-shorthand\": \"off\",\n \"jest/prefer-snapshot-hint\": \"off\",\n \"jest/unbound-method\": \"off\",\n \"jest/padding-around-all\": \"off\",\n \"jest/padding-around-after-each-blocks\": \"off\",\n \"jest/padding-around-after-all-blocks\": \"off\",\n \"jest/padding-around-before-all-blocks\": \"off\",\n \"jest/padding-around-before-each-blocks\": \"off\",\n \"jest/padding-around-describe-blocks\": \"off\",\n \"jest/padding-around-expect-groups\": \"off\",\n \"jest/padding-around-test-blocks\": \"off\",\n \"jest/prefer-ending-with-an-expect\": \"off\",\n \"jsdoc/require-jsdoc\": \"off\",\n \"testing-library/no-await-sync-events\": \"error\",\n \"testing-library/no-debugging-utils\": \"error\",\n \"testing-library/no-dom-import\": \"error\"\n }\n },\n {\n \"files\": [\n \"**/test/**/*.ts\",\n \"**/testUtils/**/*.ts\"\n ],\n \"rules\": {\n \"@typescript-eslint/unbound-method\": \"off\",\n \"jest/unbound-method\": \"error\",\n \"jest/no-untyped-mock-factory\": \"error\"\n }\n },\n {\n \"files\": [\n \"__mocks__/**/*.js\"\n ],\n \"rules\": {\n \"jest/require-hook\": \"off\"\n }\n },\n {\n \"files\": [\n \"**/karma/**/*.js\",\n \"packages/karma-*/**/*.js\"\n ],\n \"extends\": [\n \"plugin:jasmine/recommended\"\n ],\n \"plugins\": [\n \"jsx-a11y\",\n \"header\",\n \"testing-library\",\n \"jasmine\"\n ],\n \"env\": {\n \"jasmine\": true,\n \"node\": true\n },\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"testing-library/no-await-sync-events\": \"error\",\n \"testing-library/no-await-sync-queries\": \"error\",\n \"testing-library/no-debugging-utils\": \"error\",\n \"testing-library/no-dom-import\": \"error\",\n \"jasmine/new-line-before-expect\": \"off\",\n \"jasmine/no-disabled-tests\": \"error\",\n \"jasmine/no-spec-dupes\": [\"error\", \"branch\"],\n \"jasmine/no-suite-dupes\": [\"error\", \"branch\"],\n \"jsdoc/require-jsdoc\": \"off\",\n \"no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"@testing-library/react-hooks\",\n \"message\": \"Use karma fixtures instead.\"\n }\n ]\n }\n ]\n },\n \"globals\": {\n \"karmaPuppeteer\": \"readonly\",\n \"karmaSnapshot\": \"readonly\"\n }\n },\n {\n \"files\": [\n \"packages/karma-puppeteer-client/**/*.js\"\n ],\n \"rules\": {\n \"no-var\": \"off\",\n \"prefer-const\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/jest-amp/src/**/*.js\",\n \"packages/jest-puppeteer-amp/src/**/*.js\"\n ],\n \"env\": {\n \"node\": true\n }\n },\n {\n \"files\": [\n \"packages/jest-puppeteer-amp/src/**/*.js\"\n ],\n \"globals\": {\n \"browser\": \"readonly\",\n \"page\": \"readonly\"\n }\n },\n {\n \"files\": [\n \"packages/e2e-test-utils/**/*.js\",\n \"packages/e2e-tests/src/**/*.js\"\n ],\n \"extends\": [\n \"plugin:jest/all\"\n ],\n \"env\": {\n \"node\": true\n },\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"jest/max-expects\": \"off\",\n \"jest/no-hooks\": \"off\",\n \"jest/prefer-ending-with-an-expect\": \"off\",\n \"jest/prefer-expect-assertions\": \"off\",\n \"jest/prefer-importing-jest-globals\": \"off\",\n \"jest/prefer-inline-snapshots\": \"off\",\n \"jest/prefer-lowercase-title\": [\n \"error\",\n {\n \"ignore\": [\"describe\"]\n }\n ],\n \"jest/require-hook\": [\n \"error\",\n {\n \"allowedFunctionCalls\": [\n \"minWPVersionRequired\",\n \"withDisabledToolbarOnFrontend\",\n \"withExperimentalFeatures\",\n \"withPlugin\",\n \"withRTL\",\n \"withUser\"\n ]\n }\n ],\n \"jest/prefer-snapshot-hint\": \"off\",\n \"jest/unbound-method\": \"off\",\n \"jest/padding-around-all\": \"off\",\n \"jest/padding-around-after-each-blocks\": \"off\",\n \"jest/padding-around-after-all-blocks\": \"off\",\n \"jest/padding-around-before-all-blocks\": \"off\",\n \"jest/padding-around-before-each-blocks\": \"off\",\n \"jest/padding-around-describe-blocks\": \"off\",\n \"jest/padding-around-expect-groups\": \"off\",\n \"jest/padding-around-test-blocks\": \"off\"\n },\n \"globals\": {\n \"browser\": \"readonly\",\n \"page\": \"readonly\",\n \"wp\": \"readonly\"\n }\n },\n {\n \"files\": [\n \"packages/e2e-test-utils/**/*.js\"\n ],\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"jest/expect-expect\": \"off\",\n \"jest/max-expects\": \"off\",\n \"jest/no-export\": \"off\",\n \"jest/require-top-level-describe\": \"off\"\n }\n },\n {\n \"files\": [\"packages/e2e-tests/src/specs/**/*.js\"],\n \"rules\": {\n \"jsdoc/require-jsdoc\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/e2e-tests/src/config/**/*.js\",\n \"**/testUtils/**/*.js\"\n ],\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"jest/require-hook\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/commander/**/*.ts\",\n \"packages/fonts/scripts/**/*.ts\",\n \"packages/migration/scripts/**/*.js\",\n \"packages/templates/scripts/**/*.js\",\n \"packages/text-sets/scripts/**/*.js\"\n ],\n \"rules\": {\n \"import/no-useless-path-segments\": [\"error\", {\n \"noUselessIndex\": false\n }]\n }\n },\n {\n \"files\": [\n \"__mocks__/**/*.js\",\n \"bin/**/*.js\",\n \"babel.config.cjs\",\n \"rollup.config.js\",\n \"jest-puppeteer.config.cjs\",\n \"karma-*.config.cjs\",\n \"webpack.*.cjs\",\n \".storybook/*.cjs\",\n \".storybook/*.js\",\n \"tests/js/*.js\",\n \"packages/e2e-tests/src/*.js\",\n \"packages/e2e-tests/src/config/*.js\",\n \"packages/dashboard/src/karma-tests.cjs\",\n \"packages/story-editor/src/karma-tests.cjs\",\n \"packages/eslint-import-resolver/**/*.cjs\",\n \"packages/jest-resolver/**/*.cjs\",\n \"packages/fonts/**/*.ts\",\n \"packages/commander/**/*.ts\",\n \"packages/migration/scripts/**/*.js\",\n \"packages/templates/scripts/**/*.js\",\n \"packages/text-sets/scripts/**/*.js\"\n ],\n \"extends\": [\n \"plugin:n/recommended\",\n \"plugin:security/recommended-legacy\"\n ],\n \"plugins\": [\n \"security\"\n ],\n \"env\": {\n \"node\": true\n },\n \"rules\": {\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"n/no-extraneous-import\": \"off\",\n \"n/no-missing-import\": \"off\",\n \"n/no-unpublished-import\": \"off\",\n \"n/no-unpublished-require\": \"off\",\n \"security/detect-non-literal-fs-filename\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/commander/src/index.ts\"\n ],\n \"rules\": {\n \"no-console\": \"off\",\n \"n/hashbang\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/migration/scripts/utils/updateTemplates.js\"\n ],\n \"rules\": {\n \"@eslint-community/eslint-comments/no-unused-disable\": \"off\"\n }\n },\n {\n \"files\": [\n \"*.md\",\n \"**/*.md\"\n ],\n \"processor\": \"markdown/markdown\"\n },\n {\n \"files\": [\n \"**/*.md/*.js\"\n ],\n \"parserOptions\": {\n \"ecmaFeatures\": {\n \"impliedStrict\": true\n }\n },\n \"rules\": {\n \"import/no-unresolved\": \"off\",\n \"import/no-extraneous-dependencies\": \"off\",\n \"@wordpress/dependency-group\": \"off\",\n \"no-console\": \"off\",\n \"no-undef\": \"off\",\n \"no-unused-vars\": \"off\",\n \"header/header\": \"off\",\n \"prettier/prettier\": \"off\",\n \"@eslint-community/eslint-comments/require-description\": \"off\",\n \"react/prop-types\" : \"off\"\n }\n },\n {\n \"files\": [\n \"packages/dashboard/src/**/*.js\",\n \"packages/story-editor/src/**/*.js\",\n \"packages/**/*.js\"\n ],\n \"excludedFiles\": [\n \"packages/activation-notice/**/*.tsx\",\n \"packages/i18n/**/*.js\",\n \"packages/stories-block/**/*.js\",\n \"packages/tinymce-button/**/*.js\"\n ],\n \"rules\":{\n \"no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"@wordpress/i18n\",\n \"message\": \"Use @googleforcreators/i18n instead.\"\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\n \"packages/activation-notice/**/*.tsx\",\n \"packages/stories-block/**/*.js\",\n \"packages/tinymce-button/**/*.js\"\n ],\n \"rules\":{\n \"@wordpress/data-no-store-string-literals\": \"error\",\n \"no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"@googleforcreators/i18n\",\n \"message\": \"Use @wordpress/i18n instead.\"\n },\n {\n \"name\": \"react\",\n \"message\": \"Please use React API through `@wordpress/element` instead.\"\n },\n {\n \"name\": \"react-dom\",\n \"message\": \"Please use React API through `@wordpress/element` instead.\"\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\n \"packages/**/*.js\"\n ],\n \"excludedFiles\": [\n \".storybook/preview.js\",\n \"__mocks__/**/*.js\",\n \"packages/activation-notice/**/*.tsx\",\n \"packages/react/**/*.js\",\n \"packages/dashboard/src/karma/fixture.js\",\n \"packages/story-editor/src/karma/fixture/fixture.js\",\n \"packages/story-block/**/*.js\",\n \"packages/tinymce-button/**/*.js\"\n ],\n \"rules\":{\n \"no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"react\",\n \"message\": \"Use @googleforcreators/react instead.\"\n },\n {\n \"name\": \"react-dom\",\n \"message\": \"Use @googleforcreators/react instead.\"\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\n \"packages/activation-notice/**/*.tsx\"\n ],\n \"rules\":{\n \"no-restricted-imports\": \"off\",\n \"import/no-named-as-default\": \"off\",\n \"@typescript-eslint/no-restricted-imports\": [\n \"error\",\n {\n \"paths\": [\n {\n \"name\": \"react\",\n \"message\": \"Use @wordpress/element instead.\",\n \"allowTypeImports\": true\n },\n {\n \"name\": \"react-dom\",\n \"message\": \"Use @wordpress/element instead.\",\n \"allowTypeImports\": true\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\n \"packages/tinymce-button/src/**/*.js\"\n ],\n \"globals\": {\n \"tinymce\": \"readonly\"\n }\n },\n {\n \"files\": [\n \"**/stories/*.js\",\n \".storybook/main.cjs\"\n ],\n \"rules\": {\n \"react/no-array-index-key\" : \"off\",\n \"react/prop-types\": \"off\",\n \"@eslint-community/eslint-comments/no-unused-disable\": \"off\",\n \"@eslint-community/eslint-comments/require-description\": \"off\"\n }\n },\n {\n \"files\": [\n \"__mocks__/**/*\",\n \".storybook/stories/**/*\"\n ],\n \"rules\": {\n \"import/no-extraneous-dependencies\" : \"off\"\n }\n },\n {\n \"files\": [\n \"packages/story-editor/src/**/*.js\",\n \"packages/dashboard/src/**/*.js\"\n ],\n \"rules\": {\n \"no-restricted-imports\": [\n \"error\",\n {\n \"patterns\": [\n {\n \"group\": [\n \"**/*.css\"\n ],\n \"message\": \"css import is not allowed in story-editor and dashboard\"\n }\n ]\n }\n ]\n }\n },\n {\n \"files\": [\n \"packages/date/src/third_party/**/*\"\n ],\n \"rules\": {\n \"header/header\": \"off\",\n \"@typescript-eslint/no-explicit-any\": \"off\",\n \"@typescript-eslint/ban-ts-comment\": \"off\",\n \"@typescript-eslint/no-unsafe-return\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/story-editor/src/components/canvas/mediaCaptions/cue.js\"\n ],\n \"rules\": {\n \"@eslint-community/eslint-comments/no-unused-disable\": \"off\"\n }\n },\n {\n \"files\": [\n \"packages/design-system/src/components/keyboard/keyboard.tsx\",\n \"packages/element-library/src/media/editCropMoveable.tsx\",\n \"packages/element-library/src/media/editPanMoveable.tsx\",\n \"packages/element-library/src/text/edit.tsx\",\n \"packages/element-library/src/video/playPauseButton.tsx\",\n \"packages/react/src/useBatchingCallback.ts\",\n \"packages/react/src/useResizeEffect.ts\",\n \"packages/story-editor/src/app/helpCenter/provider.tsx\",\n \"packages/story-editor/src/app/media/media3p/useContextValueProvider.js\",\n \"packages/story-editor/src/app/media/media3p/useFetchMediaEffect.js\",\n \"packages/story-editor/src/app/quickActions/useQuickActions.js\",\n \"packages/story-editor/src/components/canvas/mediaRecordingLayer.js\",\n \"packages/story-editor/src/components/canvas/multiSelectionMoveable/useDrag.js\",\n \"packages/story-editor/src/components/canvas/multiSelectionMoveable/useResize.js\",\n \"packages/story-editor/src/components/canvas/multiSelectionMoveable/useRotate.js\",\n \"packages/story-editor/src/components/canvas/singleSelectionMoveable/index.js\",\n \"packages/story-editor/src/components/canvas/singleSelectionMoveable/useDrag.js\",\n \"packages/story-editor/src/components/canvas/singleSelectionMoveable/useResize.js\",\n \"packages/story-editor/src/components/canvas/singleSelectionMoveable/useRotate.js\",\n \"packages/story-editor/src/components/canvas/utils/useUpdateSelectionRectangle.js\",\n \"packages/story-editor/src/components/colorPicker/editablePreview.js\",\n \"packages/story-editor/src/components/form/usePresubmitHandler.js\",\n \"packages/story-editor/src/components/library/panes/shopping/shoppingPane.js\",\n \"packages/story-editor/src/components/mediaRecording/audio.js\",\n \"packages/story-editor/src/components/mediaRecording/footer.js\",\n \"packages/story-editor/src/components/panels/shared/useCommonObjectValue.js\",\n \"packages/story-editor/src/components/videoTrim/useVideoNode.js\",\n \"packages/transform/src/useTransformHandler.ts\",\n \"packages/wp-story-editor/src/components/fontCheck/index.js\"\n ],\n \"rules\": {\n \"react-hooks/refs\": \"off\"\n }\n }\n ]\n}\n" }, { "path": ".git-blame-ignore-revs", "content": "bf0cb0583153e71fcceaee044550ad511b94d470\n1e93c55d2c9e596404646a3bd1785f6249f9945c\nfe28ba3ced458b23fc53574bb25d6d3fbe6a4b3f\ne6594d05a23cbd026f51668adc652fda959febbb\nf459efbc4a2c9546a0ca2fed1301e4f222fa2340\n72c8fa5e2419876f20507240314d0acbb825059d\n" }, { "path": ".gitattributes", "content": "*.snap linguist-generated=true\n.github export-ignore\n.storybook export-ignore\n.wordpress-org export-ignore\n__mocks__ export-ignore\n__static__ export-ignore\nbin export-ignore\nkarma export-ignore\npatches export-ignore\ntests export-ignore\n.* export-ignore\n*.config.cjs export-ignore\n*.config.test.cjs export-ignore\ncodecov.yml export-ignore\npackage.json export-ignore\npackage-lock.json export-ignore\npercy.config.yml export-ignore\n*.xml.dist export-ignore\npackages/fonts/src/fonts.json linguist-generated=true\nincludes/data/fonts/fonts.json linguist-generated=true\ntests/phpunit/integration/data/schema.json linguist-generated=true\npackages/e2e-tests/src/specs/editor/shopping/schema.json linguist-generated=true\ntsconfig.json linguist-language=jsonc\n" }, { "path": ".github/ISSUE_TEMPLATE/bug_report.md", "content": "---\nname: Bug Report\nabout: Create a report to help us improve.\ntitle: ''\nlabels: 'Type: Bug'\nassignees: ''\n---\n\n\n\n## Bug Description\n\n\n\n## Expected Behaviour\n\n\n\n## Steps to Reproduce\n\n\n\n## Screenshots\n\n\n\n## Additional Context\n\n\n\n- Plugin Version:\n- WordPress Version:\n- Operating System:\n- Browser:\n" }, { "path": ".github/ISSUE_TEMPLATE/config.yml", "content": "# todo: disable in future?\nblank_issues_enabled: true\n" }, { "path": ".github/ISSUE_TEMPLATE/enhancement.md", "content": "---\nname: Enhancement\nabout: Suggest an idea for this project.\ntitle: ''\nlabels: 'Type: Enhancement'\nassignees: ''\n---\n\n\n\n## Feature Description\n\n\n\n## Alternatives Considered\n\n\n\n## Additional Context\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/epic.md", "content": "---\nname: Epic\nabout: A theme of work that contains several issues or sub-tasks.\ntitle: ''\nlabels: 'Epic'\nassignees: ''\n---\n\n## Summary\n\n\n\n## References\n\n\n\n## Alternatives Considered\n\n\n\n## Acceptance Criteria\n\n### Does this epic have any performance impact?\n\n\n\n\n\n### Does this epic have telemetry?\n\n\n" }, { "path": ".github/ISSUE_TEMPLATE/task.md", "content": "---\nname: Task\nabout: Tasks which do not involve engineering.\ntitle: ''\nlabels: 'Type: Task'\nassignees: ''\n---\n\n\n\n## Task Description\n\n\n" }, { "path": ".github/PULL_REQUEST_TEMPLATE.md", "content": "## Summary\n\n\n\n## User-facing changes\n\n\n\n## Testing Instructions\n\n\n\n\n\n- [ ] This is a non-user-facing change and requires no QA\n\n\nThis PR can be tested by following these steps:\n\n1.\n\n## Reviews\n\n### Does this PR have a security-related impact?\n\n\n\n### Does this PR change what data or activity we track or use?\n\n\n\n### Does this PR have a legal-related impact?\n\n\n\n## Checklist\n\n\n\n- [ ] This PR addresses an existing issue and I have linked this PR to it\n- [ ] I have tested this code to the best of my abilities\n- [ ] I have verified accessibility to the best of my abilities ([docs](https://github.com/googleforcreators/web-stories-wp/blob/main/docs/accessibility-testing.md))\n- [ ] I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities\n- [ ] This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended ([docs](https://github.com/googleforcreators/web-stories-wp/tree/main/docs#testing))\n- [ ] I have added documentation where necessary\n- [ ] I have added a matching `Type: XYZ` label to the PR\n\n---\n\n\n\nFixes #\n" }, { "path": ".github/SUPPORT.md", "content": "Thank you for being an early adopter of Web Stories for WordPress! We're working around the clock to improve your experience and add editing capabilities. If you find any issues, please reach out by visiting the [support forum](https://wordpress.org/support/plugin/web-stories/) to ask any questions or file feature requests.\n\n[Visit support forums](https://wordpress.org/support/plugin/web-stories/)\n" }, { "path": ".github/dependabot.yml", "content": "version: 2\nupdates:\n - package-ecosystem: github-actions\n directory: '/'\n schedule:\n interval: quarterly\n open-pull-requests-limit: 10\n labels:\n - Dependencies\n groups:\n github-actions:\n patterns:\n - '*'\n\n - package-ecosystem: npm\n directory: '/'\n schedule:\n interval: quarterly\n open-pull-requests-limit: 15\n labels:\n - Dependencies\n - JavaScript\n groups:\n wp-packages:\n patterns:\n - '@wordpress/*'\n exclude-patterns:\n - '@wordpress/element'\n storybook:\n patterns:\n - 'storybook'\n - '@storybook/*'\n typescript-eslint:\n patterns:\n - '@typescript-eslint/*'\n babel:\n patterns:\n - 'babel-*'\n - '@babel/*'\n exclude-patterns:\n - 'babel-plugin-react-compiler'\n oxlint:\n patterns:\n - 'oxlint'\n - 'eslint-plugin-oxlint'\n react-compiler:\n patterns:\n - '*-react-compiler'\n - 'react-compiler-*'\n ignore:\n # styled-components is not yet compatible.\n - dependency-name: 'stylis-plugin-rtl'\n versions:\n - '>= 2'\n\n # Not all plugins are compatible yet\n - dependency-name: 'rollup'\n versions:\n - '>= 3'\n\n # We have not yet upgraded to React 18.\n - dependency-name: 'react'\n versions:\n - '>= 18'\n - dependency-name: 'react-dom'\n versions:\n - '>= 18'\n - dependency-name: '@testing-library/react'\n versions:\n - '>= 13'\n\n # ESM only\n - dependency-name: 'use-context-selector'\n versions:\n - '>= 2'\n - dependency-name: 'flagged'\n versions:\n - '>= 3'\n - dependency-name: 'mime'\n versions:\n - '>= 4'\n\n # Needs manual update\n - dependency-name: 'styled-components'\n versions:\n - '>= 6'\n\n # Needs manual update\n - dependency-name: 'eslint'\n versions:\n - '>= 9'\n\n - package-ecosystem: composer\n directory: '/'\n schedule:\n interval: quarterly\n open-pull-requests-limit: 10\n labels:\n - Dependencies\n - PHP\n" }, { "path": ".github/release.yml", "content": "changelog:\n exclude:\n authors:\n - dependabot\n - github-actions\n - googleforcreators-bot\n categories:\n - title: '🚀 Features'\n labels:\n - 'Type: Enhancement'\n - title: '🐛 Bug Fixes'\n labels:\n - 'Type: Bug'\n - title: '🧰 Maintenance'\n labels:\n - 'Type: Infrastructure'\n - 'Type: Code Quality'\n - title: ':memo: Documentation'\n labels:\n - 'Type: Documentation'\n - title: 'Other Changes'\n labels:\n - '*'\n" }, { "path": ".github/workflows/build-and-deploy.yml", "content": "name: Build plugin\n\non:\n push:\n # Don't run for irrelevant changes.\n paths-ignore:\n - 'docs/**'\n - '.storybook/**'\n - '.wordpress-org/**'\n - '__mocks__/**'\n - '__static__/**'\n - 'bin/**'\n - 'packages/e2e-test-utils/**'\n - 'packages/e2e-tests/**'\n - 'packages/karma-*/**'\n - 'tests/**'\n - '**.md'\n - '**.yml'\n - '**.neon.dist'\n - '**.xml.dist'\n - '.editorconfig'\n - '.eslint*'\n - '.markdownlint*'\n - '.phpstorm.meta.php'\n - '.prettier*'\n - '.stylelint*'\n - '.github/workflows/**'\n - '!.github/workflows/build-and-deploy.yml'\n branches:\n - main\n - release/*\n pull_request:\n types:\n - opened\n - reopened\n - synchronize\n - ready_for_review\n # Don't run for irrelevant changes.\n paths-ignore:\n - 'docs/**'\n - '.storybook/**'\n - '.wordpress-org/**'\n - '__mocks__/**'\n - '__static__/**'\n - 'bin/**'\n - 'packages/e2e-test-utils/**'\n - 'packages/e2e-tests/**'\n - 'packages/karma-*/**'\n - 'tests/**'\n - '**.md'\n - '**.yml'\n - '**.neon.dist'\n - '**.xml.dist'\n - '.editorconfig'\n - '.eslint*'\n - '.markdownlint*'\n - '.phpstorm.meta.php'\n - '.prettier*'\n - '.stylelint*'\n - '.github/workflows/**'\n - '!.github/workflows/build-and-deploy.yml'\n\npermissions:\n contents: read\n pull-requests: write\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n bundle-size:\n name: Bundle size check\n runs-on: ubuntu-latest\n timeout-minutes: 15\n # The action cannot annotate the PR when run from a PR fork or authored by Dependabot.\n if: >\n github.event_name == 'pull_request' &&\n github.event.pull_request.draft == false &&\n github.event.pull_request.head.repo.fork == false &&\n github.event.pull_request.user.login != 'dependabot[bot]'\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: block\n allowed-endpoints: >\n cloudresourcemanager.googleapis.com:443\n codeserver.dev.6b7f1eeb-705b-4201-864d-2007030c8372.drush.in:2222\n dl.google.com:443\n github.com:443\n api.github.com:443\n oauth2.googleapis.com:443\n objects.githubusercontent.com:443\n packagist.org:443\n registry.npmjs.org:443\n storage.googleapis.com:443\n 54.185.253.63:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Bundle size check\n uses: preactjs/compressed-size-action@66325aad6443cb7cf89c4bfcd414aea2367cda94\n with:\n repo-token: ${{ secrets.GITHUB_TOKEN }}\n pattern: '{assets/js/*.js,assets/css/*.css}'\n build-script: 'build:js'\n minimum-change-threshold: 100\n # Ignore chunk and module hashes in bundle filenames.\n strip-hash: '.*-(\\w{20})|^(\\d{2,5})\\.js$'\n" }, { "path": ".github/workflows/codeql-analysis.yml", "content": "name: CodeQL\n\non:\n push:\n # Only run if JS files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if JS files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n # The branches below must be a subset of the branches above\n branches:\n - main\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n analyze:\n name: Analyze\n runs-on: ubuntu-latest\n permissions:\n actions: read\n contents: read\n security-events: write\n timeout-minutes: 30\n steps:\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Initialize CodeQL\n uses: github/codeql-action/init@c10b8064de6f491fea524254123dbe5e09572f13\n with:\n languages: javascript\n\n - name: Perform CodeQL Analysis\n uses: github/codeql-action/analyze@c10b8064de6f491fea524254123dbe5e09572f13\n" }, { "path": ".github/workflows/deploy-storybook.yml", "content": "name: Deploy to GH Pages\n\non:\n push:\n # Don't run for irrelevant changes.\n paths-ignore:\n - 'docs/**'\n - '!.github/workflows/deploy-storybook.yml'\n - '.storybook/**'\n - '.wordpress-org/**'\n - '__mocks__/**'\n - '__static__/**'\n - 'bin/**'\n - 'tests/**'\n branches:\n - main\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n build-storybook:\n name: Build storybook\n runs-on: ubuntu-latest\n permissions:\n contents: write # for Git to git push\n timeout-minutes: 10\n steps:\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Build storyook\n run: npm run storybook:build\n\n - name: Checkout gh-pages\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n ref: gh-pages\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n path: gh-pages\n\n - name: Move storybook assets\n run: |\n rm -rf gh-pages/storybook/*\n mv build/storybook/* gh-pages/storybook/\n\n - name: Commit updates\n run: |\n git add .\n git status\n git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 0\n git commit -m \"Deploy storybook for ${{ github.sha }}\"\n git pull --rebase --no-edit --quiet\n git push origin gh-pages\n env:\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n working-directory: ./gh-pages\n" }, { "path": ".github/workflows/lint-css-js-md.yml", "content": "name: Lint CSS/JS/MD\n\non:\n push:\n # Only run if CSS/JS/MD-related files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**.css'\n - 'docs/**/*.md'\n - 'packages/**/*.md'\n - '.eslint*'\n - '.markdownlint*'\n - '.npmpackagejsonlintrc.json'\n - '.nvmrc'\n - '.prettier*'\n - '.stylelint*'\n - '**/package.json'\n - 'package-lock.json'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if CSS/JS/MD-related files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**.css'\n - 'docs/**/*.md'\n - 'packages/**/*.md'\n - '.eslint*'\n - '.markdownlint*'\n - '.npmpackagejsonlintrc.json'\n - '.nvmrc'\n - '.prettier*'\n - '.stylelint*'\n - '**/package.json'\n - 'package-lock.json'\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\npermissions:\n contents: read\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-latest\n permissions:\n checks: write # for ataylorme/eslint-annotate-action to create checks\n contents: read # for actions/checkout to fetch code\n pull-requests: read # for ataylorme/eslint-annotate-action to get changed PR files\n timeout-minutes: 20\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-sudo: true\n disable-file-monitoring: true\n egress-policy: block\n allowed-endpoints: >\n api.github.com:443\n github.com:443\n registry.npmjs.org:443\n bun.sh:443\n 54.185.253.63:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Markdown Lint\n run: npm run lint:md\n\n - name: CSS Lint\n run: npm run lint:css\n\n - name: package.json Lint\n run: npm run lint:package-json\n\n # Do this first so that the types are available to ESLint,\n # particularly the more sophisticated `@typescript/eslint` rules.\n - name: Type checking\n run: npm run workflow:bundle-packages:types\n\n - name: JS Lint\n run: npm run lint:js\n env:\n NODE_OPTIONS: --max-old-space-size=4096\n if: >\n github.event.pull_request.head.repo.fork == true ||\n github.event.pull_request.user.login == 'dependabot[bot]'\n\n - name: JS Lint Report\n run: npm run lint:js:report\n continue-on-error: true\n env:\n NODE_OPTIONS: --max-old-space-size=4096\n # Prevent generating the ESLint report if PR is from a fork or authored by Dependabot.\n if: >\n github.event.pull_request.head.repo.fork == false &&\n github.event.pull_request.user.login != 'dependabot[bot]'\n\n - name: Annotate JS Lint Results\n uses: ataylorme/eslint-annotate-action@3.0.0\n with:\n repo-token: '${{ secrets.GITHUB_TOKEN }}'\n report-json: 'build/lint-js-report.json'\n # The action cannot annotate the PR when run from a PR fork or authored by Dependabot.\n if: >\n github.event.pull_request.head.repo.fork == false &&\n github.event.pull_request.user.login != 'dependabot[bot]'\n\n - name: JSON Schema validation\n run: npm run test:schema\n" }, { "path": ".github/workflows/lint-i18n.yml", "content": "name: Lint I18N\n\non:\n push:\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'web-stories.php'\n - 'includes/**.php'\n - '.github/workflows/lint-i18n.yml'\n branches:\n - main\n pull_request:\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'web-stories.php'\n - 'includes/**.php'\n - '.github/workflows/lint-i18n.yml'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-latest\n timeout-minutes: 10\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n coverage: none\n tools: wp-cli\n\n - name: Install latest version of i18n-command\n run: wp package install wp-cli/i18n-command:@stable\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n coverage: none\n tools: composer\n\n - name: Install dependencies\n run: |\n npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Build plugin\n run: bun run build:js\n\n - name: Bundle regular version\n run: bun run workflow:build-plugin\n\n # Check if as many strings as expected were found.\n # Fail job if `wp i18n make-pot` returns any warnings.\n # Some false positive warnings are removed due to a bug in the string extraction.\n # That's why this step is unfortunately a bit more complex.\n # See https://github.com/wp-cli/i18n-command/issues/154\n - name: Generate POT file\n run: |\n OUTPUT=$((wp i18n make-pot build/web-stories build/web-stories.pot) 2>&1 >/dev/null)\n\n HAS_ERROR=false\n\n EXPECTED_NUMBER_OF_STRINGS=1000\n NUMBER_OF_FOUND_STRINGS=$(grep -o msgstr build/web-stories.pot | wc -l | xargs)\n\n if (( \"$NUMBER_OF_FOUND_STRINGS\" < \"$EXPECTED_NUMBER_OF_STRINGS\" )); then\n HAS_ERROR=true\n echo \"String extraction found only $NUMBER_OF_FOUND_STRINGS translatable strings. Expected at least $EXPECTED_NUMBER_OF_STRINGS.\"\n fi\n\n IFS=$'\\n'\n declare -a WARNINGS=($OUTPUT)\n unset IFS\n\n for WARNING in \"${WARNINGS[@]}\"; do\n # Filter false positives.\n if [[ $WARNING == *\"translator comment\"* ]] && [[ $WARNING != *\"%s\"* ]]; then\n continue\n fi\n\n HAS_ERROR=true\n\n \techo $WARNING\n done\n\n if [[ \"$HAS_ERROR\" = true ]]; then\n exit 1\n fi\n" }, { "path": ".github/workflows/lint-php.yml", "content": "name: Lint PHP\n\non:\n push:\n # Only run if PHP-related files changed.\n paths:\n - '**.php'\n - 'phpcs.xml.dist'\n - 'phpmd.xml'\n - 'phpstan.neon.dist'\n - 'composer.json'\n - 'composer.lock'\n - '.github/workflows/lint-php.yml'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if PHP-related files changed.\n paths:\n - '**.php'\n - 'phpcs.xml.dist'\n - 'phpmd.xml'\n - 'phpstan.neon.dist'\n - 'composer.json'\n - 'composer.lock'\n - '.github/workflows/lint-php.yml'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-latest\n timeout-minutes: 5\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: block\n allowed-endpoints: >\n api.github.com:443\n github.com:443\n objects.githubusercontent.com:443\n packagist.org:443\n repo.packagist.org:443\n getcomposer.org:443\n dl.cloudsmith.io:443\n 54.185.253.63:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n coverage: none\n tools: composer, cs2pr\n\n - name: Validate composer.json\n run: composer --no-interaction validate --no-check-all\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Detect coding standard violations (PHPCS)\n run: vendor/bin/phpcs -q --report=checkstyle --severity=1 --runtime-set ignore_errors_on_exit 1 --runtime-set ignore_warnings_on_exit 1 | cs2pr --graceful-warnings\n\n - name: Static Analysis (PHPStan)\n run: composer phpstan\n\n - name: Static Analysis (PHPMD)\n run: composer phpmd\n\n - name: Normalize composer.json\n run: composer normalize --no-interaction --dry-run\n" }, { "path": ".github/workflows/lint-plugin-check.yml", "content": "name: Plugin Check\n\non:\n push:\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'web-stories.php'\n - 'includes/**.php'\n - '.github/workflows/lint-plugin-check.yml'\n branches:\n - main\n pull_request:\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'web-stories.php'\n - 'includes/**.php'\n - '.github/workflows/lint-plugin-check.yml'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n lint:\n name: Lint\n runs-on: ubuntu-latest\n timeout-minutes: 10\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: '8.0'\n coverage: none\n tools: composer\n\n - name: Install dependencies\n run: |\n npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Build plugin\n run: bun run build:js\n\n - name: Bundle plugin\n run: bun run workflow:build-plugin\n\n - name: Run plugin check\n uses: wordpress/plugin-check-action@v1\n with:\n build-dir: './build/web-stories'\n exclude-directories: 'third-party'\n exclude-checks: |\n late_escaping\n plugin_readme\n plugin_review_phpcs\n plugin_updater\n" }, { "path": ".github/workflows/npm-release.yml", "content": "# npm packages release automation\n\nname: npm Release\n\non:\n workflow_dispatch:\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\nenv:\n PRODUCTION_REGISTRY_URL: https://wombat-dressing-room.appspot.com\n LOCAL_REGISTRY_URL: http://localhost:4873\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n\njobs:\n dry-run:\n name: Dry-run release\n runs-on: ubuntu-latest\n timeout-minutes: 30\n # This step requires additional review\n # See https://docs.github.com/en/actions/reference/environments\n environment: Production\n steps:\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Bundle packages\n run: bun run workflow:bundle-packages\n env:\n NODE_OPTIONS: '--max_old_space_size=4096'\n\n # Exact format here doesn't matter for the dry-run, it's gonna be done properly later on.\n - name: Version bumps\n id: version_bumps\n run: npm version --no-git-tag-version --workspaces \"0.1.$(date -u +%Y%m%d%H%M)\"\n\n # Set up a local npm registry with Verdaccio.\n - name: Set up local registry\n run: bun run local-registry:start\n\n # Using Verdaccio\n - name: Publish packages locally\n run: npm --registry=$LOCAL_REGISTRY_URL --workspaces publish\n\n # Undo the version bumps in Git. We only needed them for testing.\n - name: Clean up local changes\n run: git checkout .\n\n # Verifies that packages can be installed without issues.\n - name: Install published packages\n run: |\n PUBLIC_PACKAGES=$(jq -r 'select(.private == false) | .name' $(find packages -maxdepth 2 -name \"package.json\"))\n TMPDIR=${TMPDIR-/tmp}\n TMPDIR=$(echo $TMPDIR | sed -e \"s/\\/$//\")\n TEST_DIR=${TEST_DIR-$TMPDIR/packages-test}\n\n mkdir $TEST_DIR\n cd $TEST_DIR\n\n npm init --yes\n npm --registry=$LOCAL_REGISTRY_URL install $PUBLIC_PACKAGES\n\n npm ls --depth 0\n\n - name: Stop local registry\n run: bun run local-registry:stop\n\n release:\n name: Release\n runs-on: ubuntu-latest\n permissions:\n contents: write # for Git to git push\n timeout-minutes: 20\n needs: [dry-run]\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n # See go/npm-publish\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n registry-url: ${{ env.PRODUCTION_REGISTRY_URL }}\n scope: '@googleforcreators'\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Bundle packages\n run: bun run workflow:bundle-packages\n env:\n NODE_OPTIONS: '--max_old_space_size=4096'\n\n # For the time being, using incremental versions like 0.1.202111302140\n # `npm version` updates all packages, even the ones we don't intend to publish.\n # To address this, we undo the version change for private packages.\n # We're doing the commit ourselves since we only need it later on and\n # since committing doesn't work properly when using workspaces.\n # See https://github.com/npm/cli/issues/4017\n - name: Version bumps\n id: version_bumps\n run: |\n NEW_VERSION_RAW=\"0.1.$(date -u +%Y%m%d%H%M)\";\n NEW_VERSION=\"v$NEW_VERSION_RAW\"\n npm version --no-git-tag-version --workspaces $NEW_VERSION_RAW\n\n # Undo changes to all the private packages.\n for package_file in ./packages/*/package.json; do\n if [[ $(cat $package_file | jq '.private') == true ]]; then\n git checkout --quiet $package_file\n fi\n done\n\n # Updates the lock file.\n npm install\n\n git add packages/*/package.json\n git add package-lock.json\n\n echo \"Committing version bump\"\n echo\n\n git commit -m \"Bumping npm packages version to $NEW_VERSION\"\n\n echo \"Adding tags\"\n echo\n\n # For every public package, this creates a tag in the form \"-v1234\".\n # Example: templates-v1234\n for package_file in ./packages/*/package.json; do\n if [[ $(cat $package_file | jq '.private') == false ]]; then\n package_name=$(basename $(dirname $package_file))\n echo \"Adding tag: $package_name-$NEW_VERSION\"\n git tag \"$package_name-$NEW_VERSION\"\n fi\n done\n\n echo \"Commit details:\"\n echo\n\n git status\n git log -n 1\n\n echo \"Added tags:\"\n echo\n\n git tag --points-at HEAD\n\n echo \"Changed files:\"\n echo\n\n git show --pretty=%gd --stat\n\n git push origin main --tags\n\n # Do the actual publishing to npmjs.com via Wombat Dressing Room.\n - name: Publish packages to production\n run: npm --registry=$PRODUCTION_REGISTRY_URL --workspaces publish --workspaces\n env:\n NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}\n" }, { "path": ".github/workflows/plugin-release.yml", "content": "# Plugin release automation\n#\n# Builds the plugin for release candidates and stable releases.\n#\n# Creates the release branch, the actual release on GitHub, and the correct tag.\n#\n# For new major releases, the action should be run from the `main` branch.\n# For patch releases, the action should be run from the corresponding release branch (e.g. `release/1.2.0`)\n\nname: Plugin Release\n\non:\n workflow_dispatch:\n inputs:\n version:\n description: 'Plugin version (e.g. 1.2.3 or 7.2.0-rc.1)'\n required: true\n\npermissions:\n contents: read\n\nenv:\n PLUGIN_VERSION: ${{ github.event.inputs.version }}\n TAG_NAME: 'v${{ github.event.inputs.version }}'\n IS_RC: ${{ contains(github.event.inputs.version, 'rc') }}\n IS_PATCH_RELEASE: ${{ startsWith(github.ref, 'refs/heads/release/') }}\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n GITHUB_REPO_ID: 235435637\n\njobs:\n # Perform some sanity checks at the beginning to avoid surprises.\n checks:\n name: Checks\n runs-on: ubuntu-latest\n timeout-minutes: 5\n # This step requires additional review\n # See https://docs.github.com/en/actions/reference/environments\n environment: Production\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Verify semver compatibility\n run: |\n if [[ $PLUGIN_VERSION =~ $SEMVER_VERSION_REGEX ]]; then\n echo \"Given plugin version string is a valid semver version\"\n else\n echo \"Given plugin version string is not a valid semver version\"\n exit 1\n fi\n env:\n SEMVER_VERSION_REGEX: ^([0-9]+)\\.([0-9]+)\\.([0-9]+)(-([0-9A-Za-z-]+(\\.[0-9A-Za-z-]+)*))?(\\+[0-9A-Za-z-]+)?$\n\n - name: Verify release does not exist yet\n run: |\n if git describe --abbrev=0 --tags --match \"$TAG_NAME\" &>/dev/null; then\n echo \"The planned plugin version already exists!\"\n exit 1\n fi\n\n # - name: Ensure RC exists for stable release\n # if: ${{ ! contains(github.event.inputs.version, 'rc') }}\n # run: |\n # VERSION_WITHOUT_SUFFIX=${PLUGIN_VERSION/-rc.*/}\n # BRANCH=release/$VERSION_WITHOUT_SUFFIX\n #\n # if [[ -z $(git ls-remote origin $BRANCH) ]]; then\n # echo \"No release branch exists for this planned stable release\"\n # exit 1\n # fi\n #\n # git checkout --track origin/$BRANCH\n #\n # if ! git describe --abbrev=0 --tags --match \"$TAG_NAME-rc.*\" &>/dev/null; then\n # echo \"No RC exists for this planned stable release\"\n # exit 1\n # fi\n\n - name: Ensure readme.txt contains changelog\n run: |\n VERSION_WITHOUT_SUFFIX=${PLUGIN_VERSION/-rc.*/}\n CHANGELOG_REGEX=\"= $VERSION_WITHOUT_SUFFIX =\"\n\n if ! grep -q -P \"$CHANGELOG_REGEX\" readme.txt; then\n echo \"No changelog found in readme.txt\"\n exit 1\n fi\n\n # Get the current CDN assets version.\n # If the static assets on the CDN have changed since the last release,\n # bump the assets version accordingly in the GoogleForCreators/wp.stories.google repo.\n assets-version:\n name: Prepare static assets\n runs-on: ubuntu-latest\n timeout-minutes: 10\n needs: [checks]\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n # TODO: Define behavior for patch releases.\n #\n # A patch release is done from a specific release branch instead of `main`\n #\n # Patch releases must not necessarily copy assets from `main`.\n # Given the following assets versions:\n # main 1 2 3 4 <- next major release\n # ^\n # |\n # current branch\n #\n # The patch release should probably get version 3.1 or similar,\n # since version 4 is already used by the next major release.\n #\n # Right now, this is needs to be done manually for patch releases,\n # otherwise the assets version is left unchanged here.\n\n # Grab current assets version from `web-stories.php` and pass on to next steps.\n # - name: Checkout\n # uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n # with:\n # ref:\n\n # - name: Get current assets version\n # id: base_assets_version\n # run: |\n # BASE_ASSETS_VERSION=main\n # if [[ $(cat web-stories.php) =~ $ASSETS_VERSION_REGEX ]]; then\n # BASE_ASSETS_VERSION=${BASH_REMATCH[1]}\n # fi\n # echo \"BASE_ASSETS_VERSION=$BASE_ASSETS_VERSION\" >> $GITHUB_OUTPUT\n # env:\n # ASSETS_VERSION_REGEX: \"https://wp.stories.google/static/([^']+)\"\n\n - name: Checkout wp.stories.google\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n repository: GoogleForCreators/wp.stories.google\n lfs: true\n # Needed so the below commits will trigger a website deployment.\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Authenticate\n uses: google-github-actions/auth@7c6bc770dae815cd3e89ee6cdf493a5fab2cc093\n with:\n credentials_json: ${{ secrets.GCP_SA_KEY }}\n\n - name: Setup Cloud SDK\n uses: google-github-actions/setup-gcloud@aa5489c8933f4cc7a4f7d45035b3b1440c9c10db\n with:\n project_id: ${{ secrets.GCP_PROJECT_ID }}\n\n # For release candidates of new major releases:\n #\n # 1. Get highest assets version\n # 2. Compare with `main`\n # 3. If they differ:\n # 3.1 Set new_version = version+1\n # 3.2 Copy `main` to new_version\n # 3.2 Push new directory\n # 4. Else, keep currently highest version\n - name: Prepare assets for RC\n if: ${{ contains(github.event.inputs.version, 'rc') && ! startsWith(github.ref, 'refs/heads/release/') }}\n run: |\n LATEST_ASSETS_VERSION=$(gcloud storage ls gs://web-stories-wp-cdn-assets/ | sed 's/gs:\\/\\/web-stories-wp-cdn-assets\\///' | sed 's/\\///' | sort -n | tail -1)\n NEW_ASSETS_VERSION=$LATEST_ASSETS_VERSION\n\n NUMBER_OF_NEW_ASSETS=$(ls main | wc -l)\n\n if [[ \"0\" -eq NUMBER_OF_NEW_ASSETS ]]; then\n echo \"No new assets found. Not uploading anything.\"\n else\n echo \"New assets found.\"\n NEW_ASSETS_VERSION=$((LATEST_ASSETS_VERSION+1))\n\n echo \"Copying existing assets over to new version.\"\n\n gcloud storage rsync -r gs://web-stories-wp-cdn-assets/$LATEST_ASSETS_VERSION gs://web-stories-wp-cdn-assets/$NEW_ASSETS_VERSION\n\n echo \"Uploading new assets to new version.\"\n gcloud storage rsync main gs://web-stories-wp-cdn-assets/$NEW_ASSETS_VERSION --recursive --ignore-symlinks --exclude=\"(^|/)\\.\"\n\n rm -rf main/*\n\n echo \"Updating LATEST_ASSETS_VERSION Firebase env variable.\"\n\n echo \"LATEST_ASSETS_VERSION=$NEW_ASSETS_VERSION\" > ../../packages/functions/.env\n\n git add ../../packages/functions/.env\n git add .\n git status\n git commit -m \"Preparing assets for plugin release $PLUGIN_VERSION\"\n git pull --rebase\n git push origin main\n fi\n\n echo \"Assets version for this release: $NEW_ASSETS_VERSION\"\n\n mkdir -p assets_version\n echo $NEW_ASSETS_VERSION > assets_version/assets_version.txt\n echo \"ASSETS_VERSION=${NEW_ASSETS_VERSION}\" >> $GITHUB_ENV\n working-directory: public/static\n env:\n BASE_ASSETS_VERSION: main\n\n # Uploads an empty file just so we have something to download in the next step\n # Essentially a no-op.\n - name: Prepare assets for stable release\n if: ${{ ! contains(github.event.inputs.version, 'rc') || startsWith(github.ref, 'refs/heads/release/') }}\n run: |\n mkdir -p assets_version\n echo \"\" > assets_version/assets_version.txt\n\n - name: Upload assets version\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f\n with:\n name: assets-version\n path: public/static/assets_version\n\n - name: Write summary\n run: |\n echo \"Preparing assets for release\" >> $GITHUB_STEP_SUMMARY\n echo \"\" >> $GITHUB_STEP_SUMMARY\n echo \"Assets version: $ASSETS_VERSION\" >> $GITHUB_STEP_SUMMARY\n env:\n ASSETS_VERSION: ${{ env.ASSES_VERSION }}\n\n build:\n name: Build new version\n runs-on: ubuntu-latest\n timeout-minutes: 20\n needs: [assets-version]\n outputs:\n release_branch: ${{ steps.release_branch.outputs.release_branch }}\n release_name: ${{ steps.release_branch.outputs.release_name }}\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n fetch-depth: 0 # 0 indicates all history for all branches and tags.\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Download assets version\n uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c\n with:\n name: assets-version\n continue-on-error: true\n\n - name: Retrieve assets version\n id: assets_version\n run: |\n echo \"ASSETS_VERSION=$(cat assets_version.txt)\" >> $GITHUB_ENV\n rm -rf assets_version.txt\n continue-on-error: true\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n coverage: none\n tools: composer\n\n - name: Install dependencies\n run: |\n npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Create release branch\n id: release_branch\n run: |\n VERSION_WITHOUT_SUFFIX=${PLUGIN_VERSION/-rc.*/}\n BRANCH=release/$VERSION_WITHOUT_SUFFIX\n\n # Patch releases are already on the correct branch.\n if $IS_PATCH_RELEASE; then\n BRANCH=${GITHUB_REF#refs/heads/}\n echo \"release_branch=${BRANCH}\" >> $GITHUB_OUTPUT\n exit 0\n fi\n\n if [[ -z $(git ls-remote origin $BRANCH) ]]; then\n git checkout -b $BRANCH\n else\n git checkout --track origin/$BRANCH\n fi\n\n echo \"release_branch=${BRANCH/-rc./ RC}\" >> $GITHUB_OUTPUT\n\n RELEASE_NAME=${PLUGIN_VERSION/-rc./ RC}\n echo \"release_name=${RELEASE_NAME}\" >> $GITHUB_OUTPUT\n\n - name: Update assets version\n run: bun run workflow:assets-version $ASSETS_VERSION\n if: ${{ env.ASSETS_VERSION }}\n env:\n ASSETS_VERSION: ${{ env.ASSETS_VERSION }}\n\n - name: Commit assets version bump\n run: |\n git add web-stories.php\n git status\n git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 0\n git commit -m \"Update assets version to $ASSETS_VERSION\"\n git push -u origin HEAD\n if: ${{ env.ASSETS_VERSION }}\n env:\n ASSETS_VERSION: ${{ env.ASSETS_VERSION }}\n\n - name: Update plugin version\n run: bun run workflow:version $PLUGIN_VERSION\n\n # Commit the plugin version bump if it was successful.\n # It's also possible that there were no changes, for example if the\n # workflow was run a second time and the commit has already happened,\n # but the process later failed.\n # This allows re-running the workflow again without aborting in this case.\n - name: Commit plugin version bump\n id: plugin_version_bump\n run: |\n git add web-stories.php\n git status\n\n if git diff --cached --exit-code > /dev/null; then\n git commit -m \"Prepare release $PLUGIN_VERSION\"\n git push -u origin HEAD\n echo \"changes=yes\" >> $GITHUB_ENV\n else\n echo 'No changes to commit; exiting!'\n echo \"changes=no\" >> $GITHUB_ENV\n fi\n\n # Only non-patch release version bumps should be cherry picked to main\n # This will cherry-pick the last commit from the release branch, as\n # we only want the plugin version bump, not the assets version bump.\n #\n # Cherry-picking is only done if there actually was\n # a version bump in the previous step.\n - name: Cherry-pick to main\n run: |\n git checkout main\n git cherry-pick $BRANCH\n git pull --rebase\n git push\n git checkout $BRANCH\n if: ${{ ! startsWith(github.ref, 'refs/heads/release/') && env.changes == 'yes' }}\n env:\n BRANCH: ${{ steps.release_branch.outputs.release_branch }}\n\n - name: Build plugin\n run: bun run build:js\n\n - name: Bundle regular version\n run: bun run workflow:build-plugin -- --zip web-stories.zip\n\n - name: Bundle development version\n run: |\n rm -rf assets/css/* assets/js/*\n npx webpack --env=development\n bun run workflow:build-plugin -- --zip web-stories-dev.zip\n\n - name: Prepare release artifacts\n run: |\n mkdir -p build/release-assets\n mv build/*.zip build/release-assets/\n\n - name: Upload artifacts\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f\n with:\n name: release-assets\n path: build/release-assets\n\n create-release:\n name: Create Release\n runs-on: ubuntu-latest\n timeout-minutes: 5\n needs: [build]\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Download release artifacts\n uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c\n with:\n name: release-assets\n path: build\n\n - name: Publish Release\n id: create_release\n uses: softprops/action-gh-release@153bb8e04406b158c6c84fc1615b65b24149a1fe\n with:\n tag_name: ${{ env.TAG_NAME }}\n name: ${{ env.release_name }}\n target_commitish: ${{ steps.release_branch.outputs.release_branch || github.ref }}\n prerelease: ${{ env.IS_RC }}\n generate_release_notes: true\n files: |\n build/web-stories.zip\n build/web-stories-dev.zip\n fail_on_unmatched_files: true\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n # Post-release version bumps for non-patch releases.\n post-release:\n name: Post-release version bump\n needs: [create-release]\n runs-on: ubuntu-latest\n if: ${{ ! startsWith(github.ref, 'refs/heads/release/') && ! contains(github.event.inputs.version, 'rc') }}\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n ref: main\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n # If we're releasing 1.6.0, bump version on main to 1.7.0-alpha.0.\n - name: Update plugin version\n run: npm run workflow:version -- --increment preminor --preid alpha\n\n - name: Commit changes\n run: |\n git add web-stories.php\n git status\n git diff --staged --quiet && echo 'No changes to commit; exiting!' && exit 1\n git commit -m \"Post-release version bump\"\n git pull --rebase\n git push -u origin HEAD\n\n # Stable releases are automatically deployed to WordPress.org.\n # TODO: Consider also deploying other types of releases (RC, beta), but without bumping the stable tag.\n # This way we could offer users a way to beta test the plugin.\n # See http://plugins.svn.wordpress.org/buddypress/tags/ and https://wordpress.org/plugins/bp-beta-tester/ for inspiration.\n deploy:\n name: Deploy plugin to WordPress.org\n runs-on: ubuntu-latest\n timeout-minutes: 10\n needs: [create-release]\n if: ${{ ! contains(github.event.inputs.version, 'rc') }}\n env:\n PLUGIN_REPO_URL: 'https://plugins.svn.wordpress.org/web-stories'\n STABLE_TAG_REGEX: 'Stable tag:\\s*(.+)'\n SVN_USERNAME: ${{ secrets.SVN_USERNAME }}\n SVN_PASSWORD: ${{ secrets.SVN_PASSWORD }}\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Download release artifacts\n uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c\n with:\n name: release-assets\n path: release-assets\n\n - name: Install svn\n run: |\n sudo apt update -y --allow-releaseinfo-change\n sudo apt install -y subversion\n\n - name: Check out trunk folder\n run: svn checkout $PLUGIN_REPO_URL svn --username \"$SVN_USERNAME\"\n\n - name: Get previous stable tag\n id: get_previous_stable_tag\n # Returns the whole matching line.\n run: echo stable_tag=$(grep -P \"$STABLE_TAG_REGEX\" ./svn/trunk/readme.txt) >> $GITHUB_ENV\n\n - name: Delete everything in trunk\n run: find . -maxdepth 1 -not -name \".svn\" -not -name \".\" -not -name \"..\" -exec rm -rf {} +\n working-directory: ./svn/trunk\n\n - name: Unzip release asset into trunk\n run: |\n unzip release-assets/web-stories.zip\n mv web-stories/* svn/trunk\n env:\n PLUGIN_URL: ${{ github.event.release.assets[0].browser_download_url }}\n\n - name: Replace stable tag placeholder with pre-existing stable tag\n run: |\n sed -r -i \"s/${STABLE_TAG_REGEX}/${STABLE_TAG}/g\" ./readme.txt\n working-directory: ./svn/trunk\n env:\n STABLE_TAG: ${{ env.stable_tag }}\n\n # Note: Creating the tag trigger an email confirmation that needs to be confirmed by someone with commit access.\n - name: Commit changes to trunk\n run: |\n svn st | grep '^?' | awk '{print $2}' | xargs -r svn add\n svn st | grep '^!' | awk '{print $2}' | xargs -r svn rm\n svn commit -m \"Committing version $PLUGIN_VERSION\" \\\n --no-auth-cache --non-interactive --username \"$SVN_USERNAME\" --password \"$SVN_PASSWORD\"\n working-directory: ./svn\n\n # Copy trunk to the new tag directly on the server.\n # Not done in the same commit as the changes to trunk in order to reduce number of file operations\n # and to prevent potential timeouts.\n # See https://developer.wordpress.org/plugins/wordpress-org/how-to-use-subversion/#create-tags-from-trunk\n - name: Create the SVN tag\n run: |\n svn cp \"$PLUGIN_REPO_URL/trunk\" \"$PLUGIN_REPO_URL/tags/$PLUGIN_VERSION\" \\\n -m \"Tagging version $PLUGIN_VERSION\" \\\n --no-auth-cache --non-interactive --username \"$SVN_USERNAME\" --password \"$SVN_PASSWORD\"\n working-directory: ./svn\n\n # It's recommended to run this only after the tag was successfully created.\n # Otherwise, if there were any errors, we risk changing this to a tag that doesn't exist.\n # The actual release still needs to be confirmed via email.\n - name: Update stable tag\n working-directory: ./svn\n run: |\n sed -r -i \"s/${STABLE_TAG_REGEX}/Stable tag: ${PLUGIN_VERSION}/g\" ./trunk/readme.txt\n svn commit -m \"Releasing version $PLUGIN_VERSION\" \\\n --no-auth-cache --non-interactive --username \"$SVN_USERNAME\" --password \"$SVN_PASSWORD\"\n" }, { "path": ".github/workflows/scorecards.yml", "content": "name: Scorecards supply-chain security\n\non:\n # Only the default branch is supported.\n branch_protection_rule:\n schedule:\n - cron: '0 12 1 * *'\n push:\n branches: [main]\n\npermissions:\n contents: read\n\njobs:\n analysis:\n name: Scorecards analysis\n runs-on: ubuntu-latest\n permissions:\n # Needed to upload the results to code-scanning dashboard.\n security-events: write\n actions: read\n contents: read\n # Needed to access OIDC token.\n id-token: write\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: 'Checkout code'\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n persist-credentials: false\n\n - name: 'Run analysis'\n uses: ossf/scorecard-action@4eaacf0543bb3f2c246792bd56e8cdeffafb205a\n with:\n results_file: results.sarif\n results_format: sarif\n repo_token: ${{ secrets.SCORECARD_READ_TOKEN }}\n # Publish the results to enable scorecard badges. For more details, see\n # https://github.com/ossf/scorecard-action#publishing-results.\n # For private repositories, `publish_results` will automatically be set to `false`,\n # regardless of the value entered here.\n publish_results: true\n\n # Upload the results as artifacts (optional).\n - name: 'Upload artifact'\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f\n with:\n name: SARIF file\n path: results.sarif\n retention-days: 5\n\n # Upload the results to GitHub's code scanning dashboard.\n - name: 'Upload to code-scanning'\n uses: github/codeql-action/upload-sarif@c10b8064de6f491fea524254123dbe5e09572f13\n with:\n sarif_file: results.sarif\n" }, { "path": ".github/workflows/tests-e2e.yml", "content": "name: E2E Tests\n\non:\n push:\n # Don't run for irrelevant changes.\n paths-ignore:\n - 'docs/**'\n - '.storybook/**'\n - '.wordpress-org/**'\n - '__mocks__/**'\n - '__static__/**'\n - 'tests/**'\n - '**.md'\n - '**.yml'\n - '**.neon.dist'\n - '**.xml.dist'\n - 'readme.txt'\n - '.editorconfig'\n - '.eslint*'\n - '.markdownlint*'\n - '.phpstorm.meta.php'\n - '.prettier*'\n - '.stylelint*'\n - '.github/workflows/**'\n - '!.github/workflows/tests-e2e.yml'\n branches:\n - main\n - release/*\n pull_request:\n # Don't run for irrelevant changes.\n paths-ignore:\n - 'docs/**'\n - '.storybook/**'\n - '.wordpress-org/**'\n - '__mocks__/**'\n - '__static__/**'\n - 'tests/**'\n - '**.md'\n - '**.yml'\n - '**.neon.dist'\n - '**.xml.dist'\n - 'readme.txt'\n - '.editorconfig'\n - '.eslint*'\n - '.markdownlint*'\n - '.phpstorm.meta.php'\n - '.prettier*'\n - '.stylelint*'\n - '.github/workflows/**'\n - '!.github/workflows/tests-e2e.yml'\n types:\n - opened\n - reopened\n - synchronize\n - ready_for_review\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n build:\n name: Build plugin\n runs-on: ubuntu-latest\n timeout-minutes: 30\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n coverage: none\n tools: composer\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Build plugin\n run: bun run build:js\n env:\n # TODO: remove eventually\n DISABLE_PREVENT: true\n DISABLE_QUICK_TIPS: true\n\n - name: Bundle plugin\n run: bun run workflow:build-plugin\n\n - name: Upload bundle\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f\n with:\n name: web-stories\n path: build/web-stories\n\n e2e:\n name: '${{ matrix.browser }} - WP ${{ matrix.wp }} (${{ matrix.shard }})'\n runs-on: ubuntu-latest\n timeout-minutes: 30\n continue-on-error: ${{ matrix.experimental == true }}\n needs: [build]\n strategy:\n fail-fast: false\n matrix:\n # TODO: add back Firefox once support is more mature.\n browser: ['chrome']\n wp: ['6.6']\n snapshots: [false]\n experimental: [false]\n # We want to split up the tests into 2 parts running in parallel.\n shard: ['1/2', '2/2']\n include:\n - browser: 'chrome'\n wp: 'latest'\n snapshots: true\n shard: '1/2'\n - browser: 'chrome'\n wp: 'latest'\n snapshots: true\n shard: '2/2'\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: audit\n allowed-endpoints: >\n github.com:443\n objects.githubusercontent.com:443\n packagist.org:443\n registry.npmjs.org:443\n storage.googleapis.com:443\n docker.io:443\n registry-1.docker.io:443\n auth.docker.io:443\n 34.104.35.123:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Download bundle\n uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c\n with:\n name: web-stories\n\n # See https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md#chrome-headless-doesnt-launch-on-unix\n - name: Install libgbm1\n run: sudo apt-get install libgbm1\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_PRODUCT: ${{ matrix.browser }}\n\n - name: Start Docker environment\n run: npm run env:start\n env:\n COMPOSE_INTERACTIVE_NO_CLI: true\n WP_VERSION: ${{ matrix.wp }}\n\n # See https://issues.chromium.org/issues/373753919\n # and https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md\n - name: Disable AppArmor\n run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns\n\n - name: Get Chromium executable path\n id: chromium_path\n run: |\n CHROMIUM=$(node -p \"const puppeteer = require('puppeteer'); puppeteer.executablePath();\")\n echo \"chromium_path=${CHROMIUM}\" >> $GITHUB_ENV\n if: ( matrix.snapshots ) && ( github.event.pull_request.draft == false )\n\n - name: Download AMP validator JS\n id: amp_validator\n run: |\n cd $RUNNER_TEMP && curl -O -f -s -S https://cdn.ampproject.org/v0/validator_wasm.js\n AMP_VALIDATOR_FILE=\"${RUNNER_TEMP}/validator_wasm.js\"\n echo \"validator_file=$AMP_VALIDATOR_FILE\" >> $GITHUB_ENV\n\n - name: Run E2E tests\n run: npm run test:e2e -- --shard=$SHARD\n env:\n WP_VERSION: ${{ matrix.wp }}\n SHARD: ${{ matrix.shard }}\n AMP_VALIDATOR_FILE: ${{ env.validator_file }}\n\n - name: Stop Docker environment\n run: npm run env:stop\n if: always()\n env:\n COMPOSE_INTERACTIVE_NO_CLI: true\n\n - name: Get artifact name\n if: always()\n run: |\n ARTIFACT_NAME=${ARTIFACT_NAME//\\//-}\n echo \"ARTIFACT_NAME=${ARTIFACT_NAME}\" >> $GITHUB_ENV\n env:\n ARTIFACT_NAME: failures-artifacts-${{ matrix.wp }}-${{ matrix.shard }}\n\n - name: Upload artifacts\n uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f\n if: always()\n with:\n name: ${{ env.ARTIFACT_NAME }}\n path: build/e2e-artifacts\n if-no-files-found: ignore\n" }, { "path": ".github/workflows/tests-karma-dashboard.yml", "content": "name: Dashboard Integration Tests\n\non:\n push:\n # Only run if dashboard-related files changed.\n paths:\n - 'babel.config.cjs'\n - 'karma-dashboard.config.cjs'\n - 'webpack.config.cjs'\n - 'webpack.config.test.cjs'\n - 'packages/**/*.js'\n - 'packages/**/*.ts'\n - 'packages/**/*.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - '__static__/**'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if dashboard-related files changed.\n paths:\n - 'babel.config.cjs'\n - 'karma-dashboard.config.cjs'\n - 'webpack.config.cjs'\n - 'webpack.config.test.cjs'\n - 'packages/**/*.js'\n - 'packages/**/*.ts'\n - 'packages/**/*.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - '__static__/**'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n karma:\n name: Karma\n runs-on: ubuntu-latest\n timeout-minutes: 30\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: block\n allowed-endpoints: >\n api.github.com:443\n codecov.io:443\n fonts.googleapis.com:443\n fonts.gstatic.com:443\n github.com:443\n registry.npmjs.org:443\n storage.googleapis.com:443\n uploader.codecov.io:443\n www.gravatar.com:443\n 54.185.253.63:443\n 34.104.35.123:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n # TODO: Remove need for `npm install puppeteer`.\n - name: Install dependencies\n run: |\n npm ci\n npm install puppeteer\n env:\n PUPPETEER_PRODUCT: chrome\n\n # See https://issues.chromium.org/issues/373753919\n # and https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md\n - name: Disable AppArmor\n run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns\n\n # FIXME: https://github.com/googleforcreators/web-stories-wp/issues/4364\n - name: Increase max number of file watchers\n run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p\n\n - name: Get Chromium executable path\n id: chromium_path\n run: |\n CHROMIUM=$(node -p \"const puppeteer = require('puppeteer'); puppeteer.executablePath();\")\n echo \"chromium_path=${CHROMIUM}\" >> $GITHUB_ENV\n\n - name: Run integration tests\n run: npm run test:karma:dashboard -- --headless --viewport=1600:1000 --coverage || npm run test:karma:dashboard:retry-failed -- --headless --viewport=1600:1000\n env:\n DISABLE_ERROR_BOUNDARIES: true\n\n - name: Upload code coverage report\n uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2\n with:\n files: build/logs/karma-coverage/dashboard/lcov.info\n flags: karmatests\n token: ${{ secrets.CODECOV_TOKEN }}\n" }, { "path": ".github/workflows/tests-karma-editor.yml", "content": "name: Editor Integration Tests\n\non:\n push:\n # Only run if editor-related files changed.\n paths:\n - 'babel.config.cjs'\n - 'karma-story-editor.config.cjs'\n - 'webpack.config.cjs'\n - 'webpack.config.test.cjs'\n - 'packages/**/*.js'\n - 'packages/**/*.cjs'\n - 'packages/**/*.ts'\n - 'packages/**/*.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - '__static__/**'\n - '.github/workflows/tests-karma-editor.yml'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if editor-related files changed.\n paths:\n - 'babel.config.cjs'\n - 'karma-story-editor.config.cjs'\n - 'webpack.config.cjs'\n - 'webpack.config.test.cjs'\n - 'packages/**/*.js'\n - 'packages/**/*.cjs'\n - 'packages/**/*.ts'\n - 'packages/**/*.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - '__static__/**'\n - '.github/workflows/tests-karma-editor.yml'\n types:\n - opened\n - reopened\n - synchronize\n - ready_for_review\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n karma:\n name: Karma (${{ matrix.shard }})\n runs-on: ubuntu-latest\n timeout-minutes: 60\n strategy:\n fail-fast: false\n matrix:\n # We want to split up the tests into 20 parts running in parallel.\n shard:\n [\n '1/20',\n '2/20',\n '3/20',\n '4/20',\n '5/20',\n '6/20',\n '7/20',\n '8/20',\n '9/20',\n '10/20',\n '11/20',\n '12/20',\n '13/20',\n '14/20',\n '15/20',\n '16/20',\n '17/20',\n '18/20',\n '19/20',\n '20/20',\n ]\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: block\n allowed-endpoints: >\n api.github.com:443\n codecov.io:443\n fonts.googleapis.com:443\n fonts.gstatic.com:443\n github.com:443\n registry.npmjs.org:443\n storage.googleapis.com:443\n uploader.codecov.io:443\n wp.stories.google:443\n media3p.googleapis.com:443\n stories.local:80\n 54.185.253.63:443\n 34.104.35.123:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n # TODO: Remove need for `npm install puppeteer`.\n - name: Install dependencies\n run: |\n npm ci\n npm install puppeteer\n env:\n PUPPETEER_PRODUCT: chrome\n\n # See https://issues.chromium.org/issues/373753919\n # and https://chromium.googlesource.com/chromium/src/+/main/docs/security/apparmor-userns-restrictions.md\n - name: Disable AppArmor\n run: echo 0 | sudo tee /proc/sys/kernel/apparmor_restrict_unprivileged_userns\n\n # FIXME: https://github.com/googleforcreators/web-stories-wp/issues/4364\n - name: Increase max number of file watchers\n run: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p\n\n - name: Get Chromium executable path\n id: chromium_path\n run: |\n CHROMIUM=$(node -p \"const puppeteer = require('puppeteer'); puppeteer.executablePath();\")\n echo \"chromium_path=${CHROMIUM}\" >> $GITHUB_ENV\n\n - name: Run integration tests\n run: |\n npm run test:karma:story-editor -- --headless --viewport=1600:1000 --coverage --shard=$SHARD || \\\n npm run test:karma:story-editor:retry-failed -- --headless --viewport=1600:1000 --shard=$SHARD\n env:\n DISABLE_ERROR_BOUNDARIES: true\n SHARD: ${{ matrix.shard }}\n\n - name: Upload code coverage report\n uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2\n with:\n files: build/logs/karma-coverage/story-editor/lcov.info\n flags: karmatests\n token: ${{ secrets.CODECOV_TOKEN }}\n" }, { "path": ".github/workflows/tests-unit-js.yml", "content": "name: JavaScript Unit Tests\n\non:\n push:\n # Only run if JS-related files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'packages/templates/src/raw/**'\n - 'packages/text-sets/src/raw/**'\n - 'patches/**'\n - 'packages/fonts/src/fonts.json'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if JS-related files changed.\n paths:\n - '**.js'\n - '**.cjs'\n - '**.ts'\n - '**.tsx'\n - '**/package.json'\n - 'package-lock.json'\n - 'packages/templates/src/raw/**'\n - 'packages/text-sets/src/raw/**'\n - 'patches/**'\n - 'packages/fonts/src/fonts.json'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n unit-js:\n name: Unit Tests (${{ matrix.shard }})\n runs-on: ubuntu-latest\n timeout-minutes: 30\n strategy:\n matrix:\n # We want to split up the tests into 2 parts running in parallel.\n shard: ['1/2', '2/2']\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-sudo: true\n disable-file-monitoring: true\n egress-policy: audit\n allowed-endpoints: >\n cdn.ampproject.org:443\n codecov.io:443\n github.com:443\n raw.githubusercontent.com:443\n registry.npmjs.org:443\n storage.googleapis.com:443\n uploader.codecov.io:443\n fonts.gstatic.com:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Setup Jest cache\n uses: actions/cache@668228422ae6a00e4ad889ee87cd7109ec5666a7\n with:\n path: .jest-cache\n key: ${{ runner.os }}-${{ env.NVMRC }}-jest\n\n # Rollup is needed for tests in `packages/migration/src` expecting `module.js`\n - name: Install dependencies\n run: |\n npm ci\n npx rollup --config packages/migration/rollup.config.js\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Download AMP validator JS\n id: amp_validator\n run: |\n cd $RUNNER_TEMP && curl -O -f -s -S https://cdn.ampproject.org/v0/validator_wasm.js\n AMP_VALIDATOR_FILE=\"${RUNNER_TEMP}/validator_wasm.js\"\n echo \"validator_file=$AMP_VALIDATOR_FILE\" >> $GITHUB_ENV\n\n - name: Run JavaScript unit tests\n run: npm run test:js -- --runInBand --ci --cacheDirectory=\"$HOME/.jest-cache\" --collectCoverage --shard=$SHARD\n env:\n SHARD: ${{ matrix.shard }}\n AMP_VALIDATOR_FILE: ${{ env.validator_file }}\n\n - name: Upload code coverage report\n uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2\n with:\n files: build/logs/lcov.info\n flags: unittests\n token: ${{ secrets.CODECOV_TOKEN }}\n" }, { "path": ".github/workflows/tests-unit-php.yml", "content": "name: PHP Unit Tests\n\non:\n push:\n # Only run if PHP-related files changed.\n paths:\n - '**.php'\n - 'phpunit.xml.dist'\n - 'phpunit-multisite.xml.dist'\n - 'composer.json'\n - 'composer.lock'\n - 'tests/phpunit/**'\n - 'includes/data/**'\n - '.github/workflows/tests-unit-php.yml'\n branches:\n - main\n - release/*\n pull_request:\n # Only run if PHP-related files changed.\n paths:\n - '**.php'\n - 'phpunit.xml.dist'\n - 'phpunit-multisite.xml.dist'\n - 'composer.json'\n - 'composer.lock'\n - 'tests/phpunit/**'\n - 'includes/data/**'\n - '.github/workflows/tests-unit-php.yml'\n\npermissions:\n contents: read\n\n# Cancels all previous workflow runs for pull requests that have not completed.\nconcurrency:\n # The concurrency group contains the workflow name and the (target) branch name.\n group: ${{ github.workflow }}-${{ github.head_ref || github.ref }}\n cancel-in-progress: true\n\njobs:\n unit-php:\n name: PHP ${{ matrix.php }} - WP ${{ matrix.wp }}${{ matrix.experimental && ' (experimental)' || '' }}${{ matrix.coverage && ' (with coverage)' || '' }}${{ matrix.random && ' (in random order)' || '' }}\n runs-on: ubuntu-latest\n timeout-minutes: 20\n services:\n mysql:\n image: mariadb:lts\n env:\n MARIADB_ALLOW_EMPTY_ROOT_PASSWORD: true\n MARIADB_DATABASE: wordpress_test\n MARIADB_MYSQL_LOCALHOST_USER: 1\n MARIADB_MYSQL_LOCALHOST_GRANTS: USAGE\n ports:\n - 3306\n options: --health-cmd=\"healthcheck.sh --su-mysql --connect --innodb_initialized\" --health-interval=10s --health-timeout=5s --health-retries=3\n continue-on-error: ${{ matrix.experimental }}\n strategy:\n matrix:\n php: ['8.4', '8.3', '8.2', '8.1', '8.0']\n wp: ['latest']\n coverage: [false]\n experimental: [false]\n include:\n - php: '8.5'\n wp: 'latest'\n coverage: true\n experimental: false\n\n - php: '8.5'\n wp: 'latest'\n random: true\n experimental: true\n\n - php: '7.4'\n wp: '6.6'\n experimental: false\n\n - php: '8.5'\n wp: 'trunk'\n experimental: true\n\n - php: 'nightly'\n wp: 'trunk'\n experimental: true\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n disable-file-monitoring: true\n egress-policy: audit\n allowed-endpoints: >\n api.github.com:443\n api.wordpress.org:80\n cdn.ampproject.org:443\n develop.svn.wordpress.org:443\n example.com:443\n github.com:443\n objects.githubusercontent.com:443\n packagist.org:443\n raw.github.com:443\n repo.packagist.org:443\n wordpress.org:443\n getcomposer.org:443\n dl.cloudsmith.io:443\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n\n # PHP-Scoper only works on PHP 7.4+ and we need to prefix our dependencies to accurately test them.\n # So we temporarily switch PHP versions, do a full install and then remove the package.\n # Then switch back to the PHP version we want to test and delete the vendor directory.\n\n - name: Setup PHP 8.0\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: latest\n tools: composer\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction'\n\n - name: Remove prefixed dependencies\n run: rm -rf vendor/*\n\n - name: Setup PHP\n uses: shivammathur/setup-php@accd6127cb78bee3e8082180cb391013d204ef9f\n with:\n php-version: ${{ matrix.php }}\n extensions: mysql\n coverage: ${{ matrix.coverage && 'xdebug' || 'none' }}\n tools: composer, cs2pr\n\n - name: Install PHP dependencies\n uses: ramsey/composer-install@65e4f84970763564f46a70b8a54b90d033b3bdda\n with:\n composer-options: '--prefer-dist --no-progress --no-interaction --no-scripts'\n\n - name: Composer dump autoload\n run: composer dump-autoload --no-interaction\n\n - name: Shutdown default MySQL service\n run: sudo service mysql stop\n\n - name: Verify MariaDB connection\n run: |\n while ! mysqladmin ping -h\"127.0.0.1\" -P\"${JOB_SERVICES_MYSQL_3307TH_PORTS}\" --silent; do\n sleep 1\n done\n env:\n JOB_SERVICES_MYSQL_3307TH_PORTS: ${{ job.services.mysql.ports[3306] }}\n\n - name: Install svn\n run: |\n sudo apt update -y --allow-releaseinfo-change\n sudo apt install -y subversion\n\n - name: Set up tests\n run: bash bin/install-wp-tests.sh wordpress_test root '' 127.0.0.1:${JOB_SERVICES_MYSQL_PORTS_3306} ${{ matrix.wp }} true\n env:\n JOB_SERVICES_MYSQL_PORTS_3306: ${{ job.services.mysql.ports['3306'] }}\n\n - name: Set up problem matchers for PHPUnit\n run: echo \"::add-matcher::${{ runner.tool_cache }}/phpunit.json\"\n\n - name: Run tests\n run: |\n npm run test:php:unit\n npm run test:php:integration:single\n npm run test:php:integration:multisite\n if: ${{ ! matrix.coverage && ! matrix.random }}\n\n - name: Run tests with coverage\n run: |\n npm run test:php:unit -- --coverage-clover build/logs/php-coverage.xml\n npm run test:php:integration:single -- --coverage-clover build/logs/php-coverage-integration.xml\n npm run test:php:integration:multisite -- --coverage-clover build/logs/php-coverage-multisite.xml\n if: ${{ matrix.coverage && ! matrix.random }}\n\n - name: Run tests in random order\n run: |\n npm run test:php:unit -- --order-by random\n npm run test:php:integration:single -- --order-by random\n npm run test:php:integration:multisite -- --order-by random\n if: ${{ matrix.random }}\n\n - name: Upload code coverage report\n uses: codecov/codecov-action@57e3a136b779b570ffcdbf80b3bdc90e7fab3de2\n with:\n files: build/logs/*.xml\n token: ${{ secrets.CODECOV_TOKEN }}\n if: ${{ matrix.coverage }}\n" }, { "path": ".github/workflows/update-browserslist.yml", "content": "name: Update browserslist db\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 12 1 * *'\n\npermissions:\n contents: read\n\nenv:\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n\njobs:\n update-browserslist-db:\n name: Update browserslist db\n runs-on: ubuntu-latest\n timeout-minutes: 5\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Update db\n run: npx update-browserslist-db@latest\n\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n commit-message: Update browserslist db\n title: Update browserslist db\n body: Updates `caniuse-lite` to use the latest browser’s versions and statistics.\n branch: update/browserslist-db\n labels: Dependencies\n" }, { "path": ".github/workflows/update-google-fonts.yml", "content": "name: Update Google Fonts\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 12 1 * *'\n\npermissions:\n contents: read\n\nenv:\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n\njobs:\n update-fonts:\n name: Update Google Fonts\n runs-on: ubuntu-latest\n timeout-minutes: 10\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Setup Bun\n uses: oven-sh/setup-bun@0c5077e51419868618aeaa5fe8019c62421857d6\n with:\n bun-version: latest\n\n - name: Update list of Google Fonts\n env:\n GOOGLE_FONTS_API_KEY: ${{ secrets.GOOGLE_FONTS_API_KEY }}\n run: npm run workflow:fonts\n\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n commit-message: Update list of Google Fonts\n title: Update list of Google Fonts\n body: Fetched the currently available fonts on Google Fonts to update them in the project.\n branch: update/google-fonts\n labels: Dependencies\n" }, { "path": ".github/workflows/update-product-schema.yml", "content": "name: Update Product Schema\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 12 1 * *'\n\npermissions:\n contents: read\n\nenv:\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n\njobs:\n update-fonts:\n name: Update Product Schema\n runs-on: ubuntu-latest\n timeout-minutes: 5\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Update Product Schema\n run: |\n curl -O -f https://raw.githubusercontent.com/ampproject/amphtml/main/examples/amp-story/shopping/product.schema.json\n cp product.schema.json packages/e2e-tests/src/specs/editor/shopping/schema.json\n mv product.schema.json tests/phpunit/integration/data/schema.json\n\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n commit-message: Update Product Schema\n title: Update Product Schema\n body: |\n Fetched the current [product JSON schema](https://github.com/ampproject/amphtml/blob/main/examples/amp-story/shopping/product.schema.json) for `` to update it in the project.\n branch: update/product-schema\n labels: Dependencies\n" }, { "path": ".github/workflows/update-templates.yml", "content": "name: Migrate Templates\n\non:\n workflow_dispatch:\n schedule:\n - cron: '0 12 * * 1'\n\nenv:\n GIT_AUTHOR_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_AUTHOR_NAME: googleforcreators-bot\n GIT_COMMITTER_EMAIL: 94923726+googleforcreators-bot@users.noreply.github.com\n GIT_COMMITTER_NAME: googleforcreators-bot\n\npermissions:\n contents: read\n\njobs:\n update-template:\n name: Migrate templates and text sets\n runs-on: ubuntu-latest\n timeout-minutes: 5\n\n steps:\n - name: Harden Runner\n uses: step-security/harden-runner@fe104658747b27e96e4f7e80cd0a94068e53901d\n with:\n egress-policy: audit # TODO: change to 'egress-policy: block' after couple of runs\n\n - name: Checkout\n uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n\n - name: Setup Node\n uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f\n with:\n node-version-file: '.nvmrc'\n cache: npm\n\n - name: Install dependencies\n run: npm ci\n env:\n PUPPETEER_SKIP_DOWNLOAD: true\n\n - name: Update story data (templates, text sets, FTUE)\n run: npm run workflow:migrate\n\n - name: Create Pull Request\n uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0\n with:\n token: ${{ secrets.GOOGLEFORCREATORS_BOT_TOKEN }}\n commit-message: Migrate templates and text sets to latest version\n title: Migrate templates and text sets\n body: Update templates and text sets after running through migration\n branch: update/templates\n labels: Dependencies\n" }, { "path": ".gitignore", "content": ".rollup.cache\n.test_artifacts\n.idea/\n.vscode/\n.DS_Store\nnode_modules\n/assets\n/packages/migration/scripts/module.js\n/packages/*/dist\n/packages/*/dist-module\n/packages/*/dist-types\n/build\n/bin/build\n/bin/local-env/data\nbin/local-env/docker-compose.override.yml\n/includes/vendor\n/includes/composer.json\n/plugin-assets\n/public\n/static\n/third-party\n/vendor\nphpcs.xml\nphpunit.xml\n.phpunit.result.cache\n/packages/*/package-lock.json\n*.tsbuildinfo\n" }, { "path": ".husky/pre-commit", "content": "#!/bin/sh\n\n# TODO: Move to ~/.huskyrc instead.\n# See https://typicode.github.io/husky/#/?id=command-not-found\nexport NVM_DIR=\"$HOME/.nvm\"\n[ -s \"$NVM_DIR/nvm.sh\" ] && \\. \"$NVM_DIR/nvm.sh\"\n\n. \"$(dirname \"$0\")/_/husky.sh\"\n\nnpx lint-staged --relative\n" }, { "path": ".markdownlint.json", "content": "{\n \"default\": true,\n \"MD003\": { \"style\": \"atx\" },\n \"MD007\": { \"indent\": 4 },\n \"MD013\": { \"line_length\": 9999 },\n \"no-hard-tabs\": false,\n \"no-inline-html\": false,\n \"whitespace\": false\n}\n" }, { "path": ".markdownlintignore", "content": ".github\n__mocks__\nassets\nbin\nbuild\nnode_modules\ntests\nvendor\n" }, { "path": ".npmpackagejsonlintrc.json", "content": "{\n \"rules\": {\n \"bin-type\": \"error\",\n \"bundledDependencies-type\": \"error\",\n \"config-type\": \"error\",\n \"cpu-type\": \"error\",\n \"dependencies-type\": \"error\",\n \"description-type\": \"error\",\n \"devDependencies-type\": \"error\",\n \"directories-type\": \"error\",\n \"engines-type\": \"error\",\n \"files-type\": \"error\",\n \"homepage-type\": \"error\",\n \"keywords-type\": \"error\",\n \"license-type\": \"error\",\n \"main-type\": \"error\",\n \"man-type\": \"error\",\n \"name-format\": \"error\",\n \"name-type\": \"error\",\n \"no-restricted-dependencies\": \"off\",\n \"no-restricted-devDependencies\": \"off\",\n \"no-restricted-pre-release-dependencies\": \"off\",\n \"no-restricted-pre-release-devDependencies\": \"off\",\n \"optionalDependencies-type\": \"error\",\n \"os-type\": \"error\",\n \"peerDependencies-type\": \"error\",\n \"prefer-absolute-version-dependencies\": \"off\",\n \"prefer-absolute-version-devDependencies\": \"off\",\n \"prefer-alphabetical-bundledDependencies\": \"error\",\n \"prefer-alphabetical-dependencies\": \"error\",\n \"prefer-alphabetical-devDependencies\": \"error\",\n \"prefer-alphabetical-optionalDependencies\": \"error\",\n \"prefer-alphabetical-peerDependencies\": \"error\",\n \"prefer-caret-version-dependencies\": \"off\",\n \"prefer-caret-version-devDependencies\": \"off\",\n \"prefer-no-engineStrict\": \"off\",\n \"prefer-no-version-zero-dependencies\": \"off\",\n \"prefer-no-version-zero-devDependencies\": \"off\",\n \"prefer-property-order\": [\n \"error\",\n [\n \"name\",\n \"description\",\n \"private\",\n \"version\",\n \"author\",\n \"license\",\n \"keywords\",\n \"homepage\",\n \"repository\",\n \"bugs\",\n \"engines\",\n \"files\",\n \"type\",\n \"workspaces\",\n \"customExports\",\n \"exports\",\n \"main\",\n \"module\",\n \"types\",\n \"source\",\n \"publishConfig\",\n \"sideEffects\",\n \"dependencies\",\n \"devDependencies\",\n \"peerDependencies\",\n \"bin\",\n \"scripts\"\n ]\n ],\n \"prefer-tilde-version-dependencies\": \"off\",\n \"prefer-tilde-version-devDependencies\": \"off\",\n \"preferGlobal-type\": \"error\",\n \"private-type\": \"error\",\n \"repository-type\": \"error\",\n \"require-author\": \"error\",\n \"require-bin\": \"off\",\n \"require-bugs\": \"error\",\n \"require-bundledDependencies\": \"off\",\n \"require-config\": \"off\",\n \"require-contributors\": \"off\",\n \"require-cpu\": \"off\",\n \"require-dependencies\": \"off\",\n \"require-description\": \"error\",\n \"require-devDependencies\": \"off\",\n \"require-directories\": \"off\",\n \"require-engines\": \"off\",\n \"require-files\": \"off\",\n \"require-homepage\": \"error\",\n \"require-keywords\": \"error\",\n \"require-license\": \"error\",\n \"require-main\": \"off\",\n \"require-man\": \"off\",\n \"require-module\": \"off\",\n \"require-name\": \"error\",\n \"require-optionalDependencies\": \"off\",\n \"require-os\": \"off\",\n \"require-peerDependencies\": \"off\",\n \"require-preferGlobal\": \"off\",\n \"require-private\": \"off\",\n \"require-publishConfig\": \"off\",\n \"require-repository\": \"error\",\n \"require-repository-directory\": \"off\",\n \"require-scripts\": \"off\",\n \"require-version\": \"off\",\n \"scripts-type\": \"error\",\n \"valid-values-author\": [\"error\", [\"Google\"]],\n \"valid-values-license\": [\"error\", [\"Apache-2.0\"]],\n \"valid-values-private\": \"off\",\n \"version-format\": \"error\",\n \"version-type\": \"error\"\n }\n}\n" }, { "path": ".npmrc", "content": "save-exact = false\nlockfile-version=3\n" }, { "path": ".nvmrc", "content": "24\n" }, { "path": ".oxlintrc.json", "content": "{\n\t\"$schema\": \"./node_modules/oxlint/configuration_schema.json\",\n\t\"categories\": {\n\t\t\"correctness\": \"error\",\n\t\t\"nursery\": \"error\",\n\t\t\"pedantic\": \"error\",\n\t\t\"perf\": \"off\",\n\t\t\"restriction\": \"error\",\n\t\t\"suspicious\": \"error\"\n\t},\n\t\"plugins\": [\n\t\t\"import\",\n\t\t\"jsdoc\",\n\t\t\"promise\",\n\t\t\"react-perf\"\n\t],\n\t\"ignorePatterns\": [\n\t\t\"@types\"\n\t],\n\t\"settings\": {\n\t\t\"jsdoc\": {\n\t\t\t\"tagNamePreference\": {\n\t\t\t\t\"returns\": \"return\",\n\t\t\t\t\"yields\": \"yield\"\n\t\t\t}\n\t\t}\n\t},\n\t\"rules\": {\n\t\t\"accessor-pairs\": \"off\",\n\t\t\"class-methods-use-this\": \"off\",\n\t\t\"complexity\": \"off\",\n\t\t\"default-case\": \"off\",\n\t\t\"max-classes-per-file\": \"off\",\n\t\t\"max-depth\": \"off\",\n\t\t\"max-lines\": \"off\",\n\t\t\"max-lines-per-function\": \"off\",\n\t\t\"no-alert\": \"off\",\n\t\t\"no-bitwise\": \"off\",\n\t\t\"no-case-declarations\": \"off\",\n\t\t\"no-else-return\": \"off\",\n\t\t\"no-empty-function\": \"off\",\n\t\t\"no-inline-comments\": \"off\",\n\t\t\"no-multiple-resolved\": \"off\",\n\t\t\"no-negated-condition\": \"off\",\n\t\t\"no-param-reassign\": \"off\",\n\t\t\"no-plusplus\": \"off\",\n\t\t\"no-promise-executor-return\": \"off\",\n\t\t\"no-shadow\": \"off\",\n\t\t\"no-undef\": \"off\",\n\t\t\"no-undefined\": \"off\",\n\t\t\"no-unused-expressions\": \"off\",\n\t\t\"no-unused-vars\": \"off\",\n\t\t\"no-useless-return\": \"off\",\n\t\t\"no-void\": [\"error\", { \"allowAsStatement\": true }],\n\t\t\"no-warning-comments\": \"off\",\n\t\t\"radix\": \"off\",\n\t\t\"require-await\": \"off\",\n\t\t\"sort-vars\": \"off\",\n\t\t\"symbol-description\": \"off\",\n\t\t\"import/export\": \"off\",\n\t\t\"import/extensions\": \"off\",\n\t\t\"import/max-dependencies\": \"off\",\n\t\t\"import/named\": \"off\",\n\t\t\"import/no-commonjs\": \"off\",\n\t\t\"import/no-default-export\": \"off\",\n\t\t\"import/no-named-as-default\": \"off\",\n\t\t\"import/no-named-as-default-member\": \"off\",\n\t\t\"import/no-relative-parent-imports\": \"off\",\n\t\t\"import/no-unassigned-import\": \"off\",\n\t\t\"import/unambiguous\": \"off\",\n\t\t\"jest/no-conditional-in-test\": \"off\",\n\t\t\"jsdoc/check-tag-names\": \"off\",\n\t\t\"jsdoc/require-param\": \"off\",\n\t\t\"jsdoc/require-param-description\": \"off\",\n\t\t\"jsdoc/require-param-type\": \"off\",\n\t\t\"jsdoc/require-returns\": \"off\",\n\t\t\"jsdoc/require-returns-type\": \"off\",\n\t\t\"promise/always-return\": \"off\",\n\t\t\"promise/catch-or-return\": \"off\",\n\t\t\"promise/no-callback-in-promise\": \"off\"\n\t},\n \"overrides\": [\n {\n \"files\": [\n \"packages/commander/**/*.ts\"\n ],\n \"rules\": {\n \"no-console\": \"off\"\n }\n },\n {\n \"files\": [\n \"**/*.d.ts\",\n \"packages/karma-puppeteer-client/**/*.js\",\n \"packages/karma-puppeteer-launcher/**/*.js\"\n ],\n \"rules\": {\n \"no-var\": \"off\"\n }\n }\n ]\n}\n" }, { "path": ".phpstorm.config.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// eslint-disable-next-line no-undef -- Special global in IntelliJ.\nSystem.config({\n paths: {\n // Published Packages\n '@googleforcreators/animation': './packages/animation/src',\n '@googleforcreators/dashboard': './packages/dashboard/src',\n '@googleforcreators/date': './packages/date/src',\n '@googleforcreators/design-system': './packages/design-system/src',\n '@googleforcreators/dom': './packages/dom/src',\n '@googleforcreators/element-library': './packages/element-library/src',\n '@googleforcreators/elements': './packages/elements/src',\n '@googleforcreators/fonts': './packages/fonts/src',\n '@googleforcreators/i18n': './packages/i18n/src',\n '@googleforcreators/masks': './packages/masks/src',\n '@googleforcreators/media': './packages/media/src',\n '@googleforcreators/migration': './packages/migration/src',\n '@googleforcreators/moveable': './packages/moveable/src',\n '@googleforcreators/output': './packages/output/src',\n '@googleforcreators/patterns': './packages/patterns/src',\n '@googleforcreators/react': './packages/react/src',\n '@googleforcreators/rich-text': './packages/rich-text/src',\n '@googleforcreators/stickers': './packages/stickers/src',\n '@googleforcreators/story-editor': './packages/story-editor/src',\n '@googleforcreators/templates': './packages/templates/src',\n '@googleforcreators/text-sets': './packages/text-sets/src',\n '@googleforcreators/tracking': './packages/tracking/src',\n '@googleforcreators/transform': './packages/transform/src',\n '@googleforcreators/units': './packages/units/src',\n '@googleforcreators/url': './packages/url/src',\n\n // Private Packages\n '@web-stories-wp/e2e-tests': './packages/e2e-tests/src',\n '@web-stories-wp/activation-notice': './packages/activation-notice/src',\n '@web-stories-wp/commander': './packages/commander/src',\n '@web-stories-wp/e2e-test-utils': './packages/e2e-test-utils/src',\n '@web-stories-wp/eslint-import-resolver': './packages/eslint-import-resolver/src',\n '@web-stories-wp/glider': './packages/glider/src',\n '@web-stories-wp/jest-amp': './packages/jest-amp/src',\n '@web-stories-wp/jest-puppeteer-amp': './packages/jest-puppeteer-amp/src',\n '@web-stories-wp/jest-resolver': './packages/jest-resolver/src',\n '@web-stories-wp/karma-failed-tests-reporter': './packages/karma-failed-tests-reporter/src',\n '@web-stories-wp/karma-puppeteer-client': './packages/karma-puppeteer-client/src',\n '@web-stories-wp/karma-puppeteer-launcher': './packages/karma-puppeteer-launcher/src',\n '@web-stories-wp/stories-block': './packages/stories-block/src',\n '@web-stories-wp/stories-carousel': './packages/stories-carousel/src',\n '@web-stories-wp/tinymce-button': './packages/tinymce-button/src',\n '@web-stories-wp/widget': './packages/widget/src',\n '@web-stories-wp/wp-dashboard': './packages/wp-dashboard/src',\n '@web-stories-wp/wp-story-editor': './packages/wp-story-editor/src',\n '@web-stories-wp/wp-utils': './packages/wp-utils/src',\n },\n});\n" }, { "path": ".phpstorm.meta.php", "content": " \\Google\\Web_Stories\\Admin\\Activation_Notice::class,\n\t\t\t'admin.google_fonts' => \\Google\\Web_Stories\\Admin\\Google_Fonts::class,\n\t\t\t'amp_output_buffer' => \\Google\\Web_Stories\\AMP\\Output_Buffer::class,\n\t\t\t'amp_story_player_assets' => \\Google\\Web_Stories\\AMP_Story_Player_Assets::class,\n\t\t\t'adsense' => \\Google\\Web_Stories\\AdSense::class,\n\t\t\t'ad_manager' => \\Google\\Web_Stories\\Ad_Manager::class,\n\t\t\t'mgid' => \\Google\\Web_Stories\\Mgid::class,\n\t\t\t'admin' => \\Google\\Web_Stories\\Admin\\Admin::class,\n\t\t\t'admin.revisions' => \\Google\\Web_Stories\\Admin\\Revisions::class,\n\t\t\t'analytics' => \\Google\\Web_Stories\\Analytics::class,\n\t\t\t'coi' => \\Google\\Web_Stories\\Admin\\Cross_Origin_Isolation::class,\n\t\t\t'customizer' => \\Google\\Web_Stories\\Admin\\Customizer::class,\n\t\t\t'dashboard' => \\Google\\Web_Stories\\Admin\\Dashboard::class,\n\t\t\t'database_upgrader' => \\Google\\Web_Stories\\Database_Upgrader::class,\n\t\t\t'discovery' => \\Google\\Web_Stories\\Discovery::class,\n\t\t\t'editor' => \\Google\\Web_Stories\\Admin\\Editor::class,\n\t\t\t'embed_shortcode' => \\Google\\Web_Stories\\Shortcode\\Embed_Shortcode::class,\n\t\t\t'experiments' => \\Google\\Web_Stories\\Experiments::class,\n\t\t\t'integrations.amp' => \\Google\\Web_Stories\\Integrations\\AMP::class,\n\t\t\t'integrations.ezoic' => \\Google\\Web_Stories\\Integrations\\Ezoic::class,\n\t\t\t'integrations.jetpack' => \\Google\\Web_Stories\\Integrations\\Jetpack::class,\n\t\t\t'integrations.newrelic' => \\Google\\Web_Stories\\Integrations\\New_Relic::class,\n\t\t\t'integrations.nextgen_gallery' => \\Google\\Web_Stories\\Integrations\\NextGen_Gallery::class,\n\t\t\t'integrations.cfi' => \\Google\\Web_Stories\\Integrations\\Conditional_Featured_Image::class,\n\t\t\t'integrations.sitekit' => \\Google\\Web_Stories\\Integrations\\Site_Kit::class,\n\t\t\t'integrations.themes_support' => \\Google\\Web_Stories\\Integrations\\Core_Themes_Support::class,\n\t\t\t'integrations.shortpixel' => \\Google\\Web_Stories\\Integrations\\ShortPixel::class,\n\t\t\t'kses' => \\Google\\Web_Stories\\KSES::class,\n\t\t\t'media.base_color' => \\Google\\Web_Stories\\Media\\Base_Color::class,\n\t\t\t'media.blurhash' => \\Google\\Web_Stories\\Media\\Blurhash::class,\n\t\t\t'media.image_sizes' => \\Google\\Web_Stories\\Media\\Image_Sizes::class,\n\t\t\t'media.media_source' => \\Google\\Web_Stories\\Media\\Media_Source_Taxonomy::class,\n\t\t\t'media.video.captions' => \\Google\\Web_Stories\\Media\\Video\\Captions::class,\n\t\t\t'media.cropping' => \\Google\\Web_Stories\\Media\\Cropping::class,\n\t\t\t'media.video.muting' => \\Google\\Web_Stories\\Media\\Video\\Muting::class,\n\t\t\t'media.video.optimization' => \\Google\\Web_Stories\\Media\\Video\\Optimization::class,\n\t\t\t'media.video.poster' => \\Google\\Web_Stories\\Media\\Video\\Poster::class,\n\t\t\t'media.video.trimming' => \\Google\\Web_Stories\\Media\\Video\\Trimming::class,\n\t\t\t'font_post_type' => \\Google\\Web_Stories\\Font_Post_Type::class,\n\t\t\t'page_template_post_type' => \\Google\\Web_Stories\\Page_Template_Post_Type::class,\n\t\t\t'plugin_row_meta' => \\Google\\Web_Stories\\Admin\\PluginRowMeta::class,\n\t\t\t'plugin_action_links' => \\Google\\Web_Stories\\Admin\\PluginActionLinks::class,\n\t\t\t'product_meta' => \\Google\\Web_Stories\\Shopping\\Product_Meta::class,\n\t\t\t'meta_boxes' => \\Google\\Web_Stories\\Admin\\Meta_Boxes::class,\n\t\t\t'settings' => \\Google\\Web_Stories\\Settings::class,\n\t\t\t'site_health' => \\Google\\Web_Stories\\Admin\\Site_Health::class,\n\t\t\t'story_archive' => \\Google\\Web_Stories\\Story_Archive::class,\n\t\t\t'story_post_type' => \\Google\\Web_Stories\\Story_Post_Type::class,\n\t\t\t'story_revisions' => \\Google\\Web_Stories\\Story_Revisions::class,\n\t\t\t'story_shortcode' => \\Google\\Web_Stories\\Shortcode\\Stories_Shortcode::class,\n\t\t\t'svg' => \\Google\\Web_Stories\\Media\\SVG::class,\n\t\t\t'tracking' => \\Google\\Web_Stories\\Tracking::class,\n\t\t\t'tinymce' => \\Google\\Web_Stories\\Admin\\TinyMCE::class,\n\t\t\t'register.widget' => \\Google\\Web_Stories\\Register_Widget::class,\n\t\t\t'renderer.archives' => \\Google\\Web_Stories\\Renderer\\Archives::class,\n\t\t\t'renderer.single' => \\Google\\Web_Stories\\Renderer\\Single::class,\n\t\t\t'renderer.oembed' => \\Google\\Web_Stories\\Renderer\\Oembed::class,\n\t\t\t'renderer.feed' => \\Google\\Web_Stories\\Renderer\\Feed::class,\n\t\t\t'user.capabilities' => \\Google\\Web_Stories\\User\\Capabilities::class,\n\t\t\t'rest.embed_controller' => \\Google\\Web_Stories\\REST_API\\Embed_Controller::class,\n\t\t\t'rest.link_controller' => \\Google\\Web_Stories\\REST_API\\Link_Controller::class,\n\t\t\t'rest.hotlinking_controller' => \\Google\\Web_Stories\\REST_API\\Hotlinking_Controller::class,\n\t\t\t'rest.publisher_logos' => \\Google\\Web_Stories\\REST_API\\Publisher_Logos_Controller::class,\n\t\t\t'rest.status_check_controller' => \\Google\\Web_Stories\\REST_API\\Status_Check_Controller::class,\n\t\t\t'rest.stories_autosave' => \\Google\\Web_Stories\\REST_API\\Stories_Autosaves_Controller::class,\n\t\t\t'rest.stories_lock' => \\Google\\Web_Stories\\REST_API\\Stories_Lock_Controller::class,\n\t\t\t'rest.media' => \\Google\\Web_Stories\\REST_API\\Stories_Media_Controller::class,\n\t\t\t'rest.settings' => \\Google\\Web_Stories\\REST_API\\Stories_Settings_Controller::class,\n\t\t\t'rest.users' => \\Google\\Web_Stories\\REST_API\\Stories_Users_Controller::class,\n\t\t\t'rest.taxonomies' => \\Google\\Web_Stories\\REST_API\\Stories_Taxonomies_Controller::class,\n\t\t\t'rest.template_autosave' => \\Google\\Web_Stories\\REST_API\\Template_Autosaves_Controller::class,\n\t\t\t'rest.template_lock' => \\Google\\Web_Stories\\REST_API\\Template_Lock_Controller::class,\n\t\t\t'taxonomy.category' => \\Google\\Web_Stories\\Taxonomy\\Category_Taxonomy::class,\n\t\t\t'taxonomy.tag' => \\Google\\Web_Stories\\Taxonomy\\Tag_Taxonomy::class,\n\t\t\t'user_preferences' => \\Google\\Web_Stories\\User\\Preferences::class,\n\t\t\t'remove_transients' => \\Google\\Web_Stories\\Remove_Transients::class,\n\t\t\t'web_stories_block' => \\Google\\Web_Stories\\Block\\Web_Stories_Block::class,\n\t\t\t'injector' => \\Google\\Web_Stories\\Infrastructure\\Injector::class,\n\t\t] )\n\t);\n\n\t// For the injector, the return type should be the same as what the provided FQCN represents.\n\toverride(\n\t\t\\Google\\Web_Stories\\Infrastructure\\Injector::make(),\n\t\tmap( [ '' => '@' ] )\n\t);\n}\n" }, { "path": ".prettierignore", "content": "/.idea\n/bin/local-env/uploads.ini\n/bin/local-env/data\n/build\n/docs\n/node_modules\n/vendor\n/assets/css\n/assets/js\n/assets/images\npackages/karma-puppeteer-client/src/client.js\n.browserslistrc\n.distignore\n.editorconfig\n.eslintignore\n.eslintrc\n.gitignore\n.npmrc\n.nvmrc\n.prettierignore\n.prettierrc\n.stylelintignore\n.stylelintrc\n.DS_Store\n*.php\n*.txt\n*.sh\n*.svg\nLICENSE\ncomposer.json\ncomposer.lock\npackage.json\npackage-lock.json\n" }, { "path": ".prettierrc", "content": "{\n \"plugins\": [\"@prettier/plugin-xml\"],\n \"printWidth\": 80,\n \"singleQuote\": true,\n \"trailingComma\": \"es5\",\n \"bracketSpacing\": true,\n \"arrowParens\": \"always\",\n \"overrides\": [\n {\n \"files\": \"*.md\",\n \"options\": {\n \"parser\": \"markdown\"\n }\n },\n {\n \"files\": [\".eslintrc\", \".prettierrc\", \".stylelintrc\", \"*.json\"],\n \"options\": {\n \"parser\": \"json\"\n }\n },\n {\n \"files\": [\"*.yml\", \"*.neon.dist\"],\n \"options\": {\n \"parser\": \"yaml\"\n }\n },\n {\n \"files\": [\"*.xml\", \"*.xml.dist\"],\n \"options\": {\n \"parser\": \"xml\"\n }\n }\n ]\n}\n" }, { "path": ".storybook/main.cjs", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nconst { readFileSync } = require('fs');\nconst webpack = require('webpack');\nconst CircularDependencyPlugin = require('circular-dependency-plugin');\n// eslint-disable-next-line n/no-missing-require\nconst { loadCsf } = require('storybook/internal/csf-tools');\n\n/** @type { import('@storybook/react-webpack5').StorybookConfig } */\nmodule.exports = {\n stories: [\n './stories/playground/*/(index|preview).js',\n '../packages/dashboard/src/**/stories/index.js',\n '../packages/story-editor/src/**/stories/index.js',\n '../packages/wp-dashboard/src/**/stories/index.js',\n '../packages/activation-notice/src/**/stories/index.js',\n '../packages/design-system/src/**/stories/index.js',\n '../packages/animation/src/**/stories/*.js',\n ],\n\n experimental_indexers: (indexers) => {\n const createIndex = (fileName, opts) => {\n const code = readFileSync(fileName, {\n encoding: 'utf-8',\n });\n return loadCsf(code, {\n ...opts,\n fileName,\n }).parse().indexInputs;\n };\n return [\n {\n test: /stories\\/.*\\.js$/,\n createIndex,\n },\n ...(indexers || []),\n ];\n },\n\n addons: [\n '@storybook/addon-a11y/register',\n '@storybook/addon-webpack5-compiler-babel',\n ],\n\n framework: {\n name: '@storybook/react-webpack5',\n options: {},\n },\n\n core: {\n disableTelemetry: true,\n },\n\n docs: {\n disabled: true,\n },\n\n //eslint-disable-next-line require-await -- Negligible.\n webpackFinal: async (webpackConfig) => {\n // webpack < 5 used to include polyfills for node.js core modules by default.\n // Prevent ModuleNotFoundError for this dependency.\n webpackConfig.resolve = {\n ...webpackConfig.resolve,\n // Fixes resolving packages in the monorepo so we use the \"src\" folder, not \"dist\".\n // This should be sync'd with the config in `webpack.config.cjs`.\n exportsFields: ['customExports', 'exports'],\n // To make loading mediainfo.js work.\n fallback: {\n fs: false,\n path: false,\n url: false,\n module: false,\n assert: false,\n perf_hooks: false,\n crypto: false,\n worker_threads: false,\n },\n };\n\n // Avoid having to provide full file extension for imports.\n // See https://webpack.js.org/configuration/module/#resolvefullyspecified\n\n webpackConfig.module.rules = webpackConfig.module.rules.map((rule) => ({\n ...rule,\n resolve: {\n ...rule.resolve,\n fullySpecified: false,\n },\n }));\n\n // These should be sync'd with the config in `webpack.config.cjs`.\n webpackConfig.plugins.push(\n new webpack.DefinePlugin({\n WEB_STORIES_CI: JSON.stringify(process.env.CI),\n WEB_STORIES_ENV: JSON.stringify(process.env.NODE_ENV),\n WEB_STORIES_DISABLE_ERROR_BOUNDARIES: JSON.stringify(\n process.env.DISABLE_ERROR_BOUNDARIES\n ),\n WEB_STORIES_DISABLE_OPTIMIZED_RENDERING: JSON.stringify(\n process.env.DISABLE_OPTIMIZED_RENDERING\n ),\n WEB_STORIES_DISABLE_PREVENT: JSON.stringify(\n process.env.DISABLE_PREVENT\n ),\n WEB_STORIES_DISABLE_QUICK_TIPS: JSON.stringify(\n process.env.DISABLE_QUICK_TIPS\n ),\n })\n );\n\n // These should be sync'd with the config in `webpack.config.cjs`.\n webpackConfig.plugins.push(\n new webpack.DefinePlugin({\n WEB_STORIES_CI: JSON.stringify(process.env.CI),\n WEB_STORIES_ENV: JSON.stringify(process.env.NODE_ENV),\n WEB_STORIES_DISABLE_ERROR_BOUNDARIES: JSON.stringify(\n process.env.DISABLE_ERROR_BOUNDARIES\n ),\n WEB_STORIES_DISABLE_OPTIMIZED_RENDERING: JSON.stringify(\n process.env.DISABLE_OPTIMIZED_RENDERING\n ),\n WEB_STORIES_DISABLE_PREVENT: JSON.stringify(\n process.env.DISABLE_PREVENT\n ),\n WEB_STORIES_DISABLE_QUICK_TIPS: JSON.stringify(\n process.env.DISABLE_QUICK_TIPS\n ),\n })\n );\n webpackConfig.plugins.push(\n new CircularDependencyPlugin({\n // exclude detection of files based on a RegExp\n exclude: /a\\.js|node_modules/,\n // add errors to webpack instead of warnings\n failOnError: true,\n // allow import cycles that include an asynchronous import,\n // e.g. via import(/* webpackMode: \"weak\" */ 'file.js')\n allowAsyncCycles: false,\n // set the current working directory for displaying module paths\n cwd: process.cwd(),\n })\n );\n\n // Ensure SVGR is the only loader used for files with .svg extension.\n const assetRule = webpackConfig.module.rules.find(({ test }) => {\n if (!test) {\n return false;\n }\n if (Array.isArray(test)) {\n return test.every((t) => t.test('.svg'));\n }\n return test.test('.svg');\n });\n assetRule.exclude = /\\.svg/;\n webpackConfig.module.rules.unshift(\n {\n test: /\\.svg$/,\n // Use asset SVG and SVGR together.\n // Not using resourceQuery because it doesn't work well with Rollup.\n // https://react-svgr.com/docs/webpack/#use-svgr-and-asset-svg-in-the-same-project\n oneOf: [\n {\n type: 'asset/inline',\n include: [/inline-icons\\/.*\\.svg$/],\n },\n {\n issuer: /\\.[jt]sx?$/,\n include: [/\\/icons\\/.*\\.svg$/],\n use: [\n {\n loader: '@svgr/webpack',\n options: {\n titleProp: true,\n svgo: true,\n memo: true,\n svgoConfig: {\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n removeViewBox: false,\n convertColors: {\n currentColor: /^(?!url|none)/i,\n },\n },\n },\n },\n 'removeDimensions',\n ],\n },\n },\n },\n ],\n },\n {\n issuer: /\\.[jt]sx?$/,\n include: [/images\\/.*\\.svg$/],\n use: [\n {\n loader: '@svgr/webpack',\n options: {\n titleProp: true,\n svgo: true,\n memo: true,\n svgoConfig: {\n plugins: [\n {\n name: 'preset-default',\n params: {\n overrides: {\n removeViewBox: false,\n convertColors: {\n // See https://github.com/googleforcreators/web-stories-wp/pull/6361\n currentColor: false,\n },\n },\n },\n },\n 'removeDimensions',\n ],\n },\n },\n },\n ],\n },\n ],\n },\n {\n test: /\\.(png|jpe?g|gif|webp)$/i,\n type: 'asset/resource',\n generator: {\n outputPath: 'images/',\n },\n }\n );\n return webpackConfig;\n },\n\n features: {\n actions: true,\n backgrounds: true,\n controls: false,\n viewport: true,\n toolbars: true,\n },\n};\n" }, { "path": ".storybook/manager-head.html", "content": "\n" }, { "path": ".storybook/preview-head.html", "content": "\n\n\n\n\n\n" }, { "path": ".storybook/preview.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { ThemeProvider } from 'styled-components';\n// eslint-disable-next-line import/no-unresolved\nimport { INITIAL_VIEWPORTS } from 'storybook/viewport';\nimport {\n theme as designSystemTheme,\n lightMode,\n ThemeGlobals,\n ModalGlobalStyle,\n} from '@googleforcreators/design-system';\nimport { CropMoveableGlobalStyle } from '@googleforcreators/moveable';\n\n/**\n * Internal dependencies\n */\n// Disable reason:\n// Importing from the dashboard and story editor roots break fast refresh in storybook.\n// Prevented by importing the necessary providers and configs directly.\n/* eslint-disable import/no-relative-packages */\nimport { GlobalStyle as DashboardGlobalStyle } from '../packages/dashboard/src/theme';\nimport DashboardKeyboardOnlyOutline from '../packages/dashboard/src/utils/keyboardOnlyOutline';\nimport DashboardConfigProvider from '../packages/dashboard/src/app/config/configProvider';\nimport ApiProvider from '../packages/dashboard/src/app/api/apiProvider';\nimport EditorConfigProvider from '../packages/story-editor/src/app/config/configProvider';\n/* eslint-enable import/no-relative-packages */\n\n// @todo: Find better way to mock these.\nconst wp = {};\nwindow.wp = window.wp || wp;\nwindow.wp.media = {\n controller: {\n Library: {\n prototype: {\n defaults: {},\n },\n },\n },\n};\n\nconst { ipad, ipad10p, ipad12p } = INITIAL_VIEWPORTS;\n\n/** @type { import('@storybook/react-webpack5').Preview } */\nconst preview = {\n parameters: {\n a11y: {\n element: '#root',\n config: {},\n options: {},\n manual: true,\n },\n viewport: {\n viewports: {\n ipad,\n ipad10p,\n ipad12p,\n },\n },\n backgrounds: {\n default: 'Light',\n values: [\n { name: 'Light', value: '#fff', default: true },\n { name: 'Dark', value: 'rgba(0, 0, 0, 0.9)', default: true },\n ],\n },\n },\n\n decorators: [\n (Story, context) => {\n const { id } = context;\n // TODO(#10380): Replacement add-on for RTL feature\n const isRTL = false;\n\n const isDesignSystemStorybook = id.startsWith('designsystem');\n const isDashboardStorybook = id.startsWith('dashboard');\n\n if (isDashboardStorybook) {\n return (\n \n Promise.resolve({ id: 1 }),\n },\n editStoryURL: 'editStory',\n isRTL,\n styleConstants: {\n topOffset: 0,\n },\n }}\n >\n \n \n \n \n {Story()}\n \n \n \n );\n }\n\n if (isDesignSystemStorybook) {\n // override darkMode colors\n const dsTheme = { ...designSystemTheme, colors: lightMode };\n return (\n \n \n \n {Story()}\n \n );\n }\n\n return (\n \n \n \n \n {Story()}\n \n \n );\n },\n ],\n};\n\nexport default preview;\n" }, { "path": ".storybook/stories/playground/dashboard/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useRef, useEffect } from 'react';\nimport { toId } from '@storybook/csf';\nimport { Dashboard, InterfaceSkeleton } from '@googleforcreators/dashboard';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStyle } from './theme';\n\nexport default {\n title: 'Playground/Dashboard',\n};\n\nconst linkHrefTo = (title, name) => {\n const url = new URL(window.parent.location);\n url.searchParams.set('path', '/story/' + toId(title, name));\n return decodeURIComponent(url.href);\n};\n\nconst fetchStories = () => {\n const response = {\n stories: {\n 1: {\n id: 1,\n status: 'publish',\n title: 'Example story',\n created: '2021-11-04T10:12:47',\n createdGmt: '2021-11-04T10:12:47Z',\n author: {\n name: 'Author',\n id: 1,\n },\n featuredMediaUrl:\n 'https://wp.stories.google/static/main/images/templates/food-and-stuff/page1_bg.jpg',\n },\n 2: {\n id: 2,\n status: 'publish',\n title: 'Example story 2',\n created: '2021-12-04T10:12:47',\n createdGmt: '2021-12-04T10:12:47Z',\n author: {\n name: 'Author',\n id: 1,\n },\n featuredMediaUrl:\n 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page8_figure.jpg',\n },\n },\n fetchedStoryIds: [1, 2],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 2,\n publish: 2,\n },\n };\n\n return Promise.resolve(response);\n};\n\n// mock filter api calls\nconst getTaxonomies = () =>\n Promise.resolve([\n {\n restBase: '',\n restPath: '',\n labels: {\n allItems: 'All Categories',\n notFound: 'No categories found',\n searchItems: 'Search Categories',\n },\n },\n ]);\nconst getTaxonomyTerms = () => Promise.resolve([{ name: 'Food', id: 1 }]);\nconst getAuthors = () => Promise.resolve([{ name: 'Author', id: 1 }]);\n\n/**\n * Clears url hash ( Required only for storybook )\n * Dashboard uses # for checking route path and story-editor uses #page,\n * when returning from story-editor to dashboard in storybook, currentPath read from history package gets manipulated,\n * which breaks the current path, so this custom hook is used to clear the hash before dashboard app is mounted.\n */\nconst useClearHash = () => {\n const isHashCleaned = useRef(false);\n\n useEffect(() => {\n if (!isHashCleaned.current) {\n window.location.hash = '/';\n isHashCleaned.current = true;\n }\n }, []);\n};\n\nexport const _default = {\n render: function Render() {\n useClearHash();\n\n const config = {\n newStoryURL: linkHrefTo('Playground/Stories Editor', 'default'),\n apiCallbacks: {\n fetchStories,\n getTaxonomies,\n getTaxonomyTerms,\n getAuthors,\n },\n };\n\n return (\n \n \n \n \n );\n },\n};\n" }, { "path": ".storybook/stories/playground/dashboard/theme.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createGlobalStyle } from 'styled-components';\nimport { themeHelpers } from '@googleforcreators/design-system';\n\nexport const GlobalStyle = createGlobalStyle`\n body.web-story_page_stories-dashboard #wpbody {\n ${themeHelpers.scrollbarCSS};\n }\n`;\n" }, { "path": ".storybook/stories/playground/story-editor/api/fonts.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport async function getFonts(params) {\n let { default: fonts } = await import(\n /* webpackChunkName: \"chunk-fonts\" */ '@googleforcreators/fonts/fonts.json' // eslint-disable-line import/no-internal-modules -- This is fine here.\n );\n\n fonts = fonts.map((font) => ({\n id: font.family,\n name: font.family,\n value: font.family,\n ...font,\n }));\n\n if (params.include) {\n const include = params.include.split(',');\n fonts = fonts.filter(({ family }) => include.includes(family));\n }\n\n if (params.search) {\n fonts = fonts.filter(({ family }) =>\n family.toLowerCase().includes(params.search)\n );\n }\n\n return fonts;\n}\n" }, { "path": ".storybook/stories/playground/story-editor/api/index.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// Not using \"export * from\" because of https://github.com/storybookjs/storybook/issues/17587\n\nexport { getFonts } from './fonts';\nexport { getMedia } from './media';\nexport { saveStoryById } from './story';\n" }, { "path": ".storybook/stories/playground/story-editor/api/media.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { getDummyMedia } from '../getDummyMedia';\n\nexport const getMedia = (params) => {\n const dummyMedia = getDummyMedia();\n const mediaResponse = {\n data: dummyMedia,\n headers: {\n totalItems: dummyMedia.length,\n totalPages: 1,\n },\n };\n\n if (params.searchTerm) {\n mediaResponse.data = dummyMedia.filter((media) => {\n return media.alt.toLowerCase().includes(params.searchTerm.toLowerCase());\n });\n mediaResponse.headers.totalItems = mediaResponse.data.length;\n }\n\n return Promise.resolve(mediaResponse);\n};\n" }, { "path": ".storybook/stories/playground/story-editor/api/story.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { DATA_VERSION } from '@googleforcreators/migration';\n\n/**\n * Internal dependencies\n */\nimport {\n LOCAL_STORAGE_CONTENT_KEY,\n LOCAL_STORAGE_PREVIEW_MARKUP_KEY,\n} from '../constants';\n\nexport const saveStoryById = ({\n pages,\n globalStoryStyles,\n autoAdvance,\n defaultPageDuration,\n currentStoryStyles,\n backgroundAudio,\n content,\n title,\n excerpt,\n}) => {\n const storySaveData = {\n title: {\n raw: title,\n },\n excerpt: {\n raw: excerpt,\n },\n storyData: {\n version: DATA_VERSION,\n pages,\n autoAdvance,\n defaultPageDuration,\n currentStoryStyles,\n backgroundAudio,\n },\n author: {\n id: 1,\n name: '',\n },\n stylePresets: globalStoryStyles,\n permalinkTemplate: 'https://example.org/web-stories/%pagename%/',\n };\n\n window.localStorage.setItem(\n LOCAL_STORAGE_CONTENT_KEY,\n JSON.stringify(storySaveData)\n );\n window.localStorage.setItem(LOCAL_STORAGE_PREVIEW_MARKUP_KEY, content);\n\n return Promise.resolve({});\n};\n" }, { "path": ".storybook/stories/playground/story-editor/constants.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport const LOCAL_STORAGE_CONTENT_KEY = 'web_stories_json_content';\nexport const LOCAL_STORAGE_PREVIEW_MARKUP_KEY = 'web_stories_preview_markup';\n" }, { "path": ".storybook/stories/playground/story-editor/getDummyMedia.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { createResource } from '@googleforcreators/media';\n\nfunction createDummyImageData({\n mimeType = 'image/jpeg',\n src,\n width,\n height,\n id,\n title,\n}) {\n return createResource({\n mimeType,\n creationDate: '2021-10-29T11:43:38',\n src,\n width,\n height,\n id,\n alt: title,\n sizes: {\n medium: {\n file: `${title}-300x84.jpeg`,\n width: 300,\n height: 84,\n mimeType,\n sourceUrl: src,\n },\n large: {\n file: `${title}-1024x288.jpeg`,\n width: 1024,\n height: 288,\n mimeType,\n sourceUrl: src,\n },\n thumbnail: {\n file: `${title}-150x150.jpeg`,\n width: 150,\n height: 150,\n mimeType,\n sourceUrl: src,\n },\n medium_large: {\n file: `${title}-768x216.jpeg`,\n width: 768,\n height: 216,\n mimeType,\n sourceUrl: src,\n },\n '1536x1536': {\n file: `${title}-1536x432.jpeg`,\n width: 1536,\n height: 432,\n mimeType,\n sourceUrl: src,\n },\n '2048x2048': {\n file: `${title}-2048x576.jpeg`,\n width: 2048,\n height: 576,\n mimeType,\n sourceUrl: src,\n },\n 'post-thumbnail': {\n file: `${title}-1568x441.jpeg`,\n width: 1568,\n height: 441,\n mimeType,\n sourceUrl: src,\n },\n 'web-stories-poster-portrait': {\n file: `${title}-640x853.jpeg`,\n width: 640,\n height: 853,\n mimeType,\n sourceUrl: src,\n },\n 'web-stories-publisher-logo': {\n file: `${title}-96x96.jpeg`,\n width: 96,\n height: 96,\n mimeType,\n sourceUrl: src,\n },\n 'web-stories-thumbnail': {\n file: `${title}-150x42.jpeg`,\n width: 150,\n height: 42,\n mimeType,\n sourceUrl: src,\n },\n full: {\n file: title,\n width,\n height,\n mimeType,\n sourceUrl: src,\n },\n },\n });\n}\n\nfunction createDummyVideoData({\n mimeType = 'video/mp4',\n src,\n mediaDetails,\n id,\n title,\n poster,\n}) {\n return createResource({\n mimeType,\n creationDate: '2021-10-29T11:56:33',\n src,\n width: mediaDetails.width,\n height: mediaDetails.height,\n poster: poster.src,\n posterId: 57,\n id,\n length: mediaDetails.length,\n bitsPerSample: mediaDetails.bitsPerSample,\n alt: title,\n });\n}\n\nfunction getDummyMedia() {\n return [\n createDummyImageData({\n mimeType: 'image/png',\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page1_bg-alt.png',\n width: 412,\n height: 732,\n id: 1,\n title: 'Fresh and Bright 1',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page3_figure.jpg',\n width: 720,\n height: 844,\n id: 2,\n title: 'Fresh and Bright 2',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page4_bg.png',\n width: 750,\n height: 1334,\n id: 3,\n title: 'Fresh and Bright 3',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page5_figure.jpg',\n width: 750,\n height: 1079,\n id: 4,\n title: 'Fresh and Bright 4',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page7_product1.jpg',\n width: 720,\n height: 900,\n id: 5,\n title: 'Fresh and Bright 5',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page8_figure.jpg',\n width: 408,\n height: 544,\n id: 6,\n title: 'Fresh and Bright 6',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page9_story1.jpg',\n width: 720,\n height: 405,\n id: 7,\n title: 'Fresh and Bright 7',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page9_story2.jpg',\n width: 480,\n height: 720,\n id: 8,\n title: 'Fresh and Bright 8',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/fresh-and-bright/page9_story3.jpg',\n width: 480,\n height: 720,\n id: 9,\n title: 'Fresh and Bright 9',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/food-and-stuff/page1_bg.jpg',\n width: 1080,\n height: 1620,\n id: 10,\n title: 'Fresh and Bright 10',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/food-and-stuff/page3_image1.jpg',\n width: 1080,\n height: 720,\n id: 11,\n title: 'Food and Stuff 1',\n }),\n createDummyImageData({\n src: 'https://wp.stories.google/static/main/images/templates/food-and-stuff/page5_bg.jpg',\n width: 731,\n height: 1300,\n id: 12,\n title: 'Food and Stuff 2',\n }),\n createDummyVideoData({\n src: 'https://stream.mux.com/OGTmBYTMkV7Ez601cRNpH6BP10102fQu9C00/high.mp4?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InQ5UHZucm9ZY0hQNjhYSmlRQnRHTEVVSkVSSXJ0UXhKIn0.eyJleHAiOjE2MjYxNzgxMTIsImF1ZCI6InYiLCJzdWIiOiJPR1RtQllUTWtWN0V6NjAxY1JOcEg2QlAxMDEwMmZRdTlDMDAifQ.Jvddeah-XyF0AMmfYND-fFaIfgeDYW_cAuIVIXOrk2so_YalyMMAQ11YXHA1h11yKpLM-xa8xiNXazPqA0Suq1tfxHjJjEqiQOzSlPYd4visiPdTjUgT50FkwYdJrN0IldfXoS19yi3GyAd9McVFoSGCZ6qp8m_hgJ39y8FJJbOrvGtrzEvElpz1M8M1Dat3PF-BSLvFcTvCOlec9dipajxHG_2Xg-EE_vOqww6z81kC09evj5gu_A-Vz58Q-ebd08R47ybNejhE3rzMr1dCKgUikjkkQokPPQyrwVEy8zeZ68elax-ZRvDokZ2mTVPGvKIye6m_CQ-WVlG5XRjw7A',\n mediaDetails: {\n filesize: 1867215,\n mimeType: 'video/mp4',\n length: 12,\n lengthFormatted: '0:12',\n width: 720,\n height: 406,\n fileformat: 'mp4',\n dataformat: 'quicktime',\n audio: {\n dataformat: 'mp4',\n codec: 'ISO/IEC 14496-3 AAC',\n sampleRate: 48000,\n channels: 2,\n bitsPerSample: 16,\n lossless: false,\n channelmode: 'stereo',\n },\n createdTimestamp: -2082844800,\n sizes: {},\n },\n id: 13,\n title: 'Story',\n poster: {\n src: 'https://image.mux.com/OGTmBYTMkV7Ez601cRNpH6BP10102fQu9C00/thumbnail.jpg?token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6InQ5UHZucm9ZY0hQNjhYSmlRQnRHTEVVSkVSSXJ0UXhKIn0.eyJ0aW1lIjowLCJleHAiOjMxNzE3MDYwNjg4MSwiYXVkIjoidCIsInN1YiI6Ik9HVG1CWVRNa1Y3RXo2MDFjUk5wSDZCUDEwMTAyZlF1OUMwMCJ9.WxHU2cpFdNqqiWF08KEv1g7barfbE_Nw4JDvVrtrQc9mVKiSZ6pEHpYl14NZeaBOf4Ep9MiomaegCVrD-UANhURlxWuHWFx5h7Msg74-q_ojjuZbLZtFPUdA0NA3_GTq5y0LDAeXijM7oENn_IkuDSY0fbRhRUVh-hYqCzw_OqMx7B1IxoOkkZUCHgkm9VnPdAMQRpmaanCHB8SHVRI_vIJo577DxLd88KBFP3UWK1XTvN5NYr0oPtwc82XMYUW4HrxZZTmxzLSZckxzwB7T5E6zAtXpo-xwd52yB1OUhoihlTqiOPWbntpvt9H4lFVRISLwsT39d1Tw80HF_X02eQ',\n width: 1920,\n height: 1080,\n generated: false,\n },\n }),\n createDummyVideoData({\n src: 'https://storage.coverr.co/videos/PDolZIrwdONTFJd005VOT4qvFsyxVfB01N/preview?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjEyNjFDMkM5QUYxNEY5NkJDRTc2IiwiaWF0IjoxNjI2ODM0NDQzfQ._6LJb2Ad843im0xV4-2I2vVpDNoPiy8nPc3-3IkSSuw',\n mediaDetails: {\n filesize: 1510877,\n mimeType: 'video/quicktime',\n length: 18,\n lengthFormatted: '0:18',\n width: 640,\n height: 360,\n fileformat: 'mp4',\n dataformat: 'quicktime',\n createdTimestamp: -2082844800,\n sizes: {},\n },\n id: 14,\n title: 'Low',\n poster: {\n src: 'https://storage.coverr.co/p/PDolZIrwdONTFJd005VOT4qvFsyxVfB01N',\n width: 2048,\n height: 1152,\n generated: false,\n },\n }),\n createDummyVideoData({\n src: 'https://storage.coverr.co/videos/qMc3OVOA8a6Q9j01T2L3pGfF029UA00OvZJ/preview?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjEyNjFDMkM5QUYxNEY5NkJDRTc2IiwiaWF0IjoxNjI2ODM3NDkwfQ.rHiHdTyik8sDuP8viRbC4ph-qjHHJ81I7kdawP2-1eQ',\n mediaDetails: {\n filesize: 456538,\n mimeType: 'video/mp4',\n length: 15,\n lengthFormatted: '0:15',\n width: 360,\n height: 640,\n fileformat: 'mp4',\n dataformat: 'quicktime',\n createdTimestamp: -2082844800,\n sizes: {},\n audio: {\n bitsPerSample: 16,\n channelmode: 'stereo',\n channels: 2,\n codec: 'ISO/IEC 14496-3 AAC',\n dataformat: 'mp4',\n lossless: false,\n sampleRate: 48000,\n },\n },\n id: 15,\n title: 'Mountain Video',\n poster: {\n src: 'https://storage.coverr.co/p/qMc3OVOA8a6Q9j01T2L3pGfF029UA00OvZJ',\n width: 1080,\n height: 1920,\n generated: false,\n },\n }),\n createDummyVideoData({\n src: 'https://storage.coverr.co/videos/XHtOLYGTnHiXVxofSdO8oTcA02vxasheL/preview?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjEyNjFDMkM5QUYxNEY5NkJDRTc2IiwiaWF0IjoxNjI2ODM3NDkwfQ.rHiHdTyik8sDuP8viRbC4ph-qjHHJ81I7kdawP2-1eQ',\n mediaDetails: {\n filesize: 2536304,\n mimeType: 'video/mp4',\n length: 27,\n lengthFormatted: '0:27',\n width: 640,\n height: 360,\n fileformat: 'mp4',\n dataformat: 'quicktime',\n createdTimestamp: -2082844800,\n sizes: {},\n audio: {\n bitsPerSample: 16,\n channelmode: 'stereo',\n channels: 2,\n codec: 'ISO/IEC 14496-3 AAC',\n dataformat: 'mp4',\n lossless: false,\n sampleRate: 48000,\n },\n },\n id: 16,\n title: 'Beautiful Cloud Video',\n poster: {\n src: 'https://storage.coverr.co/p/XHtOLYGTnHiXVxofSdO8oTcA02vxasheL',\n width: 1920,\n height: 1080,\n generated: false,\n },\n }),\n createDummyVideoData({\n src: 'https://storage.coverr.co/videos/X4pOA7IG76p95Gl3IcU3oX26S2sbGsc2/preview?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6IjEyNjFDMkM5QUYxNEY5NkJDRTc2IiwiaWF0IjoxNjI2ODM4Mjc3fQ.lIznWsYEFy3abrDbou1mKJivj6GzQnHO6gJ8jdisPW0',\n mediaDetails: {\n filesize: 1029136,\n mimeType: 'video/mp4',\n length: 10,\n lengthFormatted: '0:10',\n width: 640,\n height: 360,\n fileformat: 'mp4',\n dataformat: 'quicktime',\n createdTimestamp: -2082844800,\n sizes: {},\n audio: {\n bitsPerSample: 16,\n channelmode: 'stereo',\n channels: 2,\n codec: 'ISO/IEC 14496-3 AAC',\n dataformat: 'mp4',\n lossless: false,\n sampleRate: 48000,\n },\n },\n id: 17,\n title: 'Beautiful Fire Video',\n poster: {\n src: 'https://storage.coverr.co/p/X4pOA7IG76p95Gl3IcU3oX26S2sbGsc2',\n width: 1920,\n height: 1080,\n generated: false,\n },\n }),\n ];\n}\n\nexport { getDummyMedia };\n" }, { "path": ".storybook/stories/playground/story-editor/header/buttons/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { useStory } from '@googleforcreators/story-editor';\nimport { CircularProgress } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { SaveButton } from './saveButton';\nimport { PreviewButton } from './preview';\n\nconst ButtonList = styled.nav`\n display: flex;\n justify-content: flex-end;\n padding: 1em;\n height: 100%;\n`;\n\nconst List = styled.div`\n display: flex;\n align-items: center;\n`;\n\nconst Space = styled.div`\n width: 8px;\n`;\n\nconst Spinner = styled.div`\n position: absolute;\n top: 0;\n`;\n\nconst IconWithSpinner = styled.div`\n position: relative;\n`;\n\nfunction Loading() {\n return (\n \n \n \n );\n}\n\nfunction Buttons() {\n const { isSaving } = useStory(\n ({\n state: {\n meta: { isSaving },\n },\n }) => ({ isSaving })\n );\n\n return (\n \n \n \n \n {isSaving && }\n \n \n \n \n \n );\n}\n\nexport { Buttons };\n" }, { "path": ".storybook/stories/playground/story-editor/header/buttons/preview.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { hrefTo } from '@storybook/addon-links';\nimport { Tooltip, useStory } from '@googleforcreators/story-editor';\nimport {\n Button,\n ButtonSize,\n ButtonType,\n ButtonVariant,\n Icons,\n} from '@googleforcreators/design-system';\n\nfunction PreviewButton() {\n const { isSaving, saveStory } = useStory(\n ({\n state: {\n meta: { isSaving },\n },\n actions: { saveStory },\n }) => ({\n isSaving,\n saveStory,\n })\n );\n\n const openPreviewLink = async () => {\n await saveStory();\n\n const previewLink = await hrefTo('Playground/preview', 'default');\n\n // Start a about:blank popup with waiting message until we complete\n // the saving operation. That way we will not bust the popup timeout.\n try {\n const popup = window.open('about:blank', 'story-preview');\n\n if (popup) {\n popup.document.write('');\n popup.document.write('');\n popup.document.write('Generating the preview…');\n popup.document.write('');\n popup.document.write('');\n popup.document.write('Please wait. Generating the preview…'); // Output \"waiting\" message.\n\n // Force redirect to the preview URL after 5 seconds. The saving tab\n // might get frozen by the browser.\n popup.document.write(\n ``\n );\n }\n } catch {\n // Not interested in the error.\n }\n };\n\n return (\n \n \n \n \n \n );\n}\n\nexport { PreviewButton };\n" }, { "path": ".storybook/stories/playground/story-editor/header/buttons/saveButton.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport {\n Button,\n ButtonSize,\n ButtonType,\n ButtonVariant,\n useSnackbar,\n} from '@googleforcreators/design-system';\nimport { useStory } from '@googleforcreators/story-editor';\n\nfunction SaveButton() {\n const { isSaving, saveStory } = useStory(\n ({\n state: {\n meta: { isSaving },\n },\n actions: { saveStory },\n }) => ({\n isSaving,\n saveStory,\n })\n );\n\n const { showSnackbar } = useSnackbar();\n\n const handleSaveButton = () => {\n saveStory().then(() => {\n showSnackbar({\n message: 'Story Saved',\n });\n });\n };\n\n // @todo Make the app state persistent.\n return (\n \n {'Save'}\n \n );\n}\n\nexport { SaveButton };\n" }, { "path": ".storybook/stories/playground/story-editor/header/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { HeaderTitle } from '@googleforcreators/story-editor';\n\n/**\n * Internal dependencies\n */\nimport { Buttons } from './buttons';\n\nconst Background = styled.header.attrs({\n role: 'group',\n 'aria-label': 'Story canvas header',\n})`\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: ${({ theme }) => theme.colors.bg.primary};\n`;\n\nconst Head = styled.div`\n flex: 1 1 auto;\n padding: 1em;\n`;\n\nconst ButtonCell = styled.div`\n grid-area: buttons;\n`;\n\nfunction HeaderLayout() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport { HeaderLayout };\n" }, { "path": ".storybook/stories/playground/story-editor/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from '@googleforcreators/story-editor';\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\n/**\n * Internal dependencies\n */\nimport { getMedia, saveStoryById, getFonts } from './api';\nimport { HeaderLayout } from './header';\nimport { LOCAL_STORAGE_CONTENT_KEY } from './constants';\n\nexport default {\n title: 'Playground/Stories Editor',\n};\n\nexport const _default = {\n render: function Render() {\n const content = window.localStorage.getItem(LOCAL_STORAGE_CONTENT_KEY);\n const story = content ? JSON.parse(content) : {};\n const apiCallbacks = { saveStoryById, getMedia, getFonts };\n\n elementTypes.forEach(registerElementType);\n\n return (\n
\n \n } />\n \n
\n );\n },\n};\n" }, { "path": ".storybook/stories/playground/story-editor/preview.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useEffect } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { LOCAL_STORAGE_PREVIEW_MARKUP_KEY } from './constants';\n\nexport default {\n title: 'Playground/preview',\n};\n\n// This is a hidden story component ( hidden via manager-head.html ), used for previewing the story-editor. Please do not remove.\nfunction Preview() {\n useEffect(() => {\n const content = window.localStorage.getItem(\n LOCAL_STORAGE_PREVIEW_MARKUP_KEY\n );\n\n if (content) {\n document.open();\n document.write(content);\n document.close();\n }\n }, []);\n\n return null;\n}\n\nexport const _default = Preview;\n" }, { "path": ".stylelintignore", "content": ".github\n.storybook\n.wordpress-org\n__mocks__\n__static__\nassets\nbin\nblocks\nbuild\ndocs\nincludes\nnode_modules\npatches\npublic\ntests\nthird-party\nvendor\n/*.js\n/*.cjs\n" }, { "path": ".stylelintrc", "content": "{\n \"extends\": [\n \"stylelint-config-recommended\"\n ],\n \"plugins\": [\"stylelint-prettier\"],\n \"customSyntax\": \"postcss-syntax\",\n \"rules\": {\n \"font-family-name-quotes\": null,\n \"font-family-no-missing-generic-family-keyword\": null,\n \"font-weight-notation\": null,\n \"function-name-case\": null,\n \"prettier/prettier\": true,\n \"selector-class-pattern\": null,\n \"selector-type-no-unknown\": [\n true,\n {\n \"ignore\": [\"custom-elements\"],\n \"ignoreTypes\": [\"overlay\", \"container\"]\n }\n ],\n \"property-no-vendor-prefix\": [\n true,\n {\n \"ignoreProperties\": [\"clip-path\"]\n }\n ],\n \"unit-no-unknown\": [\n true,\n {\n \"ignoreUnits\": [\"/^`/\", \"/`$/\"]\n }\n ],\n \"value-keyword-case\": null\n },\n \"overrides\": [\n {\n \"files\": [\"*.js\", \".ts\", \".tsx\"],\n \"customSyntax\": \"postcss-styled-syntax\",\n \"rules\": {\n \"annotation-no-unknown\": null,\n \"block-no-empty\": null,\n \"function-no-unknown\": null,\n \"media-query-no-invalid\": null,\n \"no-empty-source\": null\n }\n }\n ]\n}\n" }, { "path": ".wordpress-org/README.md", "content": "# WordPress.org assets\n\nThese assets are used in the WordPress.org plugin directory. They will need to be synced with the plugin SVN repository whenever they change.\n" }, { "path": ".wordpress-org/blueprints/blueprint.json", "content": "{\n \"$schema\": \"https://playground.wordpress.net/blueprint-schema.json\",\n \"landingPage\": \"/wp-admin/plugins.php\",\n \"preferredVersions\": {\n \"php\": \"8.0\",\n \"wp\": \"latest\"\n },\n \"phpExtensionBundles\": [\"kitchen-sink\"],\n \"features\": {\n \"networking\": true\n },\n \"steps\": [\n {\n \"step\": \"installPlugin\",\n \"pluginZipFile\": {\n \"resource\": \"url\",\n \"url\": \"https://downloads.wordpress.org/plugin/web-stories.latest-stable.zip\"\n },\n \"options\": {\n \"activate\": true\n }\n },\n {\n \"step\": \"login\",\n \"username\": \"admin\",\n \"password\": \"password\"\n }\n ]\n}\n" }, { "path": "CONTRIBUTING.md", "content": "# How to Contribute\n\nWe'd love to accept your patches and contributions to this project. There are\njust a few small guidelines you need to follow.\n\n## Getting Started\n\nPlease check out our dedicated [Getting Started](./docs/getting-started.md) guide.\n\n## Contributor License Agreement\n\nContributions to this project must be accompanied by a Contributor License\nAgreement. You (or your employer) retain the copyright to your contribution;\nthis simply gives us permission to use and redistribute your contributions as\npart of the project. Head over to to see\nyour current agreements on file or to sign a new one.\n\nYou generally only need to submit a CLA once, so if you've already submitted one\n(even if it was for a different project), you probably don't need to do it\nagain.\n\n## Code reviews\n\nAll submissions, including submissions by project members, require review. We\nuse GitHub pull requests for this purpose. Consult\n[GitHub Help](https://help.github.com/articles/about-pull-requests/) for more\ninformation on using pull requests.\n\n## Community Guidelines\n\nThis project follows [Google's Open Source Community\nGuidelines](https://opensource.google/conduct/).\n" }, { "path": "LICENSE", "content": "\n Apache License\n Version 2.0, January 2004\n http://www.apache.org/licenses/\n\n TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION\n\n 1. Definitions.\n\n \"License\" shall mean the terms and conditions for use, reproduction,\n and distribution as defined by Sections 1 through 9 of this document.\n\n \"Licensor\" shall mean the copyright owner or entity authorized by\n the copyright owner that is granting the License.\n\n \"Legal Entity\" shall mean the union of the acting entity and all\n other entities that control, are controlled by, or are under common\n control with that entity. For the purposes of this definition,\n \"control\" means (i) the power, direct or indirect, to cause the\n direction or management of such entity, whether by contract or\n otherwise, or (ii) ownership of fifty percent (50%) or more of the\n outstanding shares, or (iii) beneficial ownership of such entity.\n\n \"You\" (or \"Your\") shall mean an individual or Legal Entity\n exercising permissions granted by this License.\n\n \"Source\" form shall mean the preferred form for making modifications,\n including but not limited to software source code, documentation\n source, and configuration files.\n\n \"Object\" form shall mean any form resulting from mechanical\n transformation or translation of a Source form, including but\n not limited to compiled object code, generated documentation,\n and conversions to other media types.\n\n \"Work\" shall mean the work of authorship, whether in Source or\n Object form, made available under the License, as indicated by a\n copyright notice that is included in or attached to the work\n (an example is provided in the Appendix below).\n\n \"Derivative Works\" shall mean any work, whether in Source or Object\n form, that is based on (or derived from) the Work and for which the\n editorial revisions, annotations, elaborations, or other modifications\n represent, as a whole, an original work of authorship. For the purposes\n of this License, Derivative Works shall not include works that remain\n separable from, or merely link (or bind by name) to the interfaces of,\n the Work and Derivative Works thereof.\n\n \"Contribution\" shall mean any work of authorship, including\n the original version of the Work and any modifications or additions\n to that Work or Derivative Works thereof, that is intentionally\n submitted to Licensor for inclusion in the Work by the copyright owner\n or by an individual or Legal Entity authorized to submit on behalf of\n the copyright owner. For the purposes of this definition, \"submitted\"\n means any form of electronic, verbal, or written communication sent\n to the Licensor or its representatives, including but not limited to\n communication on electronic mailing lists, source code control systems,\n and issue tracking systems that are managed by, or on behalf of, the\n Licensor for the purpose of discussing and improving the Work, but\n excluding communication that is conspicuously marked or otherwise\n designated in writing by the copyright owner as \"Not a Contribution.\"\n\n \"Contributor\" shall mean Licensor and any individual or Legal Entity\n on behalf of whom a Contribution has been received by Licensor and\n subsequently incorporated within the Work.\n\n 2. Grant of Copyright License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n copyright license to reproduce, prepare Derivative Works of,\n publicly display, publicly perform, sublicense, and distribute the\n Work and such Derivative Works in Source or Object form.\n\n 3. Grant of Patent License. Subject to the terms and conditions of\n this License, each Contributor hereby grants to You a perpetual,\n worldwide, non-exclusive, no-charge, royalty-free, irrevocable\n (except as stated in this section) patent license to make, have made,\n use, offer to sell, sell, import, and otherwise transfer the Work,\n where such license applies only to those patent claims licensable\n by such Contributor that are necessarily infringed by their\n Contribution(s) alone or by combination of their Contribution(s)\n with the Work to which such Contribution(s) was submitted. If You\n institute patent litigation against any entity (including a\n cross-claim or counterclaim in a lawsuit) alleging that the Work\n or a Contribution incorporated within the Work constitutes direct\n or contributory patent infringement, then any patent licenses\n granted to You under this License for that Work shall terminate\n as of the date such litigation is filed.\n\n 4. Redistribution. You may reproduce and distribute copies of the\n Work or Derivative Works thereof in any medium, with or without\n modifications, and in Source or Object form, provided that You\n meet the following conditions:\n\n (a) You must give any other recipients of the Work or\n Derivative Works a copy of this License; and\n\n (b) You must cause any modified files to carry prominent notices\n stating that You changed the files; and\n\n (c) You must retain, in the Source form of any Derivative Works\n that You distribute, all copyright, patent, trademark, and\n attribution notices from the Source form of the Work,\n excluding those notices that do not pertain to any part of\n the Derivative Works; and\n\n (d) If the Work includes a \"NOTICE\" text file as part of its\n distribution, then any Derivative Works that You distribute must\n include a readable copy of the attribution notices contained\n within such NOTICE file, excluding those notices that do not\n pertain to any part of the Derivative Works, in at least one\n of the following places: within a NOTICE text file distributed\n as part of the Derivative Works; within the Source form or\n documentation, if provided along with the Derivative Works; or,\n within a display generated by the Derivative Works, if and\n wherever such third-party notices normally appear. The contents\n of the NOTICE file are for informational purposes only and\n do not modify the License. You may add Your own attribution\n notices within Derivative Works that You distribute, alongside\n or as an addendum to the NOTICE text from the Work, provided\n that such additional attribution notices cannot be construed\n as modifying the License.\n\n You may add Your own copyright statement to Your modifications and\n may provide additional or different license terms and conditions\n for use, reproduction, or distribution of Your modifications, or\n for any such Derivative Works as a whole, provided Your use,\n reproduction, and distribution of the Work otherwise complies with\n the conditions stated in this License.\n\n 5. Submission of Contributions. Unless You explicitly state otherwise,\n any Contribution intentionally submitted for inclusion in the Work\n by You to the Licensor shall be under the terms and conditions of\n this License, without any additional terms or conditions.\n Notwithstanding the above, nothing herein shall supersede or modify\n the terms of any separate license agreement you may have executed\n with Licensor regarding such Contributions.\n\n 6. Trademarks. This License does not grant permission to use the trade\n names, trademarks, service marks, or product names of the Licensor,\n except as required for reasonable and customary use in describing the\n origin of the Work and reproducing the content of the NOTICE file.\n\n 7. Disclaimer of Warranty. Unless required by applicable law or\n agreed to in writing, Licensor provides the Work (and each\n Contributor provides its Contributions) on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or\n implied, including, without limitation, any warranties or conditions\n of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A\n PARTICULAR PURPOSE. You are solely responsible for determining the\n appropriateness of using or redistributing the Work and assume any\n risks associated with Your exercise of permissions under this License.\n\n 8. Limitation of Liability. In no event and under no legal theory,\n whether in tort (including negligence), contract, or otherwise,\n unless required by applicable law (such as deliberate and grossly\n negligent acts) or agreed to in writing, shall any Contributor be\n liable to You for damages, including any direct, indirect, special,\n incidental, or consequential damages of any character arising as a\n result of this License or out of the use or inability to use the\n Work (including but not limited to damages for loss of goodwill,\n work stoppage, computer failure or malfunction, or any and all\n other commercial damages or losses), even if such Contributor\n has been advised of the possibility of such damages.\n\n 9. Accepting Warranty or Additional Liability. While redistributing\n the Work or Derivative Works thereof, You may choose to offer,\n and charge a fee for, acceptance of support, warranty, indemnity,\n or other liability obligations and/or rights consistent with this\n License. However, in accepting such obligations, You may act only\n on Your own behalf and on Your sole responsibility, not on behalf\n of any other Contributor, and only if You agree to indemnify,\n defend, and hold each Contributor harmless for any liability\n incurred by, or claims asserted against, such Contributor by reason\n of your accepting any such warranty or additional liability.\n\n END OF TERMS AND CONDITIONS\n\n APPENDIX: How to apply the Apache License to your work.\n\n To apply the Apache License to your work, attach the following\n boilerplate notice, with the fields enclosed by brackets \"[]\"\n replaced with your own identifying information. (Don't include\n the brackets!) The text should be enclosed in the appropriate\n comment syntax for the file format. We also recommend that a\n file or class name and description of purpose be included on the\n same \"printed page\" as the copyright notice for easier\n identification within third-party archives.\n\n Copyright [yyyy] [name of copyright owner]\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License." }, { "path": "README.md", "content": "# Web Stories for WordPress\n\nVisual storytelling for WordPress.\n\n[![Latest Release)](https://img.shields.io/github/v/release/googleforcreators/web-stories-wp?include_prereleases)](https://github.com/googleforcreators/web-stories-wp/releases)\n[![Commit activity](https://img.shields.io/github/commit-activity/m/googleforcreators/web-stories-wp)](https://github.com/googleforcreators/web-stories-wp/pulse/monthly)\n[![Code Coverage](https://codecov.io/gh/googleforcreators/web-stories-wp/branch/main/graph/badge.svg)](https://codecov.io/gh/googleforcreators/web-stories-wp)\n[![License](https://img.shields.io/github/license/googleforcreators/web-stories-wp)](https://github.com/googleforcreators/web-stories-wp/blob/main/LICENSE)\n[![Storybook](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg)](https://googleforcreators.github.io/web-stories-wp/storybook/)\n\n
\n\nBuild Status\n\n\n[![Build](https://img.shields.io/github/actions/workflow/status/googleforcreators/web-stories-wp/build-and-deploy.yml?branch=main&label=Build)](https://github.com/googleforcreators/web-stories-wp/actions?query=branch%3Amain)\n[![Integration Tests](https://img.shields.io/github/actions/workflow/status/googleforcreators/web-stories-wp/tests-karma-editor.yml?branch=main&label=integration%20tests)](https://github.com/googleforcreators/web-stories-wp/actions?query=branch%3Amain)\n[![E2E Tests](https://img.shields.io/github/actions/workflow/status/googleforcreators/web-stories-wp/tests-e2e.yml?branch=main&label=e2e%20tests)](https://github.com/googleforcreators/web-stories-wp/actions?query=branch%3Amain)\n[![JS Tests](https://img.shields.io/github/actions/workflow/status/googleforcreators/web-stories-wp/tests-unit-js.yml?branch=main&label=js%20tests)](https://github.com/googleforcreators/web-stories-wp/actions?query=branch%3Amain)\n[![PHP Tests](https://img.shields.io/github/actions/workflow/status/googleforcreators/web-stories-wp/tests-unit-php.yml?branch=main&label=php%20tests)](https://github.com/googleforcreators/web-stories-wp/actions?query=branch%3Amain)\n\n
\n\n[Web Stories](https://amp.dev/about/stories/) are a free, open-web, visual storytelling format for the web, enabling you to easily create visual narratives with engaging animations and tappable interactions, and immerse your readers in great and fast-loading full-screen experiences.\n\nWith [Web Stories for WordPress](https://wp.stories.google/), we're bringing first-class Web Stories support to WordPress. Use Web Stories for WordPress by installing it directly from the WordPress admin dashboard or manually downloading the plugin from the [WordPress.org plugin directory](https://wordpress.org/plugins/web-stories/).\n\n## Support\n\nIf you find any issues, please reach out by visiting the [support forum](https://wordpress.org/support/plugin/web-stories/) to ask any questions or file feature requests.\n\n## Contributing\n\nWe'd love to accept your patches and contributions to this project. There are just a few small guidelines you need to follow. Please check out our [Contributing documentation](./CONTRIBUTING.md) and the [Getting Started](./docs/getting-started.md) guide.\n" }, { "path": "SECURITY.md", "content": "# Security Policy\n\n## Supported Versions\n\nWe support the latest stable version of the plugin with security updates.\n\n## Reporting a Vulnerability\n\nTo report a vulnerability in this repository, please contact the Google Security Team at [g.co/vulnz](https://g.co/vulnz).\n" }, { "path": "__mocks__/colorthief.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport default function () {}\n" }, { "path": "__mocks__/node:fs.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n// see https://jestjs.io/docs/en/manual-mockshttps://jestjs.io/docs/en/manual-mocks\n\n/**\n * External dependencies\n */\n//eslint-disable-next-line no-undef -- TODO: Figure out why this is needed.\nconst path = require('path');\n\nconst fs = jest.createMockFromModule('fs');\n\n/* eslint-disable security/detect-object-injection -- TODO: Figure out why this is needed. */\n\n// This is a custom function that our tests can use during setup to specify\n// what the files on the \"mock\" filesystem should look like when any of the\n// `fs` APIs are used.\nlet mockFiles = Object.create(null);\nfunction __setMockFiles(newMockFiles) {\n mockFiles = Object.create(null);\n\n for (const [file, content] of Object.entries(newMockFiles)) {\n const dir = path.dirname(file);\n const basename = path.basename(file);\n\n if (!mockFiles[dir]) {\n mockFiles[dir] = [];\n }\n\n mockFiles[dir][basename] = content;\n }\n}\n\nfunction readdirSync(directoryPath) {\n return mockFiles[directoryPath] ? Object.keys(mockFiles[directoryPath]) : [];\n}\n\nfunction existsSync(dirOrFile) {\n const dirExists = Object.prototype.hasOwnProperty.call(mockFiles, dirOrFile);\n\n const dirname = path.dirname(dirOrFile);\n const fileExists =\n Object.prototype.hasOwnProperty.call(mockFiles, dirname) &&\n Object.prototype.hasOwnProperty.call(\n mockFiles[dirname],\n path.basename(dirOrFile)\n );\n\n return dirExists || fileExists;\n}\n\nfunction readFileSync(file) {\n const dir = path.dirname(file);\n return mockFiles[dir][path.basename(file)];\n}\n\nfunction writeFileSync(file, content) {\n const dir = path.dirname(file);\n if (!mockFiles[dir]) {\n mockFiles[dir] = [];\n }\n\n mockFiles[dir][path.basename(file)] = content;\n}\n\nfunction lstatSync(dirOrFile) {\n return {\n isDirectory: () =>\n Object.prototype.hasOwnProperty.call(mockFiles, dirOrFile),\n };\n}\n\nfunction rmdirSync(dirname) {\n if (Object.prototype.hasOwnProperty.call(mockFiles, dirname)) {\n delete mockFiles[dirname];\n }\n}\n\nfunction unlinkSync(file) {\n const dir = path.dirname(file);\n delete mockFiles[dir][path.basename(file)];\n}\n\nfs.__setMockFiles = __setMockFiles;\nfs.readdirSync = readdirSync;\nfs.readFileSync = readFileSync;\nfs.writeFileSync = writeFileSync;\nfs.existsSync = existsSync;\nfs.lstatSync = lstatSync;\nfs.rmdirSync = rmdirSync;\nfs.unlinkSync = unlinkSync;\n\n// eslint-disable-next-line no-undef -- TODO: Figure out why this is needed.\nmodule.exports = fs;\n\n/* eslint-enable security/detect-object-injection */\n" }, { "path": "__mocks__/react-moveable.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { forwardRef } from 'react';\n\n// eslint-disable-next-line no-unused-vars\nexport const MockMoveable = jest.fn((props, ref) =>
);\n\nexport default forwardRef(MockMoveable);\n" }, { "path": "__static__/README.md", "content": "# Static files\n\nThese are static files that can be used for testing.\n" }, { "path": "babel.config.cjs", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nmodule.exports = function (api) {\n const isTest = api.env('test');\n const isProduction = api.env('production');\n\n const targets = isTest\n ? {\n node: 'current',\n }\n : undefined;\n\n return {\n presets: [\n [\n '@babel/preset-env',\n {\n shippedProposals: true,\n targets,\n useBuiltIns: 'usage',\n corejs: require('core-js/package.json').version,\n // Remove some unnecessary polyfills, similar to how Gutenberg is handling that.\n // See https://github.com/WordPress/gutenberg/blob/e95970d888c309274e24324d593c77c536c9f1d8/packages/babel-preset-default/polyfill-exclusions.js.\n exclude: [\n 'es.array.push',\n /^es(next)?\\.set\\./,\n /^es(next)?\\.iterator\\./,\n ],\n },\n ],\n [\n '@babel/preset-react',\n {\n // Not fully released yet, see https://github.com/facebook/react/pull/18299#issuecomment-603738136.\n //runtime: 'automatic',\n development: !isProduction,\n },\n ],\n '@babel/preset-typescript',\n ],\n plugins: [\n ['babel-plugin-react-compiler', { target: '17' }],\n '@wordpress/babel-plugin-import-jsx-pragma',\n [\n 'babel-plugin-styled-components',\n {\n meaninglessFileNames: ['index', 'styles', 'components'],\n },\n ],\n ],\n sourceMaps: true,\n env: {\n production: {\n plugins: ['transform-react-remove-prop-types'],\n },\n },\n };\n};\n" }, { "path": "bin/deploy-to-test-environment.sh", "content": "#!/usr/bin/env bash\n\nset -e\n\n#\n# Copyright 2020 Google LLC\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\n\n# Custom deployment script for Pantheon environment.\n# Adapted from original version at https://github.com/ampproject/amp-wp/pull/1042.\n\necho \"Initializing deployment to Web Stories test environment\"\n\nPANTHEON_SITE=\"wordpress-amp\"\nPANTHEON_BRANCH=\"stories-new\"\nPANTHEON_UUID=\"6b7f1eeb-705b-4201-864d-2007030c8372\"\n\ncd \"$(dirname \"$0\")/..\"\nproject_dir=\"$(pwd)\"\nrepo_dir=\"$HOME/deployment-targets/$PANTHEON_SITE\"\n\necho \"Setting up SSH configuration\"\n\n# Dynamic hosts through Pantheon mean constantly checking interactively\n# that we mean to connect to an unknown host. We ignore those here.\necho \"StrictHostKeyChecking no\" > ~/.ssh/config\n\nif ! grep -q \"codeserver.dev.$PANTHEON_UUID.drush.in\" ~/.ssh/known_hosts; then\n ssh-keyscan -p 2222 codeserver.dev.$PANTHEON_UUID.drush.in >> ~/.ssh/known_hosts\nfi\n\nif ! grep -q \"codeserver.dev.$PANTHEON_UUID.drush.in\" ~/.ssh/config; then\n echo \"\" >> ~/.ssh/config\n echo \"Host $PANTHEON_SITE\" >> ~/.ssh/config\n echo \" Hostname codeserver.dev.$PANTHEON_UUID.drush.in\" >> ~/.ssh/config\n echo \" User codeserver.dev.$PANTHEON_UUID\" >> ~/.ssh/config\n echo \" Port 2222\" >> ~/.ssh/config\n echo \" KbdInteractiveAuthentication no\" >> ~/.ssh/config\nfi\n\necho \"Fetching remote repository\"\n\ngit config --global user.name \"Google for Creators Bot\"\ngit config --global user.email \"94923726+googleforcreators-bot@users.noreply.github.com\"\n\nif [ ! -e \"$repo_dir/.git\" ]; then\n git clone -v ssh://codeserver.dev.$PANTHEON_UUID@codeserver.dev.$PANTHEON_UUID.drush.in:2222/~/repository.git \"$repo_dir\"\nfi\n\ncd \"$repo_dir\"\ngit fetch\n\nif git rev-parse --verify --quiet \"$PANTHEON_BRANCH\" > /dev/null; then\n git checkout \"$PANTHEON_BRANCH\"\nelse\n git checkout -b \"$PANTHEON_BRANCH\"\nfi\n\nif git rev-parse --verify --quiet \"origin/$PANTHEON_BRANCH\" > /dev/null; then\n git reset --hard \"origin/$PANTHEON_BRANCH\"\nfi\n\ncd \"$project_dir\"\n\necho \"Moving files to repository\"\nrsync -avz --delete ./build/web-stories/ \"$repo_dir/wp-content/plugins/web-stories/\"\ngit --no-pager log -1 --format=\"Build Web Stories plugin at %h: %s\" > /tmp/commit-message.txt\n\necho \"Committing changes\"\n\n# Commit and deploy.\ncd \"$repo_dir\"\ngit add -A \"wp-content/plugins/web-stories/\"\ngit commit -F /tmp/commit-message.txt\n\necho \"Pushing new build to remote repository\"\ngit push origin $PANTHEON_BRANCH\n\necho \"View site at http://$PANTHEON_BRANCH-$PANTHEON_SITE.pantheonsite.io/\"\necho \"Access Pantheon dashboard at https://dashboard.pantheon.io/sites/$PANTHEON_UUID#$PANTHEON_BRANCH\"\n" }, { "path": "bin/install-wp-tests.sh", "content": "#!/usr/bin/env bash\n\n#\n# Copyright 2020 Google LLC\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\n\n# See https://raw.githubusercontent.com/wp-cli/scaffold-command/master/templates/install-wp-tests.sh\n\nif [ $# -lt 3 ]; then\n\techo \"usage: $0 [db-host] [wp-version] [skip-database-creation]\"\n\texit 1\nfi\n\nDB_NAME=$1\nDB_USER=$2\nDB_PASS=$3\nDB_HOST=${4-localhost}\nWP_VERSION=${5-latest}\nSKIP_DB_CREATE=${6-false}\n\nTMPDIR=${TMPDIR-/tmp}\nTMPDIR=$(echo $TMPDIR | sed -e \"s/\\/$//\")\nWP_TESTS_DIR=${WP_TESTS_DIR-$TMPDIR/wordpress-tests-lib}\nWP_TESTS_FILE=\"$WP_TESTS_DIR\"/includes/functions.php\nWP_CORE_DIR=${WP_CORE_DIR-$TMPDIR/wordpress/}\nWP_CORE_FILE=\"$WP_CORE_DIR\"/wp-settings.php\n\ndownload() {\n if [ `which curl` ]; then\n #curl -s \"$1\" > \"$2\";\n # WordPress.org seems to block requests without proper user agent.\n curl -H \"User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (K HTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36\" -s \"$1\" > \"$2\";\n elif [ `which wget` ]; then\n wget -nv -O \"$2\" \"$1\"\n fi\n}\n\nif [[ $WP_VERSION =~ ^[0-9]+\\.[0-9]+\\-(beta|RC)[0-9]+$ ]]; then\n\tWP_BRANCH=${WP_VERSION%\\-*}\n\tWP_TESTS_TAG=\"branches/$WP_BRANCH\"\n\nelif [[ $WP_VERSION =~ ^[0-9]+\\.[0-9]+$ ]]; then\n\tWP_TESTS_TAG=\"branches/$WP_VERSION\"\nelif [[ $WP_VERSION =~ [0-9]+\\.[0-9]+\\.[0-9]+ ]]; then\n\tif [[ $WP_VERSION =~ [0-9]+\\.[0-9]+\\.[0] ]]; then\n\t\t# version x.x.0 means the first release of the major version, so strip off the .0 and download version x.x\n\t\tWP_TESTS_TAG=\"tags/${WP_VERSION%??}\"\n\telse\n\t\tWP_TESTS_TAG=\"tags/$WP_VERSION\"\n\tfi\nelif [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then\n\tWP_TESTS_TAG=\"trunk\"\nelse\n\t# http serves a single offer, whereas https serves multiple. we only want one\n\tdownload http://api.wordpress.org/core/version-check/1.7/ /tmp/wp-latest.json\n\tgrep '[0-9]+\\.[0-9]+(\\.[0-9]+)?' /tmp/wp-latest.json\n\tLATEST_VERSION=$(grep -o '\"version\":\"[^\"]*' /tmp/wp-latest.json | sed 's/\"version\":\"//')\n\tif [[ -z \"$LATEST_VERSION\" ]]; then\n\t\techo \"Latest WordPress version could not be found\"\n\t\texit 1\n\tfi\n\tWP_TESTS_TAG=\"tags/$LATEST_VERSION\"\nfi\nset -ex\n\ninstall_wp() {\n\n\tif [ -f $WP_CORE_FILE ]; then\n\t\treturn;\n\tfi\n\n\trm -rf $WP_CORE_DIR\n\tmkdir -p $WP_CORE_DIR\n\n\tif [[ $WP_VERSION == 'nightly' || $WP_VERSION == 'trunk' ]]; then\n\t\tmkdir -p $TMPDIR/wordpress-trunk\n\t\tsvn export --quiet https://core.svn.wordpress.org/trunk $TMPDIR/wordpress-trunk/wordpress\n\t\tmv $TMPDIR/wordpress-trunk/wordpress/* $WP_CORE_DIR\n\telse\n\t\tif [ $WP_VERSION == 'latest' ]; then\n\t\t\tlocal ARCHIVE_NAME='latest'\n\t\telif [[ $WP_VERSION =~ [0-9]+\\.[0-9]+ ]]; then\n\t\t\t# https serves multiple offers, whereas http serves single.\n\t\t\tdownload https://api.wordpress.org/core/version-check/1.7/ $TMPDIR/wp-latest.json\n\t\t\tif [[ $WP_VERSION =~ [0-9]+\\.[0-9]+\\.[0] ]]; then\n\t\t\t\t# version x.x.0 means the first release of the major version, so strip off the .0 and download version x.x\n\t\t\t\tLATEST_VERSION=${WP_VERSION%??}\n\t\t\telse\n\t\t\t\t# otherwise, scan the releases and get the most up to date minor version of the major release\n\t\t\t\tlocal VERSION_ESCAPED=`echo $WP_VERSION | sed 's/\\./\\\\\\\\./g'`\n\t\t\t\tLATEST_VERSION=$(grep -o '\"version\":\"'$VERSION_ESCAPED'[^\"]*' $TMPDIR/wp-latest.json | sed 's/\"version\":\"//' | head -1)\n\t\t\tfi\n\t\t\tif [[ -z \"$LATEST_VERSION\" ]]; then\n\t\t\t\tlocal ARCHIVE_NAME=\"wordpress-$WP_VERSION\"\n\t\t\telse\n\t\t\t\tlocal ARCHIVE_NAME=\"wordpress-$LATEST_VERSION\"\n\t\t\tfi\n\t\telse\n\t\t\tlocal ARCHIVE_NAME=\"wordpress-$WP_VERSION\"\n\t\tfi\n\t\tdownload https://wordpress.org/${ARCHIVE_NAME}.tar.gz $TMPDIR/wordpress.tar.gz\n\t\ttar --strip-components=1 -zxmf $TMPDIR/wordpress.tar.gz -C $WP_CORE_DIR\n\tfi\n\n\tdownload https://raw.github.com/markoheijnen/wp-mysqli/master/db.php $WP_CORE_DIR/wp-content/db.php\n}\n\ninstall_test_suite() {\n\t# portable in-place argument for both GNU sed and Mac OSX sed\n\tif [[ $(uname -s) == 'Darwin' ]]; then\n\t\tlocal ioption='-i.bak'\n\telse\n\t\tlocal ioption='-i'\n\tfi\n\n\t# set up testing suite if it doesn't yet exist or only partially exists\n\tif [ ! -f $WP_TESTS_FILE ]; then\n\t\t# set up testing suite\n\t\trm -rf $WP_TESTS_DIR\n\t\tmkdir -p $WP_TESTS_DIR\n\t\tsvn export --quiet --ignore-externals https://develop.svn.wordpress.org/${WP_TESTS_TAG}/tests/phpunit/includes/ $WP_TESTS_DIR/includes\n\t\tsvn export --quiet --ignore-externals https://develop.svn.wordpress.org/${WP_TESTS_TAG}/tests/phpunit/data/ $WP_TESTS_DIR/data\n\tfi\n\n\tif [ ! -f wp-tests-config.php ]; then\n\t\tdownload https://develop.svn.wordpress.org/${WP_TESTS_TAG}/wp-tests-config-sample.php \"$WP_TESTS_DIR\"/wp-tests-config.php\n\t\t# remove all forward slashes in the end\n\t\tWP_CORE_DIR=$(echo $WP_CORE_DIR | sed \"s:/\\+$::\")\n\t\tsed $ioption \"s:dirname( __FILE__ ) . '/src/':'$WP_CORE_DIR/':\" \"$WP_TESTS_DIR\"/wp-tests-config.php\n\t\tsed $ioption \"s/youremptytestdbnamehere/$DB_NAME/\" \"$WP_TESTS_DIR\"/wp-tests-config.php\n\t\tsed $ioption \"s/yourusernamehere/$DB_USER/\" \"$WP_TESTS_DIR\"/wp-tests-config.php\n\t\tsed $ioption \"s/yourpasswordhere/$DB_PASS/\" \"$WP_TESTS_DIR\"/wp-tests-config.php\n\t\tsed $ioption \"s|localhost|${DB_HOST}|\" \"$WP_TESTS_DIR\"/wp-tests-config.php\n\tfi\n\n}\n\ninstall_db() {\n\n\tif [ ${SKIP_DB_CREATE} = \"true\" ]; then\n\t\treturn 0\n\tfi\n\n\t# parse DB_HOST for port or socket references\n\tlocal PARTS=(${DB_HOST//\\:/ })\n\tlocal DB_HOSTNAME=${PARTS[0]};\n\tlocal DB_SOCK_OR_PORT=${PARTS[1]};\n\tlocal EXTRA=\"\"\n\n\tif ! [ -z $DB_HOSTNAME ] ; then\n\t\tif [ $(echo $DB_SOCK_OR_PORT | grep -e '^[0-9]\\{1,\\}$') ]; then\n\t\t\tEXTRA=\" --host=$DB_HOSTNAME --port=$DB_SOCK_OR_PORT --protocol=tcp\"\n\t\telif ! [ -z $DB_SOCK_OR_PORT ] ; then\n\t\t\tEXTRA=\" --socket=$DB_SOCK_OR_PORT\"\n\t\telif ! [ -z $DB_HOSTNAME ] ; then\n\t\t\tEXTRA=\" --host=$DB_HOSTNAME --protocol=tcp\"\n\t\tfi\n\tfi\n\n\t# create database\n\tmariadb-admin create $DB_NAME --user=\"$DB_USER\" --password=\"$DB_PASS\"$EXTRA || \\\n\t\tmysqladmin create $DB_NAME --user=\"$DB_USER\" --password=\"$DB_PASS\"$EXTRA\n}\n\ninstall_wp\ninstall_test_suite\ninstall_db\n" }, { "path": "bin/local-env/docker-compose.yml", "content": "services:\n wordpress:\n image: wordpress:php${PHP_VERSION:-8.2}\n ports:\n - '127.0.0.1:8899:80'\n environment:\n WORDPRESS_DB_HOST: mysql\n WORDPRESS_DB_USER: root\n WORDPRESS_DB_PASSWORD: example\n WORDPRESS_DB_NAME: wordpress\n WP_ENVIRONMENT_TYPE: local\n ABSPATH: /usr/src/wordpress/\n WORDPRESS_DEBUG: 1\n WORDPRESS_CONFIG_EXTRA: |\n define( 'SCRIPT_DEBUG', true );\n define( 'FS_METHOD', 'direct' );\n define( 'WEBSTORIES_DEV_MODE', true );\n volumes:\n - wordpress_data:/var/www/html\n - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini\n - ../../:/var/www/html/wp-content/plugins/web-stories\n - ../../packages/e2e-tests/src/plugins:/var/www/html/wp-content/plugins/web-stories-test-plugins\n - ../../packages/e2e-tests/src/assets:/var/www/html/wp-content/e2e-assets\n depends_on:\n - mysql\n\n cli:\n image: wordpress:cli-php${PHP_VERSION:-8.2}\n environment:\n WORDPRESS_DB_HOST: mysql\n WORDPRESS_DB_USER: root\n WORDPRESS_DB_PASSWORD: example\n WORDPRESS_DB_NAME: wordpress\n volumes:\n - wordpress_data:/var/www/html\n - ../../:/var/www/html/wp-content/plugins/web-stories\n - ../../packages/e2e-tests/src/plugins:/var/www/html/wp-content/plugins/web-stories-test-plugins\n - ../../packages/e2e-tests/src/assets:/var/www/html/wp-content/e2e-assets\n depends_on:\n - mysql\n - wordpress\n command: tail -f /dev/null\n\n mysql:\n image: mariadb:lts\n command: --max-allowed-packet=16777216\n environment:\n MYSQL_ROOT_PASSWORD: example\n MYSQL_DATABASE: wordpress_test\n volumes:\n - ./data/mysql:/var/lib/mysql\n\nvolumes:\n wordpress_data:\n" }, { "path": "bin/local-env/includes.sh", "content": "#!/usr/bin/env bash\n\n# Common variables.\nDOCKER_COMPOSE_FILE_OPTIONS=\"-f $(dirname \"$0\")/docker-compose.yml\"\n\nif [ -f \"$(dirname \"$0\")/docker-compose.override.yml\" ]; then\n DOCKER_COMPOSE_FILE_OPTIONS=\"$DOCKER_COMPOSE_FILE_OPTIONS -f $(dirname \"$0\")/docker-compose.override.yml\"\nfi\n\n# These are the containers and values for the development site.\nCLI='cli'\nCONTAINER='wordpress'\nDATABASE='mysql'\nSITE_TITLE='Web Stories Dev'\n\n##\n# Ask a Yes/No question, and way for a reply.\n#\n# This is a general-purpose function to ask Yes/No questions in Bash, either with or without a default\n# answer. It keeps repeating the question until it gets a valid answer.\n#\n# @param {string} prompt The question to ask the user.\n# @param {string} [default] Optional. \"Y\" or \"N\", for the default option to use if none is entered.\n# @param {int} [timeout] Optional. The number of seconds to wait before using the default option.\n#\n# @returns {bool} true if the user replies Yes, false if the user replies No.\n##\nask() {\n # Source: https://djm.me/ask\n local timeout endtime timediff prompt default reply\n\n while true; do\n\n\t\ttimeout=\"${3:-}\"\n\n if [ \"${2:-}\" = \"Y\" ]; then\n prompt=\"Y/n\"\n default=Y\n elif [ \"${2:-}\" = \"N\" ]; then\n prompt=\"y/N\"\n default=N\n else\n prompt=\"y/n\"\n default=\n\t\t\ttimeout=\n fi\n\n\t\tif [ -z \"$timeout\" ]; then\n \t# Ask the question (not using \"read -p\" as it uses stderr not stdout)\n \techo -en \"$1 [$prompt] \"\n\n \t# Read the answer (use /dev/tty in case stdin is redirected from somewhere else)\n \tread reply /dev/null 2>&1\n}\n\n##\n# Docker Compose helper\n#\n# Calls docker compose with common options.\n##\ndc() {\n\tdocker compose $DOCKER_COMPOSE_FILE_OPTIONS \"$@\"\n}\n\n##\n# WP CLI\n#\n# Executes a WP CLI request in the CLI container.\n##\nwp() {\n\tdc exec -T -u 33:33 $CLI wp \"$@\"\n}\n\n##\n# MySQL CLI.\n#\n# Executes the given MySQL client command in the database container.\n##\nmysql() {\n\tdc exec -T -e MYSQL_PWD=example $DATABASE mariadb \"$@\"\n}\n\n##\n# WordPress Container helper.\n#\n# Executes the given command in the wordpress container.\n##\ncontainer() {\n\tdc exec -T $CONTAINER \"$@\"\n}\n" }, { "path": "bin/local-env/install-wordpress.sh", "content": "#!/usr/bin/env bash\n\n# Exit if any command fails.\nset -e\n\n# Common variables.\nWP_DEBUG=${WP_DEBUG-true}\nSCRIPT_DEBUG=${SCRIPT_DEBUG-true}\nWEBSTORIES_DEV_MODE=${WEBSTORIES_DEV_MODE-true}\nMEDIA_TRASH=${MEDIA_TRASH-false}\nWP_VERSION=${WP_VERSION-\"latest\"}\n\n# Include useful functions\n. \"$(dirname \"$0\")/includes.sh\"\n\n# Make sure Docker containers are running\ndc up -d >/dev/null 2>&1\n\n# Get the host port for the WordPress container.\nHOST_PORT=$(dc port $CONTAINER 80 | awk -F : '{printf $2}')\n\n# Wait until the WordPress site is responding to requests.\necho -en $(status_message \"Attempting to connect to WordPress...\")\nuntil $(curl -L http://localhost:$HOST_PORT -so - 2>&1 | grep -q \"WordPress\"); do\n\techo -n '.'\n\tsleep 5\ndone\necho ''\n\n# Wait until the database container is ready.\necho -en $(status_message \"Waiting for database connection...\")\nuntil $(container bash -c \"echo -n > /dev/tcp/mysql/3306\" >/dev/null 2>&1); do\n\techo -n '.'\n\tsleep 5\ndone\necho ''\n\n# Create the database if it doesn't exist.\necho -e $(status_message \"Creating the database (if it does not exist)...\")\nmysql -e 'CREATE DATABASE IF NOT EXISTS wordpress;'\n\n# If this is the test site, we reset the database so no posts/comments/etc.\n# dirty up the tests.\nif [ \"$1\" == '--reset-site' ]; then\n\techo -e $(status_message \"Resetting test database...\")\n\twp db reset --yes --quiet\nfi\n\nif [ ! -z \"$WP_VERSION\" ] && [ \"$WP_VERSION\" != \"latest\" ]; then\n\t# Potentially downgrade (or upgrade) WordPress\n\techo -e $(status_message \"Downloading WordPress version $WP_VERSION...\")\n\twp core download --version=${WP_VERSION} --skip-content --force --quiet\nfi\n\n# Install WordPress.\necho -e $(status_message \"Installing WordPress...\")\nwp core install --title=\"$SITE_TITLE\" --admin_user=admin --admin_password=password --admin_email=test@test.com --skip-email --url=http://localhost:$HOST_PORT --quiet\n\n# Potentially update WordPress\nif [ \"$WP_VERSION\" == \"latest\" ]; then\n\techo -e $(status_message \"Updating WordPress to the latest major\")\n\twp core update --force --quiet\nelse\n echo -e $(status_message \"Updating WordPress to the latest minor\")\n wp core update --minor --force --quiet\nfi\n\n# Create additional users.\necho -e $(status_message \"Creating additional users...\")\n\nif [[ $(wp user get editor --field=login 2>&1) != \"editor\" ]]; then\n\twp user create editor editor@example.com --role=editor --user_pass=password\n\techo -e $(status_message \"Editor created! Username: editor Password: password\")\nelse\n echo -e $(status_message \"Editor already exists, skipping...\")\nfi\n\nif [[ $(wp user get author --field=login 2>&1) != \"author\" ]]; then\n\twp user create author author@example.com --role=author --user_pass=password --quiet\n\techo -e $(status_message \"Author created! Username: author Password: password\")\nelse\n echo -e $(status_message \"Author already exists, skipping...\")\nfi\nif [[ $(wp user get contributor --field=login 2>&1) != \"contributor\" ]]; then\n\twp user create contributor contributor@example.com --role=contributor --user_pass=password --quiet\n\techo -e $(status_message \"Contributor created! Username: contributor Password: password\")\nelse\n echo -e $(status_message \"Contributor already exists, skipping...\")\nfi\nif [[ $(wp user get subscriber --field=login 2>&1) != \"subscriber\" ]]; then\n\twp user create subscriber subscriber@example.com --role=subscriber --user_pass=password --quiet\n\techo -e $(status_message \"Subscriber created! Username: subscriber Password: password\")\nelse\n echo -e $(status_message \"Subscriber already exists, skipping...\")\nfi\n\n# Make sure the uploads and upgrade folders exist and we have permissions to add files.\necho -e $(status_message \"Ensuring that files can be uploaded...\")\ncontainer mkdir -p \\\n\t/var/www/html/wp-content/uploads \\\n\t/var/www/html/wp-content/upgrade\ncontainer chmod 767 \\\n\t/var/www/html/wp-content \\\n\t/var/www/html/wp-content/plugins \\\n\t/var/www/html/wp-config.php \\\n\t/var/www/html/wp-settings.php \\\n\t/var/www/html/wp-content/uploads \\\n\t/var/www/html/wp-content/upgrade\n\n\nCURRENT_WP_VERSION=$(wp core version | tr -d '\\r')\necho -e $(status_message \"Current WordPress version: $CURRENT_WP_VERSION...\")\n\nif [ \"$WP_VERSION\" == \"latest\" ]; then\n\t# Check for WordPress updates, to make sure we're running the very latest version.\n\techo -e $(status_message \"Updating WordPress to the latest version...\")\n\twp core update --quiet\n\techo -e $(status_message \"Updating The WordPress Database...\")\n\twp core update-db --quiet\nfi\n\n# If the 'wordpress' volume wasn't during the down/up earlier, but the post port has changed, we need to update it.\necho -e $(status_message \"Checking the site's url...\")\nCURRENT_URL=$(wp option get siteurl)\nif [ \"$CURRENT_URL\" != \"http://localhost:$HOST_PORT\" ]; then\n\twp option update home \"http://localhost:$HOST_PORT\" --quiet\n\twp option update siteurl \"http://localhost:$HOST_PORT\" --quiet\nfi\n\n# Activate Web Stories plugin.\necho -e $(status_message \"Activating Web Stories plugin...\")\nwp plugin activate web-stories --quiet\n\n# Install & activate testing plugins.\n\n# Only install Gutenberg on latest version of WordPress.\nif [ \"$WP_VERSION\" == \"latest\" ]; then\n\techo -e $(status_message \"Installing Gutenberg plugin...\")\n\twp plugin install gutenberg --force --quiet\nfi\n\necho -e $(status_message \"Installing and activating RTL Tester plugin...\")\nwp plugin install rtl-tester --activate --force --quiet\n\necho -e $(status_message \"Installing WordPress importer...\")\nwp plugin install wordpress-importer --activate --force --quiet\n\n# WooCommerce 9.8 is the last version that still supports WordPress 6.6.\necho -e $(status_message \"Installing WooCommerce plugin...\")\nif [ \"$WP_VERSION\" == \"6.6\" ]; then\n wp plugin install woocommerce --version=9.8.2 --activate --force --quiet\nelse\n wp plugin install woocommerce --activate --force --quiet\nfi\n\necho -e $(status_message \"Installing AMP plugin...\")\nwp plugin install amp --force --quiet\n\necho -e $(status_message \"Installing Classic editor plugin...\")\nwp plugin install classic-editor --force --quiet\n\necho -e $(status_message \"Installing Classic Widgets plugin...\")\nwp plugin install classic-widgets --force --quiet\n\necho -e $(status_message \"Activating Twenty Twenty theme...\")\nwp theme install twentytwenty --activate --force --quiet\n\necho -e $(status_message \"Disable block directory and remote patterns...\")\nwp plugin activate web-stories-test-plugins/disable-block-directory --quiet\n\necho -e $(status_message \"Disable Gravatar...\")\nwp plugin activate web-stories-test-plugins/disable-gravatar --quiet\n\n# Set pretty permalinks.\necho -e $(status_message \"Setting permalink structure...\")\nwp rewrite structure '%postname%' --hard --quiet\n\n# Configure site constants.\necho -e $(status_message \"Configuring site constants...\")\nWP_DEBUG_CURRENT=$(wp config get --type=constant --format=json WP_DEBUG | tr -d '\\r')\n\nif [[ \"$WP_DEBUG\" != $WP_DEBUG_CURRENT ]]; then\n\twp config set WP_DEBUG $WP_DEBUG --raw --type=constant --quiet --anchor=\"That's all, stop editing\"\n\tWP_DEBUG_RESULT=$(wp config get --type=constant --format=json WP_DEBUG | tr -d '\\r')\n\techo -e $(status_message \"WP_DEBUG: $WP_DEBUG_RESULT...\")\nfi\n\nSCRIPT_DEBUG_CURRENT=$(wp config get --type=constant --format=json SCRIPT_DEBUG | tr -d '\\r')\nif [[ \"$SCRIPT_DEBUG\" != $SCRIPT_DEBUG_CURRENT ]]; then\n\twp config set SCRIPT_DEBUG $SCRIPT_DEBUG --raw --type=constant --quiet --anchor=\"That's all, stop editing\"\n\tSCRIPT_DEBUG_RESULT=$(wp config get --type=constant --format=json SCRIPT_DEBUG | tr -d '\\r')\n\techo -e $(status_message \"SCRIPT_DEBUG: $SCRIPT_DEBUG_RESULT...\")\nfi\n\nWEBSTORIES_DEV_MODE_CURRENT=!$WEBSTORIES_DEV_MODE;\nif [[ \"$(wp config has --type=constant WEBSTORIES_DEV_MODE)\" ]]; then\n WEBSTORIES_DEV_MODE_CURRENT=$(wp config get --type=constant --format=json WEBSTORIES_DEV_MODE | tr -d '\\r')\nfi\n\nif [[ \"$WEBSTORIES_DEV_MODE\" != $WEBSTORIES_DEV_MODE_CURRENT ]]; then\n wp config set WEBSTORIES_DEV_MODE $WEBSTORIES_DEV_MODE --raw --type=constant --quiet --anchor=\"That's all, stop editing\"\n WEBSTORIES_DEV_MODE_RESULT=$(wp config get --type=constant --format=json WEBSTORIES_DEV_MODE | tr -d '\\r')\n echo -e $(status_message \"WEBSTORIES_DEV_MODE: $WEBSTORIES_DEV_MODE_RESULT...\")\nfi\n\nMEDIA_TRASH_CURRENT=!MEDIA_TRASH;\nif [[ \"$(wp config has --type=constant MEDIA_TRASH)\" ]]; then\n MEDIA_TRASH_CURRENT=$(wp config get --type=constant --format=json MEDIA_TRASH | tr -d '\\r')\nfi\n\nif [[ \"$MEDIA_TRASH\" != $MEDIA_TRASH_CURRENT ]]; then\n wp config set MEDIA_TRASH $MEDIA_TRASH --raw --type=constant --quiet --anchor=\"That's all, stop editing\"\n MEDIA_TRASH_RESULT=$(wp config get --type=constant --format=json MEDIA_TRASH | tr -d '\\r')\n echo -e $(status_message \"MEDIA_TRASH: $MEDIA_TRASH_RESULT...\")\nfi\n\n# Let's make sure we have some media in the media library to work with.\necho -e $(status_message \"Import default set of media assets...\")\n# TODO: use glob pattern to import items. See https://developer.wordpress.org/cli/commands/media/import/.\n\nWEBM_VIDEO_ID=$(wp media import /var/www/html/wp-content/e2e-assets/small-video.webm --porcelain)\nWEBM_VIDEO_POSTER_ID=$(wp media import /var/www/html/wp-content/e2e-assets/small-video-poster.jpg --post_id=$WEBM_VIDEO_ID --featured_image --porcelain)\n\n# So the poster is marked as such and hidden in the editor.\nwp post term add $WEBM_VIDEO_POSTER_ID web_story_media_source \"poster-generation\" --quiet\nwp post meta add $WEBM_VIDEO_ID web_stories_poster_id $WEBM_VIDEO_POSTER_ID --quiet\n\nwp media import /var/www/html/wp-content/e2e-assets/example-1.jpg --quiet\nwp media import /var/www/html/wp-content/e2e-assets/example-2.jpg --quiet\nwp media import /var/www/html/wp-content/e2e-assets/example-3.png --quiet\n\n# Ensures that the patch command below always works.\nwp option update web_stories_experiments '{}' --format=json\n\nwp option patch insert web_stories_experiments enableSVG 1\nwp media import /var/www/html/wp-content/e2e-assets/video-play.svg\nwp option patch insert web_stories_experiments enableSVG 0\n\nwp user list --format=yaml\nwp post list --post_type=attachment --format=yaml\nwp plugin list --format=yaml\n\necho -e $(status_message \"Import sample WooCommerce products...\")\nwp import /var/www/html/wp-content/plugins/woocommerce/sample-data/sample_products.xml --authors=skip --quiet\n\necho -e $(status_message \"Deactivating WooCommerce again...\")\nwp plugin deactivate woocommerce\n\necho -e $(status_message \"Deactivating WordPress importer again...\")\nwp plugin deactivate wordpress-importer --quiet\n\n" }, { "path": "bin/local-env/launch-containers.sh", "content": "#!/usr/bin/env bash\n\n# Exit if any command fails.\nset -e\n\n# Include useful functions.\n. \"$(dirname \"$0\")/includes.sh\"\n\n# Check that Docker is installed.\nif ! command_exists \"docker\"; then\n\techo -e $(error_message \"Docker doesn't seem to be installed. Please head on over to the Docker site to download it: $(action_format \"https://www.docker.com/products/docker-desktop\")\")\n\texit 1\nfi\n\n# Check that Docker is running.\nif ! docker info >/dev/null 2>&1; then\n\techo -e $(error_message \"Docker isn't running. Please check that you've started your Docker app, and see it in your system tray.\")\n\texit 1\nfi\n\n# Stop existing containers.\necho -e $(status_message \"Stopping Docker containers...\")\ndc down --remove-orphans >/dev/null 2>&1\n\n# Download image updates.\necho -e $(status_message \"Downloading Docker image updates...\")\ndc pull\n\n# Launch the containers.\necho -e $(status_message \"Starting Docker containers...\")\ndc up -d >/dev/null\n" }, { "path": "bin/local-env/start.sh", "content": "#!/usr/bin/env bash\n\n# Exit if any command fails\nset -e\n\n# Include useful functions\n. \"$(dirname \"$0\")/includes.sh\"\n\n# Change to the expected directory\ncd \"$(dirname \"$0\")/../..\"\n\n# Check whether Docker is installed and running\n. \"$(dirname \"$0\")/launch-containers.sh\"\n\n# Set up WordPress Development site.\n# Note: we don't bother installing the test site right now, because that's\n# done on every time `npm run test-e2e` is run.\n. \"$(dirname \"$0\")/install-wordpress.sh\"\n\n\nCURRENT_URL=$(wp option get siteurl | tr -d '\\r')\n\necho -e \"\\nWelcome to the Web Stories development environment...\\n\"\n\n# Give the user more context to what they should do next: Build the plugin and start testing!\necho -e \"\\nRun $(action_format \"npm run dev\") to build the latest version of the Web Stories plugin,\"\necho -e \"then open $(action_format \"$CURRENT_URL\") to get started!\"\n\necho -e \"\\n\\nAccess the above install using the following credentials:\"\necho -e \"Default username: $(action_format \"admin\"), password: $(action_format \"password\")\"\n\nif [ -z \"$CI\" ]; then\n if command -v xdg-open > /dev/null; then\n xdg-open \"$CURRENT_URL\"\n elif command -v open > /dev/null; then\n open \"$CURRENT_URL\"\n elif command -v xdg-open > /dev/null; then\n xdg-open \"$CURRENT_URL\"\n fi\nfi\n" }, { "path": "bin/local-env/stop.sh", "content": "#!/usr/bin/env bash\n\n# Exit if any command fails.\nset -e\n\n# Include useful functions.\n. \"$(dirname \"$0\")/includes.sh\"\n\n# Check that Docker is installed.\nif ! command_exists \"docker\"; then\n\techo -e $(error_message \"Docker doesn't seem to be installed. Please head on over to the Docker site to download it: $(action_format \"https://www.docker.com/products/docker-desktop\")\")\n\texit 1\nfi\n\n# Check that Docker is running.\nif ! docker info >/dev/null 2>&1; then\n\techo -e $(error_message \"Docker isn't running. Please check that you've started your Docker app, and see it in your system tray.\")\n\texit 1\nfi\n\n# Stop existing containers.\necho -e $(status_message \"Stopping Docker containers...\")\ndc down --remove-orphans >/dev/null 2>&1\n" }, { "path": "bin/local-env/uploads.ini", "content": "upload_max_filesize = 100M;\npost_max_size = 100M;\n" }, { "path": "bin/schemas/story.json", "content": "{\n \"$id\": \"https://wp.stories.google/schema/story.json\",\n \"type\": \"object\",\n \"default\": {},\n \"title\": \"Web Stories for WordPress Schema\",\n \"required\": [\"version\", \"pages\"],\n \"properties\": {\n \"version\": {\n \"type\": \"integer\",\n \"default\": 0,\n \"minimum\": 0,\n \"title\": \"The story's data version\",\n \"description\": \"Used for data migrations\"\n },\n \"pages\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"title\": \"Story pages\",\n \"description\": \"Holds individual pages of a story\",\n \"items\": {\n \"$ref\": \"#/$defs/page\"\n }\n }\n },\n \"$defs\": {\n \"https\": {\n \"type\": \"string\",\n \"format\": \"uri-reference\",\n \"pattern\": \"^(/|https://|https?://(127.0.0.1|([^/]+\\\\.)?localhost)(:[0-9]+)?/)\"\n },\n \"animation\": {\n \"type\": \"object\",\n \"title\": \"An animation\",\n \"required\": [\"id\", \"type\", \"targets\", \"duration\", \"delay\"],\n \"properties\": {\n \"id\": {\n \"type\": \"string\",\n \"title\": \"Animation ID\",\n \"format\": \"uuid\"\n },\n \"type\": {\n \"type\": \"string\",\n \"title\": \"Animation type\",\n \"enum\": [\n \"blinkOn\",\n \"bounce\",\n \"effect-background-pan\",\n \"effect-background-pan-and-zoom\",\n \"effect-background-zoom\",\n \"effect-drop\",\n \"effect-fade-in\",\n \"effect-fly-in\",\n \"effect-pan\",\n \"effect-pulse\",\n \"effect-rotate-in\",\n \"effect-twirl-in\",\n \"effect-whoosh-in\",\n \"effect-zoom\",\n \"fade\",\n \"flip\",\n \"floatOn\",\n \"move\",\n \"pulse\",\n \"spin\",\n \"zoom\"\n ]\n },\n \"targets\": {\n \"type\": \"array\",\n \"title\": \"Animation targets\",\n \"items\": {\n \"type\": \"string\",\n \"title\": \"Target element ID\"\n }\n },\n \"panDir\": {\n \"type\": \"string\",\n \"title\": \"panDir direction\",\n \"enum\": [\"leftToRight\", \"topToBottom\", \"rightToLeft\", \"bottomToTop\"]\n },\n \"duration\": {\n \"type\": \"integer\",\n \"title\": \"Duration in ms\",\n \"minimum\": 0\n },\n \"delay\": {\n \"type\": \"integer\",\n \"title\": \"Delay in ms\",\n \"minimum\": 0\n },\n \"zoomDirection\": {\n \"type\": \"string\",\n \"default\": \"\",\n \"title\": \"Zoom direction\",\n \"enum\": [\n \"dynamicPropertyValue\",\n \"scaleIn\",\n \"scaleInBottomRight\",\n \"scaleInTopLeft\",\n \"scaleOut\",\n \"scaleOutTopRight\",\n \"scaleOutBottomLeft\"\n ]\n }\n }\n },\n \"element\": {\n \"type\": \"object\",\n \"title\": \"Base element\",\n \"required\": [\"x\", \"y\", \"width\", \"height\", \"type\", \"id\", \"rotationAngle\"],\n \"properties\": {\n \"opacity\": {\n \"type\": \"integer\",\n \"minimum\": 0,\n \"maximum\": 100,\n \"default\": 100,\n \"title\": \"Element opacity\",\n \"$comment\": \"TODO: Set by default and make required\"\n },\n \"flip\": {\n \"type\": \"object\",\n \"title\": \"Flip setting\",\n \"$comment\": \"TODO: Move somewhere else since text elements can't be flipped.\",\n \"required\": [\"vertical\", \"horizontal\"],\n \"properties\": {\n \"vertical\": {\n \"type\": \"boolean\",\n \"title\": \"Vertical flipping\"\n },\n \"horizontal\": {\n \"type\": \"boolean\",\n \"title\": \"Horizontal flipping\"\n }\n }\n },\n \"rotationAngle\": {\n \"type\": \"integer\",\n \"title\": \"Rotation angle\",\n \"$comment\": \"TODO: Set by default and make required\",\n \"minimum\": -360,\n \"maximum\": 360\n },\n \"lockAspectRatio\": {\n \"type\": \"boolean\",\n \"title\": \"Whether aspect ratio is locked\",\n \"$comment\": \"TODO: Set by default and make required\"\n },\n \"backgroundColor\": {\n \"type\": \"object\",\n \"title\": \"Background color\",\n \"$ref\": \"#/$defs/pattern\"\n },\n \"x\": {\n \"type\": \"number\",\n \"title\": \"X position\"\n },\n \"y\": {\n \"type\": \"number\",\n \"title\": \"Y position\"\n },\n \"width\": {\n \"type\": \"number\",\n \"title\": \"Element width\",\n \"minimum\": 1\n },\n \"height\": {\n \"type\": \"number\",\n \"title\": \"Element height\",\n \"minimum\": 1\n },\n \"mask\": {\n \"type\": \"object\",\n \"title\": \"Element mask\",\n \"required\": [\"type\"],\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"title\": \"Mask type\",\n \"enum\": [\n \"heart\",\n \"star\",\n \"circle\",\n \"rectangle\",\n \"triangle\",\n \"rounded-rectangle\",\n \"rounded-rectangle-2\",\n \"pentagon\",\n \"hexagon\",\n \"cross\",\n \"arrow\",\n \"burst\",\n \"bullseye\",\n \"blob-1\",\n \"blob-2\",\n \"blob-3\",\n \"blob-4\",\n \"blob-5\",\n \"blob-6\",\n \"grid-1\",\n \"grid-2\",\n \"grid-3\",\n \"grid-4\",\n \"grid-5\",\n \"grid-6\",\n \"grid-7\",\n \"grid-8\",\n \"burst-outline\",\n \"arrow-1\",\n \"arrow-2\",\n \"arrow-3\",\n \"geography-1\",\n \"twitter\",\n \"instagram\",\n \"facebook\",\n \"youtube\",\n \"brush-stroke-1\",\n \"brush-stroke-2\",\n \"chat-bubble\",\n \"check-mark\",\n \"new-music\",\n \"music-note\",\n \"fashion-arrow\",\n \"fashion-arrow-2\",\n \"wellbeing-arrow\"\n ]\n },\n \"showInLibrary\": {\n \"type\": \"boolean\",\n \"$comment\": \"TODO: Remove / do not store\"\n },\n \"name\": {\n \"type\": \"string\",\n \"$comment\": \"TODO: Remove / do not store\"\n },\n \"path\": {\n \"type\": \"string\",\n \"$comment\": \"TODO: Remove / do not store\"\n },\n \"ratio\": {\n \"type\": \"number\",\n \"$comment\": \"TODO: Remove / do not store\"\n },\n \"supportsBorder\": {\n \"type\": \"boolean\",\n \"$comment\": \"TODO: Remove / do not store\"\n }\n }\n },\n \"type\": {\n \"type\": \"string\",\n \"title\": \"The element type\",\n \"enum\": [\"image\", \"sticker\", \"text\", \"video\", \"shape\", \"gif\"]\n },\n \"id\": {\n \"type\": \"string\",\n \"title\": \"Element ID\",\n \"format\": \"uuid\"\n },\n\n \"borderRadius\": {\n \"type\": \"object\",\n \"title\": \"Element border radius\",\n \"required\": [\n \"locked\",\n \"topLeft\",\n \"topRight\",\n \"bottomRight\",\n \"bottomLeft\"\n ],\n \"properties\": {\n \"locked\": {\n \"type\": \"boolean\",\n \"title\": \"Whether padding is locked\"\n },\n \"topLeft\": {\n \"type\": \"integer\",\n \"title\": \"Top left radius\",\n \"minimum\": 0\n },\n \"topRight\": {\n \"type\": \"integer\",\n \"title\": \"Top right radius\",\n \"minimum\": 0\n },\n \"bottomRight\": {\n \"type\": \"integer\",\n \"title\": \"Bottom right radius\",\n \"minimum\": 0\n },\n \"bottomLeft\": {\n \"type\": \"integer\",\n \"title\": \"Bottom left radius\",\n \"minimum\": 0\n }\n }\n },\n \"basedOn\": {\n \"type\": \"string\",\n \"default\": \"\",\n \"title\": \"Reference to the original element if this one was duplicated/copied\",\n \"$comment\": \"TODO: Remove?\"\n },\n \"isBackground\": {\n \"type\": \"boolean\",\n \"title\": \"Whether it is the background element\",\n \"$comment\": \"TODO: Move somewhere else since text elements can't be background.\"\n },\n \"groupId\": {\n \"type\": \"string\",\n \"title\": \"Layer group ID\"\n }\n }\n },\n \"textElement\": {\n \"type\": \"object\",\n \"title\": \"Text element\",\n \"allOf\": [\n {\n \"$ref\": \"#/$defs/element\"\n }\n ],\n \"required\": [\n \"backgroundTextMode\",\n \"font\",\n \"fontSize\",\n \"lineHeight\",\n \"textAlign\",\n \"content\",\n \"fontWeight\"\n ],\n \"properties\": {\n \"backgroundTextMode\": {\n \"type\": \"string\",\n \"title\": \"Text background mode\",\n \"enum\": [\"NONE\", \"FILL\", \"HIGHLIGHT\"]\n },\n \"font\": {\n \"type\": \"object\",\n \"title\": \"The font Schema\",\n \"required\": [\n \"family\",\n \"service\",\n \"fallbacks\",\n \"weights\",\n \"styles\",\n \"variants\",\n \"metrics\"\n ],\n \"properties\": {\n \"family\": {\n \"type\": \"string\",\n \"title\": \"Font family\"\n },\n \"service\": {\n \"type\": \"string\",\n \"title\": \"Font provider\",\n \"examples\": [\"fonts.google.com\"]\n },\n \"fallbacks\": {\n \"type\": \"array\",\n \"title\": \"Fallback fonts\",\n \"items\": {\n \"type\": \"string\",\n \"title\": \"Font family\"\n },\n \"examples\": [[\"sans-serif\"], [\"Helvetica\", \"sans-serif\"]]\n },\n \"weights\": {\n \"type\": \"array\",\n \"title\": \"Supported font weights\",\n \"minItems\": 1,\n \"items\": {\n \"type\": \"integer\",\n \"title\": \"Font weight\",\n \"minimum\": 100,\n \"maximum\": 900\n }\n },\n \"styles\": {\n \"type\": \"array\",\n \"title\": \"Support font styles\",\n \"minItems\": 1,\n \"items\": {\n \"type\": \"string\",\n \"title\": \"Font style\",\n \"enum\": [\"italic\", \"regular\"]\n }\n },\n \"variants\": {\n \"type\": \"array\",\n \"title\": \"Font variants\",\n \"items\": {\n \"type\": \"array\",\n \"title\": \"Font variant tuple\",\n \"minItems\": 2,\n \"maxItems\": 2,\n \"items\": {\n \"type\": \"integer\"\n },\n \"examples\": [\n [0, 100],\n [1, 500],\n [1, 700]\n ]\n }\n },\n \"metrics\": {\n \"type\": \"object\",\n \"title\": \"Font metrics\",\n \"required\": [\n \"upm\",\n \"asc\",\n \"des\",\n \"tAsc\",\n \"tDes\",\n \"tLGap\",\n \"wAsc\",\n \"wDes\",\n \"xH\",\n \"capH\",\n \"yMin\",\n \"yMax\",\n \"hAsc\",\n \"hDes\",\n \"lGap\"\n ],\n \"properties\": {\n \"upm\": {\n \"type\": \"integer\"\n },\n \"asc\": {\n \"type\": \"integer\"\n },\n \"des\": {\n \"type\": \"integer\"\n },\n \"tAsc\": {\n \"type\": \"integer\"\n },\n \"tDes\": {\n \"type\": \"integer\"\n },\n \"tLGap\": {\n \"type\": \"integer\"\n },\n \"wAsc\": {\n \"type\": \"integer\"\n },\n \"wDes\": {\n \"type\": \"integer\"\n },\n \"xH\": {\n \"type\": \"integer\"\n },\n \"capH\": {\n \"type\": \"integer\"\n },\n \"yMin\": {\n \"type\": \"integer\"\n },\n \"yMax\": {\n \"type\": \"integer\"\n },\n \"hAsc\": {\n \"type\": \"integer\"\n },\n \"hDes\": {\n \"type\": \"integer\"\n },\n \"lGap\": {\n \"type\": \"integer\"\n }\n }\n }\n }\n },\n \"fontSize\": {\n \"type\": \"integer\",\n \"title\": \"Font size\",\n \"minimum\": 1\n },\n \"lineHeight\": {\n \"type\": \"number\",\n \"title\": \"Line height\"\n },\n \"textAlign\": {\n \"type\": \"string\",\n \"title\": \"Text alignment\",\n \"enum\": [\"initial\", \"left\", \"center\", \"right\"]\n },\n \"content\": {\n \"type\": \"string\",\n \"title\": \"The element's content. Can contain HTML.\"\n },\n \"padding\": {\n \"type\": \"object\",\n \"title\": \"Element padding\",\n \"required\": [],\n \"properties\": {\n \"horizontal\": {\n \"type\": \"integer\",\n \"title\": \"Horizontal padding\",\n \"minimum\": 0\n },\n \"vertical\": {\n \"type\": \"integer\",\n \"title\": \"Vertical padding\",\n \"minimum\": 0\n },\n \"locked\": {\n \"type\": \"boolean\",\n \"title\": \"Whether padding is locked\"\n },\n \"hasHiddenPadding\": {\n \"type\": \"boolean\",\n \"title\": \"Whether the element has hidden padding\"\n }\n }\n },\n \"marginOffset\": {\n \"type\": \"number\",\n \"title\": \"Margin offset\"\n }\n }\n },\n \"stickerElement\": {\n \"type\": \"object\",\n \"title\": \"Sticker element\",\n \"allOf\": [\n {\n \"$ref\": \"#/$defs/element\"\n }\n ],\n \"required\": [\"sticker\"],\n \"properties\": {\n \"sticker\": {\n \"type\": \"object\",\n \"title\": \"The sticker Schema\",\n \"required\": [\"type\"],\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"title\": \"The type Schema\"\n }\n }\n }\n }\n },\n \"mediaElement\": {\n \"type\": \"object\",\n \"title\": \"Media element\",\n \"allOf\": [\n {\n \"$ref\": \"#/$defs/element\"\n }\n ],\n \"required\": [\"resource\"],\n \"properties\": {\n \"resource\": {\n \"type\": \"object\",\n \"title\": \"The resource Schema\",\n \"required\": [\n \"type\",\n \"mimeType\",\n \"src\",\n \"width\",\n \"height\",\n \"id\",\n \"alt\",\n \"sizes\"\n ],\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"title\": \"Resource type\",\n \"enum\": [\"image\", \"video\", \"gif\"]\n },\n \"mimeType\": {\n \"type\": \"string\",\n \"title\": \"Mime type\"\n },\n \"src\": {\n \"type\": \"string\",\n \"title\": \"Media source\"\n },\n \"width\": {\n \"type\": \"integer\",\n \"title\": \"Media width\",\n \"minimum\": 1\n },\n \"height\": {\n \"type\": \"integer\",\n \"title\": \"Media height\",\n \"minimum\": 1\n },\n \"id\": {\n \"type\": \"integer\",\n \"title\": \"Resource ID\"\n },\n \"alt\": {\n \"type\": \"string\",\n \"title\": \"Alt text\"\n },\n \"sizes\": {\n \"type\": \"array\",\n \"title\": \"The sizes Schema\",\n \"items\": {},\n \"$comment\": \"TODO: Complete schema\"\n },\n \"isOptimized\": {\n \"type\": \"boolean\",\n \"title\": \"Whether the resource is considered optimized\"\n },\n \"baseColor\": {\n \"type\": \"string\",\n \"title\": \"Average/Base color\",\n \"examples\": [\"#99684c\", \"#daa992\"]\n },\n \"isExternal\": {\n \"type\": \"boolean\",\n \"title\": \"Whether it is an external resource\"\n },\n \"creationDate\": {\n \"type\": \"string\",\n \"default\": \"\",\n \"title\": \"Date the media file was uploaded\",\n \"format\": \"date-time\"\n },\n \"posterId\": {\n \"type\": \"integer\",\n \"default\": 0,\n \"title\": \"ID of the resource's poster\"\n },\n \"scale\": {\n \"type\": \"number\",\n \"title\": \"Scaling\",\n \"minimum\": 0\n },\n \"focalX\": {\n \"type\": \"number\",\n \"title\": \"X axis focal point\",\n \"minimum\": 0\n },\n \"focalY\": {\n \"type\": \"number\",\n \"title\": \"Y axis focal point\",\n \"minimum\": 0\n }\n }\n },\n \"overlay\": {\n \"type\": \"object\",\n \"$ref\": \"#/$defs/linearPattern\"\n }\n }\n },\n \"shapeElement\": {\n \"type\": \"object\",\n \"title\": \"Shape element\",\n \"allOf\": [\n {\n \"$ref\": \"#/$defs/element\"\n }\n ],\n \"properties\": {\n \"isDefaultBackground\": {\n \"type\": \"boolean\",\n \"title\": \"Whether it is the default background\"\n }\n }\n },\n \"pattern\": {\n \"type\": \"object\",\n \"oneOf\": [\n { \"$ref\": \"#/$defs/solidPattern\" },\n { \"$ref\": \"#/$defs/linearPattern\" }\n ]\n },\n \"solidPattern\": {\n \"type\": \"object\",\n \"title\": \"Solid pattern\",\n \"required\": [\"color\"],\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"enum\": [\"none\", \"solid\", \"linear\", \"radial\"]\n },\n \"color\": {\n \"type\": \"object\",\n \"title\": \"RGB(A) color\",\n \"required\": [\"r\", \"g\", \"b\"],\n \"properties\": {\n \"r\": {\n \"type\": \"integer\",\n \"title\": \"Red\",\n \"minimum\": 0,\n \"maximum\": 255\n },\n \"g\": {\n \"type\": \"integer\",\n \"title\": \"Green\",\n \"minimum\": 0,\n \"maximum\": 255\n },\n \"b\": {\n \"type\": \"integer\",\n \"title\": \"Blue\",\n \"minimum\": 0,\n \"maximum\": 255\n },\n \"a\": {\n \"type\": \"number\",\n \"title\": \"Alpha\",\n \"minimum\": 0,\n \"maximum\": 1\n }\n }\n }\n }\n },\n \"linearPattern\": {\n \"type\": \"object\",\n \"title\": \"Linear color pattern\",\n \"required\": [\"type\", \"stops\"],\n \"properties\": {\n \"type\": {\n \"type\": \"string\",\n \"enum\": [\"none\", \"solid\", \"linear\", \"radial\"]\n },\n \"stops\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"items\": {\n \"type\": \"object\",\n \"allOf\": [\n {\n \"$ref\": \"#/$defs/solidPattern\"\n }\n ],\n \"properties\": {\n \"position\": {\n \"type\": \"number\",\n \"minimum\": 0,\n \"maximum\": 1\n }\n }\n }\n },\n \"alpha\": {\n \"type\": \"number\",\n \"minimum\": 0,\n \"maximum\": 1\n },\n \"rotation\": {\n \"type\": \"number\",\n \"minimum\": -359,\n \"maximum\": 359\n }\n }\n },\n \"page\": {\n \"type\": \"object\",\n \"title\": \"Individual Page\",\n \"required\": [\"backgroundColor\", \"elements\", \"id\", \"type\"],\n \"properties\": {\n \"animations\": {\n \"type\": \"array\",\n \"title\": \"Animations on this page\",\n \"items\": {\n \"$ref\": \"#/$defs/animation\"\n }\n },\n \"elements\": {\n \"type\": \"array\",\n \"minItems\": 1,\n \"title\": \"The page's elements\",\n \"items\": {\n \"anyOf\": [\n { \"$ref\": \"#/$defs/element\" },\n { \"$ref\": \"#/$defs/mediaElement\" },\n { \"$ref\": \"#/$defs/shapeElement\" },\n { \"$ref\": \"#/$defs/stickerElement\" },\n { \"$ref\": \"#/$defs/textElement\" }\n ]\n }\n },\n \"backgroundColor\": {\n \"type\": \"object\",\n \"title\": \"Background color\",\n \"$ref\": \"#/$defs/pattern\"\n },\n \"defaultBackgroundElement\": {\n \"type\": \"object\",\n \"title\": \"The default background element\",\n \"$ref\": \"#/$defs/shapeElement\",\n \"$comment\": \"TODO: Move to story element or remove?\"\n },\n \"id\": {\n \"type\": \"string\",\n \"title\": \"Page ID\",\n \"format\": \"uuid\"\n },\n \"type\": {\n \"type\": \"string\",\n \"title\": \"The type Schema\",\n \"enum\": [\"page\"],\n \"$comment\": \"TODO: Remove?\"\n },\n \"groups\": {\n \"type\": \"object\",\n \"title\": \"Layer groups\",\n \"patternProperties\": {\n \"^[\\\\w-]+\": {\n \"type\": \"object\",\n \"required\": [\"name\", \"isLocked\"],\n \"properties\": {\n \"name\": {\n \"type\": \"string\"\n },\n \"isLocked\": {\n \"type\": \"boolean\"\n },\n \"isCollapsed\": {\n \"type\": \"boolean\"\n }\n }\n }\n }\n }\n }\n }\n }\n}\n" }, { "path": "bin/setup-local-npm-registry.sh", "content": "#!/usr/bin/env bash\n\n#\n# Copyright 2022 Google LLC\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\n\n# Echo every command being executed\nset -ex\n\nregistry_url=http://localhost:4873\n\necho \"Starting up local npm registry...\"\n\n# Start local registry.\ntmp_registry_log=`mktemp`\n\necho \"Registry output file: $tmp_registry_log\"\n\ncurdir=$(dirname \"$(realpath $0)\")\n\n(cd && nohup npx verdaccio --config \"$curdir/verdaccio-config.yml\" &>$tmp_registry_log &)\n\nnpm i --global verdaccio-memory\n\n# Wait for Verdaccio to boot.\ngrep -q 'http address' <(tail -f $tmp_registry_log)\n\necho \"Local registry up and running! ${registry_url}\"\n\n# Set registry to local registry\nexport NPM_CONFIG_REGISTRY=\"$registry_url\"\n\necho \"Logging in...\"\n\n# Log in to Verdaccio so we can publish packages\nnpx npm-cli-login -u admin -p password -e test@example.com -r $registry_url\n" }, { "path": "bin/stop-local-npm-registry.sh", "content": "#!/usr/bin/env bash\n\n#\n# Copyright 2022 Google LLC\n#\n# Licensed under the Apache License, Version 2.0 (the \"License\");\n# you may not use this file except in compliance with the License.\n# You may obtain a copy of the License at\n#\n# https://www.apache.org/licenses/LICENSE-2.0\n#\n# Unless required by applicable law or agreed to in writing, software\n# distributed under the License is distributed on an \"AS IS\" BASIS,\n# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n# See the License for the specific language governing permissions and\n# limitations under the License.\n#\n\nlsof -nti:4873 | xargs kill -9\n\nunset NPM_CONFIG_REGISTRY\n" }, { "path": "bin/verdaccio-config.yml", "content": "#\n# This is the default config file. It allows all users to do anything,\n# so don't use it on production systems.\n#\n# Look here for more config file examples:\n# https://github.com/verdaccio/verdaccio/tree/master/conf\n#\n\n# path to a directory with all packages\nstorage: /tmp/verdaccio-workspace/storage\n\nweb:\n title: Verdaccio\n\nauth:\n htpasswd:\n file: /tmp/verdaccio-workspace/htpasswd\n\n# a list of other known repositories we can talk to\nuplinks:\n npmjs:\n url: https://registry.npmjs.org/\n\npackages:\n '@*/*':\n # scoped packages\n access: $all\n publish: $authenticated\n unpublish: $authenticated\n proxy: npmjs\n\n '**':\n # allow all users (including non-authenticated users) to read and\n # publish all packages\n #\n # you can specify usernames/groupnames (depending on your auth plugin)\n # and three keywords: \"$all\", \"$anonymous\", \"$authenticated\"\n access: $all\n\n # allow all known users to publish/publish packages\n # (anyone can register by default, remember?)\n publish: $authenticated\n unpublish: $authenticated\n\n # if package is not available locally, proxy requests to 'npmjs' registry\n proxy: npmjs\n\nserver:\n # deprecated\n keepAliveTimeout: 60\n\nmiddlewares:\n audit:\n enabled: true\n\n# log settings\nlogs:\n # Logger as STDOUT\n { type: stdout, format: pretty, level: warn }\n\n# This affect the web and api (not developed yet)\ni18n:\n web: en-US\n" }, { "path": "blocks/embed/block.json", "content": "{\n \"name\": \"web-stories/embed\",\n \"title\": \"Web Stories\",\n \"description\": \"Embed Web Stories.\",\n \"category\": \"embed\",\n \"keywords\": [\"embed\", \"web stories\", \"story\", \"stories\"],\n \"textdomain\": \"web-stories\",\n \"usesContext\": [\"postId\", \"postType\", \"queryId\"],\n \"attributes\": {\n \"blockType\": {\n \"type\": \"string\"\n },\n \"url\": {\n \"type\": \"string\"\n },\n \"title\": {\n \"type\": \"string\"\n },\n \"poster\": {\n \"type\": \"string\"\n },\n \"width\": {\n \"type\": \"number\",\n \"default\": 360\n },\n \"height\": {\n \"type\": \"number\",\n \"default\": 600\n },\n \"align\": {\n \"type\": \"string\",\n \"default\": \"none\"\n },\n \"stories\": {\n \"type\": \"array\",\n \"default\": []\n },\n \"viewType\": {\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"numOfStories\": {\n \"type\": \"number\",\n \"default\": 5\n },\n \"numOfColumns\": {\n \"type\": \"number\",\n \"default\": 2\n },\n \"circleSize\": {\n \"type\": \"number\",\n \"default\": 96\n },\n \"imageAlignment\": {\n \"type\": \"string\",\n \"default\": \"left\"\n },\n \"order\": {\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"orderby\": {\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"archiveLinkLabel\": {\n \"type\": \"string\",\n \"default\": \"\"\n },\n \"authors\": {\n \"type\": \"array\",\n \"default\": []\n },\n \"fieldState\": {\n \"type\": \"object\",\n \"default\": {}\n },\n \"taxQuery\": {\n \"type\": \"object\",\n \"default\": {}\n },\n \"previewOnly\": {\n \"type\": \"boolean\",\n \"default\": false\n }\n },\n \"supports\": {\n \"align\": [\"wide\", \"full\", \"left\", \"right\", \"center\"],\n \"interactivity\": true\n },\n \"viewScriptModule\": \"file:../../assets/js/web-stories-block-view.js\"\n}\n" }, { "path": "codecov.yml", "content": "# Overall settings for PR integration via codecov.io\n# See https://docs.codecov.io/docs/codecovyml-reference\n\n# Separate PR statuses for project-level and patch-level coverage\n# See https://docs.codecov.io/docs/commit-status\ncoverage:\n status:\n # Project-level coverage\n project:\n default:\n base: auto\n # Disable once code base is more mature.\n informational: true\n only_pulls: true\n target: auto\n threshold: 1%\n\n php:\n paths:\n - includes\n\n dashboard:\n paths:\n - packages/dashboard/src\n\n dashboard.unit:\n paths:\n - packages/dashboard/src\n flags:\n - unittests\n\n dashboard.karma:\n paths:\n - packages/dashboard/src\n flags:\n - karmatests\n\n editor:\n paths:\n - packages/story-editor/src\n\n editor.unit:\n paths:\n - packages/story-editor/src\n flags:\n - unittests\n\n editor.karma:\n paths:\n - packages/story-editor/src\n flags:\n - karmatests\n\n # Patch-level coverage (how well is the PR tested)\n patch:\n default:\n base: auto\n # Disable once code base is more mature.\n informational: true\n only_pulls: true\n target: auto\n threshold: 50%\n\n# Pull request comments\n# See https://docs.codecov.io/docs/pull-request-comments\ncomment: false\n\n# See https://docs.codecov.io/docs/ignoring-paths\nignore:\n - bin\n - tests\n - .phpstorm.meta.php\n - scoper.inc.php\n - web-stories.php\n - uninstall.php\n - includes/namespace.php\n - includes/compat\n - includes/polyfills\n - includes/templates\n - includes/AMP/Integration/AMP_Story_Sanitizer.php\n - includes/REST_API/Stories_Settings_Controller.php\n - includes/REST_API/Stories_Users_Controller.php\n - packages/e2e-tests\n - packages/e2e-test-utils\n - packages/eslint-import-resolver\n - packages/fonts/scripts\n - packages/jest-amp\n - packages/jest-puppeteer-amp\n - packages/jest-resolver\n - packages/karma-failed-tests-reporter\n - packages/karma-fixture\n - packages/karma-puppeteer-client\n - packages/karma-puppeteer-launcher\n - packages/migration/scripts\n - packages/templates/scripts\n - packages/test-utils\n - '**/storybookUtils'\n - '**/testUtils'\n" }, { "path": "composer.json", "content": "{\n \"name\": \"googleforcreators/web-stories-wp\",\n \"description\": \"Visual storytelling for WordPress.\",\n \"license\": \"Apache-2.0\",\n \"type\": \"wordpress-plugin\",\n \"homepage\": \"https://github.com/googleforcreators/web-stories-wp\",\n \"require\": {\n \"php\": \"^7.4 || ^8.0\",\n \"ext-dom\": \"*\",\n \"ext-iconv\": \"*\",\n \"ext-json\": \"*\",\n \"ext-libxml\": \"*\",\n \"ext-mbstring\": \"*\",\n \"ampproject/amp-toolbox\": \"*\",\n \"ampproject/amp-wp\": \"dev-develop\",\n \"enshrined/svg-sanitize\": \"^0.22.0\",\n \"mcaskill/composer-exclude-files\": \"^4.0\",\n \"symfony/polyfill-mbstring\": \"^1.18\"\n },\n \"require-dev\": {\n \"automattic/vipwpcs\": \"^3.0.0\",\n \"dealerdirect/phpcodesniffer-composer-installer\": \"^1.0.0\",\n \"ergebnis/composer-normalize\": \"^2.28\",\n \"humbug/php-scoper\": \"^0.17.5\",\n \"php-stubs/woocommerce-stubs\": \"^10.0\",\n \"php-stubs/wordpress-tests-stubs\": \"^6.1.1\",\n \"phpcompatibility/phpcompatibility-wp\": \"^2.1\",\n \"phpmd/phpmd\": \"^2.9\",\n \"phpstan/extension-installer\": \"^1.1\",\n \"phpstan/phpstan-deprecation-rules\": \"^2.0.1\",\n \"phpstan/phpstan-phpunit\": \"^2.0.1\",\n \"roave/security-advisories\": \"dev-latest\",\n \"sirbrillig/phpcs-variable-analysis\": \"^2.8\",\n \"slevomat/coding-standard\": \"^8.0.0\",\n \"sniccowp/php-scoper-wordpress-excludes\": \"^6.0\",\n \"swissspidy/phpstan-no-private\": \"^1.0.0\",\n \"szepeviktor/phpstan-wordpress\": \"^2.0.0\",\n \"wp-coding-standards/wpcs\": \"^3.0.0\",\n \"yoast/wp-test-utils\": \"^1.0.0\"\n },\n \"suggest\": {\n \"ext-curl\": \"Used for modifying cURL requests in CORS proxy\"\n },\n \"repositories\": [\n {\n \"type\": \"vcs\",\n \"url\": \"https://github.com/ampproject/amp-wp\",\n \"no-api\": true\n }\n ],\n \"prefer-stable\": true,\n \"autoload\": {\n \"psr-4\": {\n \"AmpProject\\\\\": \"vendor/ampproject/amp-wp/lib/common/src\",\n \"AmpProject\\\\Optimizer\\\\\": \"vendor/ampproject/amp-wp/lib/optimizer/src\",\n \"Google\\\\Web_Stories\\\\\": \"includes\"\n }\n },\n \"autoload-dev\": {\n \"psr-4\": {\n \"Google\\\\Web_Stories\\\\PHPStan\\\\\": \"tests/phpstan/src\",\n \"Google\\\\Web_Stories\\\\Tests\\\\Integration\\\\\": \"tests/phpunit/integration/includes\",\n \"Google\\\\Web_Stories\\\\Tests\\\\Shared\\\\\": \"tests/phpunit/shared\",\n \"Google\\\\Web_Stories\\\\Tests\\\\Unit\\\\\": \"tests/phpunit/unit/includes\"\n }\n },\n \"config\": {\n \"allow-plugins\": {\n \"civicrm/composer-downloads-plugin\": true,\n \"composer/installers\": true,\n \"cweagans/composer-patches\": true,\n \"dealerdirect/phpcodesniffer-composer-installer\": true,\n \"ergebnis/composer-normalize\": true,\n \"mcaskill/composer-exclude-files\": true,\n \"phpstan/extension-installer\": true\n },\n \"discard-changes\": true,\n \"platform\": {\n \"php\": \"7.4\"\n },\n \"sort-packages\": true\n },\n \"extra\": {\n \"enable-patching\": true,\n \"exclude-from-files\": [\n \"ampproject/amp-wp/includes/bootstrap.php\"\n ],\n \"installer-disable\": true,\n \"patches\": {\n \"humbug/php-scoper\": {\n \"Fix using null as array key\": \"./patches/humbug-php-scoper-php85.diff\"\n },\n \"thecodingmachine/safe\": {\n \"Fix explicit nullable errors\": \"./patches/thecodingmachine-safe-nullable.diff\"\n }\n }\n },\n \"scripts\": {\n \"post-install-cmd\": [\n \"@prefix-dependencies\"\n ],\n \"post-update-cmd\": [\n \"@prefix-dependencies\"\n ],\n \"phpcbf\": \"phpcbf --severity=1\",\n \"phpcs\": \"phpcs --severity=1\",\n \"phpmd\": \"phpmd . text phpmd.xml\",\n \"phpstan\": \"phpstan analyse --memory-limit=2048M\",\n \"prefix-dependencies\": [\n \"php-scoper add-prefix --output-dir=./third-party --force --quiet\",\n \"echo '{ \\\"autoload\\\": { \\\"classmap\\\": [\\\"\\\"] } }' > ./third-party/composer.json\",\n \"@composer dump-autoload --working-dir ./third-party --no-dev --classmap-authoritative\",\n \"sed -i'.bak' -e 's/Composer\\\\\\\\Autoload/Google_Web_Stories_Composer\\\\\\\\Autoload/' third-party/vendor/composer/*.php && rm -rf third-party/vendor/composer/*.php.bak\",\n \"echo '{ \\\"autoload\\\": { \\\"classmap\\\": [\\\"\\\"], \\\"files\\\": [\\\"polyfills/mbstring.php\\\"] } }' > ./includes/composer.json\",\n \"@composer dump-autoload --working-dir ./includes --no-dev --classmap-authoritative\",\n \"sed -i'.bak' -e 's/Composer\\\\\\\\Autoload/Google_Web_Stories_Composer\\\\\\\\Autoload/' includes/vendor/composer/*.php && rm -rf includes/vendor/composer/*.php.bak\"\n ]\n }\n}\n" }, { "path": "docs/README.md", "content": "# Technical Documentation\n\n## Introduction\n\n* [Getting Started](./getting-started.md)\n* [Glossary](./glossary.md)\n\n## Contributing\n\n* [Onboarding](./onboarding.md)\n\n## Maintenance\n\n* [CDN Assets](./cdn.md)\n\n## Development\n\n* [Accessibility Guidelines](./accessibility-guidelines.md)\n* [Architecture](./architecture.md)\n* [Browser and device support](./browser-support.md)\n* [Code Style](./code-style.md)\n* [Environment Variables](./environment-variables.md)\n* [Migrations](./migrations.md)\n* [Development Tools](./devtools.md)\n* [Feature Flags](./feature-flags.md)\n* [Design Docs](./design-docs.md)\n* [External Template Creation](./external-template-creation.md)\n* [Page Templates](./page-templates.md)\n\n## Testing\n\n* [Manual Testing (QA)](./testing-qa.md)\n* [Unit Tests](./unit-tests.md)\n* [Integration Tests (Karma)](./integration-tests.md)\n* [End-to-End Tests](./e2e-tests.md)\n* [Accessibility Testing](./accessibility-testing.md)\n* [Testing Environments](./testing-environments.md)\n\n## Tooling & Infrastructure\n\n* [Local Environment](./local-environment.md)\n* [Workflows](./workflows.md)\n\n## WordPress Developers\n\n* [Embeds](./web-stories-embeds.md)\n\n## Third-Party Integrations\n\n### Dashboard\n\n* [Getting Started](./third-party-integration/dashboard/getting-started.md)\n* [API Callbacks](./third-party-integration/dashboard/api-callbacks.md)\n* [Integration Layer](./third-party-integration/dashboard/integration-layer.md)\n* [Tutorial](./third-party-integration/dashboard/tutorial.md)\n\n### Story Editor\n\n* [Getting Started](./third-party-integration/story-editor/getting-started.md)\n* [API Callbacks](./third-party-integration/story-editor/api-callbacks.md)\n* [Integration Layer](./third-party-integration/story-editor/integration-layer.md)\n* [Tutorial](./third-party-integration/story-editor/tutorial.md)\n" }, { "path": "docs/accessibility-guidelines.md", "content": "# Accessibility Guidelines\n\nThis project follows web accessibility practices and patterns outlined by [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) to make the application more accessible to people with disabilities or people using assistive technologies.\n\nPlease submit a ticket if any discrepancies are seen that will be detrimental the accessibility of this application.\n\n## Special Concerns\n\n### Dynamically changing content with Javascript\n\nWhen a portion of a page is updated with JavaScript, the update is usually highlighted with animation and bright colors, and is easy to see. But if you don’t have the ability to see the screen, you don’t know this has happened, unless the updated region is marked as an [ARIA live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions).\n\nThe `useLiveRegion` hook is a simple tool that creates and appends an ARIA live notifications area to the element where developers can dispatch text messages.\n\nAssistive technologies will automatically announce any text change in this area. This ARIA live region has an ARIA role of “status” so it has an implicit aria-live value of polite and an implicit aria-atomic value of true.\n\n**Note**: It’s also possible that all the region content will be announced after an update, if the ARIA live region is too large. Please only provide users with just a simple, concise message.\n\n### Testing Concerns\n\nPlease visit the [accessibility testing](./accessibility-testing.md) documentation for more information.\n" }, { "path": "docs/accessibility-testing.md", "content": "# Accessibility Testing\n\n## Manual Testing\n\n### Resources\n\n* [Introduction to Keyboard Navigation](https://rianrietveld.com/2016/05/keyboard/)\n\n### Screen Reader\n\n**macOS**: VoiceOver (built-in)\n**Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (free)\n**ChromeOS**: ChromeVox\n**Browser**: [ChromeVox Classic](https://chrome.google.com/webstore/detail/chromevox-classic-extensi/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) (no longer supported, so use with care, and perhaps only in combination with NVDA/VoiceOver\n\n### VoiceOver\n\nOn a MacBook, press CMDF5 to enable VoiceOver. You can configure VoiceOver using the built-in VoiceOver Utility.\n\nNavigation: Control + Option is the VoiceOver key.\n\nKey | Behavior\n-- | --\nVoiceOver key + left/right arrow | move around the page\nVoiceOver key + command + H | skip to headings\nVoiceOver key + command + J | skip to the next control\nControl | stop verbalization\nVoiceOver key + H > H | display a full list of shortcuts\nVoiceOver key + U | open rotor (which allows you to customize navigation and focus on browser content inside Chrome)\nVoiceOver key + Space | interact with an element\n\nNote: make sure to [enable full keyboard access](http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/) in the macOS system prefs.\n\n### NVDA\n\nTo configure NVDA, press Insert + N or Caps Lock + N and navigate to Preferences.\n\nKey | Behavior\n-- | --\nNVDA key + Arrow | move around the page\nNVDA key + H | skip to headings\nNVDA key + B | skip to buttons\nControl | stop verbalization\n\nMore shortcuts can be found on [WebAIM.org](https://webaim.org/resources/shortcuts/nvda).\n\n### General Info\n\n#### Interaction Modes\n\nThere are two different interaction modes that a screen reader can be navigating in: forms mode and application mode. If keys suddenly stop doing what you expect them to do, you may have unintentionally triggered a mode switch. You likely should restart your screen reader.\n\nSee [Understanding screen reader interaction modes](https://tink.uk/understanding-screen-reader-interaction-modes/) for more information.\n\n#### Accessibility Tree\n\nThe browser converts the DOM tree into an accessibility tree, which is what screen readers interact with. In Chrome, you can view the accessibility tree for easier debugging by going to `chrome://accessibility`.\n\n### Dev Tools\n\nCheck out the [Chrome Dev Tools Accessibility Reference](https://developers.google.com/web/tools/chrome-devtools/accessibility/reference).\n\nThere's also an [aXe extension](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd) that complements the DevTools built-in feature.\n\n## Unit Tests\n\nUse the `toHaveNoViolations` matcher provided by `jest-axe` to verify that a component does not have any accessibility issues. Example:\n\n```js\nfunction MyAwesomeComponent() {\n // ...\n}\n\nit('should render with no accessibility issues', async () => {\n const { container } = render();\n const results = await axe(container);\n expect(results).toHaveNoViolations();\n});\n```\n\n## Integration Tests\n\nThere's also a `toHaveNoViolations` matcher available in the Karma test suite. Example:\n\n```js\nit('should render with no accessibility issues', async () => {\n fixture = new Fixture();\n await fixture.render();\n await expectAsync(fixture.my.custom.element.node).toHaveNoViolations();\n});\n```\n" }, { "path": "docs/animations.md", "content": "# Animations\n\nAnimations currently reside in `packages/animation`. The top level logic is held in `packages/animation/src/components/provider.js`. This package is responsible for taking a serializable array of animations objects and transforming the objects into WAAPI & AMP animations as well as exposing aggregate animation methods: `pause`, `play`, etc\n\n**Note:** Editing and updating the serializable array of animation objects is considered part of the story editor and held on the page level in the story reducer state.\n\n## Generating an Animation from a Serializable Animation Object\n\nOur serializable animation objects currently have this structure:\n\n```js\n// sample animation object\nconst sampleAnimationObject = {\n id, // unique identifier for this animation\n type, // type of animation, `blink`, `bounce` etc.\n targets, // what elements in the story this animation is targeting\n\n //...args, whatever args this type of animation takes ie `ease` | `duration`\n ease,\n panDir,\n // etc\n};\n```\n\nThese objects are managed within the story reducer and passed to the animation provider. The animation provider then generates animations by passing this data to the function `AnimationPart(..)` located in `packages/animation/src/parts/index.js`. `AnimationPart(..)` maps the animations instantiation args to a generator function that will generate keyframes, WAAPI animation targets, AMP animation targets, etc.\n\n### Animation Parts & Animation Effects\n\nThere are 2 types of animation generators we have in the editor, the first is an `Animation Part`.\n\n#### Animation Parts\n\nAnimation Parts are more atomic animations that animate one style property and are more configurable. Animation parts are located in `packages/animation/src/parts`. Animation parts are more granular and unopinionated than Animation Effects. \n\ni.e. the `zoom` animation part can animate an elements scale from one value to any other value.\n\n\n#### Animation Effects\n\nThe second type of animations we have are `Effects`. Effects are more complex and opinionated. They are located in `packages/animation/src/effects`. Effects can compose multiple Animation Parts and often take more specified arguments as well as altering keyframe values depending on the element they're being applied to. \n\ni.e. The Background Pan animation effect takes the current offset & zoom of the background image into consideration so the user can't pan the background image past the borders of the page.\n\n#### Utilization of Parts & Effects within the Editor\n\nThe current story editor only uses `Effects` directly. The effects can be seen in the animation selector in the editor when editing an elements style.\n\n#### Deviation in Spec from AMP Story Animation Presets\n\nOur effects roughly mirror [amp_story_animations](https://amp.dev/documentation/examples/visual-effects/amp_story_animations/) but slightly deviate from them. \n\nThe primary deviations in spec come from adding more protection so users don't enter a \"bad\" state with their animation, as well as supporting the concept of background element animations. AMP Stories don't deliniate between background and foreground elements so this behavior is unique to stories created with story editor.\n\n## Parity Between Editor & Output\n\nThe generated animations share common keyframes between two formats, AMP & WAAPI ([Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)). Parity here is essential so generated amp stories don't deviate from what the user is viewing in the editor when editing & adding animations to a story page.\n\nThe WAAPI animations are used to apply animations to elements within the editor, while the AMP animations are used to apply animations to the generated story. You can view the generated story by clicking `preview` in the editor (next to the `publish` & `save` buttons).\n\n## Integration into the Editor & Output\n\n`packages/animation/src/components` contains the components used to animate elements within the editor. \n\nThe top level logic is contained in the `packages/animation/src/components/provider.js`, which you can see integrated into the story editor at `packages/story-editor/src/components/canvas/displayLayer.js`. `` takes the story elements & animations, interprets them and applies them to elements.\n\nTarget DOM elements are applied to story element components through animation wrappers. You can see `` applied to display layer elements in the story editor through `packages/story-editor/src/components/canvas/displayElement.js`. You can see `` applied to the generated AMP Story element through `packages/output/src/element.js`.\n\n## Misc Notes & History\n\n### Single Animation Target\n\nIn early specs for animations, we allowed a single animation to have multiple targets (be applied to multiple elements), since then, we have changed this spec to only allow an animation to have a single target element. This new spec is manually enforced in the editor code between the story reducer and the animation effect chooser. \n\nRemnants of this scope change can be seen in the serializable animation objects held in the story reducer state. These animations still take an array of targets even though that array should only ever hold one target while in use in the editor.\n\n### Early Timeline Prototype\n\nFor the initial animation & template implementation we were supporting very complex animations for the templates. Creating these template animations necessitated an internal timeline tool to compose animation parts manually on each template. Since then, we've simplified animations for users and tried to make them parallel the AMP Story Animation presets\n\nIf we do introduce an animation timeline to the editor in the future, here's the reference to the PR where we took out the internal timeline tool:\n[#7067](https://github.com/GoogleForCreators/web-stories-wp/pull/7067)\n\nThe commit hash right before that PR to remove the tool on main is `9b202aa628c6e44`. If you get a local version of that commit hash running, you can view the internal animation timeline tool by opening up the dashboard and navigating to `/story-anim-tool` in the url bar.\n\n" }, { "path": "docs/architecture.md", "content": "# Architecture\n\n## Design Principles\n\nThe story editor’s architecture follows the following design principles (amongst other more generic ones):\n\n**Whitelabel**:\nThe editor is written from scratch as a modern React codebase, with only thin layers (usually REST endpoints) connecting it to the underlying CMS. This careful design makes it possible to quickly port the editor to subsequent CMS’, beyond WordPress.\n\n**Touch-friendly**:\nThe codebase does not discriminate when it comes to mouse or touch, and uses universal pointer events, touch-friendly tap targets and alternatives for hover UI to work across touch screens, touch pads and mouse.\n\n**Responsive**:\nThe editor does not expect to run full screen, and can adapt to small and very large screen sizes, from iPad to 6K monitors.\n\n**Extensible**:\nThe editor ships with the minimum viable set of media controls, document-level settings, analytics and so on. We’ll produce various integration points to extend the functionality of the editor (media, SEO, …).\n\n**Accessible**:\nMost WYSIWYG editors are not keyboard or screen-reader friendly, and many interactions are not defined in web accessibility specs. This doesn’t stop us from making it a clear goal to provide an excellent experience to the broadest user base possible.\n\n**Smooth**:\nPerformance is not a recommendation, but a hard requirement. All user actions must have a visual response in less than 100ms, and continuous animation (like scrolling etc.) needs to update at 60fps generally, and 30 fps as fallback (no in-between).\n\n## Browser Support\n\nSee [detailed docs](./browser-support.md) on browser and device support.\n\n## Editor\n\n* [Canvas Layering](./canvas.md)\n" }, { "path": "docs/browser-support.md", "content": "# Browser and device support\n\nWe support roughly the same set of browsers as the AMP Project to align with the AMP story runtime, with additional form factor limitations. In practice, this means:\n\n* The latest **two versions of all major browsers** (currently Chrome, Firefox, Edge, Safari and Opera)\n* We support **desktop & tablet versions** of these respective browsers\n* We accept fixes for all browsers with market share greater than 1 percent\n\n**Internet Explorer** is explicitly **not** supported.\n" }, { "path": "docs/canvas.md", "content": "# Canvas\n\n## Layers\n\n![Canvas Layers](https://user-images.githubusercontent.com/726049/72654503-bfffe780-3944-11ea-912c-fc54d68b6100.png)\n" }, { "path": "docs/cdn.md", "content": "# CDN\n\nLarge assets to be used by the plugin are hosted on the [wp.stories.google](https://wp.stories.google) site instead of being bundled with the plugin.\n\nThis includes, but is not limited to, assets for these areas:\n\n* Plugin activation message\n* Get Started story (FTUE)\n* Templates\n* Help Center (FTUE)\n\nAssets are versioned. Whenever new assets have been added, or existing assets modified, the version will be incremented upon the next release.\n\n## Git LFS\n\nTo keep repository size reasonable, CDN assets are stored with [Git Large File Storage (LFS)](https://docs.github.com/en/github/managing-large-files/about-git-large-file-storage).\n\nIn order to be able to add new assets, you have to [install Git LFS](https://docs.github.com/en/github/managing-large-files/installing-git-large-file-storage) on your machine.\n\nYou can download it from [git-lfs.github.com](https://git-lfs.github.com/) (or use `brew install git-lfs` if you're on Mac).\n\nVerify that the installation was successful:\n\n```bash\n$ git lfs install\n> Git LFS initialized.\n```\n\n**Note:** If the above command prints warning regarding pre-existing Git hooks, run `git lfs update --manual` for instructions on how to merge hooks.\n\n## Adding Assets\n\n**Important:** Make sure Git LFS is installed!\n\nFirst, add the new assets to the CDN by following these steps:\n\n1. Clone the [GoogleForCreators/wp.stories.google](https://github.com/GoogleForCreators/wp.stories.google) repo.\n2. Modify/add assets as desired in the `public/static/main` folder.\n3. Create a new pull request with these changes.\n\n## Usage in the plugin\n\nBy default, the plugin will load assets from the `public/static/main` folder.\n\nOnly production builds released on WordPress.org will reference the versioned folder, e.g. `puiblic/static/123`.\n\n## Plugin Release\n\nUpon release, the `public/static/main` folder is compared against the latest version.\nIf there are changes in `main`, the folder is copied to `public/static/`.\n" }, { "path": "docs/checklist.md", "content": "# Checklist \n\nThe Prepublish Checklist to help users make the best Stories possible.\n\n## Logic \n\n- On an empty story none of the checklist categories are visible\n- When a story has more than one page the design and accessibility sections are visible\n- When a story has more than 4 pages the high priority section is also available. \n- If a user attempts to publish a story that's less than 5 pages they'll get a prompt to review the checklist first. That exposes all of the checklist sections. \n\n## Structure\n\n- All checks are nested in checklist/checks, the logic and requirements for each check are stored here. They render their own component based on the check and that component is given to the checklist category to render making the list self contained.\n\n## Adding a new check\n\n- Follow patterning in `checklist/checks`. The logic for the check should be kept internal to the check itself. \n- Give it a unique name when hooking into `useRegisterCheck`, this is what tracks issue counts.\n- Tests for checks are stored in `checklist/checks/test`. \n\n## Context\n\nComes in three sections. You need varying degrees of access depending on where you are in the app. \n\n- CheckpointProvider: Wraps around Layout so that the publish button also has access to the current checkpoint. If requirements are met then a dialog appears prompting the user to review the checklist before publishing.\n- ChecklistProvider: Wraps around the carousel so that the toggle buttons in the secondary menu know when the checklist is open and the other popup menus there (help center) can respect it. \n- ChecklistCountProvider, ChecklistCategoryProvider: Wrap around various parts of the checklist itself to provide counts of issues.\n\n## Roles\n\nDepending on the user's `role`, the user may or may not be able to fix specific checklist items. A checklist card will be hidden if the user is unable to fix the issue.\n\nThis is outlined in the table below:\n\n|Story issue/card|Role(s) necessary to resolve the issue|\n|--|--|\n|Story has no poster image attached|`hasUploadMediaAction`|\n|Increase poster image's size|`hasUploadMediaAction`|\n|Increase poster images's aspect ratio|`hasUploadMediaAction`|\n|Increase publisher logo size|`hasUploadMediaAction`|\n|Video missing poster image|`hasUploadMediaAction`|\n|Video not optimized|`hasUploadMediaAction`|\n|Video element resolution too low|`hasUploadMediaAction`|\n|Media element resolution too low|`hasUploadMediaAction`|\n|Video element missing captions|`hasUploadMediaAction`|\n\n## Future Improvements\n\n- Now that the checklist has self contained checks there's room to improve perf on one off situations. \n- Add role based checks \n" }, { "path": "docs/code-style.md", "content": "# Code Style\n\n## Formatting\n\nLinting is done through [ESLint](https://eslint.org/), code formatting is handled by [Prettier](https://prettier.io/), but integrated with ESLint.\n\n## Organizing Components\n\nRule of thumb: small components belong to `index.js` file.\nLarger ones should be split up and moved in a folder, where `index.js` exports the public parts of it.\n\n## Naming Conventions\n\n* Use `camelCase` for file names\n* Use `PascalCase` for component names (components should always be named!)\n" }, { "path": "docs/design-docs.md", "content": "# Design docs\n\nMost of these docs are in Google Docs for ease of modification and commenting.\n\n* [Story Editor e2e Testing Ideas](https://docs.google.com/document/d/1kKu8QRPYNtLjhc3botd4sEIwPnUSemLXFyNPIw8Pf50/edit#)\n" }, { "path": "docs/design-panel-push-update-flow.md", "content": "# Design Panel Element Update Data Flow\n\nBelow is a rough outline of the data flow following input change updates in the design panel to how they update the element in the top level story provider. Most of this code can be found in `packages/story-editor/src/components/style/designPanel.js` :\n\n```mermaid\nflowchart TB\n subgraph story_reducer[story reducer]\n direction LR\n subgraph ACTION\n direction TB\n L[UPDATE_ELEMENTS] --> M[Story Updated]\n end\n end\n subgraph design_panels[StylePanels]\n subgraph design_panel_state[State]\n direction TB\n design_panel_state_el_updates((elementUpdates Array))\n design_panel_state_el_handlers((presubmitHandlers Array))\n end\n subgraph design_panel_callbacks[Callbacks]\n direction LR\n subgraph submit_handler[submit handler]\n subgraph SUBMIT [ ]\n direction TB\n E[onSubmit] --> F[[internalSubmit]]\n F --> G[[apply presubmit element mutations on all staged elementUpdates]]\n G --> H[[onSetProperties]]\n H --> I[updateElementsById]\n end\n end\n subgraph submit_event[submit event]\n subgraph DOM EVENT FIRED [ ]\n direction TB\n K{Dispatch Event - 'submit'}\n end\n end\n subgraph push_update[pushUpdate called]\n subgraph INPUT ONCHANGE[ ]\n direction TB\n A[pushUpdate or pushUpdateForObject] --> |update, submit| B[[setElementUpdates - Add update to update queue]]\n B -->|submit == false| C[elementUpdates - locally stored updates]\n B --> |submit == true| D[submit]\n D --> J[[setTimeout to dispatch 'submit' event]]\n end\n end\n end\n end\n push_update .-> submit_event\n submit_event .-> submit_handler\n design_panels .-> story_reducer\n```\n\n## Current Usage\n\nMost of the time, we are passing `submit` as `true` for the `pushUpdate(update, submit)` or `pushUpdateForObject(...)` callback args. The current setup is mainly used so the presubmit hooks can alter an update to an element before sending the element updates to the story reducer. Most precommit hooks do things like clamp a value within a certain range, or resize the text element depending on updates to text properties.\n\n" }, { "path": "docs/design-system.md", "content": "# Design System\n\n## Overview\n\nWeb Stories exists as two apps right now, the editor and the dashboard. Both have their own set of components that they are built off of. Now that we have a robust design system [in Figma](https://www.figma.com/file/bMhG3KyrJF8vIAODgmbeqT/Design-System?node-id=1906%3A0), we won't need to duplicate foundational and base components by having separate copies in the editor and dashboard. The idea here is to make this transition as painless as possible, no massive structural changes. This is a consolidation of components and themes.\n\n## What goes in the design system?\n\nThe Design System is **only** for shared basics and components. In [atomic design terms](https://bradfrost.com/blog/post/atomic-web-design) we are sharing atoms, molecules and (some) organisms.  If it is a small pattern that’s repeated in a more complicated structure (like a menu that’s used in a dropDown, a search component and a popover menu) then that structure should exist in the design system. If it’s shared across both the editor and the dashboard, it should exist in the design system - like a button or a dialog.\n\nIf it’s something complex only used by the editor, say the color picker, which uses a slider and some other smaller components in the design system, the color picker would live in the editor because it is not shared by the dashboard. Things that are not easily generalized should not live in the design system.\n\n## Theme\n\nThe design system contains a full new color palette and theme. The structure is changing a little bit to try and keep things more organized. You can dig into the app [packages/design-system/src/theme](../packages/design-system/src/index.js) to see organization. Here’s brief overview of the organization to contextualize what you’re looking at.\n\n1. Colors, Typography, Borders, Breakpoints are in separate files and all added to the [theme index](../packages/design-system/src/theme/index.js) that can be ingested at the root of each app. This file separation makes it easier to find theme values for developers who prefer to look in source code for the value they need.\n2. The new theme provides a dark and a light variant. Dark is the default. All colors are available regardless of variant, but the `theme.colors.bg` and `theme.colors.fg` are what you should gravitate towards using because the light and dark theme colors mirror each other. This will make dark and light mode functionality easier to handle down the road.\n3. Subdirectory called [helpers](../packages/design-system/src/theme/helpers/index.js) - these are styles meant to be quick references for one off components in the editor and dashboard that aren’t in the design system. They’re also used in the design system for continuity.\n4. Subdirectory called [global](../packages/design-system/src/theme/global/index.js) - these are exported as `ThemeGlobals` and should be added to the app root to handle global styles for both the dashboard and editor.\n5. Subdirectory called [constants](../packages/design-system/src/theme/constants/index.js) - these are constants that are used in the dashboard, the editor and across the design system so that we can have a single source of truth. You can import them via `THEME _CONSTANTS`. These include things like static widths of wordPress menus that all projects reference.\n\nIt’s important to note that this is a living resource - we fully anticipate the need to add to the theme as we begin to use it more robustly. The design system is being created iteratively as we go through implementing new designs. If there’s a new need for a helper, add it! If there’s a color lacking, add it in following the existing patterns. Our goal here was to create a base that we could easily keep updated to avoid needless duplication.\n\n## Components\n\nThe hope here is to make the transition to using the components in the design system straightforward and easy. If a component in the design system already existed in the editor or dashboard, that source code was used as a reference for the new one in almost all cases. Props should be the same or similar for components that were based off of existing code.\n\n### Differences from the editor\n\n- Icon buttons are now a button type where you give the icon to the button instead of specific button components.\n- Button refs are readily available\n- Typography is available in molecules - there’s `Display`, `Headline`, `Text`, and `Link` that match the figma specs for type and can take in a styled component `as` of `forwardedAs` to keep HTML semantic but avoid needlessly styling each text element. If you do need to do that there’s a `themeHelpers.expandPresetStyles` or `themehelpers.expandTextPreset` you can look to.\n\n### How to add components to the design system\n\nThere are going to be things missing from the design system. Designs have been in flux and we’ve been adding things as we need them in the redesign. That said, feel free to add missing components. Components live in [design-system/components](../packages/design-system/src/components/index.js). This directory’s pretty flat so that things are easy to find at 1 level.  The general rule here, as with any shared design system, is that we keep things generic and non-opinionated as much as possible so that the usability remains flexible. All components have storybook demos that allow all props passed to the component to be seen as `controls` as well as dark and light versions so that theme colors can be checked.\n\n### Some caveats\n\nButtons!\n-The designs have 3 types of buttons: Primary, Secondary, Tertiary. The difference between a secondary button and a tertiary button is the active state.\n\n- There’s a 4th type of button in the design system called Plain - this button type has no styles, it’s just a reset button without any outline or background color that can be used when we need something to semantically be a button but the designs disagree. This shouldn’t happen often and should be a bit of an escape hatch.\n- Button variants in the designs are square and rectangle. The additional variants of circle and icon were added because there are occasions in the editor and dashboard where there are no shared button styles but the element is expected to behave as a button. By having a button variant of icon we can eliminate the need of having specific exportable buttons like `ArrowDown`.\n- Button types, sizes, and variants (circle, rectangle, square, icon) are all available as [constants](../packages/design-system/src/components/button/constants.js) and importable via `BUTTON_TYPES`, `BUTTON_SIZES`, `BUTTON_VARIANTS` so that we don’t have to worry about miscellaneous strings.\n- Every button combination has a [demo in storybook](https://googleforcreators.github.io/web-stories-wp/storybook/?path=/story/designsystem-components-button--default).\n\nTypography\n\n- [design-system/typography](../packages/design-system/src/components/typography/index.js) has the only nested content. This follows the foundation set up in the designs of `Display`, `Headline`, `Label`, `Paragraph`, `Link`.\n- Each typography type has a set of presets that are stored in the theme and matching constants ([theme/constants/typography](../packages/design-system/src/theme/constants/typography.js)).\n- The typography components are ``, ``, ``, ``, found in [`components/typography`](../packages/design-system/src/components/typography/index.js).\n- Each is a styled component and can be passed whatever element you want it to be with `as` or `forwardedAs` depending on your situation.\n- These are meant to decrease our need to individually style text elements and ensure consistency.\n- There’s a demo for every [type setting in storybook](https://googleforcreators.github.io/web-stories-wp/storybook/?path=/story/designsystem-components-typography-display--default).\n\nCircular dependencies\n\n- If you are adding a component and you need to reference anything in the design-system you’ll need to import it from its nearest location. Do not import it from the top level index.\n- While this works just fine in the app (because you’re outside of the design system), storybook will yell at you because it thinks that imports aren’t loaded in time.\n- As an example, I’m creating this new `` and I need a `` component. I’d need to `import { Text } from ‘../typography’;` not `../` if I’m in `components/taco`.\n\n## Icons\n\nIcons are separated from components and already exported as `ReactComponent` . You can import them via `/theme/icons` or `/theme`.\n\n### How to add icons\n\nIcons are all located directly in the `design-system/icons/` folder. A few things to note:\n\n- All icons are 32x32px and should never be resized or scaled in any way.\n- Icons are named after their symbol, not their function. So a ⚙️  icon is named `Gear`, and not `Settings` or some other function, it might serve.\n- If an icon has several sizes, denote this as a suffix as `GearLarge`, `GearTiny` etc.\n- If an icon has a border, name it either just as `GearOutline` or as the shape of the border - e.g. `GearTriangle` if it's a gear inside a triangular border.\n- Try to group similar icons alphabetically, so name icons e.g. `MagnifierPlus` and `MagnifierMinus` rather than `PlusMagnifier` and `MinusMagnifier`.\n\nThe process for adding an icon is as follows:\n\n1. Export your SVG from Figma by selecting the 32x32px icon boundary box and selecting _\"Export\"_ in the right panel\n2. Add the file to directory [design-system/icons](../packages/design-system/src/icons/index.js)\n3. Export it from the index of that directory as a ReactComponent (please alphabetize the list, thanks!)\n4. Import from the design-system wherever you want to use it.\n" }, { "path": "docs/devtools.md", "content": "# DevTools\n\nThere is a global shortcut (`Command+Shift+Option+J / Control+Shift+Alt+J`) for the editor DevTools.\n\n## Sharing story data\n\nYou can use DevTools to import/export the story data and optionally replace all media resources with placeholders.\n" }, { "path": "docs/e2e-tests.md", "content": "# End-to-End Tests\n\nThis project leverages the [local Docker-based environment](./local-environment.md) to facilitate end-to-end (e2e) testing using [Puppeteer](https://github.com/puppeteer/puppeteer).\n\nAs with the [JavaScript unit tests](./unit-tests.md), Jest is used as the task runner.\n\nTests are written using [`jest-puppeteer`](https://github.com/smooth-code/jest-puppeteer).\n\nTests are written using the [Jest API](https://jestjs.io/docs/en/api) in combination with the [Puppeteer API](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md), facilitated by [`jest-puppeteer`](https://github.com/smooth-code/jest-puppeteer).\n\nTo run the full test suite, you can use the following command:\n\n```bash\nnpm run test:e2e\n```\n\nYou can also watch for any file changes and only run tests that failed or have been modified:\n\n```bash\nnpm run test:e2e:watch\n```\n\nNot using the built-in local environment? Set the `WP_BASE_URL` environment variable to point to your URL of choice.\n\n```bash\nWP_BASE_URL=https://web-stories.local npm run test:e2e\n```\n\n**Note**:\nAll tests run serially in the current process using the `--runInBand` Jest CLI option to avoid conflicts between tests. This is caused by the fact that they share the same WordPress instance.\n\n## Environment Variables\n\nCheck out the [separate document](./environment-variables.md) about supported environment variables for tweaking the E2E tests.\n\n## Debugging\n\nFor debugging purposes, you can also run the E2E tests in non-headless mode:\n\n```bash\nnpm run test:e2e:interactive\n```\n\nNote that this will also slow down all interactions during tests by 80ms. You can control these values individually too:\n\n```bash\nPUPPETEER_HEADLESS=false npm run test:e2e # Interactive mode, normal speed.\nPUPPETEER_SLOWMO=200 npm run test:e2e # Headless mode, slowed down by 200ms.\n```\n\nIt's also possible to enable node's inspector agent for the tests as follows:\n\n```bash\nnpm run test:e2e:debug\n```\n\nSince these tests run both in the node context and the browser context, not all lines of code can have breakpoints set within the inspector client. Only the node context is debugged in the inspector client.\n\nThe code executed in the node context includes all of the test files excluding code within `page.evaluate` functions. This is because the `page.evaluate` functions are executed within the browser context.\n\nTo also debug the browser context, set `PUPPETEER_DEVTOOLS=true` and `PUPPETEER_HEADLESS=false` when running the `test:e2e:debug` script.\nThis will launch the browser with the devtools already open. Breakpoints can then be set in the browser context within devtools. \n\n## Common Mistakes\n\n* Missing `await` on statements/assertions.\n* Not waiting for an element to be present in DOM and to be visible before trying to interacting with it (race conditions).\n\n## Writing Tests\n\n### Useful Resources\n\n* [`jest-puppeteer`](https://github.com/smooth-code/jest-puppeteer#api)\n* [`expect-puppeteer`](https://github.com/smooth-code/jest-puppeteer/blob/master/packages/expect-puppeteer/README.md#api)\n* [Available WordPress-specific test utils](https://www.npmjs.com/package/@wordpress/e2e-test-utils) (e.g. `loginUser`, `visitAdminPage`)\n\n## Test Utilities\n\nSometimes one might want to test additional scenarios that aren't possible in a WordPress installation out of the box. The tests setup allows adding some utility plugins that can be activated during E2E tests.\n\nThese plugins can be added to `packages/e2e-tests/src/plugins` and then activated via the WordPress admin.\n\nTest utilities like `createNewStory()` reside in the `packages/e2e-test-utils/src` folder.\n" }, { "path": "docs/environment-variables.md", "content": "# Environment Variables\n\nThroughout the project some environment variables are in use:\n\n## Application\n\n**DISABLE_PREVENT** (bool):\nSet this environment variable to disable unwanted `beforeunload` dialogs when reloading or closing the browser. Mostly useful during development. Default: `false`\n\n**DISABLE_OPTIMIZED_RENDERING** (bool):\nSet this environment variable to disable optimized rendering for text sets (it will render the actual components instead of images). Required for text sets images generation script. Default: `false`\n\n**DISABLE_QUICK_TIPS** (bool):\nSet this environment variable to prevent quick tips from automatically opening. Default: `false`\n\n## Bundler\n\n**NODE_ENV** (`production`|`development`|`test`):\nDefines the mode webpack and other tools operate in. Automatically set by tests / build tools, usually no need to override manually.\n\n**BUNDLE_ANALYZER** (bool):\nEnables the `webpack-bundle-analyzer` plugin to analyze the final bundle composition. Default: `false`\n\n**BABEL_CACHE_DIRECTORY** (string):\nBabel uses a directory within local node_modules by default. Use the environment variable option to enable more persistent caching.\n\n## E2E Tests\n\n**PUPPETEER_TIMEOUT** (number):\nSet the default Jest timeout for Puppeteer test. It is already increased because these tests are a bit slow due to the browser overhead. Default: `100000` (ms)\n\n**EXPECT_PUPPETEER_TIMEOUT** (number):\nSet default timeout for individual expect-puppeteer assertions. Default: `500` (ms)\n\n**WP_BASE_URL** (string):\nPoint the E2E tests to a different URL, i.e. when not using the built-in Docker environment. Default: `http://localhost:8899`.\n\n**WP_USERNAME** (string):\nUsername to use for logging in during E2E tests. Default: `admin`\n\n**WP_PASSWORD** (string):\nPassword to use for logging in during E2E tests. Default: `password`\n\n**PUPPETEER_PRODUCT** (string):\nEither `chrome` or `firefox`. Default: `chrome`\n\n**PUPPETEER_HEADLESS** (bool):\nWhether to run Puppeteer in headless mode or not. Default: `true`\n\n**PUPPETEER_SLOWMO** (number):\nSlow down all interactions by a certain time for easier debugging. Useful in combination with `PUPPETEER_HEADLESS`. Default: `0` (ms)\n\n**PUPPETEER_DEVTOOLS** (bool):\nWhether to open dev tools during tests. Default: `false`\n\n## Local Environment\n\n**PHP_VERSION** (string):\nPHP version which local environment runs in. Default: `8.2` \n" }, { "path": "docs/external-template-creation.md", "content": "# Creating a new template\n\n## Where things are stored\n\n- The **story JSON representation** for each template is stored in [`packages/templates/src/raw/`](https://github.com/googleforcreators/web-stories-wp/tree/main/packages/templates/src/raw) (in the `main` branch).\n- The **SVGs** used in each template are stored in [`packages/stickers/src/`](https://github.com/googleforcreators/web-stories-wp/tree/main/packages/stickers/src) (in the `main` branch).\n- The (non-SVG) **image & video files** used in each template are stored in [`public/static/main/images/templates/`](https://github.com/GoogleForCreators/wp.stories.google/tree/main/public/static/main/images/templates) (in the [GoogleForCreators/wp.stories.google](https://github.com/GoogleForCreators/wp.stories.google) repo, using [Git LFS](https://git-lfs.github.com/)).\n\n## Overview\n\nTo add a new template to the editor:\n\n1. [Engineer] Commit all SVGs used in the template to the codebase as stickers ([details](#adding-svgs-to-the-codebase-as-stickers)).\n2. [Designer] Create a new story in your shared WP environment and replicate the template design.\n - SVGs should already be available in the Stickers panel from step (1) — click on a sticker to insert it into the story.\n - Upload (drag & drop) images and videos into the story to add them.\n3. [Engineer] Commit all images & videos used in the template to the codebase.\n - Filenames should follow the existing convention e.g. `travel_page9_bg.jpg`.\n - Make sure images are not too large — full-width images should be 1080p, large images should be 720p, and small images should be 480p. See [#6485](https://github.com/googleforcreators/web-stories-wp/pull/6485) for an example.\n - Make sure videos are 720p.\n - Make sure caption files are also committed along with the videos, when available.\n4. [Engineer] Get the story JSON from your shared WP environment, modify its image & video URLs, and integrate it into the codebase (see [details](#get-the-story-json)).\n5. [Both] Verify that new template shows up in the template library and looks as expected.\n\n## Pitfalls\n\n1. Don't upload SVGs as images. SVGs should only be added as stickers in step (1).\n2. Avoid \"`-`\" suffixes on images and videos e.g. `some_image-1.png`. See [details below](#filenames-for-images-and-videos).\n3. Don't add animations to the first page. First page animations are not supported by AMP. [More details](https://wp.stories.google/docs/how-to/animations/#First-Page)\n\n## Detailed steps\n\n### Adding SVGs to the codebase as stickers\n\nTo add new stickers to the codebase, obtain the raw svg file, and view it in your code editor. Paste the contents of the raw svg file into a react component in `packages/stickers/src//.js`.\n\nRemove extraneous attributes on the base `svg` component and make sure your component takes a `style` property that it applies to the base svg element. Also make sure to remove any explicit `height` and `width` attributes and see that they only are applied to the viewbox. Lastly, be sure to add a title for accessibility. By the end, your component should look something like this:\n\n```js\nconst title = __('Some Descriptor', 'web-stories');\nfunction MySticker({ style }) {\n return (\n \"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n {title}\n {/*Contents*/}\n \n );\n}\n```\n\nAt the bottom of the file, make sure there's one default export that exports the svg component and the aspect ratio based off the viewbox as well as the human readable title:\n\n```js\nexport default {\n aspectRatio: width / height,\n svg: MySticker,\n title,\n};\n```\n\nCreate a new `index.js` file under your `` directory and add your new sticker to the export object:\n\n```js\n//...\nexport { default as mySticker } from './mySticker';\n```\n\nThe last step of this process is navigating to `packages/stickers/src/index.js` and adding your new stickers to the default export object:\n\n```js\n//...\nimport * as myStickers from './';\nexport default {\n //...\n ...myStickers,\n};\n```\n\nOnce you've completed this step, your new sticker should now appear with the other stickers appended to the bottom of the shapes panel.\n\n### Inserting stickers (SVGs) into a story\n\nTo add stickers to your template story, go to the `Experiments` page (in the left-hand sidebar under the `Stories` section) and check the `Enable Stickers` checkbox.\n\nOnce turned on, all available stickers in the codebase should be available for selection under our base shapes in the shapes library panel.\n\n### Get the story JSON\n\nTo get the JSON representation of a story in the editor:\n\n1. In the editor, open the story.\n2. Press `Command+Shift+Option+J` (Mac) or `Control+Shift+Alt+J` (Windows/Linux) in the editor.\n3. A dialog will appear where you can copy/paste story JSON.\n4. Check the `Template` checkbox that is present at the top of the dialog.\n\n \"Screenshot\n\n\n#### Alternative\n\nAnother way to get the story JSON is by inspecting the network request that saves the story to the backend.\n\n1. In the editor, open the story.\n2. Open `Chrome DevTools > Network`.\n3. In the editor, click the \"Save draft\" button.\n4. You should see a POST XHR with JSON in the request payload. In that payload JSON, find and right-click the `story_data` field and click `Copy value`.\n5. The story JSON should now be copied to your clipboard and ready to paste into a new file.\n\n### Adding story JSON to the codebase as a new template\n\nOnce you have the story JSON, several code changes are needed to add it to the list of default templates in the editor.\n\n1. In [`packages/templates/src/raw/`](https://github.com/googleforcreators/web-stories-wp/tree/main/packages/templates/src/raw), create a new directory `` for your template. Now add your template's story JSON in a new file e.g. `/template.json`.\n - Make following changes to the template JSON,\n - Reset following extraneous properties,\n - `current: null`\n - `selection: []`\n - `story: {}`\n - First change all image & video URLs to use `__WEB_STORIES_TEMPLATE_BASE_URL__` as the base, which then will be replaced by the CDN url.\n - Ensure to also change poster image URLs to use `__WEB_STORIES_TEMPLATE_BASE_URL__`.\n - Change `posterId` and `id` for all elements of type image and video to `0`, these are the WP media ids that are not used in templates.\n - Make sure that the images and videos have appropriate title and alt text set for better accessibility.\n\n - If the story JSON is copied from the devTools dialog as mentioned in [Get The Story JSON](#get-the-story-json), the JSON will have some of the changes already present.\n - The 'Template' checkbox does following:\n - Resets extraneous properties.\n - Changes resource URLs to use replaceable CDN constant\n - Resets `sizes` property for images to `[]`.\n - Resets all `id` and `posterId` to 0 for image and video type resources.\n\n NOTE: Check all resource URLs and properties are set properly before committing the template.\n \n2. Create a new file `metaData.js` in your newly created `` directory. Your `/metaData.js` file would then look something like this with object corresponding to the new template and properties `id`, `title`, `tags`, `colors`, `creationDate`, etc. \n\n ```javascript\n //...\n /**\n * External dependencies\n */\n import { __, _x } from '@googleforcreators/i18n';\n\n export default {\n slug: 'template-name',\n creationDate: '2021-07-12T00:00:00.000Z',\n title: _x('Your Template Title', 'template name', 'web-stories'),\n tags: [\n _x('Tags', 'template keyword', 'web-stories'),\n ],\n // Array of color objects with name and hex values.\n colors: [\n { label: _x('Blue', 'color', 'web-stories'), color: '#1f2a2e' },\n ],\n description: __(\n 'A short text describing your story template.',\n 'web-stories'\n ),\n vertical: _x('Vertical name', 'template vertical', 'web-stories'),\n };\n ```\n\n3. Create a new file `index.js` in your newly created `` directory and import the `template.json` file and `metaData.js` file. Your `/index.js` file would then look something like this:\n\n ```javascript\n //...\n /**\n * Internal dependencies\n */\n import { default as template } from './template';\n import { default as metaData } from './metaData';\n\n export default {\n ...metaData,\n ...template,\n };\n ```\n\n4. In [`packages/templates/src/getTemplates.ts`](https://github.com/googleforcreators/web-stories-wp/blob/main/packages/templates/src/getTemplates.ts), add `\"\"` to the string array in the `getTemplates()` function.\n5. Verify in your WP environment that the new template is visible in the editor's \"Explore Templates\" section.\n6. Create a single pull request with all of the changes in steps 1-3.\n\n### Adding SVGs to the codebase as shapes\n\nFirst and foremost, shapes aren't complete svgs, just a single normalized path (coordinates should be defined in a 0->1 space). To accommodate for this, there are a few formatting steps that must be taken in an svg editing software (like illustrator), and a few steps within the codebase to get a proper working path in the editor.\n\n#### Getting your svg to be a single path\n\nSince we must have a single path, we can't utilize any other aspects of the svg spec. This means all shapes must be converted to a single path in the svg editing software of your choosing. For the purposes here, we will outline the steps in illustrator because it's what we've used thus far, but these svg operations should be applicable to other programs as well.\n\n- Open svg file in illustrator\n- Select shape\n- (If there's any stroke) Click on `Object -> Path -> Outline Stroke`\n- Make sure your shape is selected and click `Object -> Compound Path -> Make`\n- Open your code editor to any scratch pad svg file (will just be using this file for copy and pasting, won't save it at all)\n- Select svg in illustrator and copy\n- Paste into your code editor\n\nIn your editor, you should see something like this:\n\n```svg\n\n\n\n\n\n\n\n```\n\nIf your svg markup consists of anything other than a single path, you must go back to your svg editing application and keep playing with it until you can copy the svg into your code editor and it only consists of a single path.\n\nIn the path's `d` attribute you'll see a mix of numbers and letters. The letters are draw commands and the numbers after it specify coordinate arguments for the draw command. Those coordinates are drawn relative to the coordinate space depicted in the `viewBox` attribute. It's important that the path fits nicely in the viewbox. For Illustrator it creates the viewbox & path coordinates based on the bounding box of all selected elements you're copying onto your clipboard. If you need to alter the path to be drawn relative to a slightly larger viewbox, you can always place a square/rectangle (larger than original selected elements) within the selected elements before copying over to your editor to dictate the size of the viewbox and illustrator will update the path coordinates accordingly.\n\n#### Normalizing your svg path\n\nAll the SVG paths in the shapes panel are declared in a 0->1 coordinate space. In theory you could scale down your SVG in illustrator and it would update the path coordinates accordingly, but we found that Illustrator lacks the level of precision needed for large shapes with small details.\nThis can lead to necessary parts of your path getting rounded off. To accommodate for this, we created a little node script you can run your SVG path through and it will normalize the path with a much higher level of precision that won't round off details in your shape.\n\nThis script is available via in `npm run workflow:normalize-path`. You'll need to copy the path and viewbox from your scratchpad svg file and pass them to the command like so:\n\nYou can then run the command like so:\n\n```bash\nnpm run workflow:normalize-path 392 392 \"M392,196c0,108.25-87.75,196-196,196S0,304.25,0,196S87.75,0,196,0S392,87.75,392,196z M196,30 c-44.34,0-86.03,17.27-117.38,48.62C47.27,109.97,30,151.66,30,196s17.27,86.03,48.62,117.38C109.97,344.73,151.66,362,196,362 s86.03-17.27,117.38-48.62C344.73,282.03,362,240.34,362,196s-17.27-86.03-48.62-117.38C282.03,47.27,240.34,30,196,30 M196,0 c108.25,0,196,87.75,196,196s-87.75,196-196,196S0,304.25,0,196S87.75,0,196,0L196,0z\"\n```\n\nIt should output a normalized path like this in the console:\n\n```text\nM 1.000000 , 0.500000 c 0.000000 , 0.276148 -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 S 1.000000 , 0.223852 , 1.000000 , 0.500000 z M 0.500000 , 0.076531 c -0.113112 , 0.000000 -0.219464 , 0.044056 -0.299439 , 0.124031 C 0.120587 , 0.280536 , 0.076531 , 0.386888 , 0.076531 , 0.500000 s 0.044056 , 0.219464 , 0.124031 , 0.299439 C 0.280536 , 0.879413 , 0.386888 , 0.923469 , 0.500000 , 0.923469 s 0.219464 -0.044056 , 0.299439 -0.124031 C 0.879413 , 0.719464 , 0.923469 , 0.613112 , 0.923469 , 0.500000 s -0.044056 -0.219464 -0.124031 -0.299439 C 0.719464 , 0.120587 , 0.613112 , 0.076531 , 0.500000 , 0.076531 M 0.500000 , 0.000000 c 0.276148 , 0.000000 , 0.500000 , 0.223852 , 0.500000 , 0.500000 s -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 L 0.500000 , 0.000000 z\n```\n\n#### Creating a shape from your normalized path\n\nCopy the outputted path from your terminal and navigate to `packages/story-editor/src/masks/constants.js`. In that file create a new key describing your shape in `MaskTypes`. For the shape shown above an apt description would be something like:\n\n```javascript\nexport const MaskTypes = {\n // ...,\n [RING]: 'ring',\n};\n```\n\nThen navigate down to `CLIP_PATHS` and add your normalized path like so:\n\n```javascript\nconst CLIP_PATHS = {\n // ...,\n [MaskTypes.RING]: `M 1.000000 , 0.500000 c 0.000000 , 0.276148 -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 S 1.000000 , 0.223852 , 1.000000 , 0.500000 z M 0.500000 , 0.076531 c -0.113112 , 0.000000 -0.219464 , 0.044056 -0.299439 , 0.124031 C 0.120587 , 0.280536 , 0.076531 , 0.386888 , 0.076531 , 0.500000 s 0.044056 , 0.219464 , 0.124031 , 0.299439 C 0.280536 , 0.879413 , 0.386888 , 0.923469 , 0.500000 , 0.923469 s 0.219464 -0.044056 , 0.299439 -0.124031 C 0.879413 , 0.719464 , 0.923469 , 0.613112 , 0.923469 , 0.500000 s -0.044056 -0.219464 -0.124031 -0.299439 C 0.719464 , 0.120587 , 0.613112 , 0.076531 , 0.500000 , 0.076531 M 0.500000 , 0.000000 c 0.276148 , 0.000000 , 0.500000 , 0.223852 , 0.500000 , 0.500000 s -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 L 0.500000 , 0.000000 z`,\n};\n```\n\nLastly go down to `MASKS` and add an entry for your newly updated mask:\n\n```javascript\nexport const MASKS = [\n // ...,\n {\n type: MaskTypes.RING,\n showInLibrary: true, // mark this as true if you would like the shape to be user facing\n name: _x('Ring', 'shape/mask name', 'web-stories'),\n path: CLIP_PATHS[MaskTypes.RING],\n ratio: 392 / 392, // / \n }\n];\n```\n\nThat's it! After you recompile your application you should now see your new shape show up in the shapes panel of the editor.\n\n\n## Appendix\n\n### Filenames for images and videos\n\nWordPress has a naming convention where if you upload an image with the same name multiple times, it adds a `-x` suffix.\n\n**i.e**\nif I upload `some_image.png` 3 times to the WordPress media upload in the story editor, it will store those images as:\n\n1. `some_image.png`\n2. `some_image-1.png`\n3. `some_image-2.png`\n\nBecause of this, our conversion script will strip the `-x` suffix off of the image source so it can point to the correct image stored in our repo.\n\nThis is an important note to make when naming images for upload into a story as **a `-x` suffix will always be stripped**. This naming convention is reserved for WordPress and will break your template creation if you use it in your image naming.\n" }, { "path": "docs/feature-flags.md", "content": "# Feature flags\n\nThe React apps leverage the [`flagged`](https://www.npmjs.com/package/flagged) library to allow guarding code and components behind flags.\nThis allows hiding unfinished functionality until it is ready to be shown/enabled in the application.\n\n## Adding a feature flag\n\n### PHP changes\n\nIn `includes/Experiments.php`, add a new entry like this in the `get_experiments` method:\n\n```php\n...\n/**\n * Author: @yourGitHubUsername\n * Issue: #12345\n * Creation date: 2020-01-01\n */\n[\n 'name' => 'showEasterEgg',\n 'label' => __( 'Easter Egg', 'web-stories' ),\n 'description' => __( 'Show jumping bunnies', 'web-stories' ),\n 'group' => 'editor',\n],\n...\n```\n\nNotes:\n\n* `group` can be either `dashboard`, `editor`, or `general`, if the feature is used in both places.\n\n### Usage in JavaScript\n\nYou can then use the flag in your code by following the examples in the \n[flagged documentation](https://www.npmjs.com/package/flagged).\n\n\n## Enabling feature flags by default\n\nAt some point, a feature flag will be turned on permanently. To do this, add a `default` field like so:\n\n```php\n...\n/**\n * Author: @yourGitHubUsername\n * Issue: #12345\n * Creation date: 2020-01-01\n */\n[\n 'name' => 'showEasterEgg',\n 'label' => __( 'Easter Egg', 'web-stories' ),\n 'description' => __( 'Show jumping bunnies', 'web-stories' ),\n 'group' => 'editor',\n 'default' => true,\n],\n...\n```\n\nBefore publishing the next release, all remnants of permanently enabled feature flags shall be removed from the code base.\n\n\n## Turning on/off feature flags with the Experiments tab\n\nFeature flags can be managed via a hidden \"Experiements\" tab within the Stories WordPress nav. There you can turn on/off all experiments defined in `includes/Experiments.php`.\n\nTo turn it on, add the following to your `wp-config.php` file.\n\n```php\ndefine( 'WEBSTORIES_DEV_MODE', true );\n```\n" }, { "path": "docs/getting-started.md", "content": "# Getting Started\n\n## Requirements\n\nTo contribute to this plugin, you need the following tools installed on your computer:\n\n- [PHP](https://www.php.net/) - version 7.2 or higher, preferably installed via [Homebrew](https://brew.sh/).\n- [Composer](https://getcomposer.org/) (PHP package manager) - version 2.3 or higher, to install PHP dependencies.\n- [Node.js](https://nodejs.org/en/) (current LTS) - to install JavaScript dependencies.\n- [WordPress](https://wordpress.org/download/) - to run the actual plugin.\n- [Docker Desktop](https://www.docker.com/products/docker-desktop) and [Docker Compose](https://docs.docker.com/compose/install/) - for using the local environment\n\nYou should be running a Node version matching the [current active LTS release](https://github.com/nodejs/Release#release-schedule) or newer for this plugin to work correctly.\nYou can check your Node.js version by typing `node -v` in the Terminal prompt.\n\nIf you have an incompatible version of Node in your development environment, you can use [nvm](https://github.com/creationix/nvm) to change node versions on the command line:\n\n```bash\nnvm install\n```\n\n**Note:** Using `nvm` is recommended, as it makes it easier to stay up-to-date with any Node.js version requirement changes in the project.\n\n## Development\n\nFirst, you need to make sure that all PHP and JavaScript dependencies are installed:\n\nInstall Composer by following [installation instructions](https://getcomposer.org/download/).\n\nMake sure to add `composer` to your `$PATH` if it is not already there. The local environment won't run unless `composer` is in your `$PATH`.\n\n**WSL users** may also need to install `make`. On WSL Ubuntu you should be able to use:\n\n```bash\nsudo apt-get install make\n```\n\nor\n\n```bash\nsudo apt-get install build-essential\n```\n\nTo install all the required composer packages, run:\n\n```bash\ncomposer install\n```\n\n---\n\nTo install all the required npm packages, run:\n\n```bash\nnpm install\n```\n\nWhether you use the pre-existing local environment or a custom one, any PHP code changes will be directly visible during development.\n\nHowever, for JavaScript this involves a build process. To watch for any JavaScript file changes and re-build it when needed, you can run the following command:\n\n```bash\nnpm run dev\n```\n\nThis way you will get a development build of the JavaScript, which makes debugging easier.\n\nFor watching for any JavaScript file changes and automatically refreshing the app in the browser (React Fast Refresh), use:\n\n```bash\nnpm run serve\n```\n\nThis makes for a much better developer experience as you don't have to manually refresh your browser tab every time you make changes.\n\nTo get a production build, run:\n\n```bash\nnpm run build:js\n```\n\n## Local Environment\n\nYou will need a WordPress environment to run the plugin.\nCheck out the [Local Environment](./local-environment.md) document for details on how to set one up.\n" }, { "path": "docs/glossary.md", "content": "# Glossary\n\n**Checklist**:\nThe checklist is a tab in the Design Panel that represents another, cleaner way of browsing through all current errors, warnings and suggestions that originate via helper mode or the editor itself.\n\n**Dashboard**:\nThe CMS portion of the editor. Includes “Dashboard” dashboard page, Template Gallery, Bookmarks.\n\n**Design Panel**: \nThe right-hand sidebar of the editor. The Design Panel is where you modify the properties of the currently selected element or page.\n\n**Element**: \nA type of content that can be added to a page. The most common elements are text, image, video and shape elements.\n\n**Element Panel**:\nThe left-hand sidebar that features media, shapes, animations and other elements that can be added to a page.\n\n**Helper Mode**:\nSpecial assistive mode that when active, offers design suggestions next to the Workspace area to aid the user in producing a beautiful, functional story.\n\n**Page (Canvas)**:\nThe main ‘canvas’ that shows the current story page. This is where most of the action happens, and the user designs via drag & drop and other actions.\nSee also: [Canvas Layering](./canvas.md)\n\n**Text magic**:\nSpecial assistive mode that when active, makes automatic corrections to things involving text, such as text contrast. Its behavior can be modified with the overlay actions that appear when a text element is selected.\n\n**Workspace**:\nThe entire dark gray area, which includes page thumbnails, page and title and publishing/saving-related buttons.\n" }, { "path": "docs/integration-tests.md", "content": "# Integration Tests\n\nKarma + Jasmine are used for running integration tests in the browser.\n\nMore details can be found in the `/karma` folder and the corresponding `README`s.\n\n## Running Karma Tests\n\nTo run the full test suite, you can use the following commands:\n\n```bash\nnpm run test:karma:story-editor -- --headless --viewport=1600:1000\nnpm run test:karma:dashboard -- --headless --viewport=1600:1000\n```\n\nTo run Karma once:\n\n```sh\nnpm run test:karma\n```\n\nTo run Karma in the watch mode:\n\n```sh\nnpm run test:karma:watch\n```\n\nTo run Karma in the headless mode:\n\n```sh\nnpm run test:karma -- --headless\n```\n\nor\n\n```sh\nnpm run test:karma:watch -- --headless\n```\n\n## Custom Matchers\n\nThere are a few custom matchers inspired by Jest and `jest-dom`:\n\n* `toBeEmpty`\n* `toHaveFocus`\n* `toHaveStyle`\n* `toHaveTextContent`\n* `toHaveProperty`\n* `toBeOneOf`\n\nPlus another custom async matcher inspired by [`jest-axe`](https://github.com/nickcolley/jest-axe) to test for accessibility violations:\n\n* `toHaveNoViolations`\n\n## Writing Tests\n\nThere will be times when test must wait for an async function or process. The `waitFor` util from react test library may be used to wait for a condition to be satisfied before running the next part of the test.\n\nWhen an `expect` or any other function within the `waitFor` block throws an error, this util will wait `50ms` before trying again. The `waitFor` helper needs to receive an error in order for it to re-poll.\n\n`waitFor` will continue to re-poll until the timeout limit is reached. By default, the timeout is `1000ms`. `timeout`, `interval` and other `waitFor` options are customizable. [More configuration options](https://testing-library.com/docs/dom-testing-library/api-async/);\n\nThe `findBy` query method is preferred, when applicable, since `findBy` is a combination of the `getBy` query and the `waitFor` util. `findBy` accepts the `waitFor` options as the last argument.\n\nIf `findBy` doesn’t fit your use case, throw an error in the body of `waitFor` while waiting for a condition to be met.\nExamples\n\n```javascript\n const dialogs = await fixture.screen.findAllByRole('dialog', { timeout: 2000 });\n```\n\n```javascript\nawait waitFor(() => {\n if (!node) {\n throw new Error('this will make it so that the waitFor polls until no error is thrown');\n }\n expect(node).toBeTruthy();\n});\n```\n\n### Useful Resources\n\n* [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro)\n* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)\n* [\"Which query should I use?\"](https://testing-library.com/docs/guide-which-query)\n* [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)\n* [React Hooks Testing Library](https://react-hooks-testing-library.com/)\n\n## Debugging Karma tests\n\nTo debug a Karma test, you can follow the following steps:\n\n1. Focus the test you want to debug by change it's `it` to `fit`.\n2. Add `await karmaPause()` command in a desired place in the test. The test\nwill execute all test steps prior to `karmaPause()` and will block.\n3. Run `npm run test:karma:watch`.\n4. Once the Karma window is opened, click on the \"DEBUG\" button in the header.\nThis will open the debug page at [http://localhost:9876/debug.html](http://localhost:9876/debug.html).\n5. Open DevTools. A tip: you can also run Karma with the `--devtools` option\nto open DevTools automatically.\n6. A test can be unblocked by executing `karmaResume()` in the DevTools console.\nA test can be blocked/resumed any number of times using `karmaPause()` and\n`karmaResume()` during the debugging session.\n\n## Browser support\n\nCurrently, only Puppeeter option is configured. It can run Chrome and Firefox browsers.\nIn the near future this may also be expanded to Playwright to support Safari and other\nbrowsers.\n\nFor details on how to customize browser options, see [karma-puppeteer-launcher](./karma-puppeteer-launcher/README.md).\n\nFor details on exposed native browser APIs, see [karma-puppeteer-client](./karma-puppeteer-client/README.md).\n\n## Common issues\n\n### Annoying firewall question: \"Do you want to the application Chromium.app to accept incoming network connections?\"\n\nSee [Puppeteer issue 4752](https://github.com/puppeteer/puppeteer/issues/4752).\n\n```sh\nsudo codesign --force --deep --sign - ./node_modules/puppeteer/.local-chromium/mac-*/chrome-mac/Chromium.app\n```\n\n### Test failure: ResizeObserver loop limit exceeded\n\nSee [ResizeObserver#observe() firing the callback immediately results in an infinite loop](https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006).\n\nIf you are creating a new `observe()` event using the `resize-observer-polyfill` package, wrapping the body of the function which is provided to the `ResizeObserver` constructor with `window.requestAnimationFrame` will prevent the `ResizeObserver loop limit exceeded` error.\n\ne.g.\n\n```javascript\n const observer = new ResizeObserver(() => {\n // requestAnimationFrame prevents the 'ResizeObserver loop limit exceeded' error\n // https://stackoverflow.com/a/58701523/13078978\n window.requestAnimationFrame(() => {\n // handle resize observation\n });\n });\n\n observer.observe(node);\n```\n\nThere is also a `design-system` util called `useResizeEffect` which takes a node ref and a handler function which should be sufficient for resize observation requirements.\n" }, { "path": "docs/local-environment.md", "content": "# Local Environment\n\nCurrently, the two most common ways for setting up a local environment for working on the Web Stories plugin are:\n\n1. Using the provided Docker container, which is also used for running the e2e tests.\n2. Using [Local](https://localwp.com/) \n\nThe former can be set up using the command line, the latter provides an easy-to-use GUI.\n\nLocal also makes it easy to switch PHP & WordPress versions, and supports HTTPS.\nHTTPS is required for some features like video optimization to work properly.\n\n## Docker Container\n\nSince you need a WordPress environment to run the plugin in, the quickest way to get up and running is to use the provided Docker setup.\n\n**Windows user?** It is highly recommended to use Windows Subsystem for Linux (WSL) 2 before trying to set up Docker on Windows. Setups without WSL have not been tested and might not work.\n\nThe following command will automatically verify whether Docker is configured properly and start the local WordPress instance.\n\n```bash\nnpm run env:start\n```\n\nThe WordPress installation should be available at `http://localhost:8899`.\nTo access the WordPress admin, visit `http://localhost:8899/wp-admin` (**Username**: `admin`, **Password**: `password`).\n\nTo later turn off the local environment, you can run:\n\n```bash\nnpm run env:stop\n```\n\nTo bring it back later, run the previous command:\n\n```bash\nnpm run env:start\n```\n\nAlso, if you need to reset the local environment's database, you can run:\n\n```bash\nnpm run env:reset-site\n```\n\n### Specifying PHP Version\n\nIt is also possible to run the local environment in different PHP versions, like so: \n\n```bash\nPHP_VERSION=8.0 npm run env:start\n```\n\n## Custom Environment\n\nIf you use something like [Local](https://localwp.com/), you can simply clone this repository right into your `wp-content/plugins` directory.\n\n```bash\ncd /path/to/your/local/site/wp-content/plugins && git clone git@github.com:googleforcreators/web-stories-wp.git web-stories\n```\n\nUsing symlinks works too, if you prefer having your Git projects in some other folders or if you want to use the Web Stories plugin on multiple environments.\n" }, { "path": "docs/migrations.md", "content": "# Migrations\n\nMigration reducers can and should be written whenever the underlying data model is being changed.\n\nThis way, old stories get updated to the newest version once they're loaded.\n\nSee [`migration/migrate.js`](../packages/migration/src/migrate.js) for details.\n\n**Note**: migration functions should be self-contained and not import anything from outside components as they might change and thus affect the migration. \n" }, { "path": "docs/onboarding.md", "content": "# Onboarding\n\nShort checklist for onboarding of new contributors to the team.\n\nRequirements:\n\n* Email address\n* GitHub username\n\nItems to check:\n\n| Task \t| Who \t| Notes \t|\n|-------------------------------------\t|--------\t|-------------------------------------------------------------------------------------------------------\t|\n| Add to Slack channel \t| XWP \t| \t|\n| Add to shared calendar and meetings \t| XWP \t| \t|\n| GitHub access \t| Google \t| Usually done by @swissspidy. \"Write\" access is usually enough. Engineers also need merge permissions. \t|\n| Figma access \t| Google \t| Usually done by @samitron7 \t|\n| Access to [staging site](https://stories-new-wordpress-amp.pantheonsite.io/) \t| Google \t| Usually done by @swissspidy \t|\n| Access to [QA site](https://stories-qa-wordpress-amp.pantheonsite.io/) \t| Google \t| Usually done by @swissspidy \t|\n| Access to [Percy](https://percy.io/google) \t| Google \t| \t|\n| Add to [mailing lists](https://groups.google.com/g/story-editor-team) \t| Google \t| \t|\n" }, { "path": "docs/page-templates.md", "content": "# Page Templates\n\nPage templates allow people to apply individual pages defined in templates to their story without choosing an entire template. Page templates are based on the same JSON definitions as templates defined in `packages/templates/src/raw`.\n\n## How Page Templates differ from Template Pages\n\nSince page templates are based on the same source files as templates, some customization of raw templates is required for them to work correctly with Page Templates.\n\n### Page Template Types and Naming\n\nIn the page templates pane, pages are labeled and able to be filtered by their page type (Examples: Cover, Section, Quote, ...). These types are defined in the source template's raw JSON.\n\nTo set page template type for a template page, set `pageTemplateType` on the template JSON's page objects to one of the types defined at `packages/story-editor/src/components/library/panes/pageTemplates/constants.js`. If `pageTemplateType` is set to `null`, the page will be omitted from the page templates pane.\n\nPage Templates are named based on their original Template Name + Page Template Type like \"Cooking Cover\".\n\n### All template images are converted to grid placeholders\n\nUnlike templates which come with lots of stock photography when creating a story based on a template, page templates replace all (yes, all) images with a placeholder grid image. In order to make the grid consistent, a single placeholder grid image is scaled to look consistent across many image sizes.\n\nTo preserve images to persist into the page template, they need to be converted to shapes. Shapes will be not be replaced with placeholder grids when rendered as page templates and applied to pages.\n\nThere has been consideration to make it so that some images can be passed through in [Issue #6032](https://github.com/googleforcreators/web-stories-wp/issues/6032).\n\n### Page Template Previews\n\nPage Templates preview using the same mechanisms as browsing templates on the dashboard. Animations are included when applying page templates and are included in previews.\n\n## Applying Page Templates\n\nPage templates are designed to be a page replacement. On application, they will replace the entire page's contents. If the page has changes, a confirmation is required before overwriting existing changes.\n\nApplying page templates copies over grid placeholders and all associated animations from the original template page.\n\n## Technical notes and considerations\n\n### RTL Support\n\nIn order for page templates and templates to render the same as they will when selected and published, they need to bypass some of the default RTL support in the app. All preview pages used for rendering page templates and templates are wrapped in ``.\n\n### Page Templates are Template Pages\n\nIn order to make templates and page templates easier to maintain, page templates are built off of standard templates. Use `\"pageTemplateType\": null` (see above) to omit template pages from being able as page templates.\n\nThere are currently no mechanisms for creating page templates that are not a part of templates.\n" }, { "path": "docs/performance.md", "content": "# Performance\n\nPerformance for the editor follows the [RAIL model](https://web.dev/rail/). Most of our in app interactions will be categorized by the [Animation](https://web.dev/rail/#animation:-produce-a-frame-in-10-ms) & [Response](https://web.dev/rail/#response:-process-events-in-under-50ms) section of this model. \n\nIt's important to measure the performance of the app with the react production build (`npm run build`) in an incognito window. This imitates what a user will experience and will prevent any chrome extensions from effecting performance times. It's also important to be aware of what machine you're auditing the app on relative to the user base of the application. An M1 macbook pro can perform about twice as fast as an intel macbook pro. This is something you should account for when trying to compare or justify results.\n\n## Existing Performance Work\n\nTo view any prior performance PRs, just search github pulls and issues for anything with the `performance` tag.\n\nThe two main milestone audits exist here:\n\n- [Performance Report: January 2022 ](https://github.com/GoogleForCreators/web-stories-wp/issues/10158)\n- [Performance Report: April 2022](https://github.com/GoogleForCreators/web-stories-wp/issues/11263)\n\n## Chrome DevTools Performance Tab vs React Profiler\n\nTo identify a performance bottleneck in the application, you should use the chrome devtools performance tab in an incognito window, record a sample interaction, and see if it violates the RAIL Model. If there is a violation of the RAIL Model, you should use React Profiler on the development build to guide your architectural decisions.\n\n**Note:** Performance optimizations can often come at the cost of Legibility & Maintainability. They can often also be footguns for performance if used incorrectly. It's important to have documentable proof of a performance bottleneck before altering code for the sake of performance improvements.\n\n### React Profiler\n\nThe React Profiler is beneficial for identifying where and how you can make the application more performant. Once you've recorded an interaction within the application, you can audit the commits and component renders of the application for that interaction.\n\nThere are essentially two things to look for when auditing a flame graph in the React Profiler, extraneous renders & expensive renders.\n\n#### Extraneous Renders\n\nExtraneous renders are categorized as renders that occur, that don't need to, for a particular update. You can think about these the difference between what React diffs for a particular update, and the minimum that needs to be diffed for our UI to visually update for a user. This difference is an extraneous render.\n\nThere's no need to eliminate all extraneous renders, but it is important to be able to identify, and remove, areas that have large amounts of extraneous renders. The classic example within the context of this app is updating an element. If we have 50 elements on a story page, and update the position of 1 element, only 1 element needs a visual update for the user. However, if all 50 elements re-render, and 49 of them are empty re-renders (re-render where nothing actually updated), those 49 re-renders are extraneous re-renders that should be eliminated.\n\nThere are many approaches to eliminate empty re-renders. The use case and existing architecture will dictate whatever approach you take, but ultimately any approach that is verified with the react flame graph should work.\n\nHere is a great article to reference: [When Does React Render Your Component?](https://www.zhenghao.io/posts/react-rerender)\n\n#### Expensive Renders\n\nExpensive renders are components that show up in the react flame graph and take >1ms to re-render. Like extraneous renders, this is not a hard rule, but you should look for components that are eating up a significant amount of your response budget when you identify a bottleneck.\n\nOnce expensive renders are identified in the flame graph from the React Profiling tool, recording the same interaction in the Chrome Dev Tools Performance tab, then inspecting the callstack is best to identify calls are making the components render expensive.\n\n## Using Context Performantly\n\nAll of our context is held using the [use-context-selector](https://github.com/dai-shi/use-context-selector) package, and we have a small layer around it that allows it to use shallow equality vs referential equality to detect if a component should re-render based on the return value of its selector. You can see this code in `packages/react/src/useContextSelector.js`.\n\nAs a general rule of thumb, it is best practice to pull only essential data needed for your component through a selector when using `useContextSelector(...)`. This practice helps eliminate empty/extraneous renders induced from context. [Read more about it here](https://github.com/GoogleForCreators/web-stories-wp/issues/2662#issuecomment-1011372651).\n\n## Main Areas to Identify Performance Regressions\n\nThere is always a chance for performance regressions as features get altered and added. The main regression to watch out for in the story editor is where a component is rendered for every element in state. Examples of this include the Display Layer, the Frames Layer, the Layer Panel. It should be verified that not every instance of said component re-renders when only one or a few of those element components needs updating. All these components are prone to large performance regressions if hooks or props pass data around unwisely.\n\nIt would be beneficial to audit these components from time to time in the react profiler. An audit can be as simple as recording an update to selection, or updating the position of a single element. If the react flame graph indicates that this is causing every element to re-render vs only the effected elements, a large performance regression has occurred.\n\nBe sure to check for this regression on PRs that effect display elements, frame elements, layers in the layers panel, or any story state hooks.\n" }, { "path": "docs/quick-actions.md", "content": "# Quick Actions\n\nSome actions are cumbersome in the editor as it's difficult to find them in the Design panel. The quick actions menu allows users to perform actions and locate specific panels in the editor.\n\n## Overview\n\nQuick actions hook into the `highlight` api that is used in the pre-publish checklist. Using this, the quick actions can highlight specific panels in the editor.\n\nThe quick action menu is located in the nav layer. This allows users to navigate around using the keyboard in an intuitive way. Clicking the quick action menu should not remove focus from any elements that have focus.\n\nQuick actions have two main functions:\n\n1. Focusing a specific part of the editor\n2. Editing an element in the canvas\n\nQuick actions are not limited to just the above functionality. In the future it may be necessary to add more functionality.\n\n### Action Types\n\nThe actions that are displayed dynamically change depending on which element type is selected. These are outlined below:\n\n| Selected Element Type | Available actions |\n|-----------------------|-----------------------------------------------------------------------------------------------------------|\n| Nothing selected | - Change background color
- Insert media
- Insert text |\n| Background Image | - Replace background
- Add animation*
- Clear filters and animation |\n| Foreground Image | - Replace media
- Add animation*
- Add link
- Clear animation |\n| Video | - Replace media
- Add animation*
- Add link
- Add captions
- Clear filters and animation |\n| Shape | - Change color
- Add animation*
- Add link
- Clear filters and animation |\n| Text | - Change color
- Edit text
- Add animation*
- Add link
- Clear animation |\n\n### Action functionality\n\nReference this table when needing to know what a quick action will do when clicked.\n\n| Quick Action | Result |\n|---------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Add animation* | Open and highlight the `animation` panel in the `design pane`. Focus the effect chooser dropdown. |\n| Add caption | Open and highlight the `captions and subtitles` panel in the `design pane`. Focus the input. |\n| Add link | Open and highlight the `link` panel in the `design pane`. Focus the input. |\n| Change background color | Open and highlight the `page background` panel in the `design pane`. Focus the input. |\n| Clear animation/filters and animation | Remove all filters and/or animations as specified. Display a snackbar to the user indicating that they were removed. The snackbar will contain an action button that when clicked will re-apply the styles that were removed. |\n| Edit text | Open and highlight the `text` panel in the `design pane`. Focus the first input. |\n| Insert media | Open and highlight the `media pane` in the `library`. Focus the media tab button. |\n| Insert text | Open and highlight the `text pane` in the `library`. Focus the text tab button. |\n| Replace background/media | Open and highlight one of the media panes in the `library`. The media pane opened will depend on the type of the element selected. Focus the relevant tab button. |\n| Trim video | Enter video trim mode similar to button in design panel. |\n\n> *_Add animation_ action is not available on the first page of a story.\n\n### Visibility\n\nThe quick actions menu is visible when:\n\n1. there are no elements selected or \n2. if a single element is selected (including the background)\n\nThis feature does not support selecting multiple elements, so the menu will be hidden if more than one element is selected.\n\n## Adding new quick actions\n\nQuick actions hook into the highlight api. To add a new quick action, the following steps must be completed. If you are not highlighting, skip the first two steps:\n\n1. If it doesn't already exist, add a key to `packages/story-editor/src/app/highlights/states.js` that will reference the panel/pane/element that you are trying to highlight.\n2. Attach the new highlight state to the panel/pane/element that will be focused with the `useHighlights()` context. See existing usages for an example.\n3. Create the quick action in the `useQuickActions` hook located at `packages/story-editor/src/app/highlights/quickActions/useQuickActions.js`\n\n## Technical notes and considerations\n\n### Focus\n\nClicking the quick action menu should not remove focus from an element. To do this, two things were added:\n\n1. An `onMouseDown` event handler is passed to the buttons. This event handler prevents the mouse down event from unfocusing the canvas element.\n2. The context menu is given an `onMouseDown` event handler to prevent mouse events on the menu _in between the buttons_ from bubbling up and unfocusing the element in the canvas.\n\nA user should be able to navigate the quick actions menu with their keyboard.\n\n### Highlights\n\nThis feature uses the `highlights` api that was implemented in [this pr: #6150](https://github.com/googleforcreators/web-stories-wp/pull/5965).\n\n### Testing\n\nIn order to prevent regression testing, unit and karma tests have been created. It is recommended to add a karma test for each new quick action to make sure that it behaves properly.\n" }, { "path": "docs/right-click-menu.md", "content": "# Right Click Menu (Context Menu)\n\nThe Right-click Menu provides additional functionality to the user. The actions displayed on this Menu will change depending on which type of Element the user has selected on the canvas: Page, Text, Media, or Shapes.\n\n## Overview\n\nRight click menu will give the user a right click menu that is intuitive to use in the editor. Using this custom context menu, the user will be able to edit element style properties, store data in the clipboard, and paste data from their clipboard back into the editor.\n\n### Right click menu action types\n\n|Group|Description|\n|--|--|\n|Main actions|These options can apply across any element or media|\n|Layer distribution options/actions|These options help the user move the selected element between the different layers (objects in the canvas)|\n|Element styling options/actions|These options help the user manage the Element's style properties|\n|Page action options|These options help the user manage the different Pages in the story|\n\n### Actions\n\nDifferent actions will be rendered depending on the Element that is right clicked. The actions will do the following:\n\n
\n\nPage element actions\n\n|Action text|Action description|\n|--|--|\n|Add new page after|Adds a page after the current page.|\n|Add new page before|Adds a page before the current page.|\n|Duplicate page|Creates a new page that is identical to the current page. All animations, styles, and elements should be the same.|\n|Delete page|Deletes the current page (if the page can be deleted).|\n\n
\n\n
\n\nText element actions\n\n|Action text|Action description|\n|--|--|\n|Send to back|Set the text element behind all other elements on the page.|\n|Send backward|Bring the text element backward one layer.|\n|Bring forward|Bring the text element forward one layer.|\n|Bring to front|Set the text element in front of all elements on the page.|\n|Copy style|The styles of the selected text element are copied to the clipboard. A snackbar is displayed on completion.|\n|Paste style|The styles that are saved to the clipboard are pasted to the currently selected text box. This does not update the text in the textbox. A snackbar is shown on completion.|\n|Add style to \"Saved styles\"|The style of the currently selected textbox is saved to the \"Saved styles\" panel in the style pane. This action opens the design tab, opens the \"Saved styles\" panel, and collapses all other panels in the style pane. The \"Saved styles\" panel should be highlighted when opened.|\n|Add color to \"Saved colors\"|The color(s) of the currently selected textbox is saved to the \"Saved colors\" panel in the style pane. This action opens the design tab, opens the \"Saved colors\" panel, and collapses all other panels in the style pane. The \"Saved colors\" panel should be highlighted when opened. A snackbar is displayed on completion.|\n\n
\n\n
\n\nBackground media actions\n\n|Action text|Action description|\n|--|--|\n|Detach image from background|Removes the media from the background of the page and sets it in the foreground.|\n|Scale & crop background image|Show the scale and crop UI so that the user may scale or crop the image to the desired size.|\n\n
\n\n
\n\nForeground media actions\n\n|Action text|Action description|\n|--|--|\n|Send to back|Place media behind all other elements. Disabled if the layer is all the way back.|\n|Send backward|Bring media one layer backwards. Disabled if the layer is all the way back.|\n|Bring forward|Bring media one layer forwards. Disabled if the layer is all the way forward.|\n|Bring to front|Place media in front of all other elements. Disabled if the element is all the way forward.|\n|Copy image styles|Copy all styles applied to the media to the clipboard. A snackbar is displayed on completion.|\n|Paste image styles|Add all styles in the clipboard to the selected media. A snackbar is displayed on completion.|\n\n
\n\n
\n\nShape element actions\n\n|Action text|Action description|\n|--|--|\n|Send to back|Place shape behind all other elements. Disabled if the layer is all the way back.|\n|Send backward|Bring shape one layer backwards. Disabled if the layer is all the way back.|\n|Bring forward|Bring shape one layer forwards. Disabled if the layer is all the way forward.|\n|Bring to front|Place shape in front of all other elements. Disabled if the element is all the way forward.|\n|Copy shape styles|Copy styles from the shape to the clipboard. A snackbar is displayed on completion.|\n|Paste shape styles|Add styles from the clipboard to the selected shape. A snackbar is displayed on completion.|\n|Add color to \"Saved colors\"|The color(s) of the currently selected shape is saved to the \"Saved colors\" panel in the style pane. This action opens the design tab, opens the \"Saved colors\" panel, and collapses all other panels in the style pane. The \"Saved colors\" panel should be highlighted when opened. A snackbar is displayed on completion.|\n\n
\n\n## Technical notes and considerations\n\n### Copying and pasting styles\n\nWhen a user right clicks elements, they may be given the option to copy an element's styles and paste them to another element of the same type.\n\n**Note**: This does not override all styles of the element. Only styles that are in the table below are able to be copied and pasted:\n\n|Element type|Properties that are copy/paste-able|\n|--|--|\n|Text|- `backgroundColor`
- `backgroundTextMode`
- `border`
- `border-radius`
- `flip`
- `font`
- `fontSize`
- `lineHeight`
- `opacity`
- `padding`
- `rotationAngle`
- `textAlign`|\n|Foreground Media|- `border`
- `border-radius`
- `flip`
- `opacity`
- `overlay`
- `rotationAngle`|\n|Shape|- `backgroundColor`
- `flip`
- `opacity`
- `rotationAngle`|\n\nA user may copy styles from any text, foreground media, and shape element. A user may not copy background media element styles.\n\nOnce styles are copied, a user may select an element of the same type and 'paste' those onto the selected element. The selected element's properties will be overridden by the 'copied' styles.\n\n### Testing \n\nIn order to prevent regression testing, unit and karma tests have been created. It is recommended to add a karma test for each new right click action to make sure that it behaves properly.\n" }, { "path": "docs/storybook.md", "content": "# Storybook\n\nA living components library is maintained using [Storybook](https://storybook.js.org/).\n\nThe latest version of the project's storybook can be found at [https://googleforcreators.github.io/web-stories-wp/storybook](https://googleforcreators.github.io/web-stories-wp/storybook).\n\nTo run it locally, use the following command:\n\n```bash\nnpm run storybook\n```\n\nIn addition to the components library, the storybook also contains a story editor \"playground\" that can be used to test-drive the editor.\n" }, { "path": "docs/svgs.md", "content": "# SVGs\n\nSVGs (also known as icons) are needed in different formats across this project.\n\nThis project uses webpack's [asset modules](https://webpack.js.org/guides/asset-modules/) and [SVGR](https://react-svgr.com/) to convert SVGs into different formats.\n\n**Note**: Each raw SVG must be in a separate file that is named with the `.svg` extension.\n\n## SVGs as Inline Assets\n\nSVGs may be embedded as a small file inline by converting the SVG into a [data URL](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).\n\nTo use an SVG as a data URL, add the SVG in a folder named `/inline-icons`.\n\n## SVGs as React Components or Images\n\nSVGR is used to transform raw SVGs into React Components or Images so that SVGs can be more easily used in the dashboard and editor.\n\n### Using SVG as a React Component\n\nTo use an SVG as React Component, add an SVG in a folder named `/icons`. \n\nWebpack will see the `/icons` folder and process those SVGs through SVGR. The built file will have a default export that is a react component.\n\n### Using SVG as an Image\n\nTo use an SVG as an image, add an SVG in a folder named `/images`. \n\nWebpack will see the `/images` folder and process those SVGs through SVGR. The built file will have a default export that is an image.\n" }, { "path": "docs/testing-environments.md", "content": "# Testing Environments\n\n## Staging Environment\n\nThe latest version of the plugin (i.e. current master branch) is up and running on [https://stories-new-wordpress-amp.pantheonsite.io/](https://stories-new-wordpress-amp.pantheonsite.io/) and ready for maintainers to test.\n\nPing one of the leads if you need access to the site.\n\n**Purpose**: Reviewing and testing the latest nightly build\n**Release cadence**: automatically\n**Target audience**: Engineering, PM, QA, UX\n\n## QA Environment\n\nThe Web Stories plugin is also active on [https://stories-qa-wordpress-amp.pantheonsite.io/](https://stories-qa-wordpress-amp.pantheonsite.io/) and ready for maintainers to test.\n\nThe [Web Stories Tester](./testing-qa.md) plugin is installed that lets you easily switch between testing the `master` branch and individual PRs.\n\nPing one of the leads if you need access to the site.\n\n**Purpose**: Reviewing new changes before they are merged (QA / UAT)\n**Release cadence**: manually\n**Target audience**: Engineering, PM, QA, UX\n\n## Stories Labs\n\nFor internal testing with a larger audience the [Stories Labs](https://stories-labs.dev/) site is more suitable.\n\nPing one of the leads if you need access to the site.\nPing @swissspidy if the site needs to be updated.\n\n**Purpose**: Test-driving the latest version\n**Release cadence**: manually (every few weeks / when there is a new release)\n**Target audience**: Internal testers\n" }, { "path": "docs/testing-qa.md", "content": "# Manual Testing (QA)\n\n## ZIP Files\n\nEvery **pull request** automatically has a ZIP file attached to it that can be downloaded and installed on a WordPress site.\n\nTo get the ZIP file:\n\n1. Open pull request\n2. Click on \"Checks\" at the top \n ![PR Overview](https://user-images.githubusercontent.com/841956/80692983-a6894280-8ad2-11ea-8c5c-2c30ce89dc5f.png)\n3. Click on \"Continuous Integration\" on the left-hand side \n ![Continuous Integration](https://user-images.githubusercontent.com/841956/80693011-b0ab4100-8ad2-11ea-80aa-a1167c25fd14.png)\n4. Download `web-stories.zip` \n ![ZIP file list](https://user-images.githubusercontent.com/841956/80693026-b6a12200-8ad2-11ea-8ae0-76dc279f3250.png)\n\nThe same is also possible for the **master** branch. For this, navigate to [the Actions tab](https://github.com/googleforcreators/web-stories-wp/actions?query=workflow%3A%22Continuous+Integration%22+branch%3Amaster) in the repository navigation and click on the latest Continuous Integration run to download the ZIP file.\n\n## Web Stories Tester Plugin\n\nTo make switching between individual PRs easier, there is a Web Stories Tester WordPress plugin that you can install on your site.\n\n1. [Download Web Stories Tester](https://drive.google.com/file/d/1cKR2Yb7oY6JRyGvreVoCTBa_nfWp2Dqr/view?usp=sharing)\n2. Install plugin on your site by uploading it in WordPress\n3. Use the new menu item in the admin toolbar to switch between the master branch and individual PRs. \n ![Web Stories Tester plugin in action](https://user-images.githubusercontent.com/841956/81189411-cfb84000-8fb6-11ea-80db-adddebb06ef2.png)\n\n## Sharing story data\n\nYou can use [DevTools](./devtools.md) to share story data for debugging purposes.\n" }, { "path": "docs/third-party-integration/dashboard/README.md", "content": "# Dashboard\n\n* [Getting Started](./getting-started.md)\n* [API Callbacks](./api-callbacks.md)\n* [Integration Layer](./integration-layer.md)\n* [Tutorial](./tutorial.md)\n" }, { "path": "docs/third-party-integration/dashboard/api-callbacks.md", "content": "# API Callbacks\n\nSide effects are added to the Dashboard by defining callbacks. One such callback is `fetchStories` which is used to get stories from the backend and is the only required callback.\nOther callbacks can be used to add or handle functionalities for story management.\n\nAll API callbacks are asynchronous and should eventually resolve to their corresponding expected responses.\n\nBelow is a list of available API callbacks categorized in different sections.\n\n## Story Management\n\nA set of callbacks that help in performing create, update, delete and read operations on web stories stored in the CMS.\n\n### `fetchStories`\n\nA callback which fetches stories to be shown in the dashboard.\n\nArguments\n\n- `queryParams`\n - type: `Object`\n - description: An object which contains the query parameters.\n - `status`\n - type: `string`\n - description: Status of a story. One of `draft`, `pending`, `public`, `future` or `private`.\n - `searchTerm`\n - type: `string`\n - description: Search string.\n\n - `sortOption`\n - type: `string`\n - description: User selected option from a dropdown. Sort by `title`,`date`,`date` or `story_author`.\n\n - `sortDirection`\n - type: `string`\n - description: Sort order. One of `asc` or `desc`.\n\n - `author`\n - type: `string`\n - description: Author name.\n\nExpected Response:\n\nAn `Object` with the following shape.\n\n`fetchedStoryIds`\n\n- type: `array`\n- required: Yes\n- description: An array of story id's corresponding to the order of the stories to be shown in the dashboard. \n\n`stories`\n\n- type: `Object`\n- required: Yes\n- description: Object consisting of story details of each story, where story-id is the key and [story object](#story-shape-object) is the value.\n \n\n`totalPages`\n\n- type: `number`\n- required: Yes\n- description: Total number of pages.\n\n`totalStoriesByStatus`\n\n- type: `Object`\n- required: Yes\n- description: A map with data about how many stories have a particular status.\n\n\n\n### Story Shape Object\n\n- `author`\n - type: `Object`\n - required: No\n - description: Name and id of the author for the web story.\n - `name` \n - type: `string`\n - required: No\n - description: Name of the author.\n\n - `id`\n - type: `number`\n - required: No\n - description: Id of the author.\n\n- `bottomTargetAction`\n - type: `string`\n - required: No\n - description: Link to edit the story in story-editor.\n\n- `capabilities`\n - type: `Object`\n - required: No\n - description: Capabilities of user to perform on current story.\n - `hasEditAction`\n - type: `boolean`\n - required: No\n - description: Defines the capability of user to edit the story.\n\n - `hasDeleteAction`\n - type: `boolean`\n - required: No\n - description: Defines the capability of user to delete the story.\n- `created`\n - type: `string`\n - required: Yes\n - description: Created date and time of the story without timezone.\n\n- `createdGmt`\n - type: `string`\n - required: Yes\n - description: Created date and time of the story with timezone.\n\n- `editStoryLink`\n - type: `string`\n - required: Yes\n - description: Link to open story in story-editor.\n\n- `featuredMediaUrl`\n - type: `string`\n - required: No\n - description: Link to show the featured media/poster.\n\n- `id`\n - type: `number`\n - required: Yes\n - description: Id of the current story.\n\n- `link`\n - type: `string`\n - required: No\n - description: Link to display the web-story output.\n\n- `modified`\n - type: `string`\n - required: Yes\n - description: Latest modified date and time of the story without timezone.\n\n- `modifiedGmt`\n - type: `string`\n - required: Yes\n - description: Latest modified date and time of the story with timezone.\n\n- `previewLink`\n - type: `string`\n - required: No\n - description: Link to preview the story.\n\n- `status`\n - type: `string`\n - required: Yes\n - description: Publishing status of the web story.\n\n- `title`\n - type: `string`\n - required: Yes\n - description: Title of the web-story.\n\nExample ( Story Object )\n\n```JSON\n{\n \"author\": {\n \"name\": \"dev\",\n \"id\": 1\n },\n \"bottomTargetAction\": \"https://example.org/post.php?post=1&action=edit\",\n \"capabilities\": {\n \"hasEditAction\": true,\n \"hasDeleteAction\": true\n },\n \"created\": \"2022-01-18T07:36:32\",\n \"createdGmt\": \"2022-01-18T07:36:32Z\",\n \"editStoryLink\": \"https://example.org/post.php?post=1&action=edit\",\n \"featuredMediaUrl\": \"\",\n \"id\": 1,\n \"link\": \"https://example.org/?post_type=web-story&p=1\",\n \"modified\": \"2022-01-18T07:36:32\",\n \"modifiedGmt\": \"2022-01-18T07:36:32Z\",\n \"previewLink\": \"https://example.org/?post_type=web-story&p=1&preview=true\",\n \"status\": \"draft\",\n \"title\": \"Test Title\",\n}\n```\n\nExample ( Expected response )\n\n```JSON\n{\n \"fetchedStoryIds\": [],\n \"stories\":{\n \"1\":{...},\n \"2\":{...},\n },\n \"totalPages\": 1,\n \"totalStoriesByStatus\": {...}\n}\n```\n\n### `updateStory`\n\nArguments\n\n- `data`\n - type: `Object`\n \n - description: The Object containing params which contain details to update the story.\n - `id`\n - type: `number`\n - description: The id of the story that needs to be updated\n - `author`\n - type: `number`\n - description: The id of the author.\n - `title`\n - type: `number`\n - description: The changed story title.\n\nResponse:\nAn `Object` of `` shape.\n\nExample ( Expected response )\n\n```JSON\n{\n \"id\": 1,\n \"status\": \"draft\",\n \"title\": \"Test\",\n \"created\": \"2022-03-15T08:28:02\",\n \"createdGmt\": \"2022-03-15T08:28:02Z\",\n \"modified\": \"2022-03-15T08:28:02\",\n \"modifiedGmt\": \"2022-03-15T08:28:02Z\",\n \"author\": {\n \"name\": \"Dev\",\n \"id\": 1\n },\n \"bottomTargetAction\": \"https://example.org/post.php?post=2247&action=edit\",\n \"featuredMediaUrl\": \"\",\n \"editStoryLink\": \"https://example.org/post.php?post=2247&action=edit\",\n \"previewLink\": \"https://example.org/?post_type=web-story&p=2247&preview=true\",\n \"link\": \"https://example.org/?post_type=web-story&p=2247\",\n \"capabilities\": {\n \"hasEditAction\": true,\n \"hasDeleteAction\": true\n }\n}\n```\n\n### `trashStory`\n\nArguments\n\n- `id`\n - type: `number`\n - description: The story id which needs to be trashed.\n\nResponse\n\n- `void`\n\n### `createStoryFromTemplate`\n\nArguments\n\n- `template`\n - type: `Object`\n - description: The details of a template\n - `id`\n - type: `number`\n - description: Id of the template\n - `createdBy`\n - type: `string`\n - description: Name of the creator of the template.\n - `modified`\n \n - type: `string`\n - description: Date and time of modification of the template.\n - `slug`\n - type: `string`\n - description: Slug of the template.\n - `creationDate`\n \n - type: `string`\n - description: Date and time of creation of the template.\n - `title`\n - type: `string`\n - description: Title of the template which will be default title for story.\n - `tags`\n - type: `Array` \n - description: set of words that describe the template.\n - `colors`\n - type: `Array` \n - description: Set of colors which are mostly used in template.\n - `color`\n - type: `string`\n - description: Hex code of the color.\n - `family`\n - type: `string`\n - description: Name of the base color.\n - `label`\n - type: `string`\n - description: Name of the color.\n - `description`\n - type: `string`\n - description: A brief description of the template.\n - `vertical`\n - type: `string`\n - description: Category of the template\n - `version`\n - type: `number`\n - description: Version of the template used for migration.\n - `pages`\n - type: `array`\n - description: Each attay item corresponds to each page in template.[ page object ](../story-editor/integration-layer-api/api-callbacks.md/#page-object-shape)\n - `postersByPage`\n - type: `array`\n - description: Each object consisting of the URL for the page poster.\n - `png`\n - type: `string`\n - description: URL for png image.\n - `type`\n - type: `string` \n - description: Type of poster image.\n - `webp`\n - type: `string`\n - description: URL for webp image.\n - `status`\n - type: `string`\n - description: String showing the status of template.\n\nExpected Response:\nAn `Object` of the following shape.\n\n`editLink`\n\n- type: `string`\n- required: Yes\n- description: Link to edit the new story created from template.\n\nExample (Template)\n\n```JSON\n{\n \"id\": 51,\n \"createdBy\": \"Google\",\n \"modified\": \"2020-04-21T00:00:00.000Z\",\n \"slug\": \"celebrity-life-story\",\n \"creationDate\": \"2021-08-25T00:00:00.000Z\",\n \"title\": \"Celebrity Life Story\",\n \"tags\": [\n \"Entertainment\",\n \"Celebrity\",\n \"Pop\",\n \"Bright\",\n \"Black\"\n ],\n \"colors\": [\n {\n \"label\": \"Phantom Black\",\n \"color\": \"#020202\",\n \"family\": \"Black\"\n },\n {\n \"label\": \"Gecko Green\",\n \"color\": \"#80FF44\",\n \"family\": \"Green\"\n }\n ],\n \"description\": \"With an upbeat neon green color and a powerful headings font, this template is great for creating stories around pop culture, music and the show business.\",\n \"vertical\": \"Entertainment\",\n \"version\": 40,\n \"pages\": [{...}],\n \"postersByPage\": [{...}],\n \"status\": \"template\",\n \"isLocal\": false\n}\n```\n\nExample ( Expected Response )\n\n```JSON\n{\n \"editLink\":\"https://example.org/post.php?post=1&action=edit\"\n}\n```\n\nNote that when the \"Use template\" button is clicked, it internally needs to know the registered element types.\nTherefore, you need to register them using `elementTypes.forEach(registerElementType)` in the same way as \nit is done for the editor itself (see [Getting Started](./../story-editor/getting-started.md)).\n\n### `duplicateStory`\n\nArguments\n\n- `story`\n - type: `id`\n - description: Id of the story which is to be dupilicated\n\nResponse\n\nAn `Object` in `` shape.\n\nExample ( Expected response )\n\n```JSON\n{\n \"id\": 1,\n \"status\": \"draft\",\n \"title\": \"Test\",\n \"created\": \"2022-03-15T08:28:02\",\n \"createdGmt\": \"2022-03-15T08:28:02Z\",\n \"modified\": \"2022-03-15T08:28:02\",\n \"modifiedGmt\": \"2022-03-15T08:28:02Z\",\n \"author\": {\n \"name\": \"Dev\",\n \"id\": 1\n },\n \"bottomTargetAction\": \"https://example.org/post.php?post=2247&action=edit\",\n \"featuredMediaUrl\": \"\",\n \"editStoryLink\": \"https://example.org/post.php?post=2247&action=edit\",\n \"previewLink\": \"https://example.org/?post_type=web-story&p=2247&preview=true\",\n \"link\": \"https://example.org/?post_type=web-story&p=2247\",\n \"capabilities\": {\n \"hasEditAction\": true,\n \"hasDeleteAction\": true\n }\n}\n```\n\n## Filtering stories\n\nA dropdown with a list of all the authors for filtering the stories would be added if the callback below is defined.\n\n### `getAuthors`\n\nA callback used to get all the authors of the CMS. Response from this will be used in a dropdown menu from which selecting a particular author will invoke `fetchStories` with the required arguments to get stories created by this author.\n\nArguments\n\n- `search`\n - type: `string`\n - description: Search string entered by the user.\n\nExpected Response:\n\nArray of the `Object` which describes author details.\n\n- `id`\n - type: `number`\n - required: Yes\n - description: User id.\n\n- `name`\n - type: `string`\n - required: Yes\n - description: Name of the author.\n\nExample ( Expected response )\n\n```json\n[\n {\n \"id\": 1,\n \"name\": \"dev\"\n },\n {\n \"id\": 2,\n \"name\": \"admin\"\n }\n]\n```\n" }, { "path": "docs/third-party-integration/dashboard/getting-started.md", "content": "# Dashboard\n\nIf you want a companion dashboard to show stories created by the user or a list of story templates to choose from, you may use `Dashboard` from the `@googleforcreators/dashboard` package.\nThe dashboard can also be used to create a settings page for the story editor.\n\n## Scaffolding a Story Dashboard\n\nYou can quickly spin up a dashboard in a few steps described below.\n\n### Step 1: Set up a React project\n\nThe easiest way of setting up an SPA React project is to use [CRA](https://create-react-app.dev/) or to use templates such as [react-webpack-babel-starter](https://github.com/vikpe/react-webpack-babel-starter).\n\n### Step 2: Install dependencies\n\nFor a minimal story dashboard, you need to install three packages\n\n```sh\nnpm install @googleforcreators/dashboard @googleforcreators/element-library @googleforcreators/elements\n```\n\n### Step 3: Use the `Dashboard` component to render the dashboard\n\n```js\nimport { Dashboard, InterfaceSkeleton } from \"@googleforcreators/dashboard\";\n\nconst EditorDashboard = () => {\n const apiCallbacks = {\n fetchStories: () =>\n Promise.resolve({\n stories: {},\n fetchedStoryIds: [],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 0,\n publish: 0,\n },\n }),\n };\n\n return (\n \n \n \n );\n};\n\nexport default EditorDashboard;\n```\n\nBy default, the dashboard looks like this:\n\n![dashboard](https://user-images.githubusercontent.com/841956/159524205-43e27097-9321-487c-b236-28f9414f539e.png)\n\nThe dashboard application can be split into 2 different areas:\n\n![dashboard-labelled](https://user-images.githubusercontent.com/841956/159524265-bf0a117a-2432-469d-8733-d61f1e94b3aa.png)\n\nThe left rail / sidebar (1) provides a list of menu items for different pages configured in the dashboard.\nClicking on a menu item will display the page's content on the right (2).\n\nOut of the box, the left rail only contains a menu item for the main page showing all existing stories.\n" }, { "path": "docs/third-party-integration/dashboard/integration-layer.md", "content": "# Integration Layer\n\nSimilar to the editor, the Dashboard can be integrated by configuring the `Dashboard` and other components like `InterfaceSkeleton`.\n\nAs seen in the [Getting Started](./getting-started.md) guide, a minimal dashboard can be created by using the two main components `Dashboard` and `InterfaceSkeleton` like below.\n\n```js\nimport { Dashboard, InterfaceSkeleton } from \"@googleforcreators/dashboard\";\n\nconst StoriesDashboard = () => {\n const apiCallbacks = {\n fetchStories: () =>\n Promise.resolve({\n stories: {},\n fetchedStoryIds: [],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 0,\n publish: 0,\n },\n }),\n };\n\n return (\n \n \n \n );\n};\n\nexport default StoriesDashboard;\n```\n\n## `Dashboard`\n\nThis is the top level component which has all the provider components but doesn't render any UI itself.\n\n**Props:**\n\n- `config`\n - type: `Object`\n - required: Yes\n - description: Used for most of the dashboard configuration. See the [Dashboard Config](#dashboard-config) section below for full detail.\n\n## `InterfaceSkeleton`\n\nThis component is responsible for rendering the story editor interface UI and can be configured by using multiple props. Please look at the `InterfaceSkeleton` section below for detailed documentation of this component.\n\n**Props:**\n\n- `additionalRoutes`\n - type: `array`\n - required: No\n - description: Used to add additional routes to the left rail.\n - `path`\n - type: `string`\n - required: Yes\n - description: Unique path to this page. For example - `/editor-settings`.\n - `component`\n - type: `React.ReactElement`\n - required: Yes\n - description: A component which will be rendered on the page content area if corresponding link is selected\n\n## Dashboard Config\n\nTo configure the dashboard to your needs you can pass various config options to the story dashboard via `config` prop of the `Dashboard` component.\n\n- `isRTL`\n - type: `boolean`\n - required: No\n - description: It defines the direction of the layout of the dashboard.\n\n- `userId`\n - type: `number`\n - required: No\n - description: The id of the user who is currently viewing the dashboard.\n\n- `locale`\n - type: `Object`\n - required: No\n - description: It is a set of parameters that defines the user's language, region and any special variant preferences that the user wants to see in their user interface.\n\n- `newStoryURL`\n - type: `string`\n - required: Yes\n - description: This specifies the exact url to create a new story.\n\n- `archiveURL`\n - type: `string`\n - required: No\n - description: URL to archives page for web story. \n\n- `defaultArchiveURL`\n - type: `string`\n - required: No\n - description: default URL archives page for web stories \n\n- `cdnURL`\n - type: `string`\n - required: No\n - description: URL to dashboard resources.\n\n- `allowedImageMimeTypes`\n - type: `array`\n - required: Yes\n - description: It specifies the allowed Image types that are supported by web stories\n\n- `version`\n - type: `string`\n - required: No\n - description: Shows the current version of web-story \n\n- `encodeMarkup`\n - type: `boolean`\n - required: No\n - description: It specifies whether the markup need to be encoded while making api calls. \n\n- `api`\n - type: `Object`\n - required: Yes\n - description: It specifies the URL for different api calls.\n\n- `maxUpload`\n - type: `number`\n - required: No\n - description: It specifies the maximum size of a file that can be uploaded to the backend.\n\n- `maxUploadFormatted`\n - type: `string`\n - required: No\n - description: It specifies the maximum size of a formatted file that can be uploaded to the backend\n\n- `capabilities`\n - type: `Object`\n - required:\n - description: \n - `canManageSettings`\n - type: `boolean`\n - required: No\n - description: It specifies the capabilities of the user to manage settings of web story.\n - `canUploadFiles`\n - type: `boolean`\n - required: No\n - description: It specifies the capabilities of the user to upload files.\n\n- `canViewDefaultTemplates`\n - type: `boolean`\n - required: No\n - description: It specifies ability of user to view default templates. \n\n- `localeData`\n - type: array\n - required: Yes\n - description: Returns the translation of the translatable strings.\n\n- `apiCallbacks`\n - type: `Object`\n - required: Yes\n - description: It consists of functions that are used to make request to API endpoints.\n\n- `leftRailSecondaryNavigation`\n - type: `array`\n - required: No\n - description: It shows the navigation panel on the left side.\n - `value`\n - type: `string`\n - required: No\n - description: It specifies the value of its corresponding label in navigation panel.\n - `label`\n - type: `string`\n - required: No\n - description: It shows the value to be shown to the user for certain links. \n - `isExternal`\n - type: `boolean`\n - required: No\n - description: Defines the link is external or not. \n - `trackingEvent`\n - type: `string`\n - required: No\n - description: defines tracking event for the link for google analytics.\n\n- `documentTitleSuffix`\n - type: `string`\n - required: No\n - description: Suffix to be used in the document title.\n\n- `styleConstants`\n - type: `Object`\n - required: No\n - description: This contains various style constants which are used while calculating position for various components in dashboard. \n - `topOffset`\n - type: `boolean`\n - required: No\n - description: It defines the top bar height, which is used in calculation for placement of components. \n\n- `containerId`\n - type: `string`\n - required: No\n - description: The id of the upper dashboard container which defines the available space for dashboard. If not defined `window.innerWidth` will be used for calculating the space.\n\n- `siteKitStatus`\n - type: `Object`\n - required: No\n - description: It specifies the status of installation of site kit by google.\n - `installed`\n - type: `boolean`\n - required: No\n - description: It specifies whether site kit is installed. \n - `active`\n - type: `boolean`\n - required: No\n - description: It specifies whether site kit is active. \n - `analyticsActive`\n - type: `boolean`\n - required: No\n - description: It specifies whether analytics in site kit is active.\n - `adsenseActive`\n - type: `boolean`\n - required: No\n - description: It specifies whether adsense in site kit is active.\n - `analyticsLink`\n - type: `string`\n - required: No\n - description: It specifies the analytics link where analytics data are being recorded.\n - `adsenseLink`\n - type: `string`\n - required: No\n - description: It specifies adsense link where adsense data are being recorded.\n" }, { "path": "docs/third-party-integration/dashboard/tutorial.md", "content": "# Tutorial\n\nThis tutorial explains how to create a standalone story dashboard step by step. It covers implementing the following functionalities:\n\n- Fetching hard-coded stories.\n- Adding filters for browsing stories.\n- Adding a custom settings page in the dashboard\n\n## Step 1: Setting up the dashboard with minimum config\n\nInstalling dependencies\n\n```sh\nnpm install @googleforcreators/dashboard\n```\n\nAfter that you can use code block given below to scaffold a minimal story dashboard.\n\n```js\nimport { Dashboard, InterfaceSkeleton } from \"@googleforcreators/dashboard\";\n\nconst CustomDashboard = () => {\n const apiCallbacks = {\n fetchStories: () =>\n Promise.resolve({\n stories: {},\n fetchedStoryIds: [],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 3,\n draft: 0,\n future: 0,\n pending: 0,\n private: 0,\n publish: 0,\n },\n }),\n };\n\n return (\n \n \n \n );\n};\n\nexport default CustomDashboard;\n```\n\nMinimum requirement for a story dashboard is to fetch stories, so the user can browse them go to the editor to update them. The response for `fetchStories` that is shown in the above code sample emulates a CMS having no stories saved. \n\n## Step 2: Adding hard-coded stories and updating `fetchStories` to handle its argument\n\n`fetchStories` callback be updated as shown in the below code sample to serve hard-coded data.\n\n```js\nconst STORIES_RESP = {\n stories: {\n 1: {\n id: 1,\n status: \"publish\",\n title: \"Example story\",\n created: \"2021-11-04T10:12:47\",\n createdGmt: \"2021-11-04T10:12:47Z\",\n author: {\n name: \"Author 1\",\n id: 1,\n },\n featuredMediaUrl:\n \"https://wp.stories.google/static/main/images/templates/food-and-stuff/page1_bg.jpg\",\n },\n 2: {\n id: 2,\n status: \"publish\",\n title: \"Example story 2\",\n created: \"2021-12-05T10:12:47\",\n createdGmt: \"2021-12-05T10:12:47Z\",\n author: {\n name: \"Author 2\",\n id: 2,\n },\n featuredMediaUrl:\n \"https://wp.stories.google/static/main/images/templates/fresh-and-bright/page8_figure.jpg\",\n },\n 3: {\n id: 3,\n status: \"publish\",\n title: \"Example story 3\",\n created: \"2021-12-06T10:12:47\",\n createdGmt: \"2021-12-06T10:12:47Z\",\n author: {\n name: \"Author 3\",\n id: 3,\n },\n featuredMediaUrl:\n \"https://wp.stories.google/static/main/images/templates/fresh-and-bright/page7_product2.jpg\",\n },\n },\n fetchedStoryIds: [1, 2, 3],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 3,\n publish: 2,\n },\n};\n\nconst fetchStories = () => Promise.resolve(STORIES_RESP);\n\nexport default fetchStories;\n```\n\nYou can also update `fetchStories` as below to allow basic filtering and ordering stories on the basis of their statuses.\n\n```jsx\n const fetchStories = ({\n status,\n sortDirection,\n}) => {\n let newFetchedIds = [];\n\n try {\n const statusArray = status.split(\",\");\n if (statusArray.length === 6) {\n newFetchedIds = STORIES_RESP.fetchedStoryIds;\n } else {\n Object.values(STORIES_RESP.stories).forEach(\n ({ status: storyStatus, id }) => {\n if (statusArray.includes(storyStatus)) {\n newFetchedIds.push(id);\n }\n }\n );\n }\n\n if (sortDirection && sortDirection === \"desc\") {\n newFetchedIds = newFetchedIds.reverse();\n }\n\n return Promise.resolve({\n ...STORIES_RESP,\n fetchedStoryIds: newFetchedIds,\n //stories: newStories,\n });\n } catch (err) {\n return Promise.reject( err );\n }\n};\n\nexport default fetchStories;\n```\n\nSimilar to how `status` and `sortOrder` in used in the code sample you can add other filter based on parameters passed to `fetchStories`. See [API callbacks](./api-callbacks.md) for more information.\n\n## Step 4: Adding a custom settings page\n\nYou can add a custom page or an external link to the dashboard's menu by passing required values to `config` and `InterfaceSkeletons`'s prop `additionalRoutes`. Below is a code sample doing just that.\n\n```js\nimport { PageHeading, Layout } from \"@googleforcreators/dashboard\";\n\nexport function EditorSettings() {\n return (\n \n
\n \n \n \n {\"Settings\"}\n
\n \n \n \n );\n}\n\nexport const leftRailRoutes = [\n {\n value: \"/settings\",\n label: \"Settings\",\n },\n {\n value: `https://googleforcreators.github.io/web-stories-wp/storybook/iframe.html?id=playground-dashboard--default&args=&viewMode=story#/`,\n label: \"External link\",\n isExternal: true,\n },\n];\n\n```\n\nNow let's pass the required values to `config` and `additionalRoutes`.\n\n```js\nimport { Dashboard, InterfaceSkeleton } from \"@googleforcreators/dashboard\";\nimport fetchStories from \"./fetchStories\";\nimport { leftRailRoutes, EditorSettings } from \"./settings\";\n\nconst CustomDashboard = () => {\n const apiCallbacks = {\n fetchStories,\n };\n\n return (\n \n ,\n },\n ]}\n />\n \n );\n};\n\nexport default CustomDashboard;\n```\n" }, { "path": "docs/third-party-integration/story-editor/README.md", "content": "# Story Editor\n\n* [Getting Started](./getting-started.md)\n* [API Callbacks](./api-callbacks.md)\n* [Integration Layer](./integration-layer.md)\n* [Tutorial](./tutorial.md)\n" }, { "path": "docs/third-party-integration/story-editor/api-callbacks.md", "content": "# API Callbacks\n\nSimilar to the dashboard, side effects are added to the Story Editor by defining callbacks. One such callback is `saveStoryById` which is used to save stories and is the only required callback. Other callbacks can be used to add or handle functionalities like first-party media and custom page templates etc. All API callbacks can be asynchronous and should eventually resolve to their corresponding expected responses.\n\nBelow is a list of available API callbacks categorized in different sections.\n\n## Story Editing\n\n### `saveStoryById`\n\nThe only required callback, that is used for saving stories.\n\nArguments\n\n- `storyState` :\n - type: `Object`\n - description: The current state of the story. The required shape of the object is described in the table below.\n - `storyId`\n - type: `number`\n - description: Unique id for the story.\n\n - `title`\n - type: `string`\n - description: Tittle of the story.\n\n - `excerpt`\n - type: `string`\n - description: Short description of the story.\n\n - `version`\n - type: `number`\n - description: Version of the story saved ( latest is `DATA_VERSION` from @googleforcreators/migration).\n\n - `currentStoryStyles`\n - type: `Object`\n - description: Saved styles available the current story (`colors`).\n - `colors`\n - type: `array`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n\n - `globalStoryStyles`\n - type: `Object`\n - description: Saved styles available to all stories (`colors` & `textStyles`).\n - `colors`\n - type: `array`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n - `textStyles`\n - type: `array`\n - description: Saved text styles. See [text style shape](#text-style-shape) for more detail. \n\n - `pages`\n - type: `array`\n - description: Array of page objects in the story. See [page object shape](#page-object-shape)\n\n#### Page object shape\n\n- `elements`\n - type: `array`\n - description: Array of elements in this page.\n\n- `backgroundColor`\n - type: `Object`\n - description: Background color of this page.\n - `color`\n - type: `Object`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n \n\n- `type`\n - type: `string`\n - description: Page type.\n\n- `id`\n - type: `string`\n - description: Unique id for this page.\n\n### Text style shape\n\n- `backgroundColor`\n - type: `Object`\n - description: Background color of saved text style.\n - `color`\n - type: `Object`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n- `backgroundTextMode`\n - type: `Object`\n - description: Background text mode.\n\n- `font`\n - type: `Object`\n - description: Object defining font style. See [font object](#font-object-shape) shape for more detail. \n\n- `fontSize`\n - type: `number`\n - description: Font size in pixels.\n\n- `lineHeight`\n - type: `number`\n - description: Line height in pixels\n\n- `padding`\n - type: `Object`\n - description: Data about padding\n \n - `locked`\n - type: `boolean`\n - description: used to lock padding manipulation other styles\n \n - `hasHiddenPadding`\n - type: `boolean`\n - description: \n \n- `textAlign`\n - type: `string`\n - description: Text alignment. \n \n- `color`\n - type: `Object`\n - description: Font color.\n - `color`\n - type: `Object`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n\n- `fontWeight`\n - type: `number`\n - description: Font weight.\n\n- `isItalic`\n - type: `boolean`\n - description: Flag to denote the text is italic.\n\n- `isUnderline`\n - type: `boolean`\n - description: Flag to denote the text has an underline.\n\n- `letterSpacing`\n - type: `number`\n - description: Letter spacing in pixels.\n\nExpected response\n\nAn `Object` with the following shape\n\n- `storyId`\n\n - type: `number`\n - required: No\n - description: Unique id for the story.\n\n- `title`\n\n - type: `string`\n - required: No\n - description: Short description of the story.\n\n- `excerpt`\n\n - type: `string`\n - require: No\n - description: Short description of the story.\n\n- `version`\n\n - type: `number`\n - require: No\n - description: Version of the story saved.\n\n- `currentStoryStyles`\n\n - type: `Object`\n - require: No\n - description: Saved styles available in the current story (`colors`).\n - `colors`\n - type: `array`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n\n- `globalStoryStyles`\n\n - type: `Object`\n - require: No\n - description: Saved styles available to all stories (`colors` & `textStyles`).\n - `colors`\n - type: `array`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n - `textStyles`\n - type: `array`\n - description: Saved text styles. See [text style shape](#text-style-shape) for more detail. \n\n- `pages`\n\n- type: `array`\n- require: No\n- description: Array of page objects in the story. See [page object shape](#page-object-shape) for more details.\n\nExample ( Expected response )\n\n```json\n{\n \"storyId\": 1,\n \"title\": \"Epic story\",\n \"excerpt\": \"A totally epic story\",\n \"version\" : 39,\n \"currentStoryStyles\": {\n \"colors\": []\n },\n \"globalStoryStyles\": {\n \"textStyles\": [],\n \"colors\": []\n },\n \"pages\" :[]\n}\n```\n\n### `getStoryById`\n\nFallback of `initialEdits` prop of `StoryEditor` component. If `initialEdits` prop is undefined, this callback will be used to populate the initial story.\n\nArguments\n\n- `storyId` :\n - type: `number `\n - description: Unique id of a story that needs to be loaded.\n\nExpected response\n\n- `title`\n - type: `Object`\n - required: No\n - description: Tittle of the story.\n\n- `excerpt`\n - type: `Object`\n - required: No\n - description: Story description of the story.\n\n- `storyData`\n - type: `Object`\n - required: No\n - description: Story data.\n\n - `version`\n - type: `number`\n - required: Yes\n - description: Version of the story shape used.\n\n - `pages`\n - type: `array`\n - require: No\n - description: Array of page objects in the story. See [page object shape](#page-object-shape) for more details.\n\n - `autoAdvance`\n - type: `boolean`\n - required: No\n - description: Flag to denote if pages of the story advances automatically.\n\n - `defaultPageDuration`\n - type: `number`\n - required: No\n - description: Duration after which a page auto advances to a new page in seconds.\n\n - `currentStoryStyles`\n - type: `Object`\n - require: No\n - description: Saved styles available in the current story (`colors`).\n - `colors`\n - type: `array`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n\n - `backgroundAudio`\n - type: `Object`\n - required: No\n - description: Details about background audio.\n - `resource`\n - type: `Object`\n - required: Yes\n - description: Details about background audio.\n - `id`\n - type: `number`\n - required: Yes\n - description: Id of the resource.\n - `length`\n - type: `number`\n - required: Yes\n - description: Length of the audio file in seconds.\n - `lengthFormatted`\n - type: `string`\n - required: Yes\n - description: Length of the audio file formatted as MM:SS.\n - `mimeType`\n - type: `string`\n - required: Yes\n - description: Mime type of the audio file.\n - `src`\n - type: `string`\n - required: Yes\n - description: URL of the audio file.\n\n- `author`\n - type: `Object`\n - required: No\n - description: Details of author who created the story.\n - `id`\n - type: `number`\n - required: Yes\n - description: Author id.\n - `name`\n - type: `string\n - required: Yes\n - description: Author name.\n\n- `stylePresets`\n - type: `Object`\n - required: No\n - description: Saved style Presets.\n\nExample ( Expected response )\n\n```json\n{\n \"title\": {\n \"raw\": \"Epic story\"\n },\n \"excerpt\": {\n \"raw\": \"A totally epic story\"\n },\n \"storyData\": {\n \"version\": 39,\n \"pages\": [],\n \"autoAdvance\": true,\n \"defaultPageDuration\": 7,\n \"currentStoryStyles\": {},\n \"backgroundAudio\": {}\n },\n \"author\": {\n \"id\": 1,\n \"name\": \"John Doe\"\n },\n \"stylePresets\": {\n \"colors\": [],\n \"textStyles\": []\n }\n}\n```\n\n## Custom Page Templates\n\nIn the element library, there is a section for page templates, by default it only serves pre-built templates. You can enable users to save and use their own custom page templates by defining these 3 callbacks.\n\n### `getCustomPageTemplates`\n\nFor fetching custom page templates.\n\nArguments\n\n- `page` :\n - type: `number `\n - description: Page number for a set of template.\n- `searchTerm`\n - type: `string`\n - description: Search string entered by the user.\n\n\nExpected response\n\nAn array of the template objects whose shape is described below.\n\n#### Template object shape\n\n- `templateId`\n - type: `number`\n - required: Yes\n - description: Template id.\n\n- `version`\n - type: `string`\n - required: Version of the story shape used ( `DATA_VERSION` )\n - description: Details of author who created the story.\n\n- `elements`\n\n- type: `array`\n- required: Yes\n- description: Array of elements used in the template. See [element object](#element-object-shape).\n\n\n- `backgroundColor`\n - type: `Object`\n - required: Yes\n - description: Background color RGB values.\n - `color`\n - type: `Object`\n - `r`\n - type: `number`\n - description: Red value.\n - `g`\n - type: `number`\n - description: Blue value.\n - `b`\n - type: `number`\n - description: Green value.\n\n- `type`\n - type: `string`\n - required: Yes\n - description: Template type.\n\n- `id`\n - type: `string`\n - required: Yes\n - description: Page id.\n\n- `image`\n - type: `Object`\n - required: Yes\n - description: Placeholder image data.\n -`id`\n - type: `string`\n - required: Yes\n - description: Image id.\n -`height`\n - type: `string`\n - required: Yes\n - description: Height of the placeholder image.\n -`width`\n - type: `string`\n - required: Yes\n - description: Width of the placeholder image.\n -`url`\n - type: `string`\n - required: Yes\n - description: Link to the placeholder image.\n\n#### Element object shape\n\n- `opacity`\n - type: `number`\n - description: Opacity of element in percent.\n\n- `flip`\n - type: `Object`\n - description: Flip data of the element.\n - `vertical`\n - type: `boolean`\n - description: Vertical flip.\n - `horizontal`\n - type: `boolean`\n - description: horizontal flip.\n\n- `rotationAngle`\n - type: `number`\n - description: Rotation angle of the element.\n\n- `lockAspectRatio`\n - type: `boolean`\n - description: Flag to lock aspect ratio.\n\n- `scale`\n - type: `number`\n - description: Scale of element in percent.\n\n- `focalX`\n - type: `number`\n - description: X focal point in percent.\n\n- `focalY`\n - type: `number`\n - description: Y focal point in percent.\n\n- `resource`\n - type: `Object`\n - description: Element resource data. Same as [media object shape](#media-object-shape)\n\n- `type`\n - type: `string`\n - description: Element type.\n\n- `x`\n - type: `number`\n - description: X coordinate of the element on canvas in pixels.\n\n- `y`\n - type: `number`\n - description: Y coordinate of the element on canvas in pixels.\n\n- `width`\n - type: `number`\n - description: Width of the element in pixels.\n\n- `height`\n - type: `number`\n - description: Height of the element in pixels.\n\n- `mask`\n - type: `Object`\n - description: Details about mask over the element.\n - `type`\n - type: `string`\n - description: Mask type.\n - `showInLibrary`\n - type: `boolean`\n - description: \n - `name`\n - type: `string`\n - description: Mask name.\n - `path`\n - type: `string`\n - description: Mask path.\n - `ratio`\n - type: `number`\n - description: Mask ratio.\n - `supportsBorder`\n - type: `boolean`\n - description: \n\n- `id`\n - type: `string`\n - description: Unique id for this element.\n\nExample ( Expected response )\n\n```json\n{\n \"templateId\": 358,\n \"version\": 39,\n \"elements\": [],\n \"backgroundColor\": {\n \"color\": {\n \"r\": 255,\n \"g\": 255,\n \"b\": 255\n }\n },\n \"type\": \"page\",\n \"id\": \"0d009686-a8d7-4cd9-a076-80e3e56efb68\",\n \"image\": {\n \"id\": 0,\n \"height\": 0,\n \"width\": 0,\n \"url\": \"https://url-to-image\"\n }\n}\n```\n\n### `addPageTemplate`\n\nFor adding custom page templates.\n\nArguments\n\n- `template` :\n - type: `Object`\n - description: See [Template Object Shape](#template-object-shape) for object shape.\n\nExpected response\n\n- `void`\n\n### `deletePageTemplate`\n\nFor deleting custom page templates.\n\nArguments\n\n- `templateId` :\n - type: `number`\n - description: Template Id.\n\nExpected response\n\n- `void`\n\n## First party Media Support\n\nAdding usage of first-party media for the user includes defining a few callbacks listed below and a component `MediaUpload`\n\n### `getMedia`\n\nFetches first-party media in the element library.\n\nArguments\n\n- `params` :\n - type: `Object`\n - description: Describes search or filter parameters which includes `mediaType`, `searchTerm`& `pagingNum`\n - `mediaType`\n - type: `string`\n - description: Media type requested by the user. One of `image`, `video` or `gif`\n - `searchTerm`\n - type: `string`\n - description: Search string entered by the user.\n - `pagingNum`\n - type: `string`\n - description: Page number\n\n\nExpected response\n\n- An array of **Media Object**\n\n#### Media Object Shape\n\n- `baseColor` :\n\n - type: `string`\n - required: No\n - description: Dominant color in hexadecimal format.\n\n- `blurHash` :\n\n - type: `string`\n - required: No\n - description: Blur hash string of the media.\n\n- `type` :\n\n - type: `string`\n - required: Yes\n - description: Type of media object. One of `image`, `video` or `gif`.\n\n- `mimeType` :\n\n - type: `string`\n - required: Yes\n - description: Media mime type.\n\n- `creationDate` :\n\n - type: `string`\n - required: No\n - description: Media creation date in UTC format.\n\n- `src` :\n\n - type: `string`\n - required: Yes\n - description: Media source URL.\n\n- `width` :\n\n - type: `number`\n - required: Yes\n - description: Media width in pixels.\n\n- `height` :\n\n - type: `number`\n - required: Yes\n - description: Media height in pixels.\n\n- `id` :\n\n - type: `number`\n - required: Yes\n - description: Media id.\n\n- `alt` :\n\n - type: `string`\n - required: No\n - description: Media Alt text.\n\n- `sizes` :\n\n - type: `Object`\n - required: Yes\n - description: Map of media in various sizes (thumbnail, medium, full).\n - `file`\n - type: `string`\n - required: Yes\n - description: Width of this particular size.\n - `width`\n - type: `number`\n - required: Yes\n - description: Width of this particular size.\n - `height`\n - type: `number`\n - required: Yes\n - description: Height of this particular size.\n - `mimeType`\n - type: `string`\n - required: Yes\n - description: Mime type of this particular size.\n - `sourceURL`\n - type: `string`\n - required: Yes\n - description: Link for this particular size.\n\n- `isPlaceholder` :\n\n - type: `boolean`\n - required: No\n - description: Flag to denote if media is placeholder image.\n\n- `isOptimized` :\n\n - type: `boolean`\n - required: No\n - description: Flag to denote if media is optimized.\n\n- `isMuted` :\n\n - type: `boolean`\n - required: No\n - description: Flag to denote if media is muted.\n\n- `isExternal` :\n\n - type: `boolean`\n - required: No\n - description: Flag to denote if media is external.\n\n- `needsProxy` :\n\n - type: `boolean`\n - required: No\n - description: Flag to denote if getting media requires proxy.\n\n\nExample ( Expected response )\n\n```json\n{\n \"baseColor\": \"#ffffff\",\n \"blurHash\": \"UmJ*SDxtIVWB~VayRkj[M|Rkj[ofM|WBWBay\",\n \"type\": \"image\",\n \"mimeType\": \"image/jpeg\",\n \"creationDate\": \"2022-02-08T11:13:06\",\n \"src\": \"http://webstories.local/wp-content/uploads/2022/02/laptop_man.jpg\",\n \"width\": 367,\n \"height\": 267,\n \"id\": 251,\n \"alt\": \"laptop_man\",\n \"sizes\": {\n \"medium\": {\n \"file\": \"laptop_man-300x218.jpg\",\n \"width\": 300,\n \"height\": 218,\n \"mimeType\": \"image/jpeg\",\n \"sourceUrl\": \"http://webstories.local/wp-content/uploads/2022/02/laptop_man-300x218.jpg\"\n },\n \"thumbnail\": {\n \"file\": \"laptop_man-150x150.jpg\",\n \"width\": 150,\n \"height\": 150,\n \"mimeType\": \"image/jpeg\",\n \"sourceUrl\": \"http://webstories.local/wp-content/uploads/2022/02/laptop_man-150x150.jpg\"\n },\n \"full\": {\n \"file\": \"laptop_man.jpg\",\n \"width\": 367,\n \"height\": 267,\n \"mimeType\": \"image/jpeg\",\n \"sourceUrl\": \"http://webstories.local/wp-content/uploads/2022/02/laptop_man.jpg\"\n }\n },\n \"isPlaceholder\": false,\n \"isOptimized\": false,\n \"isMuted\": false,\n \"isExternal\": false,\n \"needsProxy\": false\n}\n```\n\n### `getMediaById`\n\nUsed to get media for video trim functionality\n\nArguments\n\n- `id` :\n - type: `number`\n - description: Media id.\n\nExpected response\n\n- **Media Object** (see [Media Object Shape](#media-object-shape))\n\n### `getMutedMediaById`\n\nUsed to get muted version of a video\n\nArguments\n\n- `id` :\n - type: `number`\n - description: Media id.\n\nExpected response\n\n- **Media Object** (see [Media Object Shape](#media-object-shape))\n\n### `getOptimizedMediaById`\n\nUsed to get optimized version of a video\n\nArguments\n\n- `id` :\n - type: `number`\n - description: Media id.\n\nExpected response\n\n- **Media Object** (see [Media Object Shape](#media-object-shape))\n\n### `updateMedia`\n\nThe story editor calculates and updates data about media elements stored in the back-end using these callbacks. Users can also update data if required interface is added. Out of the box users can only update `altText`.\n\nArguments\n\n- `id` :\n - type: `number`\n - description: Media id.\n\n- `data` :\n - type: `Object`\n - description: Updated data of a media object.\n - `posterId` :\n - type: `number`\n - description: ID of the poster image element of this media element.\n\n - `storyId` :\n - type: `number`\n - description: ID of the story in which a video element's poster was generated.\n\n - `isMuted` :\n - type: `boolean`\n - description: Flag to identify if this element has audio.\n\n - `mutedId` :\n - type: `number`\n - description: ID of the muted version of this media element.\n\n - `mediaSource` :\n - type: `string`\n - description: Source from which the media was uploaded. One of `source-image`, `source-video`.\n\n - `optimizedId` :\n - type: `number`\n - description: ID of optimized version of this media element.\n\n - `altText` :\n - type: `string`\n - description: Alt text for media.\n\n - `baseColor` :\n - type: `string`\n - description: Calculated base color (most prominent color) for media element.\n\n - `blurHash` :\n - type: `string`\n - description: Calculated blur hash string for media element.\n\nExpected response\n\n- `void`\n\n### `uploadMedia`\n\nCalled when editor uploads -\n\n- Poster image for a video.\n- Poster image for a story.\n- Poster image for a template.\n- Altered media (muted, trimmed, optimized or converted to GIF)\n\nAfter uploading altered media Story editor calls `updateMedia` to update original version of altered media.\n\nArguments\n\n- `file` :\n - type: `blob`\n - description: Media File to upload.\n\n- `data` :\n - type: `Object`\n - description: Updated data of a media object.\n - `originalId` :\n - type: `number`\n - description: ID of a media of which this element is an altered version of.\n\n - `mediaId` :\n - type: `number`\n - description: ID of a video of which this element is a poster.\n\n - `storyId` :\n - type: `number`\n - description: ID of a story of which this element is a poster.\n\n - `templateId` :\n - type: `number`\n - description: ID of a template of which this element is a poster.\n\n - `isMuted` :\n - type: `boolean`\n - description: flag to identify if this element has audio.\n\n - `mediaSource` :\n - type: `string`\n - description: Upload source. One of `video-optimization`, `editor`, `poster-generation`,`gif-conversion`or `page-template`.\n\n - `trimData` :\n - type: `Object`\n - description: `TrimData` data object linking a trimmed video to its original.\n - `start`\n - type: `string`\n - description: Start Time stamp of start time of new video. Example '00:01:02.345'.\n - `end`\n - type: `string`\n - description: End Time stamp of end time of new video. Example '00:02:00'.\n\n - `baseColor` :\n - type: `string`\n - description: Calculated base color (most prominent color) for media element.\n\n - `blurHash` :\n - type: `string`\n - description: Calculated blur hash string for media element.\n\nExpected response\n\n- `null`\n\n### `deleteMedia`\n\nFor deleting any media\n\nArguments\n\n- `id` :\n - type: `number`\n - description: ID of a media element which needs to be deleted.\n\nExpected response\n\n- `null`\n\n### `MediaUpload` component\n\n`MediaUpload` component is a modal rendered which will be used to render media upload button and open a media upload modal when a user instantiates a media upload by clicking previously mentioned button.\nThis modal should provide the user to insert any media already with the CMS or upload new items.\n\n- `title` :\n - type: `string`\n - required: No\n - description: Title for the modal.\n\n- `buttonInsertText` :\n - type: `string`\n - required: No\n - description: Text to use for the \"Insert\" button.\n\n- `onSelect` :\n - type: `function`\n - required: Yes\n - description: Selection callback. Used to process the inserted image.\n\n- `onSelectErrorMessage` :\n - type: `function`\n - required: Yes\n - description: Text displayed when incorrect file type is selected.\n\n- `onClose` :\n - type: `function`\n - required: Yes\n - description: Modal close callback.\n\n- `onPermissionError` :\n - type: `function`\n - required: No\n - description: Callback for when user does not have upload permissions.\n\n- `type` :\n - type: `array`\n - required: Yes\n - description: Array of allowed mime types modal should present or accept when a user uploads a new file.\n\n- `multiple` :\n - type: `boolean`\n - required: No\n - description: Whether multi-selection should be allowed.\n\n- `cropParams` :\n - type: `Object`\n - required: No\n - description: Width and height for cropped images.\n\n- `render` :\n - type: `function`\n - required: Yes\n - description: React functional component responsible for rendering required media upload button. Takes a callback which should instantiate the modal for media upload.\n\n\n```jsx\nfunction MediaUpload({\n buttonInsertText,\n onSelect,\n onSelectErrorMessage,\n onClose,\n onPermissionError,\n type,\n multiple,\n cropParams,\n render,\n}) {\n const openModal = () =>{\n // routine to open modal\n // this modal will call callbacks passed to MediaUpload according to the context.\n }\n\n return render(openModal);\n}\n```\n\n\n\n## Adding Custom Fonts\n\nCustomize the Story editor for users to use with custom fonts.\n\n### `getFonts`\n\nUsed to get fonts\n\nArguments\n\n- `params`\n - type: `Object`\n - description: Filter parameters for fetching fonts.\n - `search`\n - type: `string`\n - description: Search string entered by the user.\n - `service`\n - type: `string`\n - description: One of `builtin` or `custom`.\n - `include`\n - type: `string`\n - description: Comma separated names for font in the curated list.\n\nExpected response\n\n- Array of **Font Object**\n\n#### Font Object Shape\n\n- `id`\n - type: `string`\n - required: No\n - description: Unique ID of the font.\n\n- `name`\n - type: `string`\n - required: No\n - description: Name of the font.\n\n- `value`\n - type: `string`\n - required: No\n - description: Font value.\n\n- `family`\n - type: `string`\n - required: Yes\n - description: Family of the font.\n\n- `fallbacks`\n - type: `array`\n - required: No\n - description: Array of fallback font names.\n\n- `weights`\n - type: `array`\n - required: No\n - description: Array of available font weight.\n\n- `variants`\n - type: `array>`\n - required: No\n - description: Array of variant tuple.\n\n- `service`\n - type: `string`\n - required: Yes\n - description: URL to font service which hosts the font.\n\n- `metrics`\n - type: `Object`\n - required: No\n - description: Font metrics.\n\n\nExample ( Expected response )\n\n```json\n{\n \"id\": \"Alegreya\",\n \"name\": \"Alegreya\",\n \"value\": \"Alegreya\",\n \"family\": \"Alegreya\",\n \"fallbacks\": [\n \"serif\"\n ],\n \"weights\": [\n 400\n ],\n \"styles\": [\n \"regular\",\n \"italic\"\n ],\n \"variants\": [\n [0,400]\n ],\n \"service\": \"fonts.google.com\",\n \"metrics\": {\n \"upm\": 1000,\n \"asc\": 1016,\n \"des\": -345,\n \"tAsc\": 1016,\n \"tDes\": -345,\n \"tLGap\": 0,\n \"wAsc\": 1123,\n \"wDes\": 345,\n \"xH\": 452,\n \"capH\": 637,\n \"yMin\": -293,\n \"yMax\": 962,\n \"hAsc\": 1016,\n \"hDes\": -345,\n \"lGap\": 0\n }\n}\n```\n\n## Hotlinking media\n\nAdd support for inserting media by URL in addition to or instead of uploading files.\n\n### `getHotlinkInfo`\n\nUsed to get data about links while hot linking media in media pane.\n\nArguments\n\n- `url` \n - type:`string` \n - description: External link.\n\nExpected response\n\n- `ext` \n - type:`string` \n - required: Yes\n - description: File extension.\n\n- `mimeType` \n - type:`string`\n - required: Yes\n - description: File mime type.\n\n- `type` \n - type:`string`\n - required: Yes \n - description: File type. One of `image` or `video`.\n\n- `fileName` \n - type:`string`\n - required: Yes \n - description: File name.\n\nExample ( Expected response )\n\n```json\n{\n \"ext\": \"jpg\",\n \"mimeType\": \"image/jpeg\",\n \"type\":\"image\",\n \"fileName\": \"file_name.jpg\"\n}\n```\n\n## Adding Links to story elements\n\nLinks can be added to any elements in the Story editor through design panel, the only requirement being defining the callback `getLinkMetadata`\n\n### `getLinkMetadata`\n\nArguments\n\n- `url` \n - type: `string`\n - description: External Link.\n\n\nExpected response\n\n- `title` \n - type: `string`\n - required: Yes\n - description: OG title.\n\n- `icon` \n - type: `string`\n - required: Yes\n - description: OG image.\n\nExample ( Expected response )\n\n```json\n{\n \"title\": \"link to external\",\n \"icon\": \"https://link-to-icon\"\n}\n```\n\n## Adding user capabilities\n\nCaters Story editor with different capabilities on per-user basis\n\n### `getCurrentUser`\n\nFetch details about the current user.\n\nArguments\n\nNone\n\nExpected response\n\n- `id` \n - type: `number`\n - required: Yes\n - description: Current user id.\n\n- `trackingOptin` \n - type: `boolean`\n - required: Yes\n - description: Flag to know if the user has opted in for tracking.\n\n- `onboarding` \n - type: `boolean`\n - required: Yes\n - description: Flag to know if the user needs to be shown onboarding.\n\n- `mediaOptimization` \n - type: `boolean`\n - required: Yes\n - description: Flag to know if the user can upload optimized media.\n\n\nExample ( Expected response )\n\n```json\n{\n \"id\": 1,\n \"trackingOptin\": true,\n \"onboarding\": false,\n \"mediaOptimization\": true\n}\n```\n\n### `updateCurrentUser`\n\nUpdate details about the current user.\n\nArguments\n\n- `id` \n - type: `number`\n - description: User Id.\n\n- `data` \n - type: `Object`\n - description: Data to be updated.\n - `trackingOptin` \n - type: `boolean`\n - description: Flag to know if the user has opted in for tracking.\n - `onboarding` \n - type: `boolean`\n - description: Flag to know if the user needs to be shown onboarding.\n - `mediaOptimization` \n - type: `boolean`\n - description: Flag to know if the user can upload optimized media.\n\nExpected response\n\n- `null`\n" }, { "path": "docs/third-party-integration/story-editor/getting-started.md", "content": "# Getting Started\n\nThe following documentation explains how to integrate the visual story editor with any platform. \n\nThe documentation is divided into 3 sections:\n\n- Getting Started - This current doc provides a setup guide to instantiate a story editor with bare minimum functionality and explains significant UI elements of the editor.\n- [Standalone Editor Tutorial](./tutorial.md) - A tutorial to create a standalone story editor which works without a CMS.\n- [Integration Layer API](./integration-layer.md) - A comprehensive guide on the integration layer of the story editor\n\n## Minimal Setup Guide\n\nYou can quickly spin up a story editor in a few steps described below.\n\n### Step 1: Set up a React project\n\nThe easiest way of setting up a simple React project is by using [Create React App](https://create-react-app.dev/) or templates such as [react-webpack-babel-starter](https://github.com/vikpe/react-webpack-babel-starter).\n\n### Step 2: Install dependencies\n\nFor a minimal story editor, you need to install three packages\n\n```sh\nnpm install @googleforcreators/story-editor @googleforcreators/element-library @googleforcreators/elements\n```\n\n### Step 3: Use the `StoryEditor` component to render the editor\n\nThe code sample given below shows how to scaffold a story editor.\n\n```jsx\nimport { StoryEditor, InterfaceSkeleton } from '@googleforcreators/story-editor';\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n \n \n \n );\n};\n\nexport default Editor;\n```\n\nNote: You may have to wrap the editor in `
`, if the parent container doesn't have any height set.\n\nYou should now have a story editor that looks like this:\n\n![editor](https://user-images.githubusercontent.com/841956/159525789-9c669dc1-78a4-473b-a30f-6bf0bd72cc8b.png)\n\nTo learn more about the individual aspects of the story editor UI and the components it's comprised of, check out the [Web Stories for WordPress user documentation](https://wp.stories.google/docs/) as a reference point.\n\nFor a more in-depth example of setting up a custom story editor, check out the more in-depth [Standalone Editor Tutorial](./tutorial.md)\n" }, { "path": "docs/third-party-integration/story-editor/integration-layer.md", "content": "# Integration Layer\n\nThe story editor can be integrated with any platform by configuring the `StoryEditor` and other components like `InterfaceSkeleton`.\nThis section of the documentation gives a comprehensive guide on what aspects of the story editor can be modified and how to modify them.\n\nAs seen in the [Getting Started](./getting-started.md) guide, a minimal story editor can be created by using the two main components `StoryEditor` and `InterfaceSkeleton` like below.\n\n```js\nimport { StoryEditor, InterfaceSkeleton } from '@googleforcreators/story-editor';\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n \n \n \n );\n};\n```\n\n## `StoryEditor`\n\nThis is the top level component of the story editor which has all the provider components but doesn't render any UI itself.\n\n**Props:**\n\n- `config`\n - type: `Object`\n - required: Yes\n - description: Used for most of the editor configuration. See the [Editor Config](#editor-config) section below for full detail.\n\n- `initialEdits`\n - type: `Object`\n - required: Yes\n - description: The initial edits/state of the story editor. Currently it only supports `story`.\n - `story`\n - type: `Object`\n - required: Yes\n - description: The story editor needs initial story when it loads. You can either provide the initial story object from this prop or via `getStoryById` API callback. See the [expected response](./api-callbacks.md#getstorybyid) of `getStoryById` for the shape of this object.\n\n## `InterfaceSkeleton`\n\nThis component is responsible for rendering the story editor interface UI and can be configured by using multiple props. Please look at the [InterfaceSkeleton](#interfaceskeleton) section below for detailed documentation of this component.\n\n**Props:**\n\n- `header`\n - type: `React.ReactElement`\n - required: No\n - description: Used for rendering the workspace header.\n\n- `footer`\n - type: `Object`\n - required: No\n - description: Used for rendering some parts of the footer.\n\n- `sidebarTabs`\n - type: `Object`\n - required: No\n - description: Used for rendering the sidebar tabs of the story editor.\n\n## Editor Config\n\nTo configure the editor to your needs you can pass various config options to the story editor via `config` prop of the `StoryEditor` component.\n\n### `apiCallbacks`\n\n- type: `Object`\n- description: Takes various callback functions for story editor's side effects. The only required API callback is `saveStoryById`. For detailed documentation of `apiCallbacks`, see [API Callbacks](./api-callbacks.md) section.\n\n### `additionalTips` \n\n- type: `array`\n- description: Used to provide additional tips in editor help center. \n- example :\n \n ```js\n const additionalTips = [{\n title: 'Example Tip Title',\n figureSrcImg: 'http://link/to/image',\n figureAlt: 'Figure alt text',\n description: [\n 'This is an example tip used for testing. Learn more',\n ],\n href: 'https://external/link',\n }]\n ```\n\nYou can also provide an external link in the description of the tip.\n\n### `allowedMimeTypes` \n\n- type: `Object`\n- description: A map of file mime types accepted by element library.\n- example :\n \n ```js\n const allowedMimeTypes = {\n audio: ['audio/mpeg', 'audio/aac', 'audio/wav', 'audio/ogg'],\n image: ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'],\n caption: ['text/vtt'],\n vector: ['image/svg+xml']\n };\n ```\n\n### `autoSaveInterval`\n\n- type: `number`\n- description: Time Interval (in seconds) after which story editor automatically saves a story by calling `saveStoryById`.\n\n### `localAutoSaveInterval`\n\n- type: `number`\n- description: Time Interval (in seconds) after which story editor automatically saves the story data into sessionStorage.\n\n### `canViewDefaultTemplates`\n\n- type: `boolean`\n- description: Flag to allow for enabling default page template in the editor.\n\n### `capabilities`\n\n- type: `Object`\n- description: Controls story editor's capabilities, currently 2 capabilities can be customized.\n - `hasMediaUploadAction`\n - type: `boolean`\n - description: Allow media upload.\n - `canManageSettings`\n - type: `boolean`\n - description: Allow visiting settings page on the dashboard.\n- example :\n \n ```js\n const capabilities = {\n \"hasUploadMediaAction\": true,\n \"canManageSettings\": true\n }\n ```\n\n### `cdnURL`\n\n- type: `string`\n- description: URL to element resources.\n\n### `dashboardLink`\n\n- type: `string`\n- description: URL to story editor's dashboard.\n\n### `encodeMarkup`\n\n- type: `boolean`\n- description: Flag to toggle markup generation in story data.\n\n### `ffmpegCoreUrl`\n\n- type: `string`\n- description: URL to `ffmpeg` core required for optimizing uploaded media.\n\n### `flags`\n\n- type: `Object`\n- description: Many experimental features can be enabled/disabled in the story editor. For a current list of existing flags, check out [`Experiments.php`](https://github.com/GoogleForCreators/web-stories-wp/blob/main/includes/Experiments.php).\n\n### `generalSettingsLink`\n\n- type: `string`\n- description: URL for settings page of the dashboard\n\n### `isRTL`\n\n- type: `boolean`\n- description: switches all styles to accommodate RTL languages.\n\n### `locale`\n\n- type: `Object`\n- description: locale data \n \n - `locale`\n - type: `string`\n - description: Locale code.\n\n - `dateFormat`\n - type: `string`\n - description: Date format used by the editor.\n\n - `timeFormat`\n - type: `string`\n - description: Time format used by the editor.\n\n - `gmtOffset`\n - type: `string`\n - description: GMT offset of user's location\n\n - `timezone`\n - type: `string`\n - description: User's time zone\n\n - `months`\n - type: `array`\n - description: Ordered array of month names.\n\n - `monthsShort`\n - type: `array`\n - description: Ordered array of shortened month names.\n\n - `weekdays`\n - type: `array`\n - description: Ordered array of weekday names.\n\n - `weekdaysShort`\n - type: `array`\n - description: Ordered array of shortened weekday names.\n\n - `weekdaysInitials`\n - type: `array`\n - description: Ordered array of weekday initial.\n\n - `weekStartsOn`\n - type: `number`\n - description: Index of the first day of the week in `weekdays` array\n\n- example :\n\n```js\nconst locale ={\n\t\"locale\": \"en-US\",\n\t\"dateFormat\": \"F j, Y\",\n\t\"timeFormat\": \"g:i a\",\n\t\"gmtOffset\": \"-4\",\n\t\"timezone\": \"America/New_York\",\n\t\"months\": [\n\t\t\"January\",\n\t\t\"February\",\n\t\t\"March\",\n\t\t\"April\",\n\t\t\"May\",\n\t\t\"June\",\n\t\t\"July\",\n\t\t\"August\",\n\t\t\"September\",\n\t\t\"October\",\n\t\t\"November\",\n\t\t\"December\"\n\t],\n\t\"monthsShort\": [\n\t\t\"Jan\",\n\t\t\"Feb\",\n\t\t\"Mar\",\n\t\t\"Apr\",\n\t\t\"May\",\n\t\t\"Jun\",\n\t\t\"Jul\",\n\t\t\"Aug\",\n\t\t\"Sep\",\n\t\t\"Oct\",\n\t\t\"Nov\",\n\t\t\"Dec\"\n\t],\n\t\"weekdays\": [\n\t\t\"Sunday\",\n\t\t\"Monday\",\n\t\t\"Tuesday\",\n\t\t\"Wednesday\",\n\t\t\"Thursday\",\n\t\t\"Friday\",\n\t\t\"Saturday\"\n\t],\n\t\"weekdaysShort\": [\n\t\t\"Sun\",\n\t\t\"Mon\",\n\t\t\"Tue\",\n\t\t\"Wed\",\n\t\t\"Thu\",\n\t\t\"Fri\",\n\t\t\"Sat\"\n\t],\n\t\"weekdaysInitials\": [\n\t\t\"S\",\n\t\t\"M\",\n\t\t\"T\",\n\t\t\"W\",\n\t\t\"T\",\n\t\t\"F\",\n\t\t\"S\"\n\t],\n\t\"weekStartsOn\": 1\n}\n```\n\n### `maxUpload`\n\n- type: `number`\n- description: Size limit on uploaded media in bytes.\n\n### `MediaUpload`\n\n- type: `React.ReactElement`\n- description: React component used for rendering media upload modal. See [First party Media Support](./api-callbacks.md#First-party-Media-Support)\n\n### `showMedia3p`\n\n- type: `boolean`\n- description: Flag used to enable or disable third party media usage.\n\n### `storyId`\n\n- type: `number`\n- description: ID of the current story being rendered by the editor.\n\n### `styleConstants`\n\n- type: `Object`\n- description: Style constants for story editor modals.\n \n - `topOffset`\n - type: `number`\n - description: Top offset for modal overlay.\n\n - `leftOffset`\n - type: `number`\n - description: Left offset for modal overlay.\n\n## InterfaceSkeleton\n\nMany aspects of the editor can be customized by adding custom components through A component called `InterfaceSkeleton` from `@googleforCreators/story-editor`. This section will give details about what aspects of the story editor can be modified by custom components.\nBefore reading this you might want to check out [Getting Started](./getting-started.md) to know about different visual components of the editor.\n\n## Workspace\n\n### Header \n\nEditor Workspace has reserved space to render a custom header. This can be used to provide custom UI elements for users to interact with. \nAlthough you can use custom UI elements in the header, it is advised to use elements provided in `@googleForCreators/design-system`. That will guarantee design consistency and compatibility with the `RTL` layout.\n\nAn example use case is available in [Standalone Editor Tutorial](./tutorial.md) where a few buttons have been added to the header.\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst CustomHeader = () => (\n
\n {\" Custom Header \"}\n
\n);\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n
\n \n } />\n \n
\n );\n};\n```\n\n### Footer \n\nEditor workspace also has a footer space, but unlike header space, this can only be partially modified. Modifications include adding a footer to the Help center Menu and adding a pre-publish checklist.\n\n### Adding a footer to Help Center\n\nAdding a footer to the help center is straightforward, just pass a component to the `InterfaceSkeleton` component as shown below.\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst CustomFooter = () =>
{\" Custom Help Center Footer \"}
;\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n
\n \n \n \n
\n );\n};\n```\n\n### Adding a pre-publish checklist\n\nYou can also initialize a checklist to assist the user by offering design suggestions. There are many pre-built checks in `@googleForCreators/story-editor` for you to use. It's also possible to add additional checks if needed.\n\nThe application accepts 3 categories of checks, below is the list of all categories with corresponding pre-built checks available for initializing the checklist.\n\nAccessibility Checks :\n\n- `PageBackgroundTextLowContrast`\n- `TextElementFontSizeTooSmall`\n- `VideoElementMissingDescription`\n- `VideoElementMissingCaptions`\n- `ElementLinkTappableRegionTooSmall`\n- `ElementLinkTappableRegionTooBig`\n- `ImageElementMissingAlt`\n\nDesign Checks :\n\n- `StoryPagesCount`\n- `PageTooMuchText`\n- `PageTooLittleText`\n- `PageTooManyLinks`\n- `VideoElementResolution`\n- `ImageElementResolution`\n- `FirstPageAnimation`\n\nPriority Checks :\n\n- `StoryMissingTitle` \n- `StoryMissingPublisherName`\n- `StoryTitleLength` \n- `StoryMissingExcerpt` \n- `StoryPosterAttached`\n- `StoryPosterSize`\n- `PublisherLogoMissing`\n- `PublisherLogoSize`\n- `VideoElementMissingPoster`\n- `VideoOptimization`\n- `StoryAmpValidationErrors`\n\n#### Using pre-built checks\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n PageBackgroundTextLowContrast,\n TextElementFontSizeTooSmall,\n StoryPagesCount,\n PageTooMuchText,\n StoryMissingTitle,\n StoryTitleLength,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst Accessibility = () => (\n <>\n \n \n \n);\n\nconst Design = () => (\n <>\n \n \n \n);\n\nconst Priority = () => (\n <>\n \n \n \n);\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n \n \n \n );\n};\n```\n\n#### Implementing a custom check\n\nBelow is an example of a custom check, this check will pop up in the checklist if story has less than 2 pages.\n\n```jsx\nimport {\n ChecklistCard,\n DefaultFooterText,\n useRegisterCheck,\n useIsChecklistMounted,\n useStory,\n} from \"@googleforcreators/story-editor\";\n\nconst LessThan2PageCheck = () => {\n const isChecklistMounted = useIsChecklistMounted();\n const { pagesLength } = useStory(({ state: { pages } }) => ({\n pagesLength: pages.length,\n }));\n const hasLessThan2Pages = pagesLength < 2;\n\n useRegisterCheck(\"LessThan2PageCheck\", hasLessThan2Pages);\n\n return (\n LessThan2PageCheck &&\n isChecklistMounted && (\n {\"Please add more pages\"}\n }\n />\n )\n );\n};\n\nexport { LessThan2PageCheck };\n\n```\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\nimport React, { useState } from \"react\";\nimport { LessThan2PageCheck } from \"./footer/checks\";\n\nconst CustomDesignChecklist = () => (\n <>\n \n \n);\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n \n \n \n );\n};\n```\n\n## Enabling Shopping Tab\n\nThe shopping tab allows inserting a product attachment with a draggable drawer that links to the product URL. To enable the shopping tab, you need to make a couple of changes.\n\nIn the `StoryEditor` config, add `isShoppingEnabled: true` and `shoppingProvider: 'None'`. If you have a shopping provider like WooCommerce or Shopify you can add 'Woocommerce' or 'Shopify' instead of 'None'.\n\n```jsx\n\n }\n sidebarTabs={{\n document: {\n title: 'Document',\n Pane: DocumentPane,\n },\n }}\n />\n\n```\n\nNext, provide `getProducts` in `apiCallbacks`:\n\n```jsx\nconst getProducts = () => {\n const products = [\n {\n productId: \"1\",\n productBrand: \"Nike\",\n productDetails: \"Random Nike sneaker\",\n productImages: [\n {\n alt: \"Image\",\n url: \"https://static.nike.com/a/images/c_limit,w_592,f_auto/t_product_v1/4f37fca8-6bce-43e7-ad07-f57ae3c13142/air-force-1-07-shoes-WrLlWX.png\",\n },\n ],\n productPrice: 1000,\n productPriceCurrency: \"INR\",\n productTitle: \"Nike Sneaker\",\n productUrl:\n \"https://www.nike.com/in/t/air-force-1-07-shoes-WrLlWX/315122-111\",\n },\n ];\n return Promise.resolve({ products });\n};\n\nexport default getProducts;\n```\n\nAfter configuring these, you will see a shopping bag icon which will hold products you return from the `getProducts` function. Clicking on the product will insert an attachment.\n\n## Sidebar Tabs\n\n### Document Pane\n\nThe story editor can have an additional Document pane alongside the Insert and Style panes, which is meant to provide UI elements for editing data about the story as a whole.\nThe Document pane can be configured as shown below.\n\n```jsx\nimport {\n\tStoryEditor,\n\tInterfaceSkeleton,\n} from '@googleforcreators/story-editor';\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst CustomDocumentPanel = ()=>(\n\t
\n\t\t{\" Custom Document Panel \"}\n\t
\n)\n\nconst Editor = () =>{\n\n\tconst apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n\treturn (\n \n \n \n\t)\n}\t\n```\n" }, { "path": "docs/third-party-integration/story-editor/tutorial.md", "content": "# Standalone Editor Tutorial\n\nThis tutorial explains how to create a standalone story editor using React that works without any CMS. It encompasses saving stories to the browser's local storage as well as previewing created stories.\n\n## Step 1: Setting up the editor with minimum config\n\nYou can bootstrap your React project using something like [Create React App](https://create-react-app.dev/) or similar.\n\nLet's start with installing the required dependencies.\n\n```sh\nnpm install @googleforcreators/story-editor @googleforcreators/design-system @googleforcreators/migration @googleforcreators/elements @googleforcreators/element-library\n```\n\nThe following code block scaffolds a minimal story editor:\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById: () => Promise.resolve({}),\n };\n\n elementTypes.forEach(registerElementType);\n\n return (\n \n \n \n );\n};\n\nexport default Editor;\n```\n\n## Step 2: Saving stories in local storage\n\nWe will now define the API callback `saveStoryById` which is invoked by the editor while saving a story.\n\nFor details about other API callbacks accepted by the story editor, check out the [API Callbacks](./api-callbacks.md) section.\n\nThe following code block is given to show an example of how a story can be saved to the browser's local storage.\n\n```jsx\nimport { DATA_VERSION } from \"@googleforcreators/migration\";\n\nconst saveStoryById = ({\n pages,\n globalStoryStyles,\n currentStoryStyles,\n content,\n title,\n}) => {\n const storySaveData = {\n title: {\n raw: title,\n },\n storyData: {\n version: DATA_VERSION,\n pages,\n currentStoryStyles,\n },\n stylePresets: globalStoryStyles,\n permalinkTemplate: \"https://example.org/web-stories/%pagename%/\",\n };\n\n window.localStorage.setItem(\"STORY_CONTENT\", JSON.stringify(storySaveData));\n window.localStorage.setItem(\"STORY_MARKUP\", content);\n\n return Promise.resolve({});\n};\n\nexport default saveStoryById;\n```\n\nThe `saveStoryById` callback expects an object which has data about the story (`pages`, `globalStoryStyles`, `currentStoryStyles`) which will be stored in the local storage. Story editor also creates markup for the story with the key `content`, which will also be saved in the local storage and will be used for creating a preview in later sections of the tutorial.\n\nNow let's pass down this callback to the editor and use the data stored in local storage to hydrate it.\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\nimport saveStoryById from \"./saveStoryById\";\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById,\n };\n\n elementTypes.forEach(registerElementType);\n\n const content = window.localStorage.getItem(\"STORY_CONTENT\");\n const story = content ? JSON.parse(content) : {};\n\n return (\n \n \n \n );\n};\n\nexport default Editor;\n```\n\n## Step 3: Adding Save Button\n\nNow we can add a Save button which will call the `saveStoryById` callback from the previous step in order to save story data in local storage.\n\nThe following code shows how to accomplish that by using components from `@googleforcreators/design-system`:\n\n```jsx\nimport {\n Button,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_VARIANTS,\n useSnackbar,\n} from \"@googleforcreators/design-system\";\nimport { useStory } from \"@googleforcreators/story-editor\";\n\nfunction SaveButton() {\n const { isSaving, saveStory } = useStory(\n ({\n state: {\n meta: { isSaving },\n },\n actions: { saveStory },\n }) => ({\n isSaving,\n saveStory,\n }),\n );\n\n const { showSnackbar } = useSnackbar();\n\n const handleSaveButton = () => {\n saveStory().then(() => {\n showSnackbar({\n message: \"Story Saved\",\n });\n });\n };\n\n return (\n \n {\"Save\"}\n \n );\n}\n\nexport default SaveButton;\n\n```\n\nIn the above code, `useStory` is a custom hook that exposes functionality to read and manipulate data of the story currently being edited. A state variable `isSaving` is being used to disable the save button when a story is being saved and the `saveStory` action is being used to actually save the story.\n\nThe `useSnackBar` hook exposes a `showSnackBar` action to display a snackbar message in the editor.\n\n### Header\n\nNow that we have a Save button, we can display it in the editor in a dedicated header area shown at the top of the workspace area.\n\nHere is how such a header component can be passed to the story editor in order to display the Save button:\n\n```jsx\nimport SaveButton from \"./saveButton\";\n\nfunction HeaderLayout() {\n return (\n
\n \n \n \n
\n
\n \n );\n}\n\nexport default HeaderLayout;\n\n```\n\nPassing the component to the editor:\n\n```jsx\nimport {\n StoryEditor,\n InterfaceSkeleton,\n} from \"@googleforcreators/story-editor\";\nimport { elementTypes } from '@googleforcreators/element-library';\nimport { registerElementType } from '@googleforcreators/elements';\nimport saveStoryById from \"./saveStoryById\";\nimport HeaderLayout from \"./header\";\n\nconst Editor = () => {\n const apiCallbacks = {\n saveStoryById,\n };\n\n elementTypes.forEach(registerElementType);\n\n const content = window.localStorage.getItem(\"STORY_CONTENT\");\n const story = content ? JSON.parse(content) : {};\n\n return (\n \n } />\n \n );\n};\n\nexport default Editor;\n```\n\n## Step 4: Adding Preview button\n\nSimilar to the Save button in the previous step, we can add a new button that will open a new tab with the preview of a story.\n\n```jsx\nimport { Tooltip, useStory } from \"@googleforcreators/story-editor\";\nimport {\n Button,\n BUTTON_SIZES,\n BUTTON_TYPES,\n BUTTON_VARIANTS,\n Icons,\n} from \"@googleforcreators/design-system\";\n\nfunction PreviewButton() {\n const { isSaving, saveStory } = useStory(\n ({\n state: {\n meta: { isSaving },\n },\n actions: { saveStory },\n }) => ({\n isSaving,\n saveStory,\n }),\n );\n\n const openPreviewLink = async () => {\n await saveStory();\n\n const previewLink = window.origin + \"/preview\";\n\n // Start a about:blank popup with waiting message until saving operation\n // is done. That way, we will not bust the popup timeout.\n try {\n const popup = window.open(\"about:blank\", \"story-preview\");\n\n if (popup) {\n popup.document.write(\"\");\n popup.document.write(\"\");\n popup.document.write(\"Generating the preview…\");\n popup.document.write(\"\");\n popup.document.write(\"\");\n popup.document.write(\"Please wait. Generating the preview…\"); // Output \"waiting\" message.\n\n // Force redirect to the preview URL after 5 seconds. The saving tab\n // might get frozen by the browser.\n popup.document.write(\n ``,\n );\n }\n } catch (e) {\n console.log(e);\n }\n };\n\n return (\n \n \n \n \n \n );\n}\n\nexport default PreviewButton;\n```\n\nThis new button is very similar to the Save button, but it is styled a little differently and uses an icon (`Icons.Eye`) from the component library rather than a text label.\n\nClicking this button will:\n\n1. Store the story data and markup in local storage.\n2. Open a new tab with some loading state text.\n3. Redirect to the preview once the preview has been generated, or after a given timeout is reached.\n\nThis button can then be displayed in the header area next to the Save button.\n\n```jsx\nimport SaveButton from \"./saveButton\";\nimport PreviewButton from \"./previewButton\";\n\nfunction HeaderLayout() {\n return (\n
\n \n \n \n \n
\n \n \n );\n}\n\nexport default HeaderLayout;\n```\n\nA new route has to be introduced which will serve a preview of the story, for example using [React Router](https://reactrouter.com/) or a server-side solution. \n\nOn this route, simply display story markup which was previously stored in the browser's local storage using `saveStoryById`.\n\nYou can use the following code sample to describe a component which overrides page's HTML with the one in the local storage.\n\n```jsx\nimport { useEffect } from \"@googleforcreators/react\";\n\nfunction Preview() {\n useEffect(() => {\n const content = window.localStorage.getItem(\"STORY_MARKUP\");\n\n if (content) {\n document.open();\n // Note that the use of document.write for replacing the whole page is to quickly set up a preview for demo but may not be ideal for production.\n document.write(content);\n document.close();\n }\n }, []);\n\n return null;\n}\n\nexport default Preview;\n```\n\nThis is it! You should now have a working story editor which is capable of saving stories and generating a preview. \n\nCheck out the [Integration Layer API](./integration-layer.md) for a comprehensive documentation of the story editor's integration layer if you want to implement your own custom version.\n" }, { "path": "docs/unit-tests.md", "content": "# Unit Tests\n\n## PHP\n\nThis project uses the [PHPUnit](https://phpunit.de/) testing framework to write unit and integration tests for the PHP part. \n\nTests are run against a running WordPress instance through the [WordPress PHPUnit Test Suite](https://make.wordpress.org/core/handbook/testing/automated-testing/writing-phpunit-tests/https://make.wordpress.org/core/handbook/testing/automated-testing/writing-phpunit-tests/). \nFor improved cross version compatibility for PHPUnit, the [WP Test Utils](https://github.com/Yoast/wp-test-utils) is implemented.\n\nTo run the full test suite, you can use the following command:\n\n```bash\nnpm run test:php\n```\n\nYou can also just run test for a specific function or class by using something like this:\n\n```bash\nnpm run test:php -- --filter=Story_Post_Type\n```\n\nSee `npm run test:php:help` to see all the possible options.\n\n### Writing PHP Tests\n\n#### Useful Resources for PHP Tests\n\n* [Using the WordPress PHPUnit Test Suite](https://make.wordpress.org/core/handbook/testing/automated-testing/writing-phpunit-tests/https://make.wordpress.org/core/handbook/testing/automated-testing/writing-phpunit-tests/)\n\n## JavaScript\n\n[Jest](https://jestjs.io/) is used as the JavaScript unit testing framework.\n\nTo run the full test suite, you can use the following command:\n\n```bash\nnpm run test:js\n```\n\nYou can also watch for any file changes and only run tests that failed or have been modified:\n\n```bash\nnpm run test:js:watch\n```\n\nSee `npm run test:js:help` to get a list of additional options that can be passed to the test runner.\n\n### API\n\nThe [Jest docs](https://jestjs.io/docs/en/getting-started) have a good introduction into how to write tests using Jest.\n\n[`jest-dom`](https://github.com/testing-library/jest-dom) and [`jest-extended`](https://github.com/jest-community/jest-extended) are used in the project to extend test assertions beyond Jest's defaults.\n\n**Attention**: both these libraries have a `toBeEmpty` assertion. If you want the one from `jest-dom`, use `toBeEmptyNode` instead.\n\nReact components and hooks are tested using [Testing Library](https://testing-library.com/docs/intro).\n\n### Test Utils\n\n* In the project, there are `testUtils` folders with custom test utilities like `renderWithTheme` that can be used to make writing tests easier.\n\n### Custom Matchers\n\nThe following custom matchers exist in the project:\n\n* `toBeValidAMP`\n* `toBeValidAMPStoryPage`\n* `toBeValidAMPStoryElement`\n\n### Writing JavaScript Tests\n\n#### Useful Resources for JavaScript Tests\n\n* [Jest documentation](https://jestjs.io/docs/en/getting-started)\n* [DOM Testing Library](https://testing-library.com/docs/dom-testing-library/intro)\n* [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)\n* [\"Which query should I use?\"](https://testing-library.com/docs/guide-which-query)\n* [Common mistakes with React Testing Library](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library)\n* [React Hooks Testing Library](https://react-hooks-testing-library.com/)\n* [`jest-dom` API](https://github.com/testing-library/jest-dom#custom-matchers)\n* [`jest-extended` API](https://github.com/jest-community/jest-extended#api)\n\n#### Naming Conventions\n\n**File Names**:\nIf a component or function to be tested resides in `foo/bar/baz.js`, it is recommend to place the tests in `foo/bar/tests/baz.js`. There is no need for a `.test.js` file name suffix.\n\n**Test Names**:\nThe test name should be a proper sentence, starting with `it`. This provides more readable test failures. Example:\n\n```js\ndescribe('sum', () => {\n it('adds 1 + 2 to equal 3', () => {\n expect(sum(1, 2)).toBe(3);\n });\n});\n```\n\nThis will be reported as \"sum > (it) adds 1 + 2 to equal 3\".\n\n### Snapshot Testing\n\nTry to avoid using snapshots when rendering components works just as well. If needed, use `toMatchInlineSnapshot`.\n\n### Code Coverage\n\nUse the following command to run code JavaScript tests with code coverage.\n\n```bash\nnpm run test:js:coverage\n```\n\nOne tests ran successfully, the coverage report will automatically open in your browser.\n" }, { "path": "docs/web-stories-embeds.md", "content": "# Web Stories Embeds\n\nTheme developers can add varying degrees of support for Web Stories based on their requirements.\n\n## Customizer Integration\n\nThis basic integration guide will walk you through the simplest integration steps with which you can integrate web stories in your theme within 5 minutes and a couple of lines of code.\n\n### Add Theme Support for Web Stories\n\nThemes can opt into adding support for Web Stories, which will enable a new Customizer settings panel to control the appearance of stories in the theme.\n\nThis step is mandatory to integrate web stories into the theme via the Customizer.\n\nAdd the following code to the theme’s `functions.php` file to add support:\n\n```php\nfunction mytheme_setup() {\n add_theme_support( 'web-stories' );\n}\n\nadd_action( 'after_setup_theme', 'mytheme_setup' );\n```\n\nThis is the minimal code which is required to get the \"Web Stories\" panel visible in the Customizer. This will work with the default settings options provided by the plugin, which can be changed.\n\n![Customizer Web Stories Options](https://user-images.githubusercontent.com/6906779/112966823-3793ee00-9168-11eb-850f-aee953814217.png)\n\n### Display Stories in Theme\n\nBased on the Customizer settings, a theme can display stories in appropriate place with the following code:\n\n```php\n [\n\t\t\t'view_type' => [\n\t\t\t\t'enabled' => [ 'circles' ], // possible values: circles, grid, carousel, list.\n\t\t\t\t'default' => 'circles',\n\t\t\t],\n\t\t\t'title' => [\n\t\t\t\t'enabled' => true,\n\t\t\t\t'default' => true,\n\t\t\t],\n\t\t\t'excerpt' => [\n\t\t\t\t'enabled' => true,\n\t\t\t\t'default' => false,\n\t\t\t],\n\t\t\t'author' => [\n\t\t\t\t'enabled' => true,\n\t\t\t\t'default' => true,\n\t\t\t],\n\t\t\t'date' => [\n\t\t\t\t'enabled' => false,\n\t\t\t\t'default' => true,\n\t\t\t],\n\t\t\t'archive_link' => [\n\t\t\t\t'enabled' => true,\n\t\t\t\t'default' => true,\n\t\t\t\t'label' => __( 'View all stories', 'web-stories' ),\n\t\t\t],\n\t\t\t'sharp_corners' => [\n\t\t\t\t'enabled' => false,\n\t\t\t\t'default' => false,\n\t\t\t],\n\t\t\t'order' => [\n\t\t\t\t'default' => 'DESC', // or 'ASC'.\n\t\t\t],\n\t\t\t'orderby' => [\n\t\t\t\t'default' => 'post_date', // or post_title.\n\t\t\t],\n\t\t\t'circle_size' => [\n\t\t\t\t'default' => 150, // 80 to 200\n\t\t\t],\n\t\t\t'number_of_stories' => [\n\t\t\t\t'default' => 10,\n\t\t\t],\n\t\t\t'number_of_columns' => [\n\t\t\t\t'default' => 2,\n\t\t\t],\n\t\t\t'image_alignment' => [\n\t\t\t\t'default' => is_rtl() ? 'right' : 'left',\n\t\t\t],\n\t\t],\n\t]\n);\n```\n\n## Displaying Stories\n\n### Template Tag\n\nIf you want to display web stories anywhere in your theme, unrelated to customizer Web Story Option settings, you can use the following template tag. It will display 10 stories in grid format:\n\n```php\n 'grid', // Possible values: circles, grid, carousel, list.\n\t\t'number_of_columns' => 2,\n\t\t'show_title' => false,\n\t\t'show_author' => false,\n\t\t'show_date' => false,\n\t\t'show_excerpt' => false,\n\t\t'show_archive_link' => false,\n\t\t'sharp_corners' => false,\n\t\t'archive_link_label' => __( 'View all stories', 'your-theme-slug' ),\n\t\t'class' => 'your-class-name',\n\t];\n\n\t$args = [\n\t\t'posts_per_page' => 10,\n\t\t'post_status' => 'publish',\n\t\t'suppress_filters' => false,\n\t\t'no_found_rows' => true,\n\t];\n\n\t\\Google\\Web_Stories\\render_stories( $attrs, $args );\n}\n\n```\n\n## Custom Renderers\n\nRenderer classes are primarily responsible for Rendering Stories. Renderer classes must implement the [`Renderer` interface](../includes/Interfaces/Renderer.php).\n\nGenerally, rendering decisions are taken based on the view type.\n\nThe Web Stories plugin has two concrete implementations of `Renderer`:\n\n* **Generic Renderer** - Used for all view types, but Carousel and Circles views.\n* **Carousel Renderer** - Used for displaying stories in Carousel and Circles view mode.\n\nBoth of these classes extend the abstract `Renderer` class which itself implements the `Renderer` interface and takes care of some common operations for those concrete implementations to avoid code repetition.\n\n### Renderer Interface and Methods\n\nThe `Renderer` interface is already depicted in the above section. Following is the description of methods:\n\n1. `init()` \nThis is used to perform any operations when the Renderer object is created. This method can be used to some essential properties, add hooks etc.\n\n2. `render()` \nThis method is used to render the stories and its markup.\n\n3. `render_single_story_content()` \nThis method should be used to return the markup of a single story. This is useful while we iterate over the list of stories to get the accumulative markup.\n\n### Creating your own Renderer Classes\n\nIf needed, you can write your own Renderer class to generate custom markup for stories.\n\nFollowing is an example of such a custom Renderer class.\n\n```php\nstories = $query->get_stories();\n\t}\n\n\t/**\n\t * Initialization actions.\n\t */\n\tpublic function init(): void {\n\t\tadd_action( 'some_action', [ $this, 'some_callback' ] );\n\t}\n\n\t/**\n\t * Return the stories markup as string which needs to be\n\t * echoed further.\n\t *\n\t * @param array $args Rendering args like height, width etc.\n\t *\n\t * @return string\n\t */\n\tpublic function render( array $args = array() ): string {\n\t\tob_start();\n\t\t?>\n\t\t
\n\t\t
\n\t\t\t
    \n\t\t\t\tstories ) ) {\n\t\t\t\t\tforeach ( $this->stories as $story ) {\n\t\t\t\t\t\t$this->current_story = $story;\n\t\t\t\t\t\t$this->render_single_story_content();\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t?>\n\t\t\t
\n\t\t
\n\t\t
\n\t\t%s', esc_html( $this->current_story->post_title ) );\n\t}\n}\n```\n\nOnce the Renderer class is ready, you can use this Renderer to display stories as follows.\n\n```php\n$story_query_attrs = [ 'view' => 'circles' ];\n$story_query_args = [ 'posts_per_page' => 8 ];\n$story_query = new \\Google\\Web_Stories\\Story_Query( $story_query_attrs, $story_query_args );\n\n$renderer = new ExampleRenderer( $story_query );\necho $renderer->render();\n```\n\n## CSS Guide\n\nWeb Stories use minimal required HTML to render stories based on selected view type. This block has four view types in total, which are as follows:\n\n* Generic View\n 1. Grid View\n 2. List View\n* Carousel View\n 1. Box Carousel\n 2. Circles Carousel\n\nAs mentioned above, these four view types have further been divided into two types of renderers. Following are the general full structure of the rendered web stories for each renderer type. Some of these elements are conditional and will only render if dependent conditions are met, like the excerpt ( ‘.story-content-overlay__excerpt’ ) will only be shown for the list view type and if control to show the excerpt is set to true.\n\n**Generic View:**\n\n```html\n
\n
\n
\n
\n \n \n\n \n\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n
\n\n \n```\n\n**Carousel View:**\n\n```html\n
\n
\n
\n
\n
\n \n \n\n \n\n \n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n
\n\n \n```\n\n## Elements\n\n### Block root classes\n\nFollowing classes are present on the root element.\n\n#### `.web-stories-list`\n\nDefault class added to the block’s main container.\n\n#### `.align{$alignment_option}`\n\nIf the block has alignment set it will add this class with the one of the `[ ‘none’, ‘wide’, ‘full’, ‘left’, ‘center’, ‘right’ ]` values, i.e., if alignment is set to `wide` the class will be `alignwide`. Defaults to `alignnone`.\n\nAlso adds any extra classes passed to the renderer with a story attribute named ‘class’.\n\n#### `.has-archive-link`\n\nIf the block is showing an archive link.\n\n#### View specific classes added to the root\n\n##### `.is-view-type-{$view_type}`\n\n`$view_type` will be one of the four view types i.e., for Circles Carousel the class name will be `is-view-type-circles`.\n\n\n##### `.columns-{$column_number}`\n\n`$column_number` will range from 1-4, i.e., if the block is set to have 2 columns the resulting class will be `columns-2`.\n\n##### `.is-style-squared`\n\nIf showing sharp corners for the story elements.\n\n##### `.is-style-default`\n\nIf showing curved corners for the story elements, default for the block.\n\n##### `.has-title`\n\nThis class is added for the circles carousel view, if it is showing the story titles.\n\n##### `.is-carousel`\n\nAdded for the Carousel view types.\n\n### `Inner wrapper`\n\n#### `.web-stories-list__inner-wrapper`\n\nAdded to the inner container which holds the story elements. For the generic view types, this will have story elements as direct children.\n\nThis element also adds CSS variables as inline styles based on the view type as mentioned here:\n\n* `--ws-circle-size`: Circle size value when using the circle carousel.\n* `--ws-story-max-width`: For the box carousel this adds the max-width for the story items.\n\n### Story element\n\nThis element encompasses the story elements like poster, title, author name etc.\n\n#### `.web-stories-list__story`\n\nStory element root.\n\n#### `.image-align-right`\n\nFor list view show image on right.\n\n### Story poster\n\n#### `.web-stories-list__story-poster`\n\nStory poster elements encapsulate either `` or `` based on the type of request, whether it is AMP or non-AMP.\n\n### Story content overlay\n\n#### `.web-stories-list__story-content-overlay`\n\nContent overlay container.\n\n#### `.story-content-overlay__title`\n\nStory title element.\n\n#### `.story-content-overlay__excerpt`\n\nStory excerpt.\n\n#### `.story-content-overlay__author`\n\nStory author name.\n\n#### `.story-content-overlay__date`\n\nStory publish date.\n\n### Story Lightbox\n\nA story opens in a lightbox upon clicking it. This element contains the `` which embeds the story. There will be one lightbox wrapper per instance of Web Stories rendered on the page.\n\nThe lightbox renders a bit differently on AMP vs non-AMP pages. On non-AMP pages it uses a single lightbox container and renders all the stories as links in ``. This enables some of the extra features on non-AMP pages like skip through stories, auto-play next story.\n\nWhile on AMP pages it uses one `` component for each story in the block.\n\n#### `.web-stories-list__lightbox-wrapper`\n\nThe lightbox wrapper will have an extra class to identify which instance it relates to. I.e., `ws-lightbox-{$i}` where `$i` is an integer, number of the instance.\n\n#### `.web-stories-list__lightbox`\n\nMain lightbox container.\n\n#### `.story-lightbox__close-button`\n\nOnly present on AMP pages, this is the lightbox close button element.\n" }, { "path": "docs/workflows.md", "content": "# Workflows\n\n## Create plugin bundle\n\nTo create a build of the plugin for installing in WordPress as a ZIP package, run:\n\n```bash\nnpm run build # Build JS\nnpm run workflow:version [version] # Bump version number\nnpm run workflow:build-plugin -- [--composer] [--cdn [url]] [--zip [filename] [--clean] # Creates a full build.\n```\n\n## Update list of available fonts\n\nThe project bundles an up-to-date list of available fonts from Google Fonts (plus some system fonts) that can be used in the editor.\n\nA workflow exists that automatically updates the list every time Google Fonts updates its catalogue. However, it can also be done manually if needed.\n\nA [Google Fonts API key](https://developers.google.com/fonts/docs/developer_api) is required to update said list. Check out the [Google fonts docs](https://developers.google.com/fonts/docs/developer_api) to learn how to obtain one.\n\nOnce obtained, follow these steps to configure the project appropriately:\n\n```bash\nexport GOOGLE_FONTS_API_KEY=your-api-key\nnpm run workflow:fonts\n```\n\nThis script does the following:\n\n1. Downloads all available fonts from Google Fonts\n1. Merges font list with a set of system fonts and prepares them for usage in the editor.\n1. Saves changes to `packages/fonts/src/fonts.json`.\n" }, { "path": "includes/AMP/Canonical_Sanitizer.php", "content": "args['canonical_url'];\n\n\t\t$query = $this->dom->xpath->query( '//link[@rel=\"canonical\"]', $this->dom->head );\n\n\t\t// Remove any duplicate items first.\n\t\tif ( $query instanceof DOMNodeList && $query->length > 1 ) {\n\t\t\tfor ( $i = 1; $i < $query->length; $i++ ) {\n\t\t\t\t$node = $query->item( $i );\n\t\t\t\tif ( $node ) {\n\t\t\t\t\t// @phpstan-ignore argument.type\n\t\t\t\t\t$this->dom->head->removeChild( $node );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * DOMElement\n\t\t *\n\t\t * @var DOMElement|DOMNode $rel_canonical\n\t\t */\n\t\t$rel_canonical = $query instanceof DOMNodeList ? $query->item( 0 ) : null;\n\n\t\tif ( ! $rel_canonical instanceof DOMElement ) {\n\t\t\t$rel_canonical = $this->dom->createElement( Tag::LINK );\n\n\t\t\tif ( $rel_canonical instanceof DOMElement ) {\n\t\t\t\t$rel_canonical->setAttribute( Attribute::REL, Attribute::REL_CANONICAL );\n\t\t\t\t$this->dom->head->appendChild( $rel_canonical );\n\t\t\t}\n\t\t}\n\n\t\tif ( $rel_canonical instanceof DOMElement ) {\n\t\t\t// Ensure link[rel=canonical] has a non-empty href attribute.\n\t\t\tif ( empty( $rel_canonical->getAttribute( Attribute::HREF ) ) ) {\n\t\t\t\t$rel_canonical->setAttribute( Attribute::HREF, (string) $canonical_url );\n\t\t\t}\n\t\t}\n\t}\n}\n" }, { "path": "includes/AMP/Integration/AMP_Story_Sanitizer.php", "content": "transform_html_start_tag( $this->dom );\n\t\t$this->transform_a_tags( $this->dom );\n\t\t$this->use_semantic_heading_tags( $this->dom );\n\t\t$this->add_publisher_logo( $this->dom, $this->args['publisher_logo'] );\n\t\t$this->add_publisher( $this->dom, $this->args['publisher'] );\n\t\t$this->add_poster_images( $this->dom, $this->args['poster_images'] );\n\t\t// This needs to be called before use_semantic_heading_tags() because it relies on the style attribute.\n\t\t$this->deduplicate_inline_styles( $this->dom );\n\t\t$this->disable_first_page_animations( $this->dom );\n\t\t$this->add_video_cache( $this->dom, $this->args['video_cache'] );\n\t\t$this->remove_blob_urls( $this->dom );\n\t\t$this->sanitize_srcset( $this->dom );\n\t\t$this->sanitize_amp_story_page_outlink( $this->dom );\n\t\t$this->remove_page_template_placeholder_images( $this->dom );\n\t\t$this->sanitize_title_and_meta_description( $this->dom, $this->args['title_tag'], $this->args['description'] );\n\t}\n}\n" }, { "path": "includes/AMP/Meta_Sanitizer.php", "content": "style[amp-boilerplate].\n\t *\n\t * The AMP boilerplate ({@link https://amp.dev/documentation/guides-and-tutorials/stories/learn/spec/amp-boilerplate}) styles should appear at the end of the head:\n\t * \"Finally, specify the AMP boilerplate code. By putting the boilerplate code last, it prevents custom styles from\n\t * accidentally overriding the boilerplate css rules.\"\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.1.0\n\t *\n\t * @link https://amp.dev/documentation/guides-and-tutorials/optimize-and-measure/optimize_amp/#optimize-the-amp-runtime-loading\n\t */\n\tprotected function ensure_boilerplate_is_present(): void {\n\t\t$style = null;\n\t\t$styles = $this->dom->xpath->query( './style[ @amp-boilerplate ]', $this->dom->head );\n\n\t\tif ( $styles ) {\n\t\t\t$style = $styles->item( 0 );\n\t\t}\n\n\t\tif ( ! $style ) {\n\t\t\t$style = $this->dom->createElement( Tag::STYLE );\n\t\t\tif ( $style ) {\n\t\t\t\t$style->setAttribute( Attribute::AMP_BOILERPLATE, '' );\n\t\t\t\t$style->appendChild( $this->dom->createTextNode( $this->get_boilerplate_stylesheets()[0] ) );\n\t\t\t}\n\t\t} elseif ( $style->parentNode ) {\n\t\t\t$style->parentNode->removeChild( $style ); // So we can move it.\n\t\t}\n\t\tif ( $style ) {\n\t\t\t// @phpstan-ignore argument.type\n\t\t\t$this->dom->head->appendChild( $style );\n\t\t}\n\n\t\t$noscript = null;\n\t\t$noscripts = $this->dom->xpath->query( './noscript[ style[ @amp-boilerplate ] ]', $this->dom->head );\n\n\t\tif ( $noscripts ) {\n\t\t\t$noscript = $noscripts->item( 0 );\n\t\t}\n\n\t\tif ( ! $noscript ) {\n\t\t\t$noscript = $this->dom->createElement( Tag::NOSCRIPT );\n\t\t\t$style = $this->dom->createElement( Tag::STYLE );\n\t\t\tif ( $style && $noscript ) {\n\t\t\t\t$style->setAttribute( Attribute::AMP_BOILERPLATE, '' );\n\t\t\t\t$style->appendChild( $this->dom->createTextNode( $this->get_boilerplate_stylesheets()[1] ) );\n\t\t\t\t$noscript->appendChild( $style );\n\t\t\t}\n\t\t} elseif ( $noscript->parentNode ) {\n\t\t\t$noscript->parentNode->removeChild( $noscript ); // So we can move it.\n\t\t}\n\n\t\tif ( $noscript ) {\n\t\t\t// @phpstan-ignore argument.type\n\t\t\t$this->dom->head->appendChild( $noscript );\n\t\t}\n\t}\n\n\t/**\n\t * Get AMP boilerplate stylesheets.\n\t *\n\t * Clone of amp_get_boilerplate_stylesheets().\n\t *\n\t * @since 1.1.0\n\t *\n\t * @link https://www.ampproject.org/docs/reference/spec#boilerplate\n\t * @see amp_get_boilerplate_stylesheets()\n\t *\n\t * @return string[] Stylesheets, where first is contained in style[amp-boilerplate] and the second in noscript>style[amp-boilerplate].\n\t */\n\tprotected function get_boilerplate_stylesheets(): array {\n\t\treturn [\n\t\t\t'body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}',\n\t\t\t'body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}',\n\t\t];\n\t}\n}\n" }, { "path": "includes/AMP/Optimization.php", "content": "get_optimizer()->optimizeDom( $document, $errors );\n\t\tif ( \\count( $errors ) > 0 ) {\n\t\t\t/**\n\t\t\t * Error list.\n\t\t\t *\n\t\t\t * @var Error[] $errors_array Error list.\n\t\t\t */\n\t\t\t$errors_array = iterator_to_array( $errors );\n\n\t\t\t$error_messages = array_filter(\n\t\t\t\tarray_map(\n\t\t\t\t\tstatic function ( Error $error ) {\n\t\t\t\t\t\t// Hidden because amp-story is a render-delaying extension.\n\t\t\t\t\t\tif ( 'CannotRemoveBoilerplate' === $error->getCode() ) {\n\t\t\t\t\t\t\treturn '';\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn ' - ' . $error->getCode() . ': ' . $error->getMessage();\n\t\t\t\t\t},\n\t\t\t\t\t$errors_array\n\t\t\t\t)\n\t\t\t);\n\n\t\t\tif ( ! empty( $error_messages ) ) {\n\t\t\t\t$document->head->appendChild(\n\t\t\t\t\t$document->createComment( \"\\n\" . __( 'AMP optimization could not be completed due to the following:', 'web-stories' ) . \"\\n\" . implode( \"\\n\", $error_messages ) . \"\\n\" )\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Optimizer instance to use.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @link https://github.com/ampproject/amp-wp/blob/8856284d90fc8558c30acc029becd352ae26e4e1/includes/class-amp-theme-support.php#L2235-L2255\n\t * @see AMP_Theme_Support::get_optimizer\n\t *\n\t * @return TransformationEngine Optimizer transformation engine to use.\n\t */\n\tprivate function get_optimizer(): TransformationEngine {\n\t\t$configuration = self::get_optimizer_configuration();\n\n\t\t$fallback_remote_request_pipeline = new FallbackRemoteGetRequest(\n\t\t\tnew WpHttpRemoteGetRequest(),\n\t\t\tnew FilesystemRemoteGetRequest( LocalFallback::getMappings() )\n\t\t);\n\n\t\t$cached_remote_request = new CachedRemoteGetRequest( $fallback_remote_request_pipeline, WEEK_IN_SECONDS );\n\n\t\treturn new TransformationEngine(\n\t\t\t$configuration,\n\t\t\t$cached_remote_request\n\t\t);\n\t}\n\n\t/**\n\t * Get the AmpProject\\Optimizer configuration object to use.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @link https://github.com/ampproject/amp-wp/blob/5405daa38e65f0ec16ffc920014d0110b03ee773/src/Optimizer/AmpWPConfiguration.php#L43-L78\n\t * @see AmpWPConfiguration::apply_filters()\n\t *\n\t * @return Configuration Optimizer configuration to use.\n\t */\n\tprivate static function get_optimizer_configuration(): Configuration {\n\t\t$transformers = Configuration::DEFAULT_TRANSFORMERS;\n\n\t\t$transformers[] = AmpStoryCssOptimizer::class;\n\n\t\t/**\n\t\t * Filter whether the AMP Optimizer should use server-side rendering or not.\n\t\t *\n\t\t * @since 1.1.0\n\t\t *\n\t\t * @param bool $enable_ssr Whether the AMP Optimizer should use server-side rendering or not.\n\t\t */\n\t\t$enable_ssr = apply_filters( 'web_stories_enable_ssr', true );\n\n\t\t// In debugging mode, we don't use server-side rendering, as it further obfuscates the HTML markup.\n\t\tif ( ! $enable_ssr ) {\n\t\t\t$transformers = array_diff(\n\t\t\t\t$transformers,\n\t\t\t\t[\n\t\t\t\t\tAmpRuntimeCss::class,\n\t\t\t\t\tOptimizeHeroImages::class,\n\t\t\t\t\tOptimizeAmpBind::class,\n\t\t\t\t\tRewriteAmpUrls::class,\n\t\t\t\t\tServerSideRendering::class,\n\t\t\t\t\tTransformedIdentifier::class,\n\t\t\t\t\tAmpStoryCssOptimizer::class,\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\n\t\t$configuration = [\n\t\t\tConfiguration::KEY_TRANSFORMERS => $transformers,\n\t\t\tAmpStoryCssOptimizer::class => [\n\t\t\t\tAmpStoryCssOptimizerConfiguration::OPTIMIZE_AMP_STORY => true,\n\t\t\t],\n\t\t\tMinifyHtml::class => [\n\t\t\t\t// Prevents issues with rounding floats, relevant for things like shopping (product prices).\n\t\t\t\tConfiguration\\MinifyHtmlConfiguration::MINIFY_JSON => false,\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filter the configuration to be used for the AMP Optimizer.\n\t\t *\n\t\t * @since 1.1.0\n\t\t *\n\t\t * @param array $configuration Associative array of configuration data.\n\t\t */\n\t\t$configuration = apply_filters( 'web_stories_amp_optimizer_config', $configuration );\n\n\t\treturn new DefaultConfiguration( $configuration );\n\t}\n}\n" }, { "path": "includes/AMP/Output_Buffer.php", "content": "sanitization = $sanitization;\n\t\t$this->optimization = $optimization;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Runs on instantiation.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register(): void {\n\t\t/*\n\t\t * Start output buffering at very low priority for sake of plugins and themes that use template_redirect\n\t\t * instead of template_include.\n\t\t */\n\t\t$this->start_output_buffering();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'template_redirect';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn PHP_INT_MIN;\n\t}\n\n\t/**\n\t * Check whether the conditional object is currently needed.\n\t *\n\t * If the AMP plugin is installed and available in a version >= than ours,\n\t * all sanitization and optimization should be delegated to the AMP plugin.\n\t * But ONLY if AMP logic has not been disabled through any of its available filters.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return bool Whether the conditional object is needed.\n\t */\n\tpublic static function is_needed(): bool {\n\t\t$current_post = get_post();\n\n\t\t$has_old_amp_version = ! \\defined( '\\AMP__VERSION' ) || ( \\defined( '\\AMP__VERSION' ) && version_compare( \\AMP__VERSION, WEBSTORIES_AMP_VERSION, '<' ) );\n\t\t$amp_available = \\function_exists( 'amp_is_available' ) && amp_is_available();\n\n\t\t// @phpstan-ignore function.internal\n\t\t$amp_enabled = \\function_exists( 'amp_is_enabled' ) && amp_is_enabled();\n\t\t$amp_initialized = did_action( 'amp_init' ) > 0;\n\t\t$amp_supported_post = \\function_exists( 'amp_is_post_supported' ) && amp_is_post_supported( $current_post->ID ?? 0 );\n\n\t\treturn $has_old_amp_version || ! $amp_available || ! $amp_enabled || ! $amp_initialized || ! $amp_supported_post;\n\t}\n\n\t/**\n\t * Start output buffering.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @see Output_Buffer::finish_output_buffering()\n\t */\n\tpublic function start_output_buffering(): void {\n\t\tif ( ! $this->context->is_web_story() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tob_start( [ $this, 'finish_output_buffering' ] );\n\t\t$this->is_output_buffering = true;\n\t}\n\n\t/**\n\t * Determine whether output buffering has started.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @see Output_Buffer::start_output_buffering()\n\t * @see Output_Buffer::finish_output_buffering()\n\t *\n\t * @return bool Whether output buffering has started.\n\t */\n\tpublic function is_output_buffering(): bool {\n\t\treturn $this->is_output_buffering;\n\t}\n\n\t/**\n\t * Finish output buffering.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @see Output_Buffer::start_output_buffering()\n\t *\n\t * @param string $response Buffered Response.\n\t * @return string Processed Response.\n\t */\n\tpublic function finish_output_buffering( string $response ): string {\n\t\t$this->is_output_buffering = false;\n\n\t\ttry {\n\t\t\t$response = $this->prepare_response( $response );\n\t\t} catch ( \\Error $error ) { // Only PHP 7+.\n\t\t\t$response = $this->render_error_page( $error );\n\t\t} catch ( \\Exception $exception ) {\n\t\t\t$response = $this->render_error_page( $exception );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Process response to ensure AMP validity.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param string $response HTML document response. By default it expects a complete document.\n\t * @return string AMP document response.\n\t */\n\tpublic function prepare_response( string $response ): string {\n\t\t// Enforce UTF-8 encoding as it is a requirement for AMP.\n\t\tif ( ! headers_sent() ) {\n\t\t\theader( 'Content-Type: text/html; charset=utf-8' );\n\t\t}\n\n\t\t$dom = Document::fromHtml( $response );\n\n\t\tif ( ! $dom instanceof Document ) {\n\t\t\treturn $this->render_error_page( SanitizationException::from_document_parse_error() );\n\t\t}\n\n\t\t$this->sanitization->sanitize_document( $dom );\n\t\t$this->optimization->optimize_document( $dom );\n\n\t\treturn $dom->saveHTML();\n\t}\n\n\t/**\n\t * Render error page.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param Throwable $throwable Exception or (as of PHP7) Error.\n\t * @return string Error page.\n\t */\n\tprivate function render_error_page( Throwable $throwable ): string {\n\t\treturn esc_html__( 'There was an error generating the web story, probably because of a server misconfiguration. Try contacting your hosting provider or open a new support request.', 'web-stories' ) .\n\t\t\t\"\\n\" .\n\t\t\t\"\\n\" .\n\t\t\t// translators: 1: error message. 2: location.\n\t\t\t\\sprintf( esc_html__( 'Error message: %1$s (%2$s)', 'web-stories' ), $throwable->getMessage(), $throwable->getFile() . ':' . $throwable->getLine() );\n\t}\n}\n" }, { "path": "includes/AMP/Sanitization.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Sanitizes a document.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @param Document $document Document instance.\n\t */\n\tpublic function sanitize_document( Document $document ): void {\n\t\t$sanitizers = $this->get_sanitizers();\n\n\t\t$result = AMP_Content_Sanitizer::sanitize_document( $document, $sanitizers, [] );\n\n\t\t$this->ensure_required_markup( $document, $result['scripts'] );\n\t}\n\n\t/**\n\t * Validation error callback.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @see AMP_Validation_Error_Taxonomy::get_validation_error_sanitization\n\t *\n\t * @param array{code: string} $error Error info, especially code.\n\t * @param array{node?: DOMElement|DOMNode} $data Additional data, including the node.\n\t * @return bool Whether the validation error should be sanitized.\n\t */\n\tpublic function validation_error_callback( array $error, array $data = [] ): bool { // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundAfterLastUsed\n\t\t/**\n\t\t * Filters whether the validation error should be sanitized.\n\t\t *\n\t\t * Returning true this indicates that the validation error is acceptable\n\t\t * and should not be considered a blocker to render AMP. Returning null\n\t\t * means that the default status should be used.\n\t\t *\n\t\t * Note that the $node is not passed here to ensure that the filter can be\n\t\t * applied on validation errors that have been stored. Likewise, the $sources\n\t\t * are also omitted because these are only available during an explicit\n\t\t * validation request and so they are not suitable for plugins to vary\n\t\t * sanitization by.\n\t\t *\n\t\t * @since 1.1.0\n\t\t *\n\t\t * @see AMP_Validation_Manager::is_sanitization_auto_accepted() Which controls whether an error is initially accepted or rejected for sanitization.\n\t\t *\n\t\t * @param bool $sanitized Whether the validation error should be sanitized.\n\t\t * @param array $error Validation error being sanitized.\n\t\t */\n\t\treturn apply_filters( 'web_stories_amp_validation_error_sanitized', true, $error );\n\t}\n\n\t/**\n\t * Adds missing scripts.\n\t *\n\t * @SuppressWarnings(\"PHPMD\")\n\t *\n\t * @since 1.1.0\n\t *\n\t * @link https://github.com/ampproject/amp-wp/blob/2.1.3/includes/class-amp-theme-support.php#L1381-L1594\n\t * @see \\AMP_Theme_Support::ensure_required_markup\n\t *\n\t * @param Document $document Document instance.\n\t * @param array $scripts List of found scripts.\n\t */\n\tprotected function ensure_required_markup( Document $document, array $scripts ): void { // phpcs:ignore SlevomatCodingStandard.Complexity.Cognitive.ComplexityTooHigh\n\t\t/**\n\t\t * Link elements.\n\t\t *\n\t\t * @var array{preconnect: \\DOMElement[]|null,dns-prefetch: \\DOMElement[]|null,preload: \\DOMElement[]|null, prerender: \\DOMElement[]|null, prefetch: \\DOMElement[]|null }\n\t\t */\n\t\t$links = [\n\t\t\tAttribute::REL_PRECONNECT => [\n\t\t\t\t// Include preconnect link for AMP CDN for browsers that don't support preload.\n\t\t\t\tAMP_DOM_Utils::create_node(\n\t\t\t\t\t$document,\n\t\t\t\t\tTag::LINK,\n\t\t\t\t\t[\n\t\t\t\t\t\tAttribute::REL => Attribute::REL_PRECONNECT,\n\t\t\t\t\t\tAttribute::HREF => 'https://cdn.ampproject.org',\n\t\t\t\t\t]\n\t\t\t\t),\n\t\t\t],\n\t\t];\n\n\t\t// Obtain the existing AMP scripts.\n\t\t$amp_scripts = [];\n\t\t$ordered_scripts = [];\n\t\t$head_scripts = [];\n\t\t$runtime_src = 'https://cdn.ampproject.org/v0.js';\n\n\t\t/**\n\t\t * Script element.\n\t\t *\n\t\t * @var DOMElement $script\n\t\t */\n\t\tforeach ( $document->head->getElementsByTagName( Tag::SCRIPT ) as $script ) {\n\t\t\t$head_scripts[] = $script;\n\t\t}\n\n\t\tforeach ( $head_scripts as $script ) {\n\t\t\t$src = $script->getAttribute( Attribute::SRC );\n\n\t\t\tif ( ! $src || ! str_starts_with( $src, 'https://cdn.ampproject.org/' ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif ( 'v0.js' === substr( $src, - \\strlen( 'v0.js' ) ) ) {\n\t\t\t\t$amp_scripts[ Amp::RUNTIME ] = $script;\n\t\t\t} elseif ( $script->hasAttribute( Attribute::CUSTOM_ELEMENT ) ) {\n\t\t\t\t$amp_scripts[ $script->getAttribute( Attribute::CUSTOM_ELEMENT ) ] = $script;\n\t\t\t} elseif ( $script->hasAttribute( Attribute::CUSTOM_TEMPLATE ) ) {\n\t\t\t\t$amp_scripts[ $script->getAttribute( Attribute::CUSTOM_TEMPLATE ) ] = $script;\n\t\t\t}\n\n\t\t\t// It will be added back further down.\n\t\t\t$document->head->removeChild( $script );\n\t\t}\n\n\t\t$specs = $this->get_extension_sources();\n\n\t\t// Create scripts for any components discovered from output buffering that are missing.\n\t\tforeach ( array_diff( array_keys( $scripts ), array_keys( $amp_scripts ) ) as $missing_script_handle ) {\n\t\t\t$attrs = [\n\t\t\t\tAttribute::SRC => $specs[ $missing_script_handle ],\n\t\t\t\tAttribute::ASYNC => '',\n\t\t\t];\n\t\t\tif ( Extension::MUSTACHE === $missing_script_handle ) {\n\t\t\t\t$attrs[ Attribute::CUSTOM_TEMPLATE ] = (string) $missing_script_handle;\n\t\t\t} else {\n\t\t\t\t$attrs[ Attribute::CUSTOM_ELEMENT ] = (string) $missing_script_handle;\n\t\t\t}\n\n\t\t\t$amp_scripts[ $missing_script_handle ] = AMP_DOM_Utils::create_node( $document, Tag::SCRIPT, $attrs );\n\t\t}\n\n\t\t// Remove scripts that had already been added but couldn't be detected from output buffering.\n\t\t$extension_specs = AMP_Allowed_Tags_Generated::get_extension_specs();\n\t\t$superfluous_script_handles = array_diff(\n\t\t\tarray_keys( $amp_scripts ),\n\t\t\t[ ...array_keys( $scripts ), Amp::RUNTIME ]\n\t\t);\n\n\t\tforeach ( $superfluous_script_handles as $superfluous_script_handle ) {\n\t\t\tif ( ! empty( $extension_specs[ $superfluous_script_handle ]['requires_usage'] ) ) {\n\t\t\t\tunset( $amp_scripts[ $superfluous_script_handle ] );\n\t\t\t}\n\t\t}\n\n\t\t/* phpcs:ignore Squiz.PHP.CommentedOutCode.Found\n\t\t *\n\t\t * \"2. Next, preload the AMP runtime v0.js \n\t\t\n\t\tsettings->get_setting( $this->settings::SETTING_NAME_ADSENSE_PUBLISHER_ID );\n\t\treturn $publisher_id;\n\t}\n\n\t/**\n\t * Returns the Google AdSense slot ID.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @return string Slot ID.\n\t */\n\tprivate function get_slot_id(): string {\n\t\t/**\n\t\t * Slot ID.\n\t\t *\n\t\t * @var string\n\t\t */\n\t\treturn $this->settings->get_setting( $this->settings::SETTING_NAME_ADSENSE_SLOT_ID );\n\t}\n\n\t/**\n\t * Returns if Google AdSense is enabled.\n\t *\n\t * @since 1.3.0\n\t */\n\tprivate function is_enabled(): bool {\n\t\treturn ( 'adsense' === $this->settings->get_setting( $this->settings::SETTING_NAME_AD_NETWORK, 'none' ) );\n\t}\n}\n" }, { "path": "includes/Ad_Manager.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.3.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'web_stories_print_analytics', [ $this, 'print_ad_manager_tag' ] );\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because settings needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings' ];\n\t}\n\n\t/**\n\t * Prints the tag for single stories.\n\t *\n\t * @since 1.3.0\n\t */\n\tpublic function print_ad_manager_tag(): void {\n\t\t$slot = $this->get_slot_id();\n\t\t$enabled = $this->is_enabled();\n\n\t\tif ( ! $enabled || ! $slot ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$configuration = [\n\t\t\t'ad-attributes' => [\n\t\t\t\t'type' => 'doubleclick',\n\t\t\t\t'data-slot' => $slot,\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filters Google Ad Manager configuration passed to ``.\n\t\t *\n\t\t * @since 1.10.0\n\t\t *\n\t\t * @param array $settings Ad Manager configuration.\n\t\t * @param string $slot Google Ad_Manager slot ID.\n\t\t */\n\t\t$configuration = apply_filters( 'web_stories_ad_manager_configuration', $configuration, $slot );\n\n\t\t?>\n\t\t\n\t\t\t\n\t\t\n\t\tsettings->get_setting( $this->settings::SETTING_NAME_AD_MANAGER_SLOT_ID );\n\t}\n\n\t/**\n\t * Returns if Google manager is enabled.\n\t *\n\t * @since 1.3.0\n\t */\n\tprivate function is_enabled(): bool {\n\t\treturn ( 'admanager' === $this->settings->get_setting( $this->settings::SETTING_NAME_AD_NETWORK, 'none' ) );\n\t}\n}\n" }, { "path": "includes/Admin/Activation_Notice.php", "content": "assets = $assets;\n\t}\n\n\t/**\n\t * Initializes the plugin activation notice.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );\n\t\tadd_action( 'admin_notices', [ $this, 'render_notice' ] );\n\t\tadd_action( 'network_admin_notices', [ $this, 'render_notice' ] );\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->set_activation_flag( $network_wide );\n\t}\n\n\t/**\n\t * Act on plugin deactivation.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool $network_wide Whether the deactivation was done network-wide.\n\t */\n\tpublic function on_plugin_deactivation( bool $network_wide ): void {\n\t\t$this->delete_activation_flag( $network_wide );\n\t}\n\n\t/**\n\t * Enqueues assets for the plugin activation notice.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $hook_suffix The current admin page.\n\t */\n\tpublic function enqueue_assets( string $hook_suffix ): void {\n\t\tif ( ! $this->is_plugins_page( $hook_suffix ) || ! $this->get_activation_flag( is_network_admin() ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Prevent the default WordPress \"Plugin Activated\" notice from rendering.\n\t\t *\n\t\t * @link https://github.com/WordPress/WordPress/blob/e1996633228749cdc2d92bc04cc535d45367bfa4/wp-admin/plugins.php#L569-L570\n\t\t */\n\t\tunset( $_GET['activate'] ); // phpcs:ignore WordPress.Security.NonceVerification, WordPress.VIP.SuperGlobalInputUsage\n\n\t\t$this->assets->enqueue_style( Google_Fonts::SCRIPT_HANDLE );\n\n\t\t$this->assets->enqueue_script_asset( self::SCRIPT_HANDLE, [ Tracking::SCRIPT_HANDLE ] );\n\n\t\twp_localize_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\t'webStoriesActivationSettings',\n\t\t\t$this->get_script_settings()\n\t\t);\n\t}\n\n\t/**\n\t * Renders the plugin activation notice.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function render_notice(): void {\n\t\tglobal $hook_suffix;\n\n\t\tif ( ! $this->is_plugins_page( $hook_suffix ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$network_wide = is_network_admin();\n\t\t$flag = $this->get_activation_flag( $network_wide );\n\n\t\tif ( ! $flag ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Unset the flag so that the notice only shows once.\n\t\t$this->delete_activation_flag( $network_wide );\n\n\t\trequire_once WEBSTORIES_PLUGIN_DIR_PATH . 'includes/templates/admin/activation-notice.php';\n\t}\n\n\t/**\n\t * Deletes the flag that the plugin has just been uninstalled.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tif ( is_multisite() ) {\n\t\t\tdelete_site_option( self::OPTION_SHOW_ACTIVATION_NOTICE );\n\t\t}\n\t\tdelete_option( self::OPTION_SHOW_ACTIVATION_NOTICE );\n\t}\n\n\t/**\n\t * Returns script settings as an array.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array{id: string, config: array,publicPath: string} Script settings.\n\t */\n\tprotected function get_script_settings(): array {\n\t\t$new_story_url = admin_url(\n\t\t\tadd_query_arg(\n\t\t\t\t[\n\t\t\t\t\t'post_type' => Story_Post_Type::POST_TYPE_SLUG,\n\t\t\t\t],\n\t\t\t\t'post-new.php'\n\t\t\t)\n\t\t);\n\n\t\t$dashboard_url = admin_url(\n\t\t\tadd_query_arg(\n\t\t\t\t[\n\t\t\t\t\t'post_type' => Story_Post_Type::POST_TYPE_SLUG,\n\t\t\t\t\t'page' => 'stories-dashboard',\n\t\t\t\t],\n\t\t\t\t'edit.php'\n\t\t\t)\n\t\t);\n\n\t\t$demo_story_url = admin_url(\n\t\t\tadd_query_arg(\n\t\t\t\t[\n\t\t\t\t\t'post_type' => Story_Post_Type::POST_TYPE_SLUG,\n\t\t\t\t\t'web-stories-demo' => 1,\n\t\t\t\t],\n\t\t\t\t'post-new.php'\n\t\t\t)\n\t\t);\n\n\t\treturn [\n\t\t\t'id' => 'web-stories-plugin-activation-notice',\n\t\t\t'config' => [\n\t\t\t\t'isRTL' => is_rtl(),\n\t\t\t\t'cdnURL' => trailingslashit( WEBSTORIES_CDN_URL ),\n\t\t\t\t'demoStoryURL' => $demo_story_url,\n\t\t\t\t'newStoryURL' => $new_story_url,\n\t\t\t\t'dashboardURL' => $dashboard_url,\n\t\t\t],\n\t\t\t'publicPath' => $this->assets->get_base_url( 'assets/js/' ),\n\t\t];\n\t}\n\n\t/**\n\t * Determines whether we're currently on the Plugins page or not.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param mixed $hook_suffix Current hook_suffix.\n\t * @return bool Whether we're on the Plugins page.\n\t */\n\tprotected function is_plugins_page( $hook_suffix ): bool {\n\t\treturn ( ! empty( $hook_suffix ) && 'plugins.php' === $hook_suffix );\n\t}\n\n\t/**\n\t * Sets the flag that the plugin has just been activated.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool $network_wide Whether the plugin is being activated network-wide.\n\t */\n\tprotected function set_activation_flag( bool $network_wide = false ): bool {\n\t\tif ( $network_wide ) {\n\t\t\treturn update_site_option( self::OPTION_SHOW_ACTIVATION_NOTICE, '1' );\n\t\t}\n\n\t\treturn update_option( self::OPTION_SHOW_ACTIVATION_NOTICE, '1', false );\n\t}\n\n\t/**\n\t * Gets the flag that the plugin has just been activated.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool $network_wide Whether to check the flag network-wide.\n\t * @return bool True if just activated, false otherwise.\n\t */\n\tprotected function get_activation_flag( bool $network_wide = false ): bool {\n\t\tif ( $network_wide ) {\n\t\t\treturn (bool) get_site_option( self::OPTION_SHOW_ACTIVATION_NOTICE, false );\n\t\t}\n\n\t\treturn (bool) get_option( self::OPTION_SHOW_ACTIVATION_NOTICE, false );\n\t}\n\n\t/**\n\t * Deletes the flag that the plugin has just been activated.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool $network_wide Whether the plugin is being deactivated network-wide.\n\t * @return bool True if flag deletion is successful, false otherwise.\n\t */\n\tprotected function delete_activation_flag( bool $network_wide = false ): bool {\n\t\tif ( $network_wide ) {\n\t\t\treturn delete_site_option( self::OPTION_SHOW_ACTIVATION_NOTICE );\n\t\t}\n\n\t\treturn delete_option( self::OPTION_SHOW_ACTIVATION_NOTICE );\n\t}\n}\n" }, { "path": "includes/Admin/Admin.php", "content": "settings = $settings;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initialize admin-related functionality.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'admin_body_class', [ $this, 'admin_body_class' ], 99 );\n\t\tadd_filter( 'default_content', [ $this, 'prefill_post_content' ], 10, 2 );\n\t\tadd_filter( 'default_title', [ $this, 'prefill_post_title' ] );\n\t\tadd_filter( 'display_media_states', [ $this, 'media_states' ], 10, 2 );\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'admin_init';\n\t}\n\n\t/**\n\t * Filter the list of admin classes.\n\t *\n\t * Makes sure the admin menu is collapsed when accessing\n\t * the dashboard and the editor.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string|mixed $class_name Current classes.\n\t * @return string|mixed List of Classes.\n\t */\n\tpublic function admin_body_class( $class_name ) {\n\t\tif ( ! \\is_string( $class_name ) ) {\n\t\t\treturn $class_name;\n\t\t}\n\n\t\tif ( ! $this->context->is_story_editor() ) {\n\t\t\treturn $class_name;\n\t\t}\n\n\t\t// Default WordPress posts list table screen and dashboard.\n\t\tif ( 'post' !== $this->context->get_screen_base() ) {\n\t\t\treturn $class_name;\n\t\t}\n\n\t\t$class_name .= ' edit-story';\n\n\t\t// Overrides regular WordPress behavior by collapsing the admin menu by default.\n\t\tif ( ! str_contains( $class_name, 'folded' ) ) {\n\t\t\t$class_name .= ' folded';\n\t\t}\n\n\t\treturn $class_name;\n\t}\n\n\t/**\n\t * Pre-fills post content with a web-story/embed block.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string|mixed $content Default post content.\n\t * @param WP_Post|null $post Post object.\n\t * @return string|mixed Pre-filled post content if applicable, or the default content otherwise.\n\t */\n\tpublic function prefill_post_content( $content, ?WP_Post $post ) {\n\t\tif ( ! $post ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\tif ( ! isset( $_GET['from-web-story'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended\n\t\t\treturn $content;\n\t\t}\n\n\t\t/**\n\t\t * Story ID.\n\t\t *\n\t\t * @var string $from_web_story\n\t\t */\n\t\t$from_web_story = $_GET['from-web-story']; // phpcs:ignore WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\n\t\t$post_id = absint( sanitize_text_field( (string) wp_unslash( $from_web_story ) ) );\n\n\t\tif ( ! $post_id || Story_Post_Type::POST_TYPE_SLUG !== get_post_type( $post_id ) ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\tif ( ! current_user_can( 'read_post', $post_id ) ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\t$story = new Story();\n\t\tif ( ! $story->load_from_post( $post_id ) ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\tif ( ! $story->get_title() ) {\n\t\t\t$story->set_title( __( 'Web Story', 'web-stories' ) );\n\t\t}\n\n\t\t$args = [\n\t\t\t'align' => 'none',\n\t\t\t'height' => 600,\n\t\t\t'width' => 360,\n\t\t];\n\n\t\tif ( ! use_block_editor_for_post( $post ) ) {\n\t\t\t$content = '[web_stories_embed url=\"%1$s\" title=\"%2$s\" poster=\"%3$s\" width=\"%4$s\" height=\"%5$s\" align=\"%6$s\"]';\n\n\t\t\treturn \\sprintf(\n\t\t\t\t$content,\n\t\t\t\tesc_url( $story->get_url() ),\n\t\t\t\tesc_attr( $story->get_title() ),\n\t\t\t\tesc_url( $story->get_poster_portrait() ),\n\t\t\t\tabsint( $args['width'] ),\n\t\t\t\tabsint( $args['height'] ),\n\t\t\t\tesc_attr( $args['align'] )\n\t\t\t);\n\t\t}\n\n\t\t$story->set_poster_sizes( '' );\n\t\t$story->set_poster_srcset( '' );\n\t\t$renderer = new Image( $story );\n\t\t$html = $renderer->render( $args );\n\n\t\t$content = '%8$s';\n\t\t// note $story->get_url should not be escaped here (esc_url()) see https://github.com/GoogleForCreators/web-stories-wp/issues/11371.\n\t\treturn \\sprintf(\n\t\t\t$content,\n\t\t\t$story->get_url(),\n\t\t\tesc_js( $story->get_title() ),\n\t\t\tesc_url( $story->get_poster_portrait() ),\n\t\t\tabsint( $args['width'] ),\n\t\t\tabsint( $args['height'] ),\n\t\t\tesc_js( $args['align'] ),\n\t\t\tabsint( $post_id ),\n\t\t\t$html\n\t\t);\n\t}\n\n\t/**\n\t * Pre-fills post title with the story title.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string|mixed $title Default post title.\n\t * @return string|mixed Pre-filled post title if applicable, or the default title otherwise.\n\t */\n\tpublic function prefill_post_title( $title ) {\n\t\tif ( ! isset( $_GET['from-web-story'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended\n\t\t\treturn $title;\n\t\t}\n\n\t\t/**\n\t\t * Story ID.\n\t\t *\n\t\t * @var string $from_web_story\n\t\t */\n\t\t$from_web_story = $_GET['from-web-story']; // phpcs:ignore WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\n\t\t$post_id = absint( sanitize_text_field( (string) wp_unslash( $from_web_story ) ) );\n\n\t\tif ( ! $post_id ) {\n\t\t\treturn $title;\n\t\t}\n\n\t\tif ( ! current_user_can( 'read_post', $post_id ) ) {\n\t\t\treturn $title;\n\t\t}\n\n\t\t$post = get_post( $post_id );\n\n\t\tif ( ! $post instanceof WP_Post || Story_Post_Type::POST_TYPE_SLUG !== $post->post_type ) {\n\t\t\treturn $title;\n\t\t}\n\n\t\t// Not using get_the_title() because we need the raw title.\n\t\t// Otherwise it runs through wptexturize() and the like, which we want to avoid.\n\t\treturn $post->post_title;\n\t}\n\n\t/**\n\t * Adds active publisher logo to media state output.\n\t *\n\t * @since 1.23.0\n\t *\n\t * @param mixed $media_states Array of media states.\n\t * @param WP_Post $post Post object.\n\t * @return mixed Filtered media states.\n\t */\n\tpublic function media_states( $media_states, WP_Post $post ) {\n\t\tif ( ! \\is_array( $media_states ) ) {\n\t\t\treturn $media_states;\n\t\t}\n\n\t\t$active_publisher_logo_id = absint( $this->settings->get_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO ) );\n\n\t\tif ( $post->ID === $active_publisher_logo_id ) {\n\t\t\t$media_states[] = __( 'Web Stories Publisher Logo', 'web-stories' );\n\t\t}\n\t\treturn $media_states;\n\t}\n}\n" }, { "path": "includes/Admin/Cross_Origin_Isolation.php", "content": "preferences = $preferences;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Init\n\t */\n\tpublic function register(): void {\n\t\tif ( ! $this->context->is_story_editor() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tadd_action( 'load-post.php', [ $this, 'admin_header' ] );\n\t\tadd_action( 'load-post-new.php', [ $this, 'admin_header' ] );\n\t\tadd_filter( 'style_loader_tag', [ $this, 'style_loader_tag' ], 10, 3 );\n\t\tadd_filter( 'script_loader_tag', [ $this, 'script_loader_tag' ], 10, 3 );\n\t\tadd_filter( 'get_avatar', [ $this, 'get_avatar' ], 10, 6 );\n\t\tadd_action( 'wp_enqueue_media', [ $this, 'override_media_templates' ] );\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'current_screen';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 11;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'user_preferences' ];\n\t}\n\n\t/**\n\t * Start output buffer to add headers and `crossorigin` attribute everywhere.\n\t *\n\t * @since 1.6.0\n\t */\n\tpublic function admin_header(): void {\n\t\tif ( $this->needs_isolation() ) {\n\t\t\theader( 'Cross-Origin-Opener-Policy: same-origin' );\n\t\t\theader( 'Cross-Origin-Embedder-Policy: require-corp' );\n\t\t}\n\n\t\tob_start( [ $this, 'replace_in_dom' ] );\n\t}\n\n\t/**\n\t * Filters the HTML link tag of an enqueued style.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param mixed $tag The link tag for the enqueued style.\n\t * @param string $handle The style's registered handle.\n\t * @param string $href The stylesheet's source URL.\n\t * @return string|mixed\n\t */\n\tpublic function style_loader_tag( $tag, string $handle, string $href ) {\n\t\treturn $this->add_attribute( $tag, 'href', $href );\n\t}\n\n\t/**\n\t * Filters the HTML script tag of an enqueued script.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param mixed $tag The `#is', '', $tag );\n\t\t}\n\n\t\treturn $tag;\n\t}\n\n\t/**\n\t * Enqueue related scripts.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function enqueue_assets(): void {\n\t\t$this->assets->enqueue_style( 'wp-components' );\n\t\t$this->assets->enqueue_script_asset( self::SCRIPT_HANDLE );\n\t}\n\n\t/**\n\t * Root element for tinymce editor.\n\t * This is useful for performing some react operations.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function web_stories_tinymce_root_element(): void {\n\t\t?>\n\t\t
\n\t\tsettings = $settings;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'web_stories_print_analytics', [ $this, 'print_analytics_tag' ] );\n\t}\n\n\t/**\n\t * Returns the Google Analytics tracking ID.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return string Tracking ID.\n\t */\n\tpublic function get_tracking_id(): string {\n\t\t/**\n\t\t * Tracking ID.\n\t\t *\n\t\t * @var string $tracking_id\n\t\t */\n\t\t$tracking_id = $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_ID );\n\n\t\t// For some reasons, some sites use the plugin's own tracking ID (as used in the admin)\n\t\t// for their stories. Prevent accidental erroneous tracking in such a case.\n\t\tif ( Tracking::TRACKING_ID === $tracking_id ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn $tracking_id;\n\t}\n\n\t/**\n\t * Returns the default analytics configuration.\n\t *\n\t * Note: variables in single quotes will be substituted by .\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @see https://github.com/ampproject/amphtml/blob/main/docs/spec/amp-var-substitutions.md\n\t *\n\t * @param string $tracking_id Tracking ID.\n\t * @return array> configuration.\n\t */\n\tpublic function get_default_configuration( string $tracking_id ): array {\n\t\t$config = [\n\t\t\t'vars' => [\n\t\t\t\t'gtag_id' => $tracking_id,\n\t\t\t\t'config' => [\n\t\t\t\t\t$tracking_id => [ 'groups' => 'default' ],\n\t\t\t\t],\n\t\t\t],\n\t\t\t'triggers' => [\n\t\t\t\t// Fired when a story page becomes visible.\n\t\t\t\t'storyProgress' => [\n\t\t\t\t\t'on' => 'story-page-visible',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_progress',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'event_label' => '${storyPageIndex}',\n\t\t\t\t\t\t'event_value' => '${storyProgress}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when the last page in the story is shown to the user.\n\t\t\t\t// This can be used to measure completion rate.\n\t\t\t\t'storyEnd' => [\n\t\t\t\t\t'on' => 'story-last-page-visible',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_complete',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'event_label' => '${storyPageCount}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when clicking an element that opens a tooltip ( or ).\n\t\t\t\t'trackFocusState' => [\n\t\t\t\t\t'on' => 'story-focus',\n\t\t\t\t\t'tagName' => 'a',\n\t\t\t\t\t'request' => 'click ',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_focus',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when clicking on a tooltip.\n\t\t\t\t'trackClickThrough' => [\n\t\t\t\t\t'on' => 'story-click-through',\n\t\t\t\t\t'tagName' => 'a',\n\t\t\t\t\t'request' => 'click ',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_click_through',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when opening a drawer or dialog inside a story (e.g. page attachment).\n\t\t\t\t'storyOpen' => [\n\t\t\t\t\t'on' => 'story-open',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_open',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when closing a drawer or dialog inside a story (e.g. page attachment).\n\t\t\t\t'storyClose' => [\n\t\t\t\t\t'on' => 'story-close',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_close',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when the user initiates an interaction to mute the audio for the current story.\n\t\t\t\t'audioMuted' => [\n\t\t\t\t\t'on' => 'story-audio-muted',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_audio_muted',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when the user initiates an interaction to unmute the audio for the current story.\n\t\t\t\t'audioUnmuted' => [\n\t\t\t\t\t'on' => 'story-audio-unmuted',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_audio_unmuted',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when a page attachment is opened by the user.\n\t\t\t\t'pageAttachmentEnter' => [\n\t\t\t\t\t'on' => 'story-page-attachment-enter',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_page_attachment_enter',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// Fired when a page attachment is dismissed by the user.\n\t\t\t\t'pageAttachmentExit' => [\n\t\t\t\t\t'on' => 'story-page-attachment-exit',\n\t\t\t\t\t'request' => 'event',\n\t\t\t\t\t'vars' => [\n\t\t\t\t\t\t'event_name' => 'custom',\n\t\t\t\t\t\t'event_action' => 'story_page_attachment_exit',\n\t\t\t\t\t\t'event_category' => '${title}',\n\t\t\t\t\t\t'send_to' => $tracking_id,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filters the Web Stories Google Analytics configuration.\n\t\t *\n\t\t * Only used when not using , which is the default.\n\t\t *\n\t\t * @param array $config Analytics configuration.\n\t\t */\n\t\treturn apply_filters( 'web_stories_analytics_configuration', $config );\n\t}\n\n\t/**\n\t * Prints the analytics tag for single stories.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function print_analytics_tag(): void {\n\t\t$tracking_id = $this->get_tracking_id();\n\n\t\tif ( ! $tracking_id ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( $this->settings->get_setting( $this->settings::SETTING_NAME_USING_LEGACY_ANALYTICS ) ) {\n\t\t\t$this->print_amp_analytics_tag( $tracking_id );\n\t\t} else {\n\t\t\t$this->print_amp_story_auto_analytics_tag( $tracking_id );\n\t\t}\n\t}\n\n\t/**\n\t * Prints the legacy tag for single stories.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param string $tracking_id Tracking ID.\n\t */\n\tprivate function print_amp_analytics_tag( string $tracking_id ): void {\n\t\t?>\n\t\t\n\t\t\t\n\t\t\n\t\t tag for single stories.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param string $tracking_id Tracking ID.\n\t */\n\tprivate function print_amp_story_auto_analytics_tag( string $tracking_id ): void {\n\t\t?>\n\t\t\">\n\t\t\n\t */\n\tprotected array $register_styles = [];\n\n\t/**\n\t * An array of registered scripts.\n\t *\n\t * @var array\n\t */\n\tprotected array $register_scripts = [];\n\n\t/**\n\t * Get path to file and directory.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $path Path.\n\t */\n\tpublic function get_base_path( string $path ): string {\n\t\treturn WEBSTORIES_PLUGIN_DIR_PATH . $path;\n\t}\n\n\t/**\n\t * Get url of file and directory.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $path Path.\n\t */\n\tpublic function get_base_url( string $path ): string {\n\t\treturn WEBSTORIES_PLUGIN_DIR_URL . $path;\n\t}\n\n\t/**\n\t * Get asset metadata.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $handle Script handle.\n\t * @return array Array containing combined contents of \"<$handle>.asset.php\" and \"<$handle>.chunks.php\".\n\t *\n\t * @phpstan-return AssetMetadata\n\t */\n\tpublic function get_asset_metadata( string $handle ): array {\n\t\t$base_path = $this->get_base_path( 'assets/js/' );\n\n\t\t// *.asset.php is generated by DependencyExtractionWebpackPlugin.\n\t\t// *.chunks.php is generated by HtmlWebpackPlugin with a custom template.\n\t\t$asset_file = $base_path . $handle . '.asset.php';\n\t\t$chunks_file = $base_path . $handle . '.chunks.php';\n\n\t\t// phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable\n\t\t$asset = is_readable( $asset_file ) ? require $asset_file : [];\n\t\t// phpcs:ignore WordPressVIPMinimum.Files.IncludingFile.UsingVariable\n\t\t$chunks = is_readable( $chunks_file ) ? require $chunks_file : [];\n\n\t\t// A hash calculated based on the file content of the entry point bundle at <$handle>.js.\n\t\t$asset['version'] ??= WEBSTORIES_VERSION;\n\n\t\t$asset['dependencies'] ??= [];\n\t\t$asset['js'] = $chunks['js'] ?? [];\n\t\t$asset['css'] = $chunks['css'] ?? [];\n\t\t$asset['chunks'] = $chunks['chunks'] ?? [];\n\n\t\treturn $asset;\n\t}\n\n\t/**\n\t * Register script using handle.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $script_handle Handle of script.\n\t * @param string[] $script_dependencies Array of extra dependencies.\n\t * @param bool $with_i18n Optional. Whether to setup i18n for this asset. Default true.\n\t */\n\tpublic function register_script_asset( string $script_handle, array $script_dependencies = [], bool $with_i18n = true ): void {\n\t\tif ( isset( $this->register_scripts[ $script_handle ] ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$base_script_path = $this->get_base_url( 'assets/js/' );\n\t\t$in_footer = true;\n\n\t\t$asset = $this->get_asset_metadata( $script_handle );\n\t\t$entry_version = $asset['version'];\n\t\t// Register any chunks of $script_handle first.\n\t\t// `$asset['js']` are preloaded chunks, `$asset['chunks']` dynamically imported ones.\n\t\tforeach ( $asset['js'] as $chunk ) {\n\t\t\t$this->register_script(\n\t\t\t\t$chunk,\n\t\t\t\t$base_script_path . $chunk . '.js',\n\t\t\t\t[],\n\t\t\t\t$entry_version,\n\t\t\t\t$in_footer,\n\t\t\t\t$with_i18n\n\t\t\t);\n\t\t}\n\n\t\t// Dynamically imported chunks MUST NOT be added as dependencies here.\n\t\t$dependencies = [ ...$asset['dependencies'], ...$script_dependencies, ...$asset['js'] ];\n\n\t\t$this->register_script(\n\t\t\t$script_handle,\n\t\t\t$base_script_path . $script_handle . '.js',\n\t\t\t$dependencies,\n\t\t\t$entry_version,\n\t\t\t$in_footer,\n\t\t\t$with_i18n\n\t\t);\n\n\t\t// \"Save\" all the script's chunks so we can later manually fetch them and their translations if needed.\n\t\twp_script_add_data( $script_handle, 'chunks', $asset['chunks'] );\n\n\t\t// Register every dynamically imported chunk as a script, just so\n\t\t// that we can print their translations whenever the main script is enqueued.\n\t\t// The actual enqueueing of these chunks is done by the main script via dynamic imports.\n\t\tforeach ( $asset['chunks'] as $dynamic_chunk ) {\n\t\t\t$this->register_script(\n\t\t\t\t$dynamic_chunk,\n\t\t\t\t$base_script_path . $dynamic_chunk . '.js',\n\t\t\t\t[],\n\t\t\t\t$entry_version, // Not actually used / relevant, since enqueueing is done by webpack.\n\t\t\t\t$in_footer, // Ditto.\n\t\t\t\t$with_i18n\n\t\t\t);\n\n\t\t\tif ( $with_i18n ) {\n\t\t\t\twp_add_inline_script( $script_handle, (string) wp_scripts()->print_translations( $dynamic_chunk, false ) );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Enqueue script using handle.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $script_handle Handle of script.\n\t * @param string[] $script_dependencies Array of extra dependencies.\n\t * @param bool $with_i18n Optional. Whether to setup i18n for this asset. Default true.\n\t */\n\tpublic function enqueue_script_asset( string $script_handle, array $script_dependencies = [], bool $with_i18n = true ): void {\n\t\t$this->register_script_asset( $script_handle, $script_dependencies, $with_i18n );\n\t\t$this->enqueue_script( $script_handle );\n\t}\n\n\t/**\n\t * Register style using handle.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $style_handle Handle of style.\n\t * @param string[] $style_dependencies Array of extra dependencies.\n\t */\n\tpublic function register_style_asset( string $style_handle, array $style_dependencies = [] ): void {\n\t\tif ( isset( $this->register_styles[ $style_handle ] ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$base_style_url = $this->get_base_url( 'assets/css/' );\n\t\t$base_style_path = $this->get_base_path( 'assets/css/' );\n\t\t$ext = is_rtl() ? '-rtl.css' : '.css';\n\n\t\t// Register any chunks of $style_handle first.\n\t\t$asset = $this->get_asset_metadata( $style_handle );\n\t\t// Webpack appends \"-[contenthash]\" to filenames of chunks, so omit the `?ver=` query param.\n\t\t$chunk_version = null;\n\t\tforeach ( $asset['css'] as $style_chunk ) {\n\t\t\t$this->register_style(\n\t\t\t\t$style_chunk,\n\t\t\t\t$base_style_url . $style_chunk . '.css',\n\t\t\t\t[],\n\t\t\t\t$chunk_version\n\t\t\t);\n\n\t\t\twp_style_add_data( $style_chunk, 'path', $base_style_path . $style_chunk . $ext );\n\t\t}\n\t\t$style_dependencies = [ ...$style_dependencies, ...$asset['css'] ];\n\n\t\t$entry_version = $asset['version'];\n\t\t$this->register_style(\n\t\t\t$style_handle,\n\t\t\t$base_style_url . $style_handle . '.css',\n\t\t\t$style_dependencies,\n\t\t\t$entry_version\n\t\t);\n\n\t\twp_style_add_data( $style_handle, 'rtl', 'replace' );\n\t\twp_style_add_data( $style_handle, 'path', $base_style_path . $style_handle . $ext );\n\t}\n\n\t/**\n\t * Enqueue style using handle.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $style_handle Handle of style.\n\t * @param string[] $style_dependencies Array of extra dependencies.\n\t */\n\tpublic function enqueue_style_asset( string $style_handle, array $style_dependencies = [] ): void {\n\t\t$this->register_style_asset( $style_handle, $style_dependencies );\n\t\t$this->enqueue_style( $style_handle );\n\t}\n\n\t/**\n\t * Register a CSS stylesheet.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $style_handle Name of the stylesheet. Should be unique.\n\t * @param string|false $src Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.\n\t * If source is set to false, stylesheet is an alias of other stylesheets it depends on.\n\t * @param string[] $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.\n\t * @param string|bool|null $ver Optional. String specifying stylesheet version number, if it has one, which is added to the URL\n\t * as a query string for cache busting purposes. If version is set to false, a version\n\t * number is automatically added equal to current installed WordPress version.\n\t * If set to null, no version is added.\n\t * @param string $media Optional. The media for which this stylesheet has been defined.\n\t * Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like\n\t * '(orientation: portrait)' and '(max-width: 640px)'.\n\t * @return bool Whether the style has been registered. True on success, false on failure.\n\t */\n\tpublic function register_style( string $style_handle, $src, array $deps = [], $ver = false, string $media = 'all' ): bool {\n\t\tif ( ! isset( $this->register_styles[ $style_handle ] ) ) {\n\t\t\t$this->register_styles[ $style_handle ] = wp_register_style( $style_handle, $src, $deps, $ver, $media );\n\t\t}\n\n\t\treturn $this->register_styles[ $style_handle ];\n\t}\n\n\t/**\n\t * Register a new script.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $script_handle Name of the script. Should be unique.\n\t * @param string|false $src Full URL of the script, or path of the script relative to the WordPress root directory.\n\t * If source is set to false, script is an alias of other scripts it depends on.\n\t * @param string[] $deps Optional. An array of registered script handles this script depends on. Default empty array.\n\t * @param string|bool|null $ver Optional. String specifying script version number, if it has one, which is added to the URL\n\t * as a query string for cache busting purposes. If version is set to false, a version\n\t * number is automatically added equal to current installed WordPress version.\n\t * If set to null, no version is added.\n\t * @param bool $in_footer Optional. Whether to enqueue the script before instead of in the .\n\t * Default 'false'.\n\t * @param bool $with_i18n Optional. Whether to setup i18n for this asset. Default true.\n\t * @return bool Whether the script has been registered. True on success, false on failure.\n\t */\n\tpublic function register_script( string $script_handle, $src, array $deps = [], $ver = false, bool $in_footer = false, bool $with_i18n = true ): bool {\n\t\tif ( ! isset( $this->register_scripts[ $script_handle ] ) ) {\n\t\t\t$this->register_scripts[ $script_handle ] = wp_register_script(\n\t\t\t\t$script_handle,\n\t\t\t\t$src,\n\t\t\t\t$deps,\n\t\t\t\t$ver,\n\t\t\t\t[\n\t\t\t\t\t'in_footer' => $in_footer,\n\t\t\t\t]\n\t\t\t);\n\n\t\t\tif ( $src && $with_i18n ) {\n\t\t\t\twp_set_script_translations( $script_handle, 'web-stories' );\n\t\t\t}\n\t\t}\n\n\t\treturn $this->register_scripts[ $script_handle ];\n\t}\n\n\t/**\n\t * Enqueue a style.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $style_handle Name of the stylesheet. Should be unique.\n\t * @param string $src Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.\n\t * Default empty.\n\t * @param string[] $deps Optional. An array of registered stylesheet handles this stylesheet depends on. Default empty array.\n\t * @param string|bool|null $ver Optional. String specifying stylesheet version number, if it has one, which is added to the URL\n\t * as a query string for cache busting purposes. If version is set to false, a version\n\t * number is automatically added equal to current installed WordPress version.\n\t * If set to null, no version is added.\n\t * @param string $media Optional. The media for which this stylesheet has been defined.\n\t * Default 'all'. Accepts media types like 'all', 'print' and 'screen', or media queries like\n\t * '(orientation: portrait)' and '(max-width: 640px)'.\n\t */\n\tpublic function enqueue_style( string $style_handle, string $src = '', array $deps = [], $ver = false, string $media = 'all' ): void {\n\t\t$this->register_style( $style_handle, $src, $deps, $ver, $media );\n\t\twp_enqueue_style( $style_handle, $src, $deps, $ver, $media );\n\t}\n\n\t/**\n\t * Enqueue a script.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string $script_handle Name of the script. Should be unique.\n\t * @param string $src Full URL of the script, or path of the script relative to the WordPress root directory.\n\t * Default empty.\n\t * @param string[] $deps Optional. An array of registered script handles this script depends on. Default empty array.\n\t * @param string|bool|null $ver Optional. String specifying script version number, if it has one, which is added to the URL\n\t * as a query string for cache busting purposes. If version is set to false, a version\n\t * number is automatically added equal to current installed WordPress version.\n\t * If set to null, no version is added.\n\t * @param bool $in_footer Optional. Whether to enqueue the script before instead of in the .\n\t * Default 'false'.\n\t * @param bool $with_i18n Optional. Whether to setup i18n for this asset. Default true.\n\t */\n\tpublic function enqueue_script( string $script_handle, string $src = '', array $deps = [], $ver = false, bool $in_footer = false, bool $with_i18n = false ): void {\n\t\t$this->register_script( $script_handle, $src, $deps, $ver, $in_footer, $with_i18n );\n\t\twp_enqueue_script( $script_handle, $src, $deps, $ver, $in_footer );\n\t}\n\n\t/**\n\t * Register a new script module.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.40.1\n\t *\n\t * @param string $script_handle Name of the script module. Should be unique.\n\t * @param string $src Full URL of the script module.\n\t */\n\tpublic function enqueue_script_module( string $script_handle, string $src ): void {\n\t\t$asset = $this->get_asset_metadata( $script_handle );\n\n\t\twp_enqueue_script_module(\n\t\t\t$script_handle,\n\t\t\t$src,\n\t\t\t$asset['dependencies'], // @phpstan-ignore argument.type\n\t\t\t$asset['version'],\n\t\t);\n\t}\n\n\t/**\n\t * Remove admin styles.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param string[] $styles Array of styles to be removed.\n\t */\n\tpublic function remove_admin_style( array $styles ): void {\n\t\twp_styles()->registered['wp-admin']->deps = array_diff( wp_styles()->registered['wp-admin']->deps, $styles );\n\t}\n\n\t/**\n\t * Returns the translations for a script and all of its chunks.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param string $script_handle Name of the script. Should be unique.\n\t * @return array Script translations.\n\t */\n\tpublic function get_translations( string $script_handle ): array {\n\t\t/**\n\t\t * List of script chunks.\n\t\t *\n\t\t * @var false|string[]\n\t\t */\n\t\t$chunks = wp_scripts()->get_data( $script_handle, 'chunks' );\n\n\t\tif ( ! \\is_array( $chunks ) ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t$translations = [\n\t\t\t(string) load_script_textdomain( $script_handle, 'web-stories' ),\n\t\t];\n\n\t\t/**\n\t\t * Dynamic chunk name.\n\t\t *\n\t\t * @var string $dynamic_chunk\n\t\t */\n\t\tforeach ( $chunks as $dynamic_chunk ) {\n\t\t\t$translations[] = (string) load_script_textdomain( $dynamic_chunk, 'web-stories' );\n\t\t}\n\n\t\treturn array_values(\n\t\t\tarray_map(\n\t\t\t\tstatic fn( $translations ) => json_decode( $translations, true ),\n\t\t\t\tarray_filter( $translations )\n\t\t\t)\n\t\t);\n\t}\n}\n" }, { "path": "includes/Block/Web_Stories_Block.php", "content": ",\n * previewOnly?: bool,\n * taxQuery?: array\n * }\n * @phpstan-type BlockAttributesWithDefaults array{\n * blockType?: string,\n * url?: string,\n * title?: string,\n * poster?: string,\n * width?: int,\n * height?: int,\n * align: string,\n * stories?: int[],\n * viewType?: string,\n * numOfStories?: int,\n * numOfColumns?: int,\n * circleSize?: int,\n * imageAlignment?: string,\n * orderby?: string,\n * order?: string,\n * archiveLinkLabel?: string,\n * authors?: int[],\n * fieldState?: array,\n * previewOnly?: bool\n * }\n */\nclass Web_Stories_Block extends Embed_Base {\n\n\t/**\n\t * Script handle.\n\t */\n\tpublic const SCRIPT_HANDLE = 'web-stories-block';\n\n\t/**\n\t * Maximum number of stories users can select\n\t */\n\tpublic const MAX_NUM_OF_STORIES = 20;\n\n\t/**\n\t * Current block's block attributes.\n\t *\n\t * @var array Block Attributes.\n\t * @phpstan-var BlockAttributes\n\t */\n\tprotected array $block_attributes;\n\n\t/**\n\t * Story_Post_Type instance.\n\t *\n\t * @var Story_Post_Type Story_Post_Type instance.\n\t */\n\tprotected Story_Post_Type $story_post_type;\n\n\t/**\n\t * Stories_Script_Data instance.\n\t *\n\t * @var Stories_Script_Data Stories_Script_Data instance.\n\t */\n\tprotected Stories_Script_Data $stories_script_data;\n\n\t/**\n\t * Embed Base constructor.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param Assets $assets Assets instance.\n\t * @param Story_Post_Type $story_post_type Story_Post_Type instance.\n\t * @param Stories_Script_Data $stories_script_data Stories_Script_Data instance.\n\t * @param Context $context Context instance.\n\t */\n\tpublic function __construct(\n\t\tAssets $assets,\n\t\tStory_Post_Type $story_post_type,\n\t\tStories_Script_Data $stories_script_data,\n\t\tContext $context\n\t) {\n\t\tparent::__construct( $assets, $context );\n\n\t\t$this->story_post_type = $story_post_type;\n\t\t$this->stories_script_data = $stories_script_data;\n\t}\n\n\t/**\n\t * Initializes the Web Stories embed block.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function register(): void {\n\t\tparent::register();\n\t\t$this->assets->register_script_asset( self::SCRIPT_HANDLE, [ AMP_Story_Player_Assets::SCRIPT_HANDLE, Tracking::SCRIPT_HANDLE ] );\n\t\t$this->assets->register_style_asset( self::SCRIPT_HANDLE, [ AMP_Story_Player_Assets::SCRIPT_HANDLE, parent::SCRIPT_HANDLE ] );\n\n\t\twp_localize_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\t'webStoriesBlockSettings',\n\t\t\t$this->get_script_settings()\n\t\t);\n\n\t\t$this->register_block_type();\n\t}\n\n\t/**\n\t * Renders the block type output for given attributes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $attributes Block attributes.\n\t * @param string $content Block content.\n\t * @param WP_Block $block Block instance.\n\t * @return string Rendered block type output.\n\t *\n\t * @phpstan-param BlockAttributesWithDefaults $attributes\n\t */\n\tpublic function render_block( array $attributes, string $content, WP_Block $block ): string {\n\t\tif ( false === $this->initialize_block_attributes( $attributes ) ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tif ( isset( $block->context['postType'], $block->context['postId'] ) && 'web-story' === $block->context['postType'] && ! empty( $block->context['postId'] ) ) {\n\t\t\t$attributes = wp_parse_args( $attributes, $this->default_attrs() );\n\n\t\t\t$attributes['class'] = 'wp-block-web-stories-embed';\n\n\t\t\t$story = new Story();\n\t\t\t$story->load_from_post( get_post( $block->context['postId'] ) );\n\n\t\t\treturn $this->render_story( $story, $attributes );\n\t\t}\n\n\t\tif ( ! empty( $attributes['blockType'] )\n\t\t\t&& ( 'latest-stories' === $attributes['blockType'] || 'selected-stories' === $attributes['blockType'] ) ) {\n\n\t\t\t$story_attributes = [\n\t\t\t\t'align' => $attributes['align'],\n\t\t\t\t'view_type' => $attributes['viewType'] ??= '',\n\t\t\t\t'archive_link_label' => $attributes['archiveLinkLabel'] ??= __( 'View all stories', 'web-stories' ),\n\t\t\t\t'circle_size' => $attributes['circleSize'] ??= 96,\n\t\t\t\t'image_alignment' => $attributes['imageAlignment'] ??= 96,\n\t\t\t\t'number_of_columns' => $attributes['numOfColumns'] ??= 2,\n\t\t\t];\n\n\t\t\t/**\n\t\t\t * Story Attributes.\n\t\t\t *\n\t\t\t * @phpstan-var StoryAttributes $story_attributes\n\t\t\t */\n\t\t\t$story_attributes = array_merge( $story_attributes, $this->get_mapped_field_states() );\n\n\t\t\treturn ( new Story_Query( $story_attributes, $this->get_query_args() ) )->render();\n\t\t}\n\n\t\t// Embedding a single story by URL.\n\t\t$attributes = wp_parse_args( $attributes, $this->default_attrs() );\n\n\t\t$attributes['class'] = 'wp-block-web-stories-embed';\n\n\t\treturn $this->render( $attributes );\n\t}\n\n\t/**\n\t * Maps fields to the story params.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array\n\t */\n\tpublic function get_mapped_field_states(): array {\n\t\t$controls = [\n\t\t\t'show_title' => 'title',\n\t\t\t'show_author' => 'author',\n\t\t\t'show_excerpt' => 'excerpt',\n\t\t\t'show_date' => 'date',\n\t\t\t'show_archive_link' => 'archive_link',\n\t\t\t'sharp_corners' => 'sharp_corners',\n\t\t];\n\n\t\t$controls_state = [];\n\n\t\tforeach ( $controls as $control => $field ) {\n\t\t\t$key = 'show_' . $field;\n\n\t\t\t$controls_state[ $control ] = $this->block_attributes['fieldState'][ $key ] ?? false;\n\t\t}\n\n\t\treturn $controls_state;\n\t}\n\n\t/**\n\t * Registers a block type from metadata stored in the `block.json` file.\n\t *\n\t * @since 1.9.0\n\t */\n\tprotected function register_block_type(): void {\n\t\t$base_path = $this->assets->get_base_path( 'blocks/embed/block.json' );\n\t\t// Note: does not use 'script' and 'style' args, and instead uses 'render_callback'\n\t\t// to enqueue these assets only when needed.\n\t\tregister_block_type_from_metadata(\n\t\t\t$base_path,\n\t\t\t[\n\t\t\t\t'attributes' => [\n\t\t\t\t\t'blockType' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t\t'url' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t\t'title' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => __( 'Web Story', 'web-stories' ),\n\t\t\t\t\t],\n\t\t\t\t\t'poster' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t\t'width' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 360,\n\t\t\t\t\t],\n\t\t\t\t\t'height' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 600,\n\t\t\t\t\t],\n\t\t\t\t\t'align' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => 'none',\n\t\t\t\t\t],\n\t\t\t\t\t'stories' => [\n\t\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t\t'default' => [],\n\t\t\t\t\t],\n\t\t\t\t\t'viewType' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => '',\n\t\t\t\t\t],\n\t\t\t\t\t'numOfStories' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 5,\n\t\t\t\t\t],\n\t\t\t\t\t'numOfColumns' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 2,\n\t\t\t\t\t],\n\t\t\t\t\t'circleSize' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 96,\n\t\t\t\t\t],\n\t\t\t\t\t'imageAlignment' => [\n\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t'default' => 96,\n\t\t\t\t\t],\n\t\t\t\t\t'orderby' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => '',\n\t\t\t\t\t],\n\t\t\t\t\t'order' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => '',\n\t\t\t\t\t],\n\t\t\t\t\t'archiveLinkLabel' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'default' => __( 'View all stories', 'web-stories' ),\n\t\t\t\t\t],\n\t\t\t\t\t'authors' => [\n\t\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t\t'default' => [],\n\t\t\t\t\t],\n\t\t\t\t\t'fieldState' => [\n\t\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t\t'default' => [],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'render_callback' => [ $this, 'render_block' ],\n\t\t\t\t'editor_script' => self::SCRIPT_HANDLE,\n\t\t\t\t'editor_style' => self::SCRIPT_HANDLE,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Returns script settings.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array Script settings.\n\t */\n\tprivate function get_script_settings(): array {\n\t\t$settings = [\n\t\t\t'publicPath' => $this->assets->get_base_url( 'assets/js/' ),\n\t\t\t'config' => [\n\t\t\t\t'maxNumOfStories' => self::MAX_NUM_OF_STORIES,\n\t\t\t\t'archiveURL' => get_post_type_archive_link( $this->story_post_type->get_slug() ),\n\t\t\t\t'api' => [\n\t\t\t\t\t'stories' => trailingslashit( $this->story_post_type->get_rest_url() ),\n\t\t\t\t\t'users' => '/web-stories/v1/users/',\n\t\t\t\t],\n\t\t\t\t'fieldStates' => $this->stories_script_data->fields_states(),\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filters settings passed to the web stories block.\n\t\t *\n\t\t * @param array $settings Array of settings passed to web stories block.\n\t\t */\n\t\treturn apply_filters( 'web_stories_block_settings', $settings );\n\t}\n\n\t/**\n\t * Initializes class variable $block_attributes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $block_attributes Array containing block attributes.\n\t * @return bool Whether or not block attributes have been initialized with given value.\n\t *\n\t * @phpstan-param BlockAttributes $block_attributes\n\t */\n\tprotected function initialize_block_attributes( array $block_attributes = [] ): bool {\n\t\tif ( ! empty( $block_attributes ) ) {\n\t\t\t$this->block_attributes = $block_attributes;\n\t\t\treturn true;\n\t\t}\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns arguments to be passed to the WP_Query object initialization.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array Query arguments.\n\t */\n\tprotected function get_query_args(): array {\n\t\t$attributes = $this->block_attributes;\n\n\t\t$query_args = [\n\t\t\t'post_type' => $this->story_post_type->get_slug(),\n\t\t\t'post_status' => 'publish',\n\t\t\t'suppress_filters' => false,\n\t\t\t'no_found_rows' => true,\n\t\t];\n\n\t\tif ( ! empty( $attributes['taxQuery'] ) ) {\n\t\t\t// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\t\t\t$query_args['tax_query'] = [];\n\t\t\tforeach ( $attributes['taxQuery'] as $taxonomy => $terms ) {\n\t\t\t\tif ( is_taxonomy_viewable( $taxonomy ) && ! empty( $terms ) ) {\n\t\t\t\t\t// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\t\t\t\t\t$query_args['tax_query'][] = [\n\t\t\t\t\t\t'taxonomy' => $taxonomy,\n\t\t\t\t\t\t'terms' => array_filter( array_map( '\\intval', $terms ) ),\n\t\t\t\t\t\t'include_children' => false,\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// if block type is 'selected-tories'.\n\t\tif ( ! empty( $attributes['blockType'] )\n\t\t\t&& 'selected-stories' === $attributes['blockType']\n\t\t\t&& ! empty( $attributes['stories'] )\n\t\t) {\n\t\t\t$query_args['post__in'] = $attributes['stories'];\n\t\t\t$query_args['orderby'] = 'post__in';\n\n\t\t\treturn $query_args;\n\t\t}\n\n\t\tif ( ! empty( $attributes['numOfStories'] ) ) {\n\t\t\t$query_args['posts_per_page'] = $attributes['numOfStories'];\n\t\t}\n\n\t\tif ( ! empty( $attributes['order'] ) ) {\n\t\t\t$query_args['order'] = strtoupper( $attributes['order'] );\n\t\t}\n\n\t\tif ( ! empty( $attributes['orderby'] ) ) {\n\t\t\t$query_args['orderby'] = 'title' === $attributes['orderby'] ? 'post_title' : 'post_date';\n\t\t}\n\n\t\tif ( ! empty( $attributes['authors'] ) ) {\n\t\t\t$query_args['author__in'] = $attributes['authors'];\n\t\t}\n\n\t\treturn $query_args;\n\t}\n}\n" }, { "path": "includes/Context.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Determine whether the current response is a single web story.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return bool Whether it is singular story post (and thus an AMP endpoint).\n\t */\n\tpublic function is_web_story(): bool {\n\t\treturn is_singular( $this->story_post_type->get_slug() ) && ! is_embed() && ! post_password_required();\n\t}\n\n\t/**\n\t * Determine whether the current response being served as AMP.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return bool Whether it is singular story post (and thus an AMP endpoint).\n\t */\n\tpublic function is_amp(): bool {\n\t\tif ( $this->is_web_story() ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// Check for `amp_is_request()` first since `is_amp_endpoint()` is deprecated.\n\t\tif ( \\function_exists( '\\amp_is_request' ) ) {\n\t\t\treturn amp_is_request();\n\t\t}\n\n\t\tif ( \\function_exists( '\\is_amp_endpoint' ) ) {\n\t\t\treturn is_amp_endpoint();\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Determines whether we're currently on the story editor screen.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return bool Whether we're currently on the story editor screen.\n\t */\n\tpublic function is_story_editor(): bool {\n\t\t$screen = \\function_exists( 'get_current_screen' ) ? get_current_screen() : null;\n\n\t\treturn $screen && $this->story_post_type->get_slug() === $screen->post_type && 'post' === $screen->base;\n\t}\n\n\t/**\n\t * Determines whether we're currently on the media upload screen.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return bool Whether we're currently on the media upload screen\n\t */\n\tpublic function is_upload_screen(): bool {\n\t\t$screen = \\function_exists( 'get_current_screen' ) ? get_current_screen() : null;\n\n\t\treturn $screen && 'upload' === $screen->id;\n\t}\n\n\t/**\n\t * Whether we're currently on a block editor screen.\n\t *\n\t * @since 1.15.0\n\t */\n\tpublic function is_block_editor(): bool {\n\t\t$screen = \\function_exists( 'get_current_screen' ) ? get_current_screen() : null;\n\n\t\treturn $screen && $screen->is_block_editor();\n\t}\n\n\t/**\n\t * Returns the current screen base if available.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return string|null Current screen base if available.\n\t */\n\tpublic function get_screen_base(): ?string {\n\t\t$screen = \\function_exists( 'get_current_screen' ) ? get_current_screen() : null;\n\n\t\treturn $screen->base ?? null;\n\t}\n\n\t/**\n\t * Returns the current screen post type if available.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return string|null Current screen post type if available.\n\t */\n\tpublic function get_screen_post_type(): ?string {\n\t\t$screen = \\function_exists( 'get_current_screen' ) ? get_current_screen() : null;\n\n\t\treturn $screen->post_type ?? null;\n\t}\n}\n" }, { "path": "includes/Database_Upgrader.php", "content": " Migrations\\Update_1::class,\n\t\t'2.0.0' => Migrations\\Replace_Conic_Style_Presets::class,\n\t\t'2.0.1' => Migrations\\Add_Media_Source_Editor::class,\n\t\t'2.0.2' => Migrations\\Remove_Broken_Text_Styles::class,\n\t\t'2.0.3' => Migrations\\Unify_Color_Presets::class,\n\t\t'2.0.4' => Migrations\\Update_Publisher_Logos::class,\n\t\t'3.0.0' => Migrations\\Add_Stories_Caps::class,\n\t\t'3.0.1' => Migrations\\Rewrite_Flush::class,\n\t\t'3.0.2' => Migrations\\Rewrite_Flush::class,\n\t\t'3.0.4' => Migrations\\Add_Poster_Generation_Media_Source::class,\n\t\t'3.0.5' => Migrations\\Remove_Unneeded_Attachment_Meta::class,\n\t\t'3.0.6' => Migrations\\Add_Media_Source_Video_Optimization::class,\n\t\t'3.0.7' => Migrations\\Add_Media_Source_Source_Video::class,\n\t\t'3.0.8' => Migrations\\Rewrite_Flush::class,\n\t\t'3.0.9' => Migrations\\Add_VideoPress_Poster_Generation_Media_Source::class,\n\t\t'3.0.10' => Migrations\\Add_Media_Source_Gif_Conversion::class,\n\t\t'3.0.11' => Migrations\\Add_Media_Source_Source_Image::class,\n\t\t'3.0.12' => Migrations\\Set_Legacy_Analytics_Usage_Flag::class,\n\t\t'3.0.13' => Migrations\\Add_Stories_Caps::class,\n\t\t'3.0.14' => Migrations\\Add_Media_Source_Page_Template::class,\n\t\t'3.0.15' => Migrations\\Add_Media_Source_Recording::class,\n\t\t'3.0.16' => Migrations\\Remove_Incorrect_Tracking_Id::class,\n\t];\n\n\t/**\n\t * Injector instance.\n\t *\n\t * @var Injector Injector instance.\n\t */\n\tprivate Injector $injector;\n\n\t/**\n\t * Database_Upgrader constructor.\n\t *\n\t * @param Injector $injector Injector instance.\n\t */\n\tpublic function __construct( Injector $injector ) {\n\t\t$this->injector = $injector;\n\t}\n\n\t/**\n\t * Hooked into admin_init and walks through an array of upgrade methods.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'admin_init', [ $this, 'run_upgrades' ], 5 );\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->run_upgrades();\n\t}\n\n\t/**\n\t * Act on site initialization.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\t$this->run_upgrades();\n\t}\n\n\t/**\n\t * Run all upgrade routines in order.\n\t *\n\t * @since 1.11.0\n\t */\n\tpublic function run_upgrades(): void {\n\t\t/**\n\t\t * Current database version.\n\t\t *\n\t\t * @var string $version\n\t\t */\n\t\t$version = get_option( self::OPTION, '0.0.0' );\n\n\t\tif ( '0.0.0' === $version ) {\n\t\t\t$this->finish_up( $version );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( version_compare( WEBSTORIES_DB_VERSION, $version, '=' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$routines = self::ROUTINES;\n\t\tarray_walk( $routines, [ $this, 'run_upgrade_routine' ], $version );\n\t\t$this->finish_up( $version );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_option( self::PREVIOUS_OPTION );\n\t\tdelete_option( self::OPTION );\n\t}\n\n\t/**\n\t * Runs the upgrade routine.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param class-string $class_name The Class to call.\n\t * @param string $version The new version.\n\t * @param string $current_version The current set version.\n\t */\n\tprotected function run_upgrade_routine( string $class_name, string $version, string $current_version ): void {\n\t\tif ( version_compare( $current_version, $version, '<' ) ) {\n\t\t\t/**\n\t\t\t * Instance of a migration class.\n\t\t\t *\n\t\t\t * @var Migration $routine\n\t\t\t */\n\t\t\t$routine = $this->injector->make( $class_name );\n\t\t\t$routine->migrate();\n\t\t}\n\t}\n\n\t/**\n\t * Runs the needed cleanup after an update, setting the DB version to latest version, flushing caches etc.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $previous_version The previous version.\n\t */\n\tprotected function finish_up( string $previous_version ): void {\n\t\tupdate_option( self::PREVIOUS_OPTION, $previous_version );\n\t\tupdate_option( self::OPTION, WEBSTORIES_DB_VERSION );\n\t}\n}\n" }, { "path": "includes/Decoder.php", "content": "load_demo_content_from_file();\n\t\t$content = $this->localize_texts( $content );\n\t\t$content = $this->update_assets_urls( $content );\n\n\t\t// Quick sanity check to see if the JSON is still valid.\n\t\tif ( null === json_decode( $content, true ) ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn $content;\n\t}\n\n\t/**\n\t * Updates URLs to media assets in demo content.\n\t *\n\t * @param string $content Original content.\n\t * @return string Modified content.\n\t */\n\tprivate function update_assets_urls( string $content ): string {\n\t\treturn str_replace(\n\t\t\t'https://replaceme.com/',\n\t\t\ttrailingslashit( WEBSTORIES_CDN_URL ),\n\t\t\t$content\n\t\t);\n\t}\n\n\t/**\n\t * Localizes demo content.\n\t *\n\t * @param string $content Original content.\n\t * @return string Localized text.\n\t */\n\tprivate function localize_texts( string $content ): string {\n\t\t$replacements = [\n\t\t\t// Page 1.\n\t\t\t'L10N_PLACEHOLDER_1_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Tips to make the most of the Web Stories Editor', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 2.\n\n\t\t\t'L10N_PLACEHOLDER_2_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Set a page background', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_2_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Drag your image or video to the edge of the page to set as page background.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 3.\n\n\t\t\t'L10N_PLACEHOLDER_3_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Media Edit Mode', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_3_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Double-click the image/video to resize, re-center or crop. Note: media set as page background cannot be cropped.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 4.\n\n\t\t\t'L10N_PLACEHOLDER_4_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Background Overlay', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_4_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Once you\\'ve set a page bg, add a solid, linear or radial gradient overlay to increase text contrast or add visual styling.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 5.\n\n\t\t\t'L10N_PLACEHOLDER_5_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Safe Zone', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_5_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Add your designs to the page, keeping crucial elements inside the safe zone to ensure they are visible across most devices.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 6.\n\n\t\t\t'L10N_PLACEHOLDER_6_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Story System Layer', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_6_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'The system layer is docked at the top. Preview your story to ensure system layer icons are not blocking crucial elements.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 7.\n\n\t\t\t'L10N_PLACEHOLDER_7_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Shapes and Masks', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_7_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Our shapes are quite basic for now but they act as masks. Drag an image or video into the mask.', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 8.\n\n\t\t\t'L10N_PLACEHOLDER_8_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Embed Visual Stories', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_8_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Embed stories into your blog post. Open the block menu & select the Web Stories block. Insert the story link to embed your story. That\\'s it!', 'demo content', 'web-stories' ),\n\n\t\t\t// Page 9.\n\n\t\t\t'L10N_PLACEHOLDER_9_1' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Read about best practices for creating successful Web Stories', 'demo content', 'web-stories' ),\n\n\t\t\t'L10N_PLACEHOLDER_9_2' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_url( _x( 'https://amp.dev/documentation/guides-and-tutorials/start/create_successful_stories/', 'demo content', 'web-stories' ) ),\n\n\t\t\t'L10N_PLACEHOLDER_9_3' => /* translators: demo content used in the \"Get Started\" story */\n\t\t\t\tesc_html_x( 'Best Practices', 'demo content', 'web-stories' ),\n\t\t];\n\n\t\tforeach ( $replacements as $search => $replacement ) {\n\t\t\t$content = str_replace( $search, $replacement, $content );\n\t\t}\n\n\t\treturn $content;\n\t}\n\n\t/**\n\t * Loads demo content from JSON file.\n\t */\n\tprivate function load_demo_content_from_file(): string {\n\t\t$file = WEBSTORIES_PLUGIN_DIR_PATH . 'includes/data/stories/demo.json';\n\n\t\tif ( ! is_readable( $file ) ) {\n\t\t\treturn '';\n\t\t}\n\n\t\t$content = file_get_contents( $file ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents, WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown\n\n\t\tif ( ! $content ) {\n\t\t\treturn '';\n\t\t}\n\n\t\treturn $content;\n\t}\n}\n" }, { "path": "includes/Discovery.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type', 'product_meta' ];\n\t}\n\n\t/**\n\t * Initialize discovery functionality.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_document_title' ] );\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_metadata' ] );\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_schemaorg_metadata' ] );\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_open_graph_metadata' ] );\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_twitter_metadata' ] );\n\n\t\tadd_action( 'web_stories_story_head', [ $this, 'print_feed_link' ], 4 );\n\t\tadd_action( 'wp_head', [ $this, 'print_feed_link' ], 4 );\n\n\t\t// @todo Check if there's something to skip in the new version.\n\t\tadd_action( 'web_stories_story_head', 'rest_output_link_wp_head', 10, 0 );\n\t\tadd_action( 'web_stories_story_head', 'wp_resource_hints', 2 );\n\t\tadd_action( 'web_stories_story_head', 'feed_links', 2 );\n\t\tadd_action( 'web_stories_story_head', 'feed_links_extra', 3 );\n\t\tadd_action( 'web_stories_story_head', 'rsd_link' );\n\t\tadd_action( 'web_stories_story_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );\n\t\tadd_action( 'web_stories_story_head', 'wp_generator' );\n\t\tadd_action( 'web_stories_story_head', 'rel_canonical' );\n\t\tadd_action( 'web_stories_story_head', 'wp_shortlink_wp_head', 10, 0 );\n\t\tadd_action( 'web_stories_story_head', 'wp_site_icon', 99 );\n\t\tadd_action( 'web_stories_story_head', 'wp_oembed_add_discovery_links' );\n\t\tadd_action( 'web_stories_story_head', 'wp_robots', 1 );\n\t}\n\n\t/**\n\t * Prints document title for stories.\n\t *\n\t * Adds the title regardless of theme support.\n\t *\n\t * AMP sanitization will ensure there is always just exactly one title tag present.\n\t *\n\t * @since 1.25.0\n\t *\n\t * @link https://github.com/GoogleForCreators/web-stories-wp/issues/12139\n\t * @link https://github.com/GoogleForCreators/web-stories-wp/issues/12487\n\t * @link https://github.com/GoogleForCreators/web-stories-wp/issues/12655\n\t */\n\tpublic function print_document_title(): void {\n\t\t/**\n\t\t * Filters whether to print the document title.\n\t\t *\n\t\t * @since 1.25.0\n\t\t *\n\t\t * @param bool $enable_open_graph Whether to print the document title. Default to true.\n\t\t */\n\t\t$enable_metadata = apply_filters( 'web_stories_enable_document_title', true );\n\t\tif ( ! $enable_metadata ) {\n\t\t\treturn;\n\t\t}\n\t\t?>\n\t\t<?php echo esc_html( wp_get_document_title() ); ?>\n\t\t\n\t\t\" />\n\t\tget_schemaorg_metadata();\n\n\t\t?>\n\t\t\n\t\tget_open_graph_metadata();\n\n\t\tforeach ( $metadata as $name => $value ) {\n\t\t\tprintf( '', esc_attr( $name ), esc_attr( (string) $value ) );\n\t\t}\n\t}\n\n\t/**\n\t * Prints Twitter card metadata.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function print_twitter_metadata(): void {\n\t\t/**\n\t\t * Filters filter to enable / disable twitter metadata.\n\t\t *\n\t\t * @since 1.2.0\n\t\t *\n\t\t * @param bool $enable_twitter_metadata Enable / disable twitter metadata. Default to true.\n\t\t */\n\t\t$enable_twitter_metadata = apply_filters( 'web_stories_enable_twitter_metadata', true );\n\t\tif ( ! $enable_twitter_metadata ) {\n\t\t\treturn;\n\t\t}\n\t\t$metadata = $this->get_twitter_metadata();\n\n\t\tforeach ( $metadata as $name => $value ) {\n\t\t\tprintf( '', esc_attr( $name ), esc_attr( $value ) );\n\t\t}\n\t}\n\n\t/**\n\t * Add RSS feed link for stories, if theme supports automatic-feed-links.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function print_feed_link(): void {\n\t\t$enable_print_feed_link = current_theme_supports( 'automatic-feed-links' ) && ! is_post_type_archive( $this->story_post_type->get_slug() );\n\n\t\t/**\n\t\t * Filters filter to enable / disable printing feed links.\n\t\t *\n\t\t * @since 1.29.0\n\t\t *\n\t\t * @param bool $enable_print_feed_link Enable / disable printing feed links. Default to if automatic-feed-links is enabled.\n\t\t */\n\t\t$enable_print_feed_link = apply_filters( 'web_stories_enable_print_feed_link', $enable_print_feed_link );\n\n\t\tif ( ! $enable_print_feed_link ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$name = $this->story_post_type->get_label( 'name' );\n\t\tif ( ! $name ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$feed = get_post_type_archive_feed_link( $this->story_post_type->get_slug() );\n\t\tif ( ! $feed ) {\n\t\t\treturn;\n\t\t}\n\n\t\t/* translators: Separator between blog name and feed type in feed links. */\n\t\t$separator = _x( '»', 'feed link', 'web-stories' );\n\t\t/* translators: 1: Blog name, 2: Separator (raquo), 3: Post type name. */\n\t\t$post_type_title = esc_html__( '%1$s %2$s %3$s Feed', 'web-stories' );\n\n\t\t$title = \\sprintf( $post_type_title, get_bloginfo( 'name' ), $separator, $name );\n\n\t\tprintf(\n\t\t\t'',\n\t\t\tesc_attr( feed_content_type() ),\n\t\t\tesc_attr( $title ),\n\t\t\tesc_url( $feed )\n\t\t);\n\t}\n\n\t/**\n\t * Get schema.org metadata for the current query.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @see https://developers.google.com/search/docs/guides/enable-web-stories\n\t *\n\t * @return array $metadata All schema.org metadata for the post.\n\t */\n\tprotected function get_schemaorg_metadata(): array {\n\t\t/**\n\t\t * We're expecting a post object.\n\t\t *\n\t\t * @var WP_Post|null $post\n\t\t */\n\t\t$post = get_queried_object();\n\n\t\t$story = new Story();\n\t\t$story->load_from_post( $post );\n\n\t\t$metadata = [\n\t\t\t'@context' => 'http://schema.org',\n\t\t\t'publisher' => [\n\t\t\t\t'@type' => 'Organization',\n\t\t\t\t'name' => $story->get_publisher_name(),\n\t\t\t],\n\t\t];\n\n\t\tif ( $post instanceof WP_Post ) {\n\t\t\t$url = $story->get_publisher_logo_url();\n\t\t\t$size = $story->get_publisher_logo_size();\n\t\t\tif ( ! empty( $url ) && ! empty( $size ) ) {\n\t\t\t\t$metadata['publisher']['logo'] = [\n\t\t\t\t\t'@type' => 'ImageObject',\n\t\t\t\t\t'url' => $url,\n\t\t\t\t\t'width' => $size[0],\n\t\t\t\t\t'height' => $size[1],\n\t\t\t\t];\n\t\t\t}\n\n\t\t\t$poster = $story->get_poster_portrait();\n\t\t\t$poster_size = $story->get_poster_portrait_size();\n\t\t\tif ( $poster && $poster_size ) {\n\t\t\t\t$metadata['image'] = [\n\t\t\t\t\t'@type' => 'ImageObject',\n\t\t\t\t\t'url' => $poster,\n\t\t\t\t\t'width' => $poster_size[0],\n\t\t\t\t\t'height' => $poster_size[1],\n\t\t\t\t];\n\n\t\t\t}\n\n\t\t\t$metadata = array_merge(\n\t\t\t\t$metadata,\n\t\t\t\t[\n\t\t\t\t\t'@type' => 'Article',\n\t\t\t\t\t'mainEntityOfPage' => $story->get_url(),\n\t\t\t\t\t'headline' => $story->get_title(),\n\t\t\t\t\t'datePublished' => mysql2date( 'c', $post->post_date_gmt, false ),\n\t\t\t\t\t'dateModified' => mysql2date( 'c', $post->post_modified_gmt, false ),\n\t\t\t\t]\n\t\t\t);\n\n\t\t\t$post_author = get_userdata( (int) $post->post_author );\n\n\t\t\tif ( $post_author ) {\n\t\t\t\t$metadata['author'] = [\n\t\t\t\t\t'@type' => 'Person',\n\t\t\t\t\t'name' => html_entity_decode( $post_author->display_name, ENT_QUOTES, get_bloginfo( 'charset' ) ),\n\t\t\t\t];\n\t\t\t}\n\n\n\t\t\t/**\n\t\t\t * List of products.\n\t\t\t *\n\t\t\t * @phpstan-var Product[] $products\n\t\t\t */\n\t\t\t$products = $story->get_products();\n\t\t\t$product_metadata = $this->get_product_data( $products );\n\t\t\tif ( $product_metadata ) {\n\t\t\t\t$metadata = array_merge( $product_metadata, $metadata );\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Filters the schema.org metadata for a given story.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $metadata The structured data.\n\t\t * @param WP_Post|null $post The current post object if available.\n\t\t */\n\t\treturn apply_filters( 'web_stories_story_schema_metadata', $metadata, $post );\n\t}\n\n\t/**\n\t * Get product schema data.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param Product[] $products Array of products.\n\t * @return array>|string>>\n\t *\n\t * @phpstan-param Product[] $products\n\t */\n\tprotected function get_product_data( array $products ): array {\n\t\tif ( ! $products ) {\n\t\t\treturn [];\n\t\t}\n\t\t$product_data = [];\n\t\tforeach ( $products as $product ) {\n\t\t\t$data = [\n\t\t\t\t'@type' => 'Product',\n\t\t\t\t'brand' => $product->get_brand(),\n\t\t\t\t'productID' => $product->get_id(),\n\t\t\t\t'url' => $product->get_url(),\n\t\t\t\t'name' => $product->get_title(),\n\t\t\t\t'description' => $product->get_details(),\n\t\t\t\t'offers' => [\n\t\t\t\t\t[\n\t\t\t\t\t\t'@type' => 'Offer',\n\t\t\t\t\t\t'price' => $product->get_price(),\n\t\t\t\t\t\t'priceCurrency' => $product->get_price_currency(),\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t];\n\t\t\tif ( $product->get_images() ) {\n\t\t\t\t$data['image'] = $product->get_images()[0]['url'];\n\t\t\t}\n\n\t\t\t$aggregate_rating = $product->get_aggregate_rating();\n\t\t\tif ( ! empty( $aggregate_rating['review_count'] ) ) {\n\t\t\t\t$data['aggregateRating'] = [\n\t\t\t\t\t'@type' => 'AggregateRating',\n\t\t\t\t\t'ratingValue' => $aggregate_rating['rating_value'] ??= 0,\n\t\t\t\t\t'reviewCount' => $aggregate_rating['review_count'],\n\t\t\t\t\t'url' => $aggregate_rating['review_url'] ??= '',\n\t\t\t\t];\n\t\t\t}\n\t\t\t$product_data[] = $data;\n\t\t}\n\n\t\treturn [\n\t\t\t'mainEntity' => [\n\t\t\t\t'@type' => 'ItemList',\n\t\t\t\t'numberOfItems' => (string) \\count( $products ),\n\t\t\t\t'itemListElement' => $product_data,\n\t\t\t],\n\t\t];\n\t}\n\n\t/**\n\t * Get Open Graph metadata.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @return array\n\t */\n\tprotected function get_open_graph_metadata(): array {\n\t\t$metadata = [\n\t\t\t'og:locale' => get_bloginfo( 'language' ),\n\t\t\t'og:site_name' => get_bloginfo( 'name' ),\n\t\t];\n\n\t\t/**\n\t\t * We're expecting a post object.\n\t\t *\n\t\t * @var WP_Post|null $post\n\t\t */\n\t\t$post = get_queried_object();\n\n\t\tif ( $post instanceof WP_Post ) {\n\t\t\t$story = new Story();\n\t\t\t$story->load_from_post( $post );\n\n\t\t\t$metadata['og:type'] = 'article';\n\t\t\t$metadata['og:title'] = $story->get_title();\n\t\t\t$metadata['og:url'] = $story->get_url();\n\t\t\t$metadata['og:description'] = wp_strip_all_tags( get_the_excerpt( $post ) );\n\t\t\t$metadata['article:published_time'] = (string) get_the_date( 'c', $post );\n\t\t\t$metadata['article:modified_time'] = (string) get_the_modified_date( 'c', $post );\n\n\t\t\t$poster_url = $story->get_poster_portrait();\n\t\t\t$poster_sizes = $story->get_poster_portrait_size();\n\t\t\tif ( $poster_url && $poster_sizes ) {\n\t\t\t\t$metadata['og:image'] = esc_url( $poster_url );\n\t\t\t\t$metadata['og:image:width'] = $poster_sizes[0];\n\t\t\t\t$metadata['og:image:height'] = $poster_sizes[1];\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Filters the open graph metadata for a given story.\n\t\t *\n\t\t * @since 1.3.0\n\t\t *\n\t\t * @param array $metadata The structured data.\n\t\t * @param WP_Post|null $post The current post object if available.\n\t\t */\n\t\treturn apply_filters( 'web_stories_story_open_graph_metadata', $metadata, $post );\n\t}\n\n\t/**\n\t * Get Twitter card metadata.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @return array Twitter card metadata.\n\t */\n\tprotected function get_twitter_metadata(): array {\n\t\t$metadata = [\n\t\t\t'twitter:card' => 'summary_large_image',\n\t\t];\n\n\t\t/**\n\t\t * We're expecting a post object.\n\t\t *\n\t\t * @var WP_Post|null $post\n\t\t */\n\t\t$post = get_queried_object();\n\n\t\tif ( $post instanceof WP_Post ) {\n\t\t\t$story = new Story();\n\t\t\t$story->load_from_post( $post );\n\t\t\t$poster = $story->get_poster_portrait();\n\t\t\tif ( $poster ) {\n\t\t\t\t$metadata['twitter:image'] = esc_url( $poster );\n\t\t\t\t$metadata['twitter:image:alt'] = $story->get_title();\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Filters the twitter metadata for a given story.\n\t\t *\n\t\t * @since 1.3.0\n\t\t *\n\t\t * @param array $metadata The structured data.\n\t\t * @param WP_Post|null $post The current post object if available.\n\t\t */\n\t\treturn apply_filters( 'web_stories_story_twitter_metadata', $metadata, $post );\n\t}\n}\n" }, { "path": "includes/Embed_Base.php", "content": "assets = $assets;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initializes the Web Stories embed block.\n\t *\n\t * @since 1.1.0\n\t */\n\tpublic function register(): void {\n\t\tif ( wp_style_is( self::SCRIPT_HANDLE, 'registered' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$this->assets->register_style_asset( self::SCRIPT_HANDLE );\n\n\t\tif ( \\defined( 'AMPFORWP_VERSION' ) ) {\n\t\t\tadd_action( 'amp_post_template_css', [ $this, 'add_amp_post_template_css' ] );\n\t\t}\n\n\t\tadd_filter( 'wp_kses_allowed_html', [ $this, 'filter_kses_allowed_html' ] );\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 11;\n\t}\n\n\t/**\n\t * Prints required inline CSS when using the AMP for WP plugin.\n\t *\n\t * @since 1.13.0\n\t */\n\tpublic function add_amp_post_template_css(): void {\n\t\t$path = $this->assets->get_base_path( \\sprintf( 'assets/css/%s%s.css', self::SCRIPT_HANDLE, is_rtl() ? '-rtl' : '' ) );\n\n\t\tif ( is_readable( $path ) ) {\n\t\t\t$css = file_get_contents( $path ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown\n\t\t\techo $css; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\t}\n\t}\n\n\t/**\n\t * Filter the allowed tags for KSES to allow for amp-story children.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array>|mixed $allowed_tags Allowed tags.\n\t * @return array>|mixed Allowed tags.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($allowed_tags is array ? array : mixed)\n\t */\n\tpublic function filter_kses_allowed_html( $allowed_tags ) {\n\t\tif ( ! \\is_array( $allowed_tags ) ) {\n\t\t\treturn $allowed_tags;\n\t\t}\n\n\t\t$story_player_components = [\n\t\t\t'amp-story-player' => [],\n\t\t];\n\n\t\t$allowed_tags = array_merge( $allowed_tags, $story_player_components );\n\n\t\treturn $allowed_tags;\n\t}\n\n\t/**\n\t * Renders a story with given attributes.\n\t *\n\t * @since 1.30.0\n\t *\n\t * @param Story $story Story instance.\n\t * @param array $attributes Embed render attributes.\n\t * @return string Rendered embed output.\n\t */\n\tpublic function render_story( Story $story, array $attributes ): string {\n\t\tif ( is_feed() ) {\n\t\t\t$renderer = new Image( $story );\n\t\t} elseif ( ! empty( $attributes['previewOnly'] ) ) {\n\t\t\t$renderer = new Singleton( $story, $this->assets );\n\t\t} else {\n\t\t\t$renderer = new Embed( $story, $this->assets, $this->context );\n\t\t}\n\n\t\treturn $renderer->render( $attributes );\n\t}\n\n\t/**\n\t * Renders an embed with given attributes.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @param array $attributes Embed render attributes.\n\t * @return string Rendered embed output.\n\t */\n\tpublic function render( array $attributes ): string {\n\t\t// The only mandatory attribute.\n\t\tif ( empty( $attributes['url'] ) && empty( $attributes['previewOnly'] ) ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tif ( empty( $attributes['title'] ) ) {\n\t\t\t$attributes['title'] = __( 'Web Story', 'web-stories' );\n\t\t}\n\n\t\t$data = [\n\t\t\t'title' => $attributes['title'],\n\t\t\t'url' => $attributes['url'],\n\t\t\t'poster_portrait' => $attributes['poster'],\n\t\t];\n\n\t\t$story = new Story( $data );\n\n\t\treturn $this->render_story( $story, $attributes );\n\t}\n\n\t/**\n\t * Return an array of default attributes.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @return array Default attributes.\n\t */\n\tprotected function default_attrs(): array {\n\t\t$attrs = [\n\t\t\t'align' => 'none',\n\t\t\t'height' => 600,\n\t\t\t'poster' => '',\n\t\t\t'url' => '',\n\t\t\t'title' => '',\n\t\t\t'width' => 360,\n\t\t\t'previewOnly' => false,\n\t\t];\n\n\t\t/**\n\t\t * Filters settings passed to the web stories embed.\n\t\t *\n\t\t * @since 1.1.0\n\t\t *\n\t\t * @param array $attrs Array of settings passed to web stories embed.\n\t\t */\n\t\treturn apply_filters( 'web_stories_embed_default_attributes', $attrs );\n\t}\n}\n" }, { "path": "includes/Exception/FailedToMakeInstance.php", "content": "get_chain() as $link ) {\n\t\t\t$message .= \"{$link}\\n\";\n\t\t}\n\n\t\treturn new self( $message, self::CIRCULAR_REFERENCE );\n\t}\n\n\t/**\n\t * Create a new instance of the exception for an interface that could not\n\t * be resolved to an instantiable class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_name Interface that was left unresolved.\n\t */\n\tpublic static function for_unresolved_interface( string $interface_name ): self {\n\t\t$message = \\sprintf(\n\t\t\t'Could not resolve the interface \"%s\" to an instantiable class, probably forgot to bind an implementation.',\n\t\t\t$interface_name\n\t\t);\n\n\t\treturn new self( $message, self::UNRESOLVED_INTERFACE );\n\t}\n\n\t/**\n\t * Create a new instance of the exception for an interface or class that\n\t * could not be reflected upon.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class that could not be\n\t * reflected upon.\n\t */\n\tpublic static function for_unreflectable_class( string $interface_or_class ): self {\n\t\t$message = \\sprintf(\n\t\t\t'Could not reflect on the interface or class \"%s\", probably not a valid FQCN.',\n\t\t\t$interface_or_class\n\t\t);\n\n\t\treturn new self( $message, self::UNREFLECTABLE_CLASS );\n\t}\n\n\t/**\n\t * Create a new instance of the exception for an argument that could not be\n\t * resolved.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $argument_name Name of the argument that could not be\n\t * resolved.\n\t * @param string $class_name Class that had the argument in its\n\t * constructor.\n\t */\n\tpublic static function for_unresolved_argument( string $argument_name, string $class_name ): self {\n\t\t$message = \\sprintf(\n\t\t\t'Could not resolve the argument \"%s\" while trying to instantiate the class \"%s\".',\n\t\t\t$argument_name,\n\t\t\t$class_name\n\t\t);\n\n\t\treturn new self( $message, self::UNRESOLVED_ARGUMENT );\n\t}\n\n\t/**\n\t * Create a new instance of the exception for a class that was meant to be\n\t * reused but was not yet instantiated.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class that was not yet instantiated.\n\t */\n\tpublic static function for_uninstantiated_shared_instance( string $class_name ): self {\n\t\t$message = \\sprintf(\n\t\t\t'Could not retrieve the shared instance for \"%s\" as it was not instantiated yet.',\n\t\t\t$class_name\n\t\t);\n\n\t\treturn new self( $message, self::UNINSTANTIATED_SHARED_INSTANCE );\n\t}\n\n\t/**\n\t * Create a new instance of the exception for a delegate that was requested\n\t * for a class that doesn't have one.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class for which there is no delegate.\n\t */\n\tpublic static function for_invalid_delegate( string $class_name ): self {\n\t\t$message = \\sprintf(\n\t\t\t'Could not retrieve a delegate for \"%s\", none was defined.',\n\t\t\t$class_name\n\t\t);\n\n\t\treturn new self( $message, self::INVALID_DELEGATE );\n\t}\n}\n" }, { "path": "includes/Exception/InvalidEventProperties.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Initializes experiments\n\t */\n\tpublic function register(): void {\n\t\tif ( WEBSTORIES_DEV_MODE ) {\n\t\t\tadd_action( 'admin_menu', [ $this, 'add_menu_page' ], 25 );\n\t\t\tadd_action( 'admin_init', [ $this, 'initialize_settings' ] );\n\t\t}\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because settings needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings' ];\n\t}\n\n\t/**\n\t * Registers the experiments admin menu page.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function add_menu_page(): void {\n\t\tadd_submenu_page(\n\t\t\t'edit.php?post_type=' . Story_Post_Type::POST_TYPE_SLUG,\n\t\t\t__( 'Experiments', 'web-stories' ),\n\t\t\t__( 'Experiments', 'web-stories' ),\n\t\t\t'manage_options',\n\t\t\t'web-stories-experiments',\n\t\t\t[ $this, 'render' ],\n\t\t\t25\n\t\t);\n\t}\n\n\t/**\n\t * Renders the experiments page.\n\t *\n\t * @codeCoverageIgnore\n\t */\n\tpublic function render(): void {\n\t\trequire_once WEBSTORIES_PLUGIN_DIR_PATH . 'includes/templates/admin/experiments.php';\n\t}\n\n\t/**\n\t * Initializes the experiments settings page.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function initialize_settings(): void {\n\t\tadd_settings_section(\n\t\t\t'web_stories_experiments_section',\n\t\t\t// The empty string ensures the render function won't output a h2.\n\t\t\t'',\n\t\t\t[ $this, 'display_experiment_section' ],\n\t\t\tself::PAGE_NAME\n\t\t);\n\n\t\tforeach ( $this->get_experiment_groups() as $group => $label ) {\n\t\t\tadd_settings_section(\n\t\t\t\t$group,\n\t\t\t\t$label,\n\t\t\t\t'__return_empty_string',\n\t\t\t\tself::PAGE_NAME\n\t\t\t);\n\t\t}\n\n\t\t$experiments = $this->get_experiments();\n\n\t\tforeach ( $experiments as $experiment ) {\n\t\t\tadd_settings_field(\n\t\t\t\t$experiment['name'],\n\t\t\t\t$experiment['label'],\n\t\t\t\t[ $this, 'display_experiment_field' ],\n\t\t\t\tself::PAGE_NAME,\n\t\t\t\t$experiment['group'],\n\t\t\t\t[\n\t\t\t\t\t'label' => $experiment['description'],\n\t\t\t\t\t'id' => $experiment['name'],\n\t\t\t\t\t'default' => \\array_key_exists( 'default', $experiment ) && $experiment['default'],\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\t}\n\n\t/**\n\t * Display a checkbox field for a single experiment.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array $args {\n\t * Array of arguments for displaying a single field.\n\t *\n\t * @type string $id Experiment ID.\n\t * @type string $label Experiment label.\n\t * @type bool $default Whether the experiment is enabled by default.\n\t * }\n\t *\n\t * @phpstan-param array{id: string, label: string, default: bool} $args\n\t */\n\tpublic function display_experiment_field( array $args ): void {\n\t\t$is_enabled_by_default = ! empty( $args['default'] );\n\t\t$checked = $is_enabled_by_default || $this->is_experiment_enabled( $args['id'] );\n\t\t$disabled = $is_enabled_by_default ? 'disabled' : '';\n\t\t?>\n\t\t\n\t\t\n\t\t

\n\t\t\t\n\t\t

\n\t\t List of experiment groups\n\t */\n\tpublic function get_experiment_groups(): array {\n\t\treturn [\n\t\t\t'general' => __( 'General', 'web-stories' ),\n\t\t\t'dashboard' => __( 'Dashboard', 'web-stories' ),\n\t\t\t'editor' => __( 'Editor', 'web-stories' ),\n\t\t];\n\t}\n\n\t/**\n\t * Returns a list of all experiments.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array List of experiments by group.\n\t *\n\t * @phpstan-return Experiment[]\n\t */\n\tpublic function get_experiments(): array {\n\t\treturn [\n\t\t\t/**\n\t\t\t * Author: @brittanyirl\n\t\t\t * Issue: 2381\n\t\t\t * Creation date: 2020-06-11\n\t\t\t */\n\t\t\t[\n\t\t\t\t'name' => 'enableInProgressTemplateActions',\n\t\t\t\t'label' => __( 'Template actions', 'web-stories' ),\n\t\t\t\t'description' => __( 'Enable in-progress template actions', 'web-stories' ),\n\t\t\t\t'group' => 'dashboard',\n\t\t\t],\n\t\t\t/**\n\t\t\t * Author: @spacedmonkey\n\t\t\t * Issue: #798\n\t\t\t * Creation date: 2020-11-02\n\t\t\t */\n\t\t\t[\n\t\t\t\t'name' => 'enableSVG',\n\t\t\t\t'label' => __( 'SVG upload', 'web-stories' ),\n\t\t\t\t'description' => __( 'Enable SVG upload', 'web-stories' ),\n\t\t\t\t'group' => 'general',\n\t\t\t],\n\t\t\t/**\n\t\t\t * Author: @timarney\n\t\t\t * Issue: #12093\n\t\t\t * Creation date: 2022-08-18\n\t\t\t */\n\t\t\t[\n\t\t\t\t'name' => 'offScreenVideoCropping',\n\t\t\t\t'label' => __( 'Crop off-screen video parts', 'web-stories' ),\n\t\t\t\t'description' => __( 'Enable support for cropping cut off-screen parts of videos', 'web-stories' ),\n\t\t\t\t'group' => 'editor',\n\t\t\t],\n\t\t\t/**\n\t\t\t * Author: @spacedmonkey\n\t\t\t * Issue: #12211\n\t\t\t * Creation date: 2022-09-07\n\t\t\t */\n\t\t\t[\n\t\t\t\t'name' => 'videoVolume',\n\t\t\t\t'label' => __( 'Video Volume', 'web-stories' ),\n\t\t\t\t'description' => __( 'Enable setting video volume', 'web-stories' ),\n\t\t\t\t'group' => 'editor',\n\t\t\t],\n\t\t\t/**\n\t\t\t * Author: @timarney\n\t\t\t * Issue: #12164\n\t\t\t * Creation date: 2022-09-19\n\t\t\t */\n\t\t\t[\n\t\t\t\t'name' => 'segmentVideo',\n\t\t\t\t'label' => __( 'Segment video', 'web-stories' ),\n\t\t\t\t'description' => __( 'Enable support for segmenting video files', 'web-stories' ),\n\t\t\t\t'group' => 'editor',\n\t\t\t],\n\t\t];\n\t}\n\n\t/**\n\t * Returns the experiment statuses for a given group.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $group Experiments group name.\n\t * @return array Experiment statuses with name as key and status as value.\n\t */\n\tpublic function get_experiment_statuses( string $group ): array {\n\t\t/**\n\t\t * List of experiments.\n\t\t *\n\t\t * @phpstan-var Experiment[]\n\t\t */\n\t\t$experiments = wp_list_filter( $this->get_experiments(), [ 'group' => $group ] );\n\n\t\tif ( empty( $experiments ) ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t$result = [];\n\n\t\tforeach ( $experiments as $experiment ) {\n\t\t\t$result[ $experiment['name'] ] = $this->is_experiment_enabled( $experiment['name'] );\n\t\t}\n\n\t\treturn $result;\n\t}\n\n\t/**\n\t * Checks whether an experiment is enabled.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $name Experiment name.\n\t * @return bool Whether the experiment is enabled.\n\t */\n\tpublic function is_experiment_enabled( string $name ): bool {\n\t\t$experiment = $this->get_experiment( $name );\n\n\t\tif ( ! $experiment ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( \\array_key_exists( 'default', $experiment ) ) {\n\t\t\treturn (bool) $experiment['default'];\n\t\t}\n\n\t\t/**\n\t\t * List of enabled experiments.\n\t\t *\n\t\t * @var array $experiments\n\t\t * @phpstan-var Experiment[]\n\t\t */\n\t\t$experiments = $this->settings->get_setting( $this->settings::SETTING_NAME_EXPERIMENTS, [] );\n\t\treturn ! empty( $experiments[ $name ] );\n\t}\n\n\t/**\n\t * Returns the names of all enabled experiments.\n\t *\n\t * @since 1.4.0\n\t *\n\t * @return string[] List of all enabled experiments.\n\t */\n\tpublic function get_enabled_experiments(): array {\n\t\treturn array_filter(\n\t\t\twp_list_pluck( $this->get_experiments(), 'name' ),\n\t\t\t[ $this, 'is_experiment_enabled' ]\n\t\t);\n\t}\n\n\t/**\n\t * Returns an experiment by name.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $name Experiment name.\n\t * @return array|null Experiment if found, null otherwise.\n\t *\n\t * @phpstan-return Experiment|null\n\t */\n\tprotected function get_experiment( string $name ): ?array {\n\t\t$experiment = wp_list_filter( $this->get_experiments(), [ 'name' => $name ] );\n\t\treturn ! empty( $experiment ) ? array_shift( $experiment ) : null;\n\t}\n}\n" }, { "path": "includes/Font_Post_Type.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Get post type slug.\n\t *\n\t * @since 1.16.0\n\t */\n\tpublic function get_slug(): string {\n\t\treturn self::POST_TYPE_SLUG;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers the post type for fonts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @return array Post type args.\n\t *\n\t * @phpstan-return PostTypeArgs\n\t */\n\tprotected function get_args(): array {\n\t\t/**\n\t\t * The edit_posts capability.\n\t\t *\n\t\t * @var string $edit_posts\n\t\t */\n\t\t$edit_posts = $this->story_post_type->get_cap_name( 'edit_posts' );\n\n\t\t// Only admins are allowed to modify custom fonts,\n\t\t// but anyone who can create stories should be able to use them.\n\t\t$capabilities = [\n\t\t\t'edit_post' => 'manage_options',\n\t\t\t'read_post' => $edit_posts,\n\t\t\t'delete_post' => 'manage_options',\n\t\t\t'edit_posts' => 'manage_options',\n\t\t\t'edit_others_posts' => 'manage_options',\n\t\t\t'delete_posts' => 'manage_options',\n\t\t\t'publish_posts' => 'manage_options',\n\t\t\t'read_private_posts' => 'manage_options',\n\t\t\t'delete_private_posts' => 'manage_options',\n\t\t\t'delete_published_posts' => 'manage_options',\n\t\t\t'delete_others_posts' => 'manage_options',\n\t\t\t'edit_private_posts' => 'manage_options',\n\t\t\t'edit_published_posts' => 'manage_options',\n\t\t\t'create_posts' => 'manage_options',\n\t\t];\n\n\t\treturn [\n\t\t\t'supports' => [\n\t\t\t\t'title',\n\t\t\t],\n\t\t\t'capabilities' => $capabilities,\n\t\t\t'rewrite' => false,\n\t\t\t'public' => false,\n\t\t\t'show_ui' => false,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'rest_base' => 'fonts',\n\t\t\t'rest_controller_class' => Font_Controller::class,\n\t\t];\n\t}\n}\n" }, { "path": "includes/Infrastructure/Conditional.php", "content": " $dependencies Optional. Dependencies of the class.\n\t * @return T Instantiated object.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-param class-string $class_name Class to make an object instance out of.\n\t */\n\tpublic function instantiate( string $class_name, array $dependencies = [] ) {\n\t\treturn new $class_name( ...$dependencies );\n\t}\n}\n" }, { "path": "includes/Infrastructure/Injector/InjectionChain.php", "content": "[]\n\t */\n\tprivate array $chain = [];\n\n\t/**\n\t * Resolutions.\n\t *\n\t * @var array\n\t * @phpstan-var array\n\t */\n\tprivate array $resolutions = [];\n\n\t/**\n\t * Add class to injection chain.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class to add to injection chain.\n\t * @return self Modified injection chain.\n\t *\n\t * @phpstan-param class-string $class_name\n\t */\n\tpublic function add_to_chain( string $class_name ): self {\n\t\t$new_chain = clone $this;\n\t\t$new_chain->chain[] = $class_name;\n\n\t\treturn $new_chain;\n\t}\n\n\t/**\n\t * Add resolution for circular reference detection.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $resolution Resolution to add.\n\t * @return self Modified injection chain.\n\t *\n\t * @phpstan-param class-string $resolution\n\t */\n\tpublic function add_resolution( string $resolution ): self {\n\t\t$new_chain = clone $this;\n\t\t$new_chain->resolutions[ $resolution ] = true;\n\n\t\treturn $new_chain;\n\t}\n\n\t/**\n\t * Get the last class that was pushed to the injection chain.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws \\LogicException If the injection chain is accessed too early.\n\t *\n\t * @return string Last class pushed to the injection chain.\n\t *\n\t * @phpstan-return class-string\n\t */\n\tpublic function get_class(): string {\n\t\tif ( empty( $this->chain ) ) {\n\t\t\tthrow new \\LogicException(\n\t\t\t\t'Access to injection chain before any resolution was made.'\n\t\t\t);\n\t\t}\n\n\t\treturn \\end( $this->chain ) ?: '';\n\t}\n\n\t/**\n\t * Get the injection chain.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return string[] Chain of injections.\n\t *\n\t * @phpstan-return class-string[]\n\t */\n\tpublic function get_chain(): array {\n\t\treturn \\array_reverse( $this->chain );\n\t}\n\n\t/**\n\t * Check whether the injection chain already has a given resolution.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $resolution Resolution to check for.\n\t * @return bool Whether the resolution was found.\n\t *\n\t * @phpstan-param class-string $resolution\n\t */\n\tpublic function has_resolution( string $resolution ): bool {\n\t\treturn \\array_key_exists( $resolution, $this->resolutions );\n\t}\n\n\t/**\n\t * Check whether the injection chain already encountered a class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class to check.\n\t * @return bool Whether the given class is already part of the chain.\n\t */\n\tpublic function is_in_chain( string $class_name ): bool {\n\t\treturn \\in_array( $class_name, $this->chain, true );\n\t}\n}\n" }, { "path": "includes/Infrastructure/Injector/SimpleInjector.php", "content": "[]\n\t */\n\tprivate array $mappings = [];\n\n\t/**\n\t * Shared instances\n\t *\n\t * @var array\n\t */\n\tprivate array $shared_instances = [];\n\n\t/**\n\t * Delegates.\n\t *\n\t * @var callable[]\n\t */\n\tprivate array $delegates = [];\n\n\t/**\n\t * Argument mappings.\n\t *\n\t * @var array>\n\t */\n\tprivate array $argument_mappings = [];\n\n\t/**\n\t * Instantiator.\n\t *\n\t * @var Instantiator\n\t */\n\tprivate Instantiator $instantiator;\n\n\t/**\n\t * Instantiate a SimpleInjector object.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param Instantiator|null $instantiator Optional. Instantiator to use.\n\t */\n\tpublic function __construct( ?Instantiator $instantiator = null ) {\n\t\t$this->instantiator = $instantiator ?? new FallbackInstantiator();\n\t}\n\n\t/**\n\t * Make an object instance out of an interface or class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to make an object instance out of.\n\t * @param array $arguments Optional. Additional arguments to pass to the constructor.\n\t * Defaults to an empty array.\n\t * @return T Instantiated object.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to make an object instance out of.\n\t * @phpstan-param array $arguments Optional. Additional arguments to pass to the constructor.\n\t */\n\tpublic function make( string $interface_or_class, array $arguments = [] ) {\n\t\t$injection_chain = $this->resolve(\n\t\t\tnew InjectionChain(),\n\t\t\t$interface_or_class\n\t\t);\n\n\t\t$class = $injection_chain->get_class();\n\n\t\tif ( $this->has_shared_instance( $class ) ) {\n\t\t\treturn $this->get_shared_instance( $class );\n\t\t}\n\n\t\tif ( $this->has_delegate( $class ) ) {\n\t\t\t$delegate = $this->get_delegate( $class );\n\t\t\t$object = $delegate( $class );\n\t\t} else {\n\t\t\t$reflection = $this->get_class_reflection( $class );\n\t\t\t$this->ensure_is_instantiable( $reflection );\n\n\t\t\t$dependencies = $this->get_dependencies_for(\n\t\t\t\t$injection_chain,\n\t\t\t\t$reflection,\n\t\t\t\t$arguments\n\t\t\t);\n\n\t\t\t$object = $this->instantiator->instantiate( $class, $dependencies );\n\t\t}\n\n\t\tif ( \\array_key_exists( $class, $this->shared_instances ) ) {\n\t\t\t$this->shared_instances[ $class ] = $object;\n\t\t}\n\n\t\treturn $object;\n\t}\n\n\t/**\n\t * Bind a given interface or class to an implementation.\n\t *\n\t * Note: The implementation can be an interface as well, as long as it can\n\t * be resolved to an instantiatable class at runtime.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $from Interface or class to bind an implementation to.\n\t * @param string $to Interface or class that provides the implementation.\n\t *\n\t * @phpstan-param class-string $from Interface or class to bind an implementation to.\n\t * @phpstan-param class-string $to Interface or class that provides the implementation.\n\t */\n\tpublic function bind( string $from, string $to ): Injector {\n\t\t$this->mappings[ $from ] = $to;\n\n\t\treturn $this;\n\t}\n\n\t/**\n\t * Bind an argument for a class to a specific value.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to bind an argument for.\n\t * @param string $argument_name Argument name to bind a value to.\n\t * @param mixed $value Value to bind the argument to.\n\t */\n\tpublic function bind_argument(\n\t\tstring $interface_or_class,\n\t\tstring $argument_name,\n\t\t$value\n\t): Injector {\n\t\t$this->argument_mappings[ $interface_or_class ][ $argument_name ] = $value;\n\n\t\treturn $this;\n\t}\n\n\t/**\n\t * Always reuse and share the same instance for the provided interface or\n\t * class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to reuse.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to reuse.\n\t */\n\tpublic function share( string $interface_or_class ): Injector {\n\t\t$this->shared_instances[ $interface_or_class ] = null;\n\n\t\treturn $this;\n\t}\n\n\t/**\n\t * Delegate instantiation of an interface or class to a callable.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to delegate the instantiation of.\n\t * @param callable $callback Callable to use for instantiation.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to delegate the instantiation of.\n\t */\n\tpublic function delegate( string $interface_or_class, callable $callback ): Injector {\n\t\t$this->delegates[ $interface_or_class ] = $callback;\n\n\t\treturn $this;\n\t}\n\n\t/**\n\t * Make an object instance out of an interface or class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param InjectionChain $injection_chain Injection chain to track resolutions.\n\t * @param string $interface_or_class Interface or class to make an object instance out of.\n\t * @return T Instantiated object.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to make an object instance out of.\n\t */\n\tprivate function make_dependency(\n\t\tInjectionChain $injection_chain,\n\t\tstring $interface_or_class\n\t) {\n\t\t$injection_chain = $this->resolve(\n\t\t\t$injection_chain,\n\t\t\t$interface_or_class\n\t\t);\n\n\t\t$class = $injection_chain->get_class();\n\n\t\tif ( $this->has_shared_instance( $class ) ) {\n\t\t\treturn $this->get_shared_instance( $class );\n\t\t}\n\n\t\tif ( $this->has_delegate( $class ) ) {\n\t\t\t$delegate = $this->get_delegate( $class );\n\t\t\treturn $delegate( $class );\n\t\t}\n\n\t\t$reflection = $this->get_class_reflection( $class );\n\t\t$this->ensure_is_instantiable( $reflection );\n\n\t\t$dependencies = $this->get_dependencies_for(\n\t\t\t$injection_chain,\n\t\t\t$reflection\n\t\t);\n\n\t\t$object = $this->instantiator->instantiate( $class, $dependencies );\n\n\t\tif ( \\array_key_exists( $class, $this->shared_instances ) ) {\n\t\t\t$this->shared_instances[ $class ] = $object;\n\t\t}\n\n\t\treturn $object;\n\t}\n\n\t/**\n\t * Recursively resolve an interface to the class it should be bound to.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If a circular reference was detected.\n\t *\n\t * @param InjectionChain $injection_chain Injection chain to track resolutions.\n\t * @param string $interface_or_class Interface or class to resolve.\n\t * @return InjectionChain Modified Injection chain\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to resolve.\n\t */\n\tprivate function resolve(\n\t\tInjectionChain $injection_chain,\n\t\tstring $interface_or_class\n\t): InjectionChain {\n\t\tif ( $injection_chain->is_in_chain( $interface_or_class ) ) {\n\t\t\t// Circular reference detected, aborting.\n\t\t\tthrow FailedToMakeInstance::for_circular_reference(\n\t\t\t\t$interface_or_class, // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t\t\t$injection_chain // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t\t);\n\t\t}\n\n\t\t$injection_chain = $injection_chain->add_resolution( $interface_or_class );\n\n\t\tif ( \\array_key_exists( $interface_or_class, $this->mappings ) ) {\n\t\t\treturn $this->resolve(\n\t\t\t\t$injection_chain,\n\t\t\t\t$this->mappings[ $interface_or_class ]\n\t\t\t);\n\t\t}\n\n\t\treturn $injection_chain->add_to_chain( $interface_or_class );\n\t}\n\n\t/**\n\t * Get the array of constructor dependencies for a given reflected class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param InjectionChain $injection_chain Injection chain to track resolutions.\n\t * @param ReflectionClass $reflection Reflected class to get the dependencies for.\n\t * @param array $arguments Associative array of directly provided arguments.\n\t * @return array Array of dependencies that represent the arguments for the class' constructor.\n\t */\n\tprivate function get_dependencies_for(\n\t\tInjectionChain $injection_chain,\n\t\tReflectionClass $reflection,\n\t\tarray $arguments = []\n\t): array {\n\t\t$constructor = $reflection->getConstructor();\n\t\t$class = $reflection->getName();\n\n\t\tif ( null === $constructor ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn array_map(\n\t\t\tfn( ReflectionParameter $parameter ) => $this->resolve_argument(\n\t\t\t\t$injection_chain,\n\t\t\t\t$class,\n\t\t\t\t$parameter,\n\t\t\t\t$arguments\n\t\t\t),\n\t\t\t$constructor->getParameters()\n\t\t);\n\t}\n\n\t/**\n\t * Ensure that a given reflected class is instantiable.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If the interface could not be resolved.\n\t *\n\t * @param ReflectionClass $reflection Reflected class to check.\n\t */\n\tprivate function ensure_is_instantiable( ReflectionClass $reflection ): void {\n\t\tif ( ! $reflection->isInstantiable() ) {\n\t\t\tthrow FailedToMakeInstance::for_unresolved_interface( $reflection->getName() ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\t}\n\n\t/**\n\t * Resolve a given reflected argument.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param InjectionChain $injection_chain Injection chain to track resolutions.\n\t * @param string $class_name Name of the class to resolve the arguments for.\n\t * @param ReflectionParameter $parameter Parameter to resolve.\n\t * @param array $arguments Associative array of directly provided arguments.\n\t * @return mixed Resolved value of the argument.\n\t */\n\tprivate function resolve_argument(\n\t\tInjectionChain $injection_chain,\n\t\tstring $class_name,\n\t\tReflectionParameter $parameter,\n\t\tarray $arguments\n\t) {\n\t\tif ( ! $parameter->hasType() ) {\n\t\t\treturn $this->resolve_argument_by_name(\n\t\t\t\t$class_name,\n\t\t\t\t$parameter,\n\t\t\t\t$arguments\n\t\t\t);\n\t\t}\n\n\t\t$type = $parameter->getType();\n\n\t\t// In PHP 8.0, the isBuiltin method was removed from the parent {@see ReflectionType} class.\n\n\t\t// @phpstan-ignore identical.alwaysFalse\n\t\tif ( null === $type || ( $type instanceof ReflectionNamedType && $type->isBuiltin() ) ) {\n\t\t\treturn $this->resolve_argument_by_name(\n\t\t\t\t$class_name,\n\t\t\t\t$parameter,\n\t\t\t\t$arguments\n\t\t\t);\n\t\t}\n\n\t\t/**\n\t\t * Interface or class.\n\t\t *\n\t\t * @var class-string $type\n\t\t */\n\t\t$type = $type instanceof ReflectionNamedType\n\t\t\t? $type->getName()\n\t\t\t: (string) $type;\n\n\t\treturn $this->make_dependency( $injection_chain, $type );\n\t}\n\n\t/**\n\t * Resolve a given reflected argument by its name.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If the argument could not be resolved.\n\t *\n\t * @param string $class_name Class to resolve the argument for.\n\t * @param ReflectionParameter $parameter Argument to resolve by name.\n\t * @param array $arguments Associative array of directly provided arguments.\n\t * @return mixed Resolved value of the argument.\n\t */\n\tprivate function resolve_argument_by_name(\n\t\tstring $class_name,\n\t\tReflectionParameter $parameter,\n\t\tarray $arguments\n\t) {\n\t\t$name = $parameter->getName();\n\n\t\t// The argument was directly provided to the make() call.\n\t\tif ( \\array_key_exists( $name, $arguments ) ) {\n\t\t\treturn $arguments[ $name ];\n\t\t}\n\n\t\t// Check if we have mapped this argument for the specific class.\n\t\tif ( \\array_key_exists( $class_name, $this->argument_mappings )\n\t\t\t&& \\array_key_exists( $name, $this->argument_mappings[ $class_name ] ) ) {\n\t\t\t$value = $this->argument_mappings[ $class_name ][ $name ];\n\n\t\t\t// Closures are immediately resolved, to provide lazy resolution.\n\t\t\tif ( \\is_callable( $value ) ) {\n\t\t\t\t$value = $value( $class_name, $parameter, $arguments );\n\t\t\t}\n\n\t\t\treturn $value;\n\t\t}\n\n\t\t// No provided argument found, check if it has a default value.\n\t\ttry {\n\t\t\tif ( $parameter->isDefaultValueAvailable() ) {\n\t\t\t\treturn $parameter->getDefaultValue();\n\t\t\t}\n\t\t} catch ( \\Exception $exception ) { // phpcs:ignore Generic.CodeAnalysis.EmptyStatement.DetectedCatch\n\t\t\t// Just fall through into the FailedToMakeInstance exception.\n\t\t}\n\n\t\t// Out of options, fail with an exception.\n\t\tthrow FailedToMakeInstance::for_unresolved_argument( $name, $class_name ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t}\n\n\t/**\n\t * Check whether a shared instance exists for a given class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class to check for a shared instance.\n\t * @return bool Whether a shared instance exists.\n\t */\n\tprivate function has_shared_instance( string $class_name ): bool {\n\t\treturn \\array_key_exists( $class_name, $this->shared_instances )\n\t\t\t&& null !== $this->shared_instances[ $class_name ];\n\t}\n\n\t/**\n\t * Get the shared instance for a given class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If an uninstantiated shared instance is requested.\n\t *\n\t * @param string $class_name Class to get the shared instance for.\n\t * @return T Shared instance.\n\t *\n\t * @phpstan-param class-string $class_name Class to get the shared instance for.\n\t * @phpstan-return T Shared instance.\n\t */\n\tprivate function get_shared_instance( string $class_name ) {\n\t\tif ( ! $this->has_shared_instance( $class_name ) ) {\n\t\t\tthrow FailedToMakeInstance::for_uninstantiated_shared_instance( $class_name ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\n\t\t/**\n\t\t * Shared instance.\n\t\t *\n\t\t * @var T $instance\n\t\t */\n\t\t$instance = $this->shared_instances[ $class_name ];\n\n\t\treturn $instance;\n\t}\n\n\t/**\n\t * Check whether a delegate exists for a given class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $class_name Class to check for a delegate.\n\t * @return bool Whether a delegate exists.\n\t */\n\tprivate function has_delegate( string $class_name ): bool {\n\t\treturn \\array_key_exists( $class_name, $this->delegates );\n\t}\n\n\t/**\n\t * Get the delegate for a given class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If an invalid delegate is requested.\n\t *\n\t * @param string $class_name Class to get the delegate for.\n\t * @return callable Delegate.\n\t */\n\tprivate function get_delegate( string $class_name ): callable {\n\t\tif ( ! $this->has_delegate( $class_name ) ) {\n\t\t\tthrow FailedToMakeInstance::for_invalid_delegate( $class_name ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\t\treturn $this->delegates[ $class_name ];\n\t}\n\n\t/**\n\t * Get the reflection for a class or throw an exception.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws FailedToMakeInstance If the class could not be reflected.\n\t *\n\t * @param string|class-string $class_name Class to get the reflection for.\n\t * @return ReflectionClass Class reflection.\n\t */\n\tprivate function get_class_reflection( string $class_name ): ReflectionClass {\n\t\tif ( ! class_exists( $class_name ) ) {\n\t\t\tthrow FailedToMakeInstance::for_unreflectable_class( $class_name ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\t\t// There should be no ReflectionException happening because of the class existence check above.\n\t\treturn new ReflectionClass( $class_name );\n\t}\n}\n" }, { "path": "includes/Infrastructure/Injector.php", "content": " $interface_or_class Interface or class to make an object instance out of.\n\t * @phpstan-param class-string[] $arguments Optional. Additional arguments to pass to the constructor.\n\t * Defaults to an empty array.\n\t *\n\t * @phpstan-return C\n\t *\n\t * @template C\n\t */\n\tpublic function make( string $interface_or_class, array $arguments = [] );\n\n\t/**\n\t * Bind a given interface or class to an implementation.\n\t *\n\t * Note: The implementation can be an interface as well, as long as it can\n\t * be resolved to an instantiatable class at runtime.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $from Interface or class to bind an implementation to.\n\t * @param string $to Interface or class that provides the implementation.\n\t *\n\t * @phpstan-param class-string $from Interface or class to bind an implementation to.\n\t * @phpstan-param class-string $to Interface or class that provides the implementation.\n\t */\n\tpublic function bind( string $from, string $to ): Injector;\n\n\t/**\n\t * Bind an argument for a class to a specific value.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to bind an argument\n\t * for.\n\t * @param string $argument_name Argument name to bind a value to.\n\t * @param mixed $value Value to bind the argument to.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to bind an argument\n\t */\n\tpublic function bind_argument(\n\t\tstring $interface_or_class,\n\t\tstring $argument_name,\n\t\t$value\n\t): Injector;\n\n\t/**\n\t * Always reuse and share the same instance for the provided interface or\n\t * class.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to reuse.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to reuse.\n\t */\n\tpublic function share( string $interface_or_class ): Injector;\n\n\t/**\n\t * Delegate instantiation of an interface or class to a callable.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $interface_or_class Interface or class to delegate the\n\t * instantiation of.\n\t * @param callable $callback Callable to use for instantiation.\n\t *\n\t * @phpstan-param class-string $interface_or_class Interface or class to delegate the\n\t * instantiation of.\n\t */\n\tpublic function delegate( string $interface_or_class, callable $callback ): Injector;\n}\n" }, { "path": "includes/Infrastructure/Instantiator.php", "content": " $dependencies Optional. Dependencies of the class.\n\t * @return T Instantiated object.\n\t *\n\t * @phpstan-param class-string $class_name Class to make an object instance out of.\n\t */\n\tpublic function instantiate( string $class_name, array $dependencies = [] );\n}\n" }, { "path": "includes/Infrastructure/Plugin.php", "content": " Service container of the plugin.\n\t */\n\tpublic function get_container(): ServiceContainer;\n}\n" }, { "path": "includes/Infrastructure/PluginActivationAware.php", "content": "\n\t */\n\tprotected ServiceContainer $service_container;\n\n\t/**\n\t * Instantiate a Theme object.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param bool|null $enable_filters Optional. Whether to enable filtering of the injector configuration.\n\t * @param Injector|null $injector Optional. Injector instance to use.\n\t * @param ServiceContainer|null $service_container Optional. Service container instance to use.\n\t */\n\tpublic function __construct(\n\t\t?bool $enable_filters = null,\n\t\t?Injector $injector = null,\n\t\t?ServiceContainer $service_container = null\n\t) {\n\t\t/*\n\t\t * We use what is commonly referred to as a \"poka-yoke\" here.\n\t\t *\n\t\t * We need an injector and a container. We make them injectable so that\n\t\t * we can easily provide overrides for testing, but we also make them\n\t\t * optional and provide default implementations for easy regular usage.\n\t\t */\n\n\t\t$this->enable_filters = $enable_filters ?? static::ENABLE_FILTERS_DEFAULT;\n\n\t\t$this->injector = $injector ?? new Injector\\SimpleInjector();\n\n\t\t$this->injector = $this->configure_injector( $this->injector );\n\n\t\t$this->service_container = $service_container ?? new ServiceContainer\\SimpleServiceContainer();\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->register_services();\n\n\t\t/**\n\t\t * Service ID.\n\t\t *\n\t\t * @var string $id\n\t\t */\n\t\tforeach ( $this->service_container as $id => $service ) {\n\t\t\t// Using ->get() here to instantiate LazilyInstantiatedService too.\n\t\t\t$service = $this->service_container->get( $id );\n\n\t\t\tif ( $service instanceof PluginActivationAware ) {\n\t\t\t\t$service->on_plugin_activation( $network_wide );\n\t\t\t}\n\t\t}\n\n\t\tif ( ! \\defined( '\\WPCOM_IS_VIP_ENV' ) || false === WPCOM_IS_VIP_ENV ) {\n\t\t\tflush_rewrite_rules( false );\n\t\t}\n\t}\n\n\t/**\n\t * Act on plugin deactivation.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param bool $network_wide Whether the deactivation was done network-wide.\n\t */\n\tpublic function on_plugin_deactivation( bool $network_wide ): void {\n\t\t$this->register_services();\n\n\t\t/**\n\t\t * Service ID.\n\t\t *\n\t\t * @var string $id\n\t\t */\n\t\tforeach ( $this->service_container as $id => $service ) {\n\t\t\t// Using ->get() here to instantiate LazilyInstantiatedService too.\n\t\t\t$service = $this->service_container->get( $id );\n\n\t\t\tif ( $service instanceof PluginDeactivationAware ) {\n\t\t\t\t$service->on_plugin_deactivation( $network_wide );\n\t\t\t}\n\t\t}\n\n\t\tif ( ! \\defined( '\\WPCOM_IS_VIP_ENV' ) || false === WPCOM_IS_VIP_ENV ) {\n\t\t\tflush_rewrite_rules( false );\n\t\t}\n\t}\n\n\t/**\n\t * Act on site initialization on Multisite.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\t$this->register_services();\n\n\t\t$site_id = (int) $site->blog_id;\n\n\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.switch_to_blog_switch_to_blog\n\t\tswitch_to_blog( $site_id );\n\n\t\t/**\n\t\t * Service ID.\n\t\t *\n\t\t * @var string $id\n\t\t */\n\t\tforeach ( $this->service_container as $id => $service ) {\n\t\t\t// Using ->get() here to instantiate LazilyInstantiatedService too.\n\t\t\t$service = $this->service_container->get( $id );\n\n\t\t\tif ( $service instanceof SiteInitializationAware ) {\n\t\t\t\t$service->on_site_initialization( $site );\n\t\t\t}\n\t\t}\n\n\t\tif ( ! \\defined( '\\WPCOM_IS_VIP_ENV' ) || false === WPCOM_IS_VIP_ENV ) {\n\t\t\tflush_rewrite_rules( false );\n\t\t}\n\n\t\trestore_current_blog();\n\t}\n\n\t/**\n\t * Act on site removal on Multisite.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_Site $site The site being removed.\n\t */\n\tpublic function on_site_removal( WP_Site $site ): void {\n\t\t$this->register_services();\n\n\t\t$site_id = (int) $site->blog_id;\n\n\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.switch_to_blog_switch_to_blog\n\t\tswitch_to_blog( $site_id );\n\n\t\t/**\n\t\t * Service ID.\n\t\t *\n\t\t * @var string $id\n\t\t */\n\t\tforeach ( $this->service_container as $id => $service ) {\n\t\t\t// Using ->get() here to instantiate LazilyInstantiatedService too.\n\t\t\t$service = $this->service_container->get( $id );\n\n\t\t\tif ( $service instanceof SiteRemovalAware ) {\n\t\t\t\t$service->on_site_removal( $site );\n\t\t\t}\n\t\t}\n\n\t\trestore_current_blog();\n\t}\n\n\t/**\n\t * Act on site is uninstalled.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_site_uninstall(): void {\n\t\t$this->register_services();\n\n\t\t/**\n\t\t * Service ID.\n\t\t *\n\t\t * @var string $id\n\t\t */\n\t\tforeach ( $this->service_container as $id => $service ) {\n\t\t\t// Using ->get() here to instantiate LazilyInstantiatedService too.\n\t\t\t$service = $this->service_container->get( $id );\n\n\t\t\tif ( $service instanceof PluginUninstallAware ) {\n\t\t\t\t$service->on_plugin_uninstall();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Register the plugin with the WordPress system.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws InvalidService If a service is not valid.\n\t */\n\tpublic function register(): void {\n\t\tif ( false !== static::REGISTRATION_ACTION ) {\n\t\t\tadd_action(\n\t\t\t\tstatic::REGISTRATION_ACTION,\n\t\t\t\t[ $this, 'register_services' ]\n\t\t\t);\n\t\t} else {\n\t\t\t$this->register_services();\n\t\t}\n\t}\n\n\t/**\n\t * Register the individual services of this plugin.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws InvalidService If a service is not valid.\n\t */\n\tpublic function register_services(): void {\n\t\t// Bail early so we don't instantiate services twice.\n\t\tif ( \\count( $this->service_container ) > 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Add the injector as the very first service.\n\t\t$this->service_container->put(\n\t\t\tstatic::SERVICE_PREFIX . static::INJECTOR_ID,\n\t\t\t$this->injector\n\t\t);\n\n\t\t$services = $this->get_service_classes();\n\n\t\tif ( $this->enable_filters ) {\n\t\t\t/**\n\t\t\t * Filter the default services that make up this plugin.\n\t\t\t *\n\t\t\t * This can be used to add services to the service container for\n\t\t\t * this plugin.\n\t\t\t *\n\t\t\t * @param array $services Associative array of identifier =>\n\t\t\t * class mappings. The provided\n\t\t\t * classes need to implement the\n\t\t\t * Service interface.\n\t\t\t */\n\t\t\t$filtered_services = apply_filters(\n\t\t\t\tstatic::HOOK_PREFIX . static::SERVICES_FILTER,\n\t\t\t\t$services\n\t\t\t);\n\n\t\t\t$services = $this->validate_services( $filtered_services );\n\t\t}\n\n\t\twhile ( null !== key( $services ) ) {\n\t\t\t$id = $this->maybe_resolve( key( $services ) );\n\n\t\t\t$curr = current( $services );\n\n\t\t\tif ( ! $curr ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t$class = $this->maybe_resolve( $curr );\n\n\t\t\t// Delay registering the service until all requirements are met.\n\t\t\tif (\n\t\t\t\t// @phpstan-ignore function.alreadyNarrowedType\n\t\t\t\tis_a( $class, HasRequirements::class, true )\n\t\t\t) {\n\t\t\t\tif ( ! $this->requirements_are_met( $id, $class, $services ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t$this->schedule_potential_service_registration( $id, $class );\n\n\t\t\tnext( $services );\n\t\t}\n\t}\n\n\t/**\n\t * Get the service container that contains the services that make up the\n\t * plugin.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return ServiceContainer Service container of the plugin.\n\t */\n\tpublic function get_container(): ServiceContainer {\n\t\treturn $this->service_container;\n\t}\n\n\t/**\n\t * Returns the priority for a given service based on its requirements.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @throws InvalidService If the required service is not recognized.\n\t *\n\t * @param class-string $class_name Service FQCN of the service with requirements.\n\t * @param array> $services List of services to be registered.\n\t * @return int The registration action priority for the service.\n\t *\n\t * @phpstan-param class-string $class_name Service FQCN of the service with requirements.\n\t */\n\tprotected function get_registration_action_priority( string $class_name, array &$services ): int {\n\t\t$priority = 10;\n\n\t\tif ( is_a( $class_name, Delayed::class, true ) ) {\n\t\t\t$priority = $class_name::get_registration_action_priority();\n\t\t}\n\n\t\tif ( ! is_a( $class_name, HasRequirements::class, true ) ) {\n\t\t\treturn $priority;\n\t\t}\n\n\t\t/**\n\t\t * Service class.\n\t\t *\n\t\t * @phpstan-var class-string $class_name\n\t\t */\n\t\t$missing_requirements = $this->collect_missing_requirements( $class_name, $services );\n\n\t\tforeach ( $missing_requirements as $missing_requirement ) {\n\t\t\tif ( is_a( $missing_requirement, Delayed::class, true ) ) {\n\t\t\t\t$action = $missing_requirement::get_registration_action();\n\n\t\t\t\tif ( did_action( $action ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t/**\n\t\t\t\t * Missing requirement.\n\t\t\t\t *\n\t\t\t\t * @phpstan-var class-string $missing_requirement\n\t\t\t\t */\n\t\t\t\t$requirement_priority = $this->get_registration_action_priority( $missing_requirement, $services );\n\n\t\t\t\t$priority = max( $priority, $requirement_priority + 1 );\n\t\t\t}\n\t\t}\n\n\t\treturn $priority;\n\t}\n\n\t/**\n\t * Determine if the requirements for a service to be registered are met.\n\t *\n\t * This also hooks up another check in the future to the registration action(s) of its requirements.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @throws InvalidService If the required service is not recognized.\n\t *\n\t * @param string $id Service ID of the service with requirements.\n\t * @param class-string $class_name Service FQCN of the service with requirements.\n\t * @param array> $services List of services to be registered.\n\t * @return bool Whether the requirements for the service has been met.\n\t *\n\t * @phpstan-param class-string $class_name Service FQCN of the service with requirements.\n\t */\n\tprotected function requirements_are_met( string $id, string $class_name, array &$services ): bool {\n\t\t$missing_requirements = $this->collect_missing_requirements( $class_name, $services );\n\n\t\tif ( empty( $missing_requirements ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tforeach ( $missing_requirements as $missing_requirement ) {\n\t\t\tif ( is_a( $missing_requirement, Delayed::class, true ) ) {\n\t\t\t\t$action = $missing_requirement::get_registration_action();\n\n\t\t\t\tif ( did_action( $action ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t/*\n\t\t\t\t * If this service (A) has priority 10 but depends on another service (B) with same priority,\n\t\t\t\t * which itself depends on service (C) also with priority 10, this will ensure correct\n\t\t\t\t * order of registration by increasing priority for each step.\n\t\t\t\t *\n\t\t\t\t * The result will be:\n\t\t\t\t *\n\t\t\t\t * C: priority 10\n\t\t\t\t * B: priority 11\n\t\t\t\t * A: priority 12\n\t\t\t\t */\n\n\t\t\t\t$priority = $this->get_registration_action_priority( $class_name, $services );\n\n\t\t\t\t/*\n\t\t\t\t * The current service depends on another service that is Delayed and hasn't been registered yet\n\t\t\t\t * and for which the registration action has not yet passed.\n\t\t\t\t *\n\t\t\t\t * Therefore, we postpone the registration of the current service up until the requirement's\n\t\t\t\t * action has passed.\n\t\t\t\t *\n\t\t\t\t * We don't register the service right away, though, we will first check whether at that point,\n\t\t\t\t * the requirements have been met.\n\t\t\t\t *\n\t\t\t\t * Note that badly configured requirements can lead to services that will never register at all.\n\t\t\t\t */\n\n\t\t\t\tadd_action(\n\t\t\t\t\t$action,\n\t\t\t\t\tfunction () use ( $id, $class_name, $services ): void {\n\t\t\t\t\t\tif ( ! $this->requirements_are_met( $id, $class_name, $services ) ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t$this->schedule_potential_service_registration( $id, $class_name );\n\t\t\t\t\t},\n\t\t\t\t\t$priority\n\t\t\t\t);\n\n\t\t\t\tnext( $services );\n\t\t\t\treturn false;\n\t\t\t}\n\t\t}\n\n\t\t/*\n\t\t * The registration actions from all of the requirements were already processed. This means that the missing\n\t\t * requirement(s) are about to be registered, they just weren't encountered yet while traversing the services\n\t\t * map. Therefore, we skip registration for now and move this particular service to the end of the service map.\n\t\t *\n\t\t * Note: Moving the service to the end of the service map advances the internal array pointer to the next service.\n\t\t */\n\t\tunset( $services[ $id ] );\n\t\t$services[ $id ] = $class_name;\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Collect the list of missing requirements for a service which has requirements.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @throws InvalidService If the required service is not recognized.\n\t *\n\t * @param class-string $class_name Service FQCN of the service with requirements.\n\t * @param array> $services List of services to register.\n\t * @return array> List of missing requirements as a $service_id => $service_class mapping.\n\t *\n\t * @phpstan-param class-string $class_name Service FQCN of the service with requirements.\n\t */\n\tprotected function collect_missing_requirements( string $class_name, array $services ): array {\n\t\t/**\n\t\t * Requirements.\n\t\t *\n\t\t * @var string[] $requirements\n\t\t */\n\t\t$requirements = $class_name::get_requirements();\n\n\t\t/**\n\t\t * Missing requirements.\n\t\t *\n\t\t * @var array>\n\t\t */\n\t\t$missing = [];\n\n\t\tforeach ( $requirements as $requirement ) {\n\t\t\t// Bail if it requires a service that is not recognized.\n\t\t\tif ( ! \\array_key_exists( $requirement, $services ) ) {\n\t\t\t\tthrow InvalidService::from_service_id( $requirement ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t\t}\n\n\t\t\tif ( $this->get_container()->has( $requirement ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t$missing[ $requirement ] = $services[ $requirement ];\n\t\t}\n\n\t\treturn $missing;\n\t}\n\n\t/**\n\t * Validates the services array to make sure it is in a usable shape.\n\t *\n\t * As the array of services could be filtered, we need to ensure it is\n\t * always in a state where it doesn't throw PHP warnings or errors.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param array $services Services to validate.\n\t * @return array> Validated array of service mappings.\n\t */\n\tprotected function validate_services( array $services ): array {\n\t\t// Make a copy so we can safely mutate while iterating.\n\t\t$services_to_check = $services;\n\n\t\tforeach ( $services_to_check as $identifier => $fqcn ) {\n\t\t\t// Ensure we have valid identifiers we can refer to.\n\t\t\t// If not, generate them from the FQCN.\n\t\t\tif ( empty( $identifier ) || ! \\is_string( $identifier ) ) {\n\t\t\t\tunset( $services[ $identifier ] );\n\t\t\t\t$identifier = $this->get_identifier_from_fqcn( $fqcn );\n\t\t\t\t$services[ $identifier ] = $fqcn;\n\t\t\t}\n\n\t\t\t// Verify that the FQCN is valid and points to an existing class.\n\t\t\t// If not, skip this service.\n\t\t\tif ( empty( $fqcn ) || ! class_exists( $fqcn ) ) {\n\t\t\t\tunset( $services[ $identifier ] );\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Validated services.\n\t\t *\n\t\t * @phpstan-var array> $services\n\t\t */\n\t\treturn $services;\n\t}\n\n\t/**\n\t * Generate a valid identifier for a provided FQCN.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $fqcn FQCN to use as base to generate an identifier.\n\t * @return string Identifier to use for the provided FQCN.\n\t */\n\tprotected function get_identifier_from_fqcn( string $fqcn ): string {\n\t\t// Retrieve the short name from the FQCN first.\n\t\t$short_name = substr( $fqcn, strrpos( $fqcn, '\\\\' ) + 1 );\n\n\t\t// Turn camelCase or PascalCase into snake_case.\n\t\treturn strtolower(\n\t\t\ttrim(\n\t\t\t\t(string) preg_replace( self::DETECT_CAPITALS_REGEX_PATTERN, '_$0', $short_name ),\n\t\t\t\t'_'\n\t\t\t)\n\t\t);\n\t}\n\n\t/**\n\t * Schedule the potential registration of a single service.\n\t *\n\t * This takes into account whether the service registration needs to be delayed or not.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param string $id ID of the service to register.\n\t * @param class-string $class_name Class of the service to register.\n\t *\n\t * @phpstan-param class-string<(D&S)|S> $class_name Class of the service to register.\n\t */\n\tprotected function schedule_potential_service_registration( string $id, string $class_name ): void {\n\t\tif ( is_a( $class_name, Delayed::class, true ) ) {\n\t\t\t$action = $class_name::get_registration_action();\n\t\t\t$priority = $class_name::get_registration_action_priority();\n\n\t\t\tif ( did_action( $action ) ) {\n\t\t\t\t$this->maybe_register_service( $id, $class_name );\n\t\t\t} else {\n\t\t\t\tadd_action(\n\t\t\t\t\t$action,\n\t\t\t\t\tfunction () use ( $id, $class_name ): void {\n\t\t\t\t\t\t$this->maybe_register_service( $id, $class_name );\n\t\t\t\t\t},\n\t\t\t\t\t$priority\n\t\t\t\t);\n\t\t\t}\n\t\t} else {\n\t\t\t$this->maybe_register_service( $id, $class_name );\n\t\t}\n\t}\n\n\t/**\n\t * Register a single service, provided its conditions are met.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $id ID of the service to register.\n\t * @param string $class_name Class of the service to register.\n\t *\n\t * @phpstan-param class-string $class_name Class of the service to register.\n\t */\n\tprotected function maybe_register_service( string $id, string $class_name ): void {\n\t\t// Ensure we don't register the same service more than once.\n\t\tif ( $this->service_container->has( $id ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only instantiate services that are actually needed.\n\t\tif ( is_a( $class_name, Conditional::class, true )\n\t\t\t&& ! $class_name::is_needed() ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$service = $this->instantiate_service( $class_name );\n\n\t\t$this->service_container->put( $id, $service );\n\n\t\tif ( $service instanceof Registerable ) {\n\t\t\t$service->register();\n\t\t}\n\t}\n\n\t/**\n\t * Instantiate a single service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws InvalidService If the service could not be properly instantiated.\n\t *\n\t * @param class-string|object $class_name Service class to instantiate.\n\t * @return Service Instantiated service.\n\t *\n\t * @phpstan-param class-string $class_name Service class to instantiate.\n\t */\n\tprotected function instantiate_service( $class_name ): Service {\n\t\t/*\n\t\t * If the service is not registerable, we default to lazily instantiated\n\t\t * services here for some basic optimization.\n\t\t *\n\t\t * The services will be properly instantiated once they are retrieved\n\t\t * from the service container.\n\t\t */\n\t\tif ( ! is_a( $class_name, Registerable::class, true ) ) {\n\t\t\treturn new LazilyInstantiatedService(\n\t\t\t\tfn() => $this->injector->make( $class_name )\n\t\t\t);\n\t\t}\n\n\t\t// The service needs to be registered, so instantiate right away.\n\t\t$service = $this->injector->make( $class_name );\n\n\t\t// @phpstan-ignore instanceof.alwaysTrue\n\t\tif ( ! $service instanceof Service ) {\n\t\t\tthrow InvalidService::from_service( $service ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\t\treturn $service;\n\t}\n\n\t/**\n\t * Configure the provided injector.\n\t *\n\t * This method defines the mappings that the injector knows about, and the\n\t * logic it requires to make more complex instantiations work.\n\t *\n\t * For more complex plugins, this should be extracted into a separate\n\t * object\n\t * or into configuration files.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param Injector $injector Injector instance to configure.\n\t * @return Injector Configured injector instance.\n\t */\n\tprotected function configure_injector( Injector $injector ): Injector {\n\t\t$bindings = $this->get_bindings();\n\t\t$shared_instances = $this->get_shared_instances();\n\t\t$arguments = $this->get_arguments();\n\t\t$delegations = $this->get_delegations();\n\n\t\tif ( $this->enable_filters ) {\n\t\t\t/**\n\t\t\t * Filter the default bindings that are provided by the plugin.\n\t\t\t *\n\t\t\t * This can be used to swap implementations out for alternatives.\n\t\t\t *\n\t\t\t * @param array $bindings Associative array of interface =>\n\t\t\t * implementation bindings. Both\n\t\t\t * should be FQCNs.\n\t\t\t */\n\t\t\t$bindings = apply_filters(\n\t\t\t\tstatic::HOOK_PREFIX . static::BINDINGS_FILTER,\n\t\t\t\t$bindings\n\t\t\t);\n\n\t\t\t/**\n\t\t\t * Filter the default argument bindings that are provided by the\n\t\t\t * plugin.\n\t\t\t *\n\t\t\t * This can be used to override scalar values.\n\t\t\t *\n\t\t\t * @param array $arguments Associative array of class =>\n\t\t\t * arguments mappings. The arguments\n\t\t\t * array maps argument names to\n\t\t\t * values.\n\t\t\t */\n\t\t\t$arguments = apply_filters(\n\t\t\t\tstatic::HOOK_PREFIX . static::ARGUMENTS_FILTER,\n\t\t\t\t$arguments\n\t\t\t);\n\n\t\t\t/**\n\t\t\t * Filter the instances that are shared by default by the plugin.\n\t\t\t *\n\t\t\t * This can be used to turn objects that were added externally into\n\t\t\t * shared instances.\n\t\t\t *\n\t\t\t * @param array $shared_instances Array of FQCNs to turn\n\t\t\t * into shared objects.\n\t\t\t */\n\t\t\t$shared_instances = apply_filters(\n\t\t\t\tstatic::HOOK_PREFIX . static::SHARED_INSTANCES_FILTER,\n\t\t\t\t$shared_instances\n\t\t\t);\n\n\t\t\t/**\n\t\t\t * Filter the instances that are shared by default by the plugin.\n\t\t\t *\n\t\t\t * This can be used to turn objects that were added externally into\n\t\t\t * shared instances.\n\t\t\t *\n\t\t\t * @param array $delegations Associative array of class =>\n\t\t\t * callable mappings.\n\t\t\t */\n\t\t\t$delegations = apply_filters(\n\t\t\t\tstatic::HOOK_PREFIX . static::DELEGATIONS_FILTER,\n\t\t\t\t$delegations\n\t\t\t);\n\t\t}\n\n\t\tforeach ( $bindings as $from => $to ) {\n\t\t\t$from = $this->maybe_resolve( $from );\n\t\t\t$to = $this->maybe_resolve( $to );\n\n\t\t\t$injector = $injector->bind( $from, $to );\n\t\t}\n\n\t\t/**\n\t\t * Argument map.\n\t\t *\n\t\t * @var array> $arguments\n\t\t */\n\t\tforeach ( $arguments as $class => $argument_map ) {\n\t\t\t$class = $this->maybe_resolve( $class );\n\n\t\t\tforeach ( $argument_map as $name => $value ) {\n\t\t\t\t// We don't try to resolve the $value here, as we might want to\n\t\t\t\t// pass a callable as-is.\n\t\t\t\t$name = $this->maybe_resolve( $name );\n\n\t\t\t\t$injector = $injector->bind_argument( $class, $name, $value );\n\t\t\t}\n\t\t}\n\n\t\tforeach ( $shared_instances as $shared_instance ) {\n\t\t\t$shared_instance = $this->maybe_resolve( $shared_instance );\n\n\t\t\t$injector = $injector->share( $shared_instance );\n\t\t}\n\n\t\t/**\n\t\t * Callable.\n\t\t *\n\t\t * @var callable $callable\n\t\t */\n\t\tforeach ( $delegations as $class => $callable ) {\n\t\t\t// We don't try to resolve the $callable here, as we want to pass it\n\t\t\t// on as-is.\n\t\t\t$class = $this->maybe_resolve( $class );\n\n\t\t\t$injector = $injector->delegate( $class, $callable );\n\t\t}\n\n\t\treturn $injector;\n\t}\n\n\t/**\n\t * Get the list of services to register.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array> Associative array of identifiers mapped to fully\n\t * qualified class names.\n\t */\n\tprotected function get_service_classes(): array {\n\t\treturn [];\n\t}\n\n\t/**\n\t * Get the bindings for the dependency injector.\n\t *\n\t * The bindings let you map interfaces (or classes) to the classes that\n\t * should be used to implement them.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array> Associative array of fully qualified class names.\n\t */\n\tprotected function get_bindings(): array {\n\t\treturn [];\n\t}\n\n\t/**\n\t * Get the argument bindings for the dependency injector.\n\t *\n\t * The argument bindings let you map specific argument values for specific\n\t * classes.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Associative array of arrays mapping argument names\n\t * to argument values.\n\t */\n\tprotected function get_arguments(): array {\n\t\treturn [];\n\t}\n\n\t/**\n\t * Get the shared instances for the dependency injector.\n\t *\n\t * These classes will only be instantiated once by the injector and then\n\t * reused on subsequent requests.\n\t *\n\t * This effectively turns them into singletons, without any of the\n\t * drawbacks of the actual Singleton anti-pattern.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Array of fully qualified class names.\n\t */\n\tprotected function get_shared_instances(): array {\n\t\treturn [];\n\t}\n\n\t/**\n\t * Get the delegations for the dependency injector.\n\t *\n\t * These are basically factories to provide custom instantiation logic for\n\t * classes.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Associative array of callables.\n\t *\n\t * @phpstan-return array, callable> Associative array of callables.\n\t */\n\tprotected function get_delegations(): array {\n\t\treturn [];\n\t}\n\n\t/**\n\t * Maybe resolve a value that is a callable instead of a scalar.\n\t *\n\t * Values that are passed through this method can optionally be provided as\n\t * callables instead of direct values and will be evaluated when needed.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string|callable|class-string $value Value to potentially resolve.\n\t * @return string|class-string Resolved or unchanged value.\n\t *\n\t * @phpstan-return class-string Resolved or unchanged value.\n\t */\n\tprotected function maybe_resolve( $value ): string {\n\t\tif ( ! ( \\is_string( $value ) && \\function_exists( $value ) ) && \\is_callable( $value ) ) {\n\t\t\t$value = $value( $this->injector, $this->service_container );\n\t\t}\n\n\t\treturn $value;\n\t}\n}\n" }, { "path": "includes/Infrastructure/ServiceContainer/LazilyInstantiatedService.php", "content": "instantiation = $instantiation;\n\t}\n\n\t/**\n\t * Do the actual service instantiation and return the real service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @throws InvalidService If the service could not be properly instantiated.\n\t *\n\t * @return Service Properly instantiated service.\n\t */\n\tpublic function instantiate(): Service {\n\t\t$instantiation = $this->instantiation; // Because uniform variable syntax not supported in PHP 5.6.\n\t\t$service = $instantiation();\n\n\t\tif ( ! $service instanceof Service ) {\n\t\t\tthrow InvalidService::from_service( $service ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\t\treturn $service;\n\t}\n}\n" }, { "path": "includes/Infrastructure/ServiceContainer/SimpleServiceContainer.php", "content": "has( $id ) ) {\n\t\t\tthrow InvalidService::from_service_id( $id ); // phpcs:ignore WordPress.Security.EscapeOutput.ExceptionNotEscaped\n\t\t}\n\n\t\t/**\n\t\t * Service.\n\t\t *\n\t\t * @var Service $service Service.\n\t\t */\n\t\t$service = $this->offsetGet( $id );\n\n\t\t// Instantiate actual services if they were stored lazily.\n\t\tif ( $service instanceof LazilyInstantiatedService ) {\n\t\t\t$service = $service->instantiate();\n\t\t\t$this->put( $id, $service );\n\t\t}\n\n\t\treturn $service;\n\t}\n\n\t/**\n\t * Check whether the container can return a service for the given\n\t * identifier.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $id Identifier of the service to look for.\n\t */\n\tpublic function has( string $id ): bool {\n\t\treturn $this->offsetExists( $id );\n\t}\n\n\t/**\n\t * Put a service into the container for later retrieval.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $id Identifier of the service to put into the\n\t * container.\n\t * @param Service $service Service to put into the container.\n\t */\n\tpublic function put( string $id, Service $service ): void {\n\t\t$this->offsetSet( $id, $service );\n\t}\n}\n" }, { "path": "includes/Infrastructure/ServiceContainer.php", "content": "settings = $settings;\n\t\t$this->story_post_type = $story_post_type;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.2.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'option_amp-options', [ $this, 'filter_amp_options' ] );\n\t\tadd_filter( 'amp_supportable_post_types', [ $this, 'filter_supportable_post_types' ] );\n\t\tadd_filter( 'amp_to_amp_linking_element_excluded', [ $this, 'filter_amp_to_amp_linking_element_excluded' ], 10, 4 );\n\t\tadd_filter( 'amp_content_sanitizers', [ $this, 'add_amp_content_sanitizers' ] );\n\t\tadd_filter( 'amp_validation_error_sanitized', [ $this, 'filter_amp_validation_error_sanitized' ], 10, 2 );\n\t\tadd_filter( 'amp_skip_post', [ $this, 'filter_amp_skip_post' ], 10, 2 );\n\n\t\t// This filter is actually used in this plugin's `Sanitization` class.\n\t\tadd_filter( 'web_stories_amp_validation_error_sanitized', [ $this, 'filter_amp_validation_error_sanitized' ], 10, 2 );\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because settings needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings' ];\n\t}\n\n\t/**\n\t * Filter AMP options to force Standard mode (AMP-first) when a web story is being requested.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param array|false $options Options.\n\t * @return array|mixed Filtered options.\n\t *\n\t * @phpstan-param AMPOptions|false $options\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($options is array ? array : mixed)\n\t */\n\tpublic function filter_amp_options( $options ) {\n\t\tif ( ! \\is_array( $options ) ) {\n\t\t\treturn $options;\n\t\t}\n\t\tif ( $this->get_request_post_type() === $this->story_post_type->get_slug() ) {\n\t\t\t$options['theme_support'] = 'standard';\n\t\t\t$options['supported_post_types'][] = $this->story_post_type->get_slug();\n\t\t\t$options['supported_templates'][] = 'is_singular';\n\t\t}\n\t\treturn $options;\n\t}\n\n\t/**\n\t * Filter the post types which are supportable.\n\t *\n\t * Remove web-stories from the list unless the currently requested post type is for a web-story. This is done in\n\t * order to hide stories from the list of supportable post types on the AMP Settings screen.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param string[]|false $post_types Supportable post types.\n\t * @return string[]|false Supportable post types.\n\t *\n\t * @phpstan-return ($post_types is string[] ? string[] : false)\n\t */\n\tpublic function filter_supportable_post_types( $post_types ) {\n\t\tif ( ! \\is_array( $post_types ) ) {\n\t\t\treturn $post_types;\n\t\t}\n\n\t\t$story_post_type = $this->story_post_type->get_slug();\n\n\t\t$post_types = array_diff( $post_types, [ $story_post_type ] );\n\n\t\tif ( $this->get_request_post_type() === $story_post_type ) {\n\t\t\t$post_types = [ ...$post_types, $story_post_type ];\n\t\t}\n\n\t\treturn array_unique( array_values( $post_types ) );\n\t}\n\n\t/**\n\t * Filters the AMP plugin's sanitizers.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param array|mixed $sanitizers Sanitizers.\n\t * @return array|mixed Sanitizers.\n\t *\n\t * @phpstan-param AMPSanitizers|mixed $sanitizers\n\t * @phpstan-return AMPSanitizers|mixed\n\t */\n\tpublic function add_amp_content_sanitizers( $sanitizers ) {\n\t\tif ( ! $this->context->is_web_story() ) {\n\t\t\treturn $sanitizers;\n\t\t}\n\n\t\t$post = get_queried_object();\n\t\tif ( ! ( $post instanceof WP_Post ) ) {\n\t\t\treturn $sanitizers;\n\t\t}\n\n\t\tif ( ! \\is_array( $sanitizers ) ) {\n\t\t\treturn $sanitizers;\n\t\t}\n\n\t\t/**\n\t\t * AMP sanitizer configuration.\n\t\t *\n\t\t * @phpstan-var AMPSanitizers $sanitizers\n\t\t */\n\n\t\t$video_cache_enabled = (bool) $this->settings->get_setting( $this->settings::SETTING_NAME_VIDEO_CACHE );\n\n\t\t$story = new Story();\n\t\t$story->load_from_post( $post );\n\n\t\t$poster_images = [\n\t\t\t'poster-portrait-src' => esc_url_raw( $story->get_poster_portrait() ),\n\t\t];\n\n\t\tif ( isset( $sanitizers['AMP_Style_Sanitizer'] ) ) {\n\t\t\tif ( ! isset( $sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] ) ) {\n\t\t\t\t$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'] = [];\n\t\t\t}\n\n\t\t\t$sanitizers['AMP_Style_Sanitizer']['dynamic_element_selectors'][] = 'amp-story-captions';\n\t\t}\n\n\t\t$sanitizers[ AMP_Story_Sanitizer::class ] = [\n\t\t\t'publisher_logo' => (string) $story->get_publisher_logo_url(),\n\t\t\t'publisher' => $story->get_publisher_name(),\n\t\t\t'poster_images' => array_filter( $poster_images ),\n\t\t\t'video_cache' => $video_cache_enabled,\n\t\t\t'title_tag' => wp_get_document_title(),\n\t\t\t'description' => wp_strip_all_tags( get_the_excerpt() ),\n\t\t];\n\n\t\treturn $sanitizers;\n\t}\n\n\t/**\n\t * Filter amp_validation_error_sanitized to prevent invalid markup removal for Web Stories.\n\t *\n\t * Since the amp-story element requires the poster-portrait-src attribute to be valid, when this attribute is absent\n\t * the AMP plugin will try to remove the amp-story element altogether. This is not the preferred resolution! So\n\t * instead, this will force the invalid markup to be kept. When this is done, the AMP plugin in Standard mode\n\t * (which Web Stories enforces while serving singular web-story posts) will remove the amp attribute from the html\n\t * element so that the page will not be advertised as AMP. This prevents GSC from complaining about a validation\n\t * issue which we already know about.\n\t *\n\t * The same is done for elements, for example when they have missing poster images.\n\t *\n\t * @since 1.1.1\n\t *\n\t * @link https://github.com/ampproject/amp-wp/blob/c6aed8f/includes/validation/class-amp-validation-manager.php#L1777-L1809\n\t *\n\t * @param null|bool $sanitized Whether sanitized. Null means sanitization is not overridden.\n\t * @param array{node_type?: int, node_name?: string, parent_name?: string} $error Validation error being sanitized.\n\t * @return null|bool Whether sanitized.\n\t */\n\tpublic function filter_amp_validation_error_sanitized( ?bool $sanitized, array $error ): ?bool {\n\t\t// Skip sanitization for missing publisher logos and poster portrait images.\n\t\tif (\n\t\t\tisset( $error['node_type'], $error['node_name'], $error['parent_name'] ) &&\n\t\t\t(\n\t\t\t\t( XML_ELEMENT_NODE === $error['node_type'] && 'amp-story' === $error['node_name'] && 'body' === $error['parent_name'] ) ||\n\t\t\t\t( XML_ATTRIBUTE_NODE === $error['node_type'] && 'poster-portrait-src' === $error['node_name'] && 'amp-story' === $error['parent_name'] ) ||\n\t\t\t\t( XML_ATTRIBUTE_NODE === $error['node_type'] && 'publisher-logo-src' === $error['node_name'] && 'amp-story' === $error['parent_name'] )\n\t\t\t)\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Skip sanitization for missing video posters.\n\t\tif ( isset( $error['node_name'] ) && 'amp-video' === $error['node_name'] ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// Skip sanitization for amp-video > source with invalid src.\n\t\tif ( isset( $error['parent_name'] ) && 'source' === $error['parent_name'] ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $sanitized;\n\t}\n\n\t/**\n\t * Filters whether AMP-to-AMP is excluded for an element.\n\t *\n\t * The element may be either a link (`a` or `area`) or a `form`.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param bool|mixed $excluded Excluded. Default value is whether element already has a `noamphtml` link relation or the URL is among `excluded_urls`.\n\t * @param string $url URL considered for exclusion.\n\t * @param string[] $rel Link relations.\n\t * @param DOMElement|null $element The element considered for excluding from AMP-to-AMP linking. May be instance of `a`, `area`, or `form`.\n\t * @return bool|mixed Whether AMP-to-AMP is excluded.\n\t */\n\tpublic function filter_amp_to_amp_linking_element_excluded( $excluded, string $url, array $rel, ?DOMElement $element ) {\n\t\tif ( $element instanceof DOMElement && $element->parentNode instanceof DOMElement && 'amp-story-player' === $element->parentNode->tagName ) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn $excluded;\n\t}\n\n\t/**\n\t * Filters whether to skip the post from AMP.\n\t *\n\t * Skips the post if the AMP plugin's version is lower than what is bundled in this plugin.\n\t * Prevents issues where this plugin uses newer features that the plugin doesn't know about yet,\n\t * causing false positives with validation.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @link https://github.com/googleforcreators/web-stories-wp/issues/7131\n\t *\n\t * @param bool|mixed $skipped Whether the post should be skipped from AMP.\n\t * @param int $post Post ID.\n\t * @return bool|mixed Whether post should be skipped from AMP.\n\t */\n\tpublic function filter_amp_skip_post( $skipped, int $post ) {\n\t\t// This is the opposite to the `AMP__VERSION >= WEBSTORIES_AMP_VERSION` check in the HTML renderer.\n\t\tif (\n\t\t\t$this->story_post_type->get_slug() === get_post_type( $post )\n\t\t\t&&\n\t\t\t\\defined( '\\AMP__VERSION' )\n\t\t\t&&\n\t\t\tversion_compare( WEBSTORIES_AMP_VERSION, AMP__VERSION, '>' )\n\t\t) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn $skipped;\n\t}\n\n\t/**\n\t * Get the post type for the current request.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.2.0\n\t */\n\tprotected function get_request_post_type(): ?string {\n\t\t// phpcs:disable WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\n\t\tif ( did_action( 'wp' ) && is_singular() ) {\n\t\t\t$post_type = get_post_type( get_queried_object_id() );\n\t\t\treturn $post_type ?: null;\n\t\t}\n\n\t\tif (\n\t\t\tisset( $_GET['action'], $_GET['post'] ) &&\n\t\t\t'amp_validate' === $_GET['action'] &&\n\t\t\tis_admin()\n\t\t) {\n\t\t\t/**\n\t\t\t * Post ID.\n\t\t\t *\n\t\t\t * @var string|int $post_id\n\t\t\t */\n\t\t\t$post_id = $_GET['post'];\n\n\t\t\tif ( get_post_type( (int) $post_id ) === self::AMP_VALIDATED_URL_POST_TYPE ) {\n\t\t\t\treturn $this->get_validated_url_post_type( (int) $post_id );\n\t\t\t}\n\t\t}\n\n\t\t$current_screen_post_type = $this->context->get_screen_post_type();\n\n\t\tif ( $current_screen_post_type ) {\n\t\t\t$current_post = get_post();\n\n\t\t\tif ( self::AMP_VALIDATED_URL_POST_TYPE === $current_screen_post_type && $current_post instanceof WP_Post && $current_post->post_type === $current_screen_post_type ) {\n\t\t\t\t$validated_url_post_type = $this->get_validated_url_post_type( $current_post->ID );\n\t\t\t\tif ( $validated_url_post_type ) {\n\t\t\t\t\treturn $validated_url_post_type;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn $current_screen_post_type;\n\t\t}\n\n\t\tif ( isset( $_SERVER['REQUEST_URI'] ) ) {\n\t\t\t/**\n\t\t\t * Request URI.\n\t\t\t *\n\t\t\t * @var string $request_uri\n\t\t\t */\n\t\t\t$request_uri = $_SERVER['REQUEST_URI'];\n\t\t\tif ( str_contains( (string) wp_unslash( $request_uri ), $this->story_post_type->get_rest_url() ) ) {\n\t\t\t\treturn $this->story_post_type->get_slug();\n\t\t\t}\n\t\t}\n\n\t\t// phpcs:enable WordPress.Security.NonceVerification.Recommended, WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\n\t\treturn null;\n\t}\n\n\t/**\n\t * Get the singular post type which is the queried object for the given validated URL post.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param int $post_id Post ID for Validated URL Post.\n\t * @return string|null Post type or null if validated URL is not for a singular post.\n\t */\n\tprotected function get_validated_url_post_type( int $post_id ): ?string {\n\t\tif ( empty( $post_id ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t$post = get_post( $post_id );\n\t\tif ( ! $post instanceof WP_Post ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( self::AMP_VALIDATED_URL_POST_TYPE !== $post->post_type ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * AMP queried object.\n\t\t *\n\t\t * @var array{type?: string, id?: int|string}|string $queried_object\n\t\t */\n\t\t$queried_object = get_post_meta( $post->ID, '_amp_queried_object', true );\n\n\t\tif ( ! \\is_array( $queried_object ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( isset( $queried_object['id'], $queried_object['type'] ) && 'post' === $queried_object['type'] ) {\n\t\t\t/**\n\t\t\t * Post ID.\n\t\t\t *\n\t\t\t * @var int|string $post_id\n\t\t\t */\n\t\t\t$post_id = $queried_object['id'];\n\n\t\t\t$post_type = get_post_type( (int) $post_id );\n\t\t\tif ( $post_type ) {\n\t\t\t\treturn $post_type;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n}\n" }, { "path": "includes/Integrations/Conditional_Featured_Image.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.16.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'cybocfi_enabled_for_post_type', [ $this, 'cybocfi_enabled_for_post_type' ], 99, 2 );\n\t}\n\n\t/**\n\t * Filter the conditional-featured-image plugin.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param mixed $enabled If enabled or not.\n\t * @param string $post_type Post type slug.\n\t * @return mixed Filter value.\n\t */\n\tpublic function cybocfi_enabled_for_post_type( $enabled, string $post_type ) {\n\t\tif ( $this->story_post_type->get_slug() === $post_type ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $enabled;\n\t}\n}\n" }, { "path": "includes/Integrations/Core_Themes_Support.php", "content": "assets = $assets;\n\t}\n\n\t/**\n\t * Adds theme support for Web Stories.\n\t *\n\t * This will enable add_theme_support with predefined\n\t * options supported themes.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function extend_theme_support(): void {\n\t\tadd_theme_support( 'web-stories' );\n\t}\n\n\t/**\n\t * Embed Webstories.\n\t *\n\t * Embeds web stories with default customizer settings.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function embed_web_stories(): void {\n\t\t$stylesheet = get_stylesheet();\n\t\tif ( is_readable( \\sprintf( '%sassets/css/web-stories-theme-style-%s.css', WEBSTORIES_PLUGIN_DIR_PATH, $stylesheet ) ) ) {\n\t\t\t$this->assets->enqueue_style_asset( 'web-stories-theme-style-' . $stylesheet, [] );\n\t\t}\n\t\t?>\n\t\t
\n\t\t\t\n\t\t
\n\t\t ? array : mixed)\n\t */\n\tpublic function add_core_theme_classes( $classes ) {\n\t\tif ( ! \\is_array( $classes ) ) {\n\t\t\treturn $classes;\n\t\t}\n\t\t$classes[] = 'has-web-stories';\n\n\t\treturn $classes;\n\t}\n\n\t/**\n\t * Adds theme support and hook to embed the web stories.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function register(): void {\n\t\tif ( ! \\in_array( get_stylesheet(), self::$supported_themes, true ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$this->extend_theme_support();\n\n\t\t// Not using Settings::get_setting() to avoid calling rest_sanitize_value_from_schema().\n\n\t\t/**\n\t\t * Customizer options.\n\t\t *\n\t\t * @var array $options\n\t\t */\n\t\t$options = get_option( Customizer::STORY_OPTION, [] );\n\n\t\t// Load theme specific styles and render function only if selected to show stories.\n\t\tif ( empty( $options['show_stories'] ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tadd_filter( 'body_class', [ $this, 'add_core_theme_classes' ] );\n\t\tadd_action( 'wp_body_open', [ $this, 'embed_web_stories' ] );\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'wp_head';\n\t}\n}\n" }, { "path": "includes/Integrations/Ezoic.php", "content": "sanitization = $sanitization;\n\t\t$this->optimization = $optimization;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.33.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'ez_buffered_final_content', [ $this, 'process_ez_buffered_final_content' ] );\n\t}\n\n\t/**\n\t * Check whether the Ezoic integration is currently needed.\n\t *\n\t * @since 1.33.0\n\t *\n\t * @return bool Whether Ezoic integration is currently needed.\n\t */\n\tpublic static function is_needed(): bool {\n\t\treturn \\defined( 'EZOIC_INTEGRATION_VERSION' );\n\t}\n\n\t/**\n\t * Optimizes and Sanitizes Ezoic's final prepared content.\n\t *\n\t * @since 1.33.0\n\t *\n\t * @param string $content HTML document response collected by Ezoic Output Buffer.\n\t * @return string AMP document response.\n\t */\n\tpublic function process_ez_buffered_final_content( string $content ): string {\n\t\tif ( $this->context->is_web_story() ) {\n\t\t\t// Enforce UTF-8 encoding as it is a requirement for AMP.\n\t\t\tif ( ! headers_sent() ) {\n\t\t\t\theader( 'Content-Type: text/html; charset=utf-8' );\n\t\t\t}\n\n\t\t\t$dom = Document::fromHtml( $content );\n\n\t\t\tif ( ! $dom instanceof Document ) {\n\t\t\t\treturn $this->render_error_page( SanitizationException::from_document_parse_error() );\n\t\t\t}\n\n\t\t\t$this->sanitization->sanitize_document( $dom );\n\t\t\t$this->optimization->optimize_document( $dom );\n\n\t\t\treturn $dom->saveHTML();\n\t\t}\n\t\treturn $content;\n\t}\n\n\t/**\n\t * Render error page.\n\t *\n\t * @since 1.33.0\n\t *\n\t * @param Throwable $throwable Exception or (as of PHP7) Error.\n\t * @return string Error page.\n\t */\n\tprivate function render_error_page( Throwable $throwable ): string {\n\t\treturn esc_html__( 'There was an error generating the web story, probably because of a server misconfiguration. Try contacting your hosting provider or open a new support request.', 'web-stories' ) .\n\t\t\t\"\\n\" .\n\t\t\t\"\\n\" .\n\t\t\t// translators: 1: error message. 2: location.\n\t\t\t\\sprintf( esc_html__( 'Error message: %1$s (%2$s)', 'web-stories' ), $throwable->getMessage(), $throwable->getFile() . ':' . $throwable->getLine() );\n\t}\n}\n" }, { "path": "includes/Integrations/Jetpack.php", "content": "media_source_taxonomy = $media_source_taxonomy;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.2.0\n\t */\n\tpublic function register(): void {\n\t\t// See https://github.com/Automattic/jetpack/blob/4b85be883b3c584c64eeb2fb0f3fcc15dabe2d30/modules/custom-post-types/portfolios.php#L80.\n\t\tif ( \\defined( 'IS_WPCOM' ) && IS_WPCOM ) {\n\t\t\tadd_filter( 'wpcom_sitemap_post_types', [ $this, 'add_to_jetpack_sitemap' ] );\n\t\t} else {\n\t\t\tadd_filter( 'jetpack_sitemap_post_types', [ $this, 'add_to_jetpack_sitemap' ] );\n\t\t}\n\n\t\tadd_filter( 'jetpack_is_amp_request', [ $this, 'force_amp_request' ] );\n\t\tadd_filter( 'web_stories_allowed_mime_types', [ $this, 'add_videopress' ] );\n\t\tadd_filter( 'web_stories_rest_prepare_attachment', [ $this, 'filter_rest_api_response' ], 10, 2 );\n\t\tadd_filter( 'ajax_query_attachments_args', [ $this, 'filter_ajax_query_attachments_args' ] );\n\t\tadd_action( 'added_post_meta', [ $this, 'add_term' ], 10, 3 );\n\t}\n\n\t/**\n\t * Adds the web-story post type to Jetpack / WordPress.com sitemaps.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @see https://github.com/Automattic/jetpack/blob/4b85be883b3c584c64eeb2fb0f3fcc15dabe2d30/modules/custom-post-types/portfolios.php#L80\n\t *\n\t * @param array|mixed $post_types Array of post types.\n\t * @return array|mixed Modified list of post types.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($post_types is array ? array : mixed)\n\t */\n\tpublic function add_to_jetpack_sitemap( $post_types ) {\n\t\tif ( ! \\is_array( $post_types ) ) {\n\t\t\treturn $post_types;\n\t\t}\n\t\t$post_types[] = Story_Post_Type::POST_TYPE_SLUG;\n\n\t\treturn $post_types;\n\t}\n\n\t/**\n\t * Add VideoPress to allowed mime types.\n\t *\n\t * If the site does not support VideoPress, this will be filtered out.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param array{video?: string[]}|mixed $mime_types Associative array of allowed mime types per media type (image, audio, video).\n\t * @return array{video?: string[]}|mixed\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($mime_types is array ? array : mixed)\n\t */\n\tpublic function add_videopress( $mime_types ) {\n\t\tif ( ! \\is_array( $mime_types ) ) {\n\t\t\treturn $mime_types;\n\t\t}\n\n\t\t/**\n\t\t * Mime types config.\n\t\t *\n\t\t * @var array{video?: string[]} $mime_types\n\t\t */\n\t\t$mime_types['video'][] = self::VIDEOPRESS_MIME_TYPE;\n\n\t\treturn $mime_types;\n\t}\n\n\n\t/**\n\t * Filter ajax query attachments args when accessed from the Web Stories editor.\n\t *\n\t * Only filters the response if the mime type matches exactly what Web Stories is looking for.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param array|mixed $args Query args.\n\t * @return array|mixed Filtered query args.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($args is array ? array : mixed)\n\t */\n\tpublic function filter_ajax_query_attachments_args( $args ) {\n\t\tif ( ! \\is_array( $args ) || ! isset( $args['post_mime_type'] ) || ! \\is_array( $args['post_mime_type'] ) ) {\n\t\t\treturn $args;\n\t\t}\n\n\t\tif ( \\in_array( self::VIDEOPRESS_MIME_TYPE, $args['post_mime_type'], true ) ) {\n\t\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'filter_admin_ajax_response' ], 15, 2 );\n\t\t}\n\n\t\treturn $args;\n\t}\n\n\t/**\n\t * Filter admin ajax responses for VideoPress videos.\n\t *\n\t * Changes the video/videopress type back to mp4\n\t * and ensures MP4 source URLs are returned.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param array|mixed $data Array of prepared attachment data. @see wp_prepare_attachment_for_js().\n\t * @param WP_Post $attachment Attachment object.\n\t * @return array|mixed\n\t *\n\t * @phpstan-param AttachmentData|mixed $data\n\t * @phpstan-return AttachmentData|mixed\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($data is array ? array : mixed)\n\t */\n\tpublic function filter_admin_ajax_response( $data, WP_Post $attachment ) {\n\t\tif ( self::VIDEOPRESS_MIME_TYPE !== $attachment->post_mime_type ) {\n\t\t\treturn $data;\n\t\t}\n\n\t\tif ( ! \\is_array( $data ) ) {\n\t\t\treturn $data;\n\t\t}\n\n\t\t// Reset mime type back to mp4, as this is the correct value.\n\t\t$data['mime'] = 'video/mp4';\n\t\t$data['subtype'] = 'mp4';\n\n\t\t// Mark video as optimized.\n\t\t$data[ $this->media_source_taxonomy::MEDIA_SOURCE_KEY ] = 'video-optimization';\n\n\t\t/**\n\t\t * Jetpack adds an additional field to regular attachment metadata.\n\t\t *\n\t\t * @var array $metadata\n\t\t * @phpstan-var EnhancedAttachmentMetadata|false $metadata\n\t\t */\n\t\t$metadata = wp_get_attachment_metadata( $attachment->ID );\n\n\t\tif ( $metadata && isset( $metadata['videopress']['duration'], $data['media_details'] ) && \\is_array( $data['media_details'] ) ) {\n\t\t\t$data['media_details']['length_formatted'] = $this->format_milliseconds( $metadata['videopress']['duration'] );\n\t\t\t$data['media_details']['length'] = (int) floor( $metadata['videopress']['duration'] / 1000 );\n\t\t}\n\n\t\tif ( $metadata && isset( $data['url'], $metadata['videopress']['file_url_base']['https'], $metadata['videopress']['files']['hd']['mp4'] ) ) {\n\t\t\t$data['url'] = $metadata['videopress']['file_url_base']['https'] . $metadata['videopress']['files']['hd']['mp4'];\n\t\t}\n\n\t\t// Get the correct poster with matching dimensions from VideoPress.\n\t\tif ( $metadata && isset( $data['featured_media_src'], $metadata['videopress']['poster'], $metadata['videopress']['width'], $metadata['videopress']['height'] ) ) {\n\t\t\t$data['featured_media_src'] = [\n\t\t\t\t'src' => $metadata['videopress']['poster'],\n\t\t\t\t'width' => $metadata['videopress']['width'],\n\t\t\t\t'height' => $metadata['videopress']['height'],\n\t\t\t\t'generated' => true,\n\t\t\t];\n\t\t}\n\n\t\treturn $data;\n\t}\n\n\t/**\n\t * Filter REST API responses for VideoPress videos.\n\t *\n\t * Changes the video/videopress type back to mp4\n\t * and ensures MP4 source URLs are returned.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param WP_REST_Response $response The response object.\n\t * @param WP_Post $post The original attachment post.\n\t */\n\tpublic function filter_rest_api_response( WP_REST_Response $response, WP_Post $post ): WP_REST_Response {\n\t\tif ( self::VIDEOPRESS_MIME_TYPE !== $post->post_mime_type ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array|bool> $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\t// Reset mime type back to mp4, as this is the correct value.\n\t\t$data['mime_type'] = 'video/mp4';\n\n\t\t// Mark video as optimized.\n\t\t$data[ $this->media_source_taxonomy::MEDIA_SOURCE_KEY ] = 'video-optimization';\n\n\t\t/**\n\t\t * Jetpack adds an additional field to regular attachment metadata.\n\t\t *\n\t\t * @var EnhancedAttachmentMetadata|false $metadata\n\t\t */\n\t\t$metadata = wp_get_attachment_metadata( $post->ID );\n\n\t\tif ( $metadata && isset( $metadata['videopress']['duration'], $data['media_details'] ) && \\is_array( $data['media_details'] ) ) {\n\t\t\t$data['media_details']['length_formatted'] = $this->format_milliseconds( $metadata['videopress']['duration'] );\n\t\t\t$data['media_details']['length'] = (int) floor( $metadata['videopress']['duration'] / 1000 );\n\t\t}\n\n\t\tif ( $metadata && isset( $data['source_url'], $metadata['videopress']['file_url_base']['https'], $metadata['videopress']['files']['hd']['mp4'] ) ) {\n\t\t\t$data['source_url'] = $metadata['videopress']['file_url_base']['https'] . $metadata['videopress']['files']['hd']['mp4'];\n\t\t}\n\n\t\t// Get the correct poster with matching dimensions from VideoPress.\n\t\tif ( $metadata && isset( $data['featured_media_src'], $metadata['videopress']['poster'], $metadata['videopress']['width'], $metadata['videopress']['height'] ) ) {\n\t\t\t$data['featured_media_src'] = [\n\t\t\t\t'src' => $metadata['videopress']['poster'],\n\t\t\t\t'width' => $metadata['videopress']['width'],\n\t\t\t\t'height' => $metadata['videopress']['height'],\n\t\t\t\t'generated' => true,\n\t\t\t];\n\t\t}\n\n\t\t$response->set_data( $data );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Hook into added_post_meta.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param int $mid The meta ID after successful update.\n\t * @param int $object_id ID of the object metadata is for.\n\t * @param string $meta_key Metadata key.\n\t */\n\tpublic function add_term( int $mid, int $object_id, string $meta_key ): void {\n\t\tif ( self::VIDEOPRESS_POSTER_META_KEY !== $meta_key ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( 'attachment' !== get_post_type( $object_id ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\twp_set_object_terms( (int) $object_id, $this->media_source_taxonomy::TERM_POSTER_GENERATION, $this->media_source_taxonomy->get_taxonomy_slug() );\n\t}\n\n\t/**\n\t * Force Jetpack to see Web Stories as AMP.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param bool $is_amp_request Is the request supposed to return valid AMP content.\n\t * @return bool Whether the current request is an AMP request.\n\t */\n\tpublic function force_amp_request( bool $is_amp_request ): bool {\n\t\tif ( ! $this->context->is_web_story() ) {\n\t\t\treturn (bool) $is_amp_request;\n\t\t}\n\t\treturn true;\n\t}\n\n\t/**\n\t * Format milliseconds into seconds.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param int $milliseconds Milliseconds to converted to minutes and seconds.\n\t */\n\tprotected function format_milliseconds( int $milliseconds ): string {\n\t\t$seconds = floor( $milliseconds / 1000 );\n\n\t\tif ( $seconds >= 1 ) {\n\t\t\t$minutes = floor( $seconds / 60 );\n\t\t\t$seconds %= 60;\n\t\t} else {\n\t\t\t$seconds = 0;\n\t\t\t$minutes = 0;\n\t\t}\n\n\t\treturn \\sprintf( '%d:%02u', $minutes, $seconds );\n\t}\n}\n" }, { "path": "includes/Integrations/New_Relic.php", "content": "context = $context;\n\t}\n\n\t/**\n\t * Runs on instantiation.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register(): void {\n\t\t$this->disable_autorum();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'template_redirect';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\t// Run at the same time as the output buffering.\n\t\treturn PHP_INT_MIN;\n\t}\n\n\t/**\n\t * Check whether the conditional object is currently needed.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return bool Whether the conditional object is needed.\n\t */\n\tpublic static function is_needed(): bool {\n\t\treturn \\function_exists( '\\newrelic_disable_autorum' );\n\t}\n\n\t/**\n\t * Disable the New Relic Browser agent on AMP responses.\n\t *\n\t * This prevents the New Relic from causing invalid AMP responses due the NREUM script it injects after the meta charset:\n\t *\n\t * https://docs.newrelic.com/docs/browser/new-relic-browser/troubleshooting/google-amp-validator-fails-due-3rd-party-script\n\t *\n\t * Sites with New Relic will need to specially configure New Relic for AMP:\n\t * https://docs.newrelic.com/docs/browser/new-relic-browser/installation/monitor-amp-pages-new-relic-browser\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function disable_autorum(): void {\n\t\tif ( ! $this->context->is_web_story() ) {\n\t\t\treturn;\n\t\t}\n\n\t\t\\newrelic_disable_autorum();\n\t}\n}\n" }, { "path": "includes/Integrations/NextGen_Gallery.php", "content": "get_request_uri_path();\n\n\t\tif (\n\t\t\t// Plain permalinks.\n\t\t\t// phpcs:ignore WordPress.Security.NonceVerification.Recommended\n\t\t\t! empty( $_GET[ Story_Post_Type::POST_TYPE_SLUG ] ) ||\n\t\t\t// Pretty permalinks.\n\t\t\t(\n\t\t\t\t$request_uri_path &&\n\t\t\t\tpreg_match(\n\t\t\t\t\t'#/' . preg_quote( Story_Post_Type::REWRITE_SLUG, '#' ) . '/.*?$#',\n\t\t\t\t\t// phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\t\t\t\t\t$request_uri_path\n\t\t\t\t)\n\t\t\t)\n\t\t) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $valid_request;\n\t}\n\n\t/**\n\t * Returns the current request path.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @return string|null Request URI path on success, null on failure.\n\t */\n\tprivate function get_request_uri_path(): ?string {\n\t\t// phpcs:disable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\t\tif ( ! isset( $_SERVER['REQUEST_URI'] ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( ! \\is_string( $_SERVER['REQUEST_URI'] ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t/**\n\t\t * Request URI.\n\t\t *\n\t\t * @var string $request_uri\n\t\t */\n\t\t$request_uri = $_SERVER['REQUEST_URI'];\n\n\t\t// phpcs:enable WordPress.Security.ValidatedSanitizedInput.InputNotSanitized\n\n\t\t/**\n\t\t * Request URI path.\n\t\t *\n\t\t * @var string|null|false $path\n\t\t */\n\t\t$path = wp_parse_url( $request_uri, PHP_URL_PATH );\n\n\t\tif ( ! $path ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn $path;\n\t}\n}\n" }, { "path": "includes/Integrations/Plugin_Status.php", "content": ">\n\t */\n\tprotected array $plugins = [];\n\n\t/**\n\t * Constructor.\n\t */\n\tpublic function __construct() {\n\t\tif ( ! \\function_exists( '\\get_plugins' ) ) {\n\t\t\trequire_once ABSPATH . 'wp-admin/includes/plugin.php';\n\t\t}\n\n\t\t$this->plugins = get_plugins();\n\t}\n\n\t/**\n\t * Retrieves all plugin files with plugin data.\n\t *\n\t * @since 1.30.0\n\t *\n\t * @return array>\n\t */\n\tpublic function get_plugins(): array {\n\t\treturn $this->plugins;\n\t}\n}\n" }, { "path": "includes/Integrations/ShortPixel.php", "content": " ! str_contains( $url, 'web-stories-page-template' )\n\t\t);\n\t}\n}\n" }, { "path": "includes/Integrations/Site_Kit.php", "content": "\n * }\n */\nclass Site_Kit extends Service_Base {\n\t/**\n\t * Analytics instance.\n\t *\n\t * @var Analytics Analytics instance.\n\t */\n\tprotected Analytics $analytics;\n\n\t/**\n\t * Context instance.\n\t *\n\t * @var Context Context instance.\n\t */\n\tprivate Context $context;\n\n\t/**\n\t * Plugin_Status instance.\n\t *\n\t * @var Plugin_Status Plugin_Status instance.\n\t */\n\tprivate Plugin_Status $plugin_status;\n\n\t/**\n\t * Settings instance.\n\t *\n\t * @var Settings Settings instance.\n\t */\n\tprivate Settings $settings;\n\n\t/**\n\t * Constructor.\n\t *\n\t * @param Analytics $analytics Analytics instance.\n\t * @param Context $context Context instance.\n\t * @param Plugin_Status $plugin_status Plugin_Status instance.\n\t * @param Settings $settings Settings instance.\n\t */\n\tpublic function __construct( Analytics $analytics, Context $context, Plugin_Status $plugin_status, Settings $settings ) {\n\t\t$this->analytics = $analytics;\n\t\t$this->context = $context;\n\t\t$this->plugin_status = $plugin_status;\n\t\t$this->settings = $settings;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.2.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'googlesitekit_amp_gtag_opt', [ $this, 'filter_site_kit_gtag_opt' ] );\n\n\t\tadd_filter(\n\t\t\t'googlesitekit_analytics-4_tag_amp_blocked',\n\t\t\tfunction ( $blocked ) {\n\t\t\t\t$handler = $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_HANDLER );\n\n\t\t\t\tif ( 'web-stories' === $handler && $this->context->is_web_story() ) {\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\n\t\t\t\treturn $blocked;\n\t\t\t}\n\t\t);\n\n\t\tadd_action(\n\t\t\t'web_stories_print_analytics',\n\t\t\tfunction (): void {\n\t\t\t\t$handler = $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_HANDLER );\n\t\t\t\tif ( 'site-kit' === $handler && $this->is_analytics_module_active() ) {\n\t\t\t\t\tremove_action( 'web_stories_print_analytics', [ $this->analytics, 'print_analytics_tag' ] );\n\t\t\t\t}\n\t\t\t},\n\t\t\t5\n\t\t);\n\t}\n\n\t/**\n\t * Filters Site Kit's Google Analytics configuration.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param array|mixed $gtag_opt Array of gtag configuration options.\n\t * @return array|mixed Modified configuration options.\n\t *\n\t * @phpstan-param GtagOpt|mixed $gtag_opt\n\t */\n\tpublic function filter_site_kit_gtag_opt( $gtag_opt ) {\n\t\tif (\n\t\t\t! \\is_array( $gtag_opt ) ||\n\t\t\t! \\is_array( $gtag_opt['vars'] ) ||\n\t\t\t! isset( $gtag_opt['vars']['gtag_id'] ) ||\n\t\t\t! \\is_string( $gtag_opt['vars']['gtag_id'] ) ||\n\t\t\t! $this->context->is_web_story()\n\t\t) {\n\t\t\treturn $gtag_opt;\n\t\t}\n\n\t\t$default_config = $this->analytics->get_default_configuration( $gtag_opt['vars']['gtag_id'] );\n\t\t$default_config['triggers'] = $default_config['triggers'] ?? [];\n\n\t\t$gtag_opt['triggers'] ??= [];\n\t\t// @phpstan-ignore argument.type\n\t\t$gtag_opt['triggers'] = array_merge( $default_config['triggers'], $gtag_opt['triggers'] );\n\n\t\treturn $gtag_opt;\n\t}\n\n\t/**\n\t * Returns the Site Kit plugin status.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return array{installed: bool, active: bool, analyticsActive: bool, adsenseActive: bool, analyticsLink: string, adsenseLink: string} Plugin status.\n\t */\n\tpublic function get_plugin_status(): array {\n\t\t$is_installed = \\array_key_exists( 'google-site-kit/google-site-kit.php', $this->plugin_status->get_plugins() );\n\t\t$is_active = $this->is_plugin_active();\n\t\t$is_analytics_active = $this->is_analytics_module_active();\n\t\t$is_adsense_active = $this->is_adsense_module_active();\n\n\t\t$analytics_link = __( 'https://wordpress.org/plugins/google-site-kit/', 'web-stories' );\n\t\t$adsense_link = __( 'https://wordpress.org/plugins/google-site-kit/', 'web-stories' );\n\t\t$dashboard = admin_url( 'admin.php?page=googlesitekit-dashboard' );\n\t\t$settings = admin_url( 'admin.php?page=googlesitekit-settings' );\n\n\t\tif ( $is_active ) {\n\t\t\t$dashboard_capability = current_user_can( 'googlesitekit_view_dashboard' ); // phpcs:ignore WordPress.WP.Capabilities.Unknown\n\t\t\t$settings_capability = current_user_can( 'googlesitekit_manage_options' ); // phpcs:ignore WordPress.WP.Capabilities.Unknown\n\n\t\t\t// If analytics is active and current user can view dashboard.\n\t\t\tif ( $is_analytics_active && $dashboard_capability ) {\n\t\t\t\t$analytics_link = $dashboard;\n\t\t\t} elseif ( $settings_capability ) {\n\t\t\t\t$analytics_link = $settings;\n\t\t\t} elseif ( $dashboard_capability ) {\n\t\t\t\t$analytics_link = $dashboard;\n\t\t\t}\n\n\t\t\t// If adsense is active and current user can view dashboard.\n\t\t\tif ( $is_adsense_active && $dashboard_capability ) {\n\t\t\t\t$adsense_link = $dashboard;\n\t\t\t} elseif ( $settings_capability ) {\n\t\t\t\t$adsense_link = $settings;\n\t\t\t} elseif ( $dashboard_capability ) {\n\t\t\t\t$adsense_link = $dashboard;\n\t\t\t}\n\t\t} elseif ( $is_installed ) {\n\t\t\tif ( current_user_can( 'activate_plugin', 'google-site-kit/google-site-kit.php' ) ) {\n\t\t\t\t$analytics_link = admin_url( 'plugins.php' );\n\t\t\t\t$adsense_link = $analytics_link;\n\t\t\t}\n\t\t} elseif ( current_user_can( 'install_plugins' ) ) {\n\t\t\t$analytics_link = admin_url(\n\t\t\t\tadd_query_arg(\n\t\t\t\t\t[\n\t\t\t\t\t\t's' => rawurlencode( __( 'Site Kit by Google', 'web-stories' ) ),\n\t\t\t\t\t\t'tab' => 'search',\n\t\t\t\t\t],\n\t\t\t\t\t'plugin-install.php'\n\t\t\t\t)\n\t\t\t);\n\t\t\t$adsense_link = $analytics_link;\n\t\t}\n\n\t\treturn [\n\t\t\t'installed' => $is_active || $is_installed,\n\t\t\t'active' => $is_active,\n\t\t\t'analyticsActive' => $is_analytics_active,\n\t\t\t'adsenseActive' => $is_adsense_active,\n\t\t\t'analyticsLink' => $analytics_link,\n\t\t\t'adsenseLink' => $adsense_link,\n\t\t];\n\t}\n\n\t/**\n\t * Determines whether Site Kit is active.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool Whether Site Kit is active.\n\t */\n\tprotected function is_plugin_active(): bool {\n\t\treturn \\defined( 'GOOGLESITEKIT_VERSION' );\n\t}\n\n\n\t/**\n\t * Determines whether the built-in adsense module in Site Kit is active.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @return bool Whether Site Kit's analytics module is active.\n\t */\n\tprotected function is_adsense_module_active(): bool {\n\t\t$adsense_module_active = \\in_array( 'adsense', $this->get_site_kit_active_modules_option(), true );\n\t\t$adsense_options = (array) get_option( 'googlesitekit_adsense_settings' );\n\t\t$adsense_options_client_id = ! empty( $adsense_options['clientID'] );\n\t\t$adsense_options_use_snippet = ! empty( $adsense_options['useSnippet'] );\n\t\t$adsense_web_stories_ad_unit = ! empty( $adsense_options['webStoriesAdUnit'] );\n\n\t\treturn $adsense_module_active && $adsense_options_use_snippet && $adsense_web_stories_ad_unit && $adsense_options_client_id;\n\t}\n\n\t/**\n\t * Determines whether the built-in Analytics module in Site Kit is active.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool Whether Site Kit's analytics module is active.\n\t */\n\tprotected function is_analytics_module_active(): bool {\n\t\t$analytics_module_active = \\in_array( 'analytics', $this->get_site_kit_active_modules_option(), true );\n\t\t$analytics_options = (array) get_option( 'googlesitekit_analytics_settings' );\n\t\t$analytics_use_snippet = ! empty( $analytics_options['useSnippet'] );\n\n\t\treturn $analytics_module_active && $analytics_use_snippet;\n\t}\n\n\t/**\n\t * Gets the option containing the active Site Kit modules.\n\t *\n\t * Checks two options as it was renamed at some point in Site Kit.\n\t *\n\t * Bails early if the Site Kit plugin itself is not active.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @see \\Google\\Site_Kit\\Core\\Modules\\Modules::get_active_modules_option\n\t *\n\t * @return string[] List of active module slugs.\n\t */\n\tprotected function get_site_kit_active_modules_option(): array {\n\t\tif ( ! $this->is_plugin_active() ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t/**\n\t\t * Option value.\n\t\t *\n\t\t * @var string[]|false $option\n\t\t */\n\t\t$option = get_option( 'googlesitekit_active_modules' );\n\n\t\tif ( \\is_array( $option ) ) {\n\t\t\treturn $option;\n\t\t}\n\n\t\t/**\n\t\t * Legacy option value.\n\t\t *\n\t\t * @var string[]|false $legacy_option\n\t\t */\n\t\t$legacy_option = get_option( 'googlesitekit-active-modules' );\n\n\t\tif ( \\is_array( $legacy_option ) ) {\n\t\t\treturn $legacy_option;\n\t\t}\n\n\t\treturn [];\n\t}\n}\n" }, { "path": "includes/Integrations/WooCommerce.php", "content": "plugin_status = $plugin_status;\n\t}\n\n\t/**\n\t * Returns the WooCommerce plugin status.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return array{installed: bool, active: bool, canManage: bool, link: string} Plugin status.\n\t */\n\tpublic function get_plugin_status(): array {\n\t\t$is_installed = \\array_key_exists( self::PLUGIN, $this->plugin_status->get_plugins() );\n\t\t$is_active = $this->is_plugin_active();\n\t\t$can_manage = false;\n\t\t$link = '';\n\n\t\tif ( $is_active ) {\n\t\t\t$can_manage = current_user_can( 'manage_woocommerce' ); // phpcs:ignore WordPress.WP.Capabilities.Unknown\n\t\t\tif ( $can_manage ) {\n\t\t\t\t$link = admin_url( 'admin.php?page=wc-admin' );\n\t\t\t}\n\t\t} elseif ( $is_installed ) {\n\t\t\tif ( current_user_can( 'activate_plugin', self::PLUGIN ) ) {\n\t\t\t\t$link = admin_url( 'plugins.php' );\n\t\t\t}\n\t\t} elseif ( current_user_can( 'install_plugins' ) ) {\n\t\t\t$link = admin_url(\n\t\t\t\tadd_query_arg(\n\t\t\t\t\t[\n\t\t\t\t\t\t's' => rawurlencode( __( 'WooCommerce', 'web-stories' ) ),\n\t\t\t\t\t\t'tab' => 'search',\n\t\t\t\t\t],\n\t\t\t\t\t'plugin-install.php'\n\t\t\t\t)\n\t\t\t);\n\t\t} else {\n\t\t\t$link = __( 'https://wordpress.org/plugins/woocommerce/', 'web-stories' );\n\t\t}\n\n\t\treturn [\n\t\t\t'installed' => $is_active || $is_installed,\n\t\t\t'active' => $is_active,\n\t\t\t'canManage' => $can_manage,\n\t\t\t'link' => $link,\n\t\t];\n\t}\n\n\t/**\n\t * Determines whether WooCommerce is active.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return bool Whether WooCommerce is active.\n\t */\n\tprotected function is_plugin_active(): bool {\n\t\treturn class_exists( 'WooCommerce', false );\n\t}\n}\n" }, { "path": "includes/Interfaces/Field.php", "content": ", has_next_page: bool}|WP_Error\n\t */\n\tpublic function get_search( string $search_term, int $page = 1, int $per_page = 100, string $orderby = 'date', string $order = 'desc' );\n}\n" }, { "path": "includes/Interfaces/Renderer.php", "content": " $args Array of rendering related arguments.\n\t * @return string Rendering markup.\n\t */\n\tpublic function render( array $args = [] ): string;\n\n\t/**\n\t * Render a single story markup.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return mixed\n\t */\n\tpublic function render_single_story_content();\n}\n" }, { "path": "includes/KSES.php", "content": "story_post_type = $story_post_type;\n\t\t$this->page_template_post_type = $page_template_post_type;\n\t}\n\n\t/**\n\t * Initializes KSES filters for stories.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'wp_insert_post_data', [ $this, 'filter_insert_post_data' ], 10, 3 );\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type', 'page_template_post_type' ];\n\t}\n\n\t/**\n\t * Filters slashed post data just before it is inserted into the database.\n\t *\n\t * Used to run story HTML markup through full AMP sanitization instead of just KSES.\n\t *\n\t * This allows storing full, valid AMP HTML documents in post_content for stories, which require\n\t * more allowed HTML tags.\n\t *\n\t * @since 1.8.0\n\t *\n\t * @param mixed $data An array of slashed, sanitized, and processed post data.\n\t * @param mixed $postarr An array of sanitized (and slashed) but otherwise unmodified post data.\n\t * @param mixed $unsanitized_postarr An array of slashed yet *unsanitized* and unprocessed post data as\n\t * originally passed to wp_insert_post().\n\t * @return array|mixed Filtered post data.\n\t *\n\t * @phpstan-param PostData|mixed $data\n\t * @phpstan-param PostData|mixed $unsanitized_postarr\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($data is array ? array : mixed)\n\t */\n\tpublic function filter_insert_post_data( $data, $postarr, $unsanitized_postarr ) {\n\t\tif ( current_user_can( 'unfiltered_html' ) ) {\n\t\t\treturn $data;\n\t\t}\n\n\t\tif ( ! \\is_array( $data ) || ! \\is_array( $postarr ) || ! \\is_array( $unsanitized_postarr ) ) {\n\t\t\treturn $data;\n\t\t}\n\n\t\tif (\n\t\t\t! \\is_string( $data['post_type'] ) ||\n\t\t\t// @phpstan-ignore argument.type\n\t\t\t! $this->is_allowed_post_type( $data['post_type'], $data['post_parent'] )\n\t\t) {\n\t\t\treturn $data;\n\t\t}\n\n\t\tif (\n\t\t\tisset( $unsanitized_postarr['post_content_filtered'] ) &&\n\t\t\t\\is_string( $unsanitized_postarr['post_content_filtered'] )\n\t\t) {\n\t\t\t$data['post_content_filtered'] = $this->filter_story_data( $unsanitized_postarr['post_content_filtered'] );\n\t\t}\n\n\t\tif ( isset( $unsanitized_postarr['post_content'] ) ) {\n\t\t\t// @phpstan-ignore argument.type\n\t\t\t$data['post_content'] = wp_slash( $this->sanitize_content( wp_unslash( $unsanitized_postarr['post_content'] ) ) );\n\t\t}\n\n\t\treturn $data;\n\t}\n\n\t/**\n\t * Sanitizes post content.\n\t *\n\t * @since 1.37.0\n\t *\n\t * @param string $content Unsanitized post content.\n\t */\n\tprivate function sanitize_content( string $content ): string {\n\t\t$dom = Document::fromHtml( $content );\n\t\tif ( $dom instanceof Document ) {\n\t\t\t$sanitizers = $this->get_sanitizers();\n\t\t\tAMP_Content_Sanitizer::sanitize_document( $dom, $sanitizers, [] );\n\t\t\treturn trim( $dom->saveHTML() );\n\t\t}\n\n\t\treturn '';\n\t}\n\n\t/**\n\t * Returns a list of sanitizers to use.\n\t *\n\t * This is replica of the Sanitization class implementation\n\t * to have a minimal AMP sanitization for user-provided input.\n\t *\n\t * @since 1.37.0\n\t *\n\t * @see Sanitization\n\t *\n\t * @return array> Sanitizers.\n\t */\n\tprivate function get_sanitizers(): array {\n\t\t$sanitizers = [\n\t\t\tAMP_Script_Sanitizer::class => [\n\t\t\t\t'sanitize_js_scripts' => true,\n\t\t\t],\n\t\t\tMeta_Sanitizer::class => [],\n\t\t\tTag_And_Attribute_Sanitizer::class => [],\n\t\t];\n\n\t\tforeach ( $sanitizers as &$sanitizer ) {\n\t\t\t$sanitizer['validation_error_callback'] = static fn( array $error, array $data = [] ): bool => apply_filters( 'web_stories_amp_validation_error_sanitized', true, $error ); // phpcs:ignore Generic.CodeAnalysis.UnusedFunctionParameter.FoundAfterLastUsed\n\t\t}\n\n\t\tunset( $sanitizer );\n\n\t\treturn $sanitizers;\n\t}\n\n\t/**\n\t * Checks whether the post type is correct and user has capability to edit it.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param string $post_type Post type slug.\n\t * @param int|string|null $post_parent Parent post ID.\n\t * @return bool Whether the user can edit the provided post type.\n\t */\n\tprivate function is_allowed_post_type( string $post_type, $post_parent ): bool {\n\t\tif ( $this->story_post_type->get_slug() === $post_type && $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( $this->page_template_post_type->get_slug() === $post_type && $this->page_template_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn true;\n\t\t}\n\n\t\t// For story autosaves.\n\t\tif (\n\t\t\t(\n\t\t\t\t'revision' === $post_type &&\n\t\t\t\t! empty( $post_parent ) &&\n\t\t\t\tget_post_type( (int) $post_parent ) === $this->story_post_type->get_slug()\n\t\t\t) &&\n\t\t\t$this->story_post_type->has_cap( 'edit_posts' )\n\t\t) {\n\t\t\treturn true;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Filters story data.\n\t *\n\t * Provides simple sanity check to ensure story data is valid JSON.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param string $story_data JSON-encoded story data.\n\t * @return string Sanitized & slashed story data.\n\t */\n\tprivate function filter_story_data( string $story_data ): string {\n\t\t$decoded = json_decode( (string) wp_unslash( $story_data ), true );\n\t\treturn null === $decoded ? '' : wp_slash( (string) wp_json_encode( $decoded ) );\n\t}\n}\n" }, { "path": "includes/Locale.php", "content": " Locale settings.\n\t */\n\tpublic function get_locale_settings(): array {\n\t\tglobal $wp_locale;\n\n\t\t/* translators: Date format, see https://www.php.net/manual/en/datetime.format.php */\n\t\t$default_date_format = __( 'd/m/Y', 'web-stories' );\n\n\t\t/* translators: Date format, see https://www.php.net/manual/en/datetime.format.php */\n\t\t$default_time_format = __( 'g:i a', 'web-stories' );\n\n\t\t/**\n\t\t * Date format value.\n\t\t *\n\t\t * @var string $date_format\n\t\t */\n\t\t$date_format = get_option( 'date_format', $default_date_format );\n\t\tif ( empty( trim( $date_format ) ) ) {\n\t\t\t$date_format = $default_date_format;\n\t\t}\n\n\t\t/**\n\t\t * Time format value.\n\t\t *\n\t\t * @var string $time_format\n\t\t */\n\t\t$time_format = get_option( 'time_format', $default_time_format );\n\t\tif ( empty( trim( $time_format ) ) ) {\n\t\t\t$time_format = $default_time_format;\n\t\t}\n\n\t\t/**\n\t\t * Time zone string.\n\t\t *\n\t\t * @var string $timezone_string\n\t\t */\n\t\t$timezone_string = get_option( 'timezone_string', 'UTC' );\n\t\t$timezone_abbr = '';\n\n\t\tif ( ! empty( $timezone_string ) ) {\n\t\t\t$timezone_date = new DateTime( 'now', new DateTimeZone( $timezone_string ) );\n\t\t\t$timezone_abbr = $timezone_date->format( 'T' );\n\t\t}\n\n\t\t/**\n\t\t * Start of week value.\n\t\t *\n\t\t * @var int|string $start_of_week\n\t\t */\n\t\t$start_of_week = get_option( 'start_of_week', 0 );\n\n\t\t/**\n\t\t * GMT Offset.\n\t\t *\n\t\t * @var int $gmt_offset\n\t\t */\n\t\t$gmt_offset = get_option( 'gmt_offset', 0 );\n\n\t\treturn [\n\t\t\t'locale' => str_replace( '_', '-', get_user_locale() ),\n\t\t\t'dateFormat' => $date_format,\n\t\t\t'timeFormat' => $time_format,\n\t\t\t'gmtOffset' => (float) $gmt_offset,\n\t\t\t'timezone' => $timezone_string,\n\t\t\t'timezoneAbbr' => $timezone_abbr,\n\t\t\t'months' => array_values( $wp_locale->month ),\n\t\t\t'monthsShort' => array_values( $wp_locale->month_abbrev ),\n\t\t\t'weekdays' => array_values( $wp_locale->weekday ),\n\t\t\t'weekdaysShort' => array_values( $wp_locale->weekday_abbrev ),\n\t\t\t'weekdaysInitials' => array_values( $wp_locale->weekday_initial ),\n\t\t\t'weekStartsOn' => (int) $start_of_week,\n\t\t];\n\t}\n}\n" }, { "path": "includes/Media/Base_Color.php", "content": "register_meta();\n\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ] );\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.15.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::BASE_COLOR_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'string',\n\t\t\t\t'description' => __( 'Attachment base color', 'web-stories' ),\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'format' => 'hex-color',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed $response;\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t/**\n\t\t * Attachment ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $response['id'];\n\n\t\t$response[ self::BASE_COLOR_POST_META_KEY ] = get_post_meta( $post_id, self::BASE_COLOR_POST_META_KEY, true );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::BASE_COLOR_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Blurhash.php", "content": "register_meta();\n\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ] );\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.16.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::BLURHASH_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'string',\n\t\t\t\t'description' => __( 'Attachment BlurHash', 'web-stories' ),\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed Response data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $response['id'];\n\n\t\t$response[ self::BLURHASH_POST_META_KEY ] = get_post_meta( $post_id, self::BLURHASH_POST_META_KEY, true );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::BLURHASH_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Cropping.php", "content": "register_meta();\n\t\tadd_action( 'delete_attachment', [ $this, 'delete_video' ] );\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::CROPPED_ID_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'absint',\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'description' => __( 'Parent ID if this is a cropped attachment', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => 0,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Deletes associated meta data when a video is deleted.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param int $attachment_id ID of the attachment to be deleted.\n\t */\n\tpublic function delete_video( int $attachment_id ): void {\n\t\tdelete_metadata( 'post', 0, self::CROPPED_ID_POST_META_KEY, $attachment_id, true );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::CROPPED_ID_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Image_Sizes.php", "content": "add_image_sizes();\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ], 10, 2 );\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @param WP_Post $attachment Attachment object.\n\t * @return array|mixed $response;\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response, WP_Post $attachment ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\t\t// See https://github.com/WordPress/wordpress-develop/blob/d28766f8f2ecf2be02c2520cdf0cc3b51deb9e1b/src/wp-includes/rest-api/endpoints/class-wp-rest-attachments-controller.php#L753-L791 .\n\t\t$response['media_details'] = wp_get_attachment_metadata( $attachment->ID );\n\n\t\t// Ensure empty details is an empty object.\n\t\tif ( empty( $response['media_details'] ) ) {\n\t\t\t$response['media_details'] = [];\n\t\t} elseif ( ! empty( $response['media_details']['sizes'] ) ) {\n\t\t\tforeach ( $response['media_details']['sizes'] as $size => &$size_data ) {\n\n\t\t\t\tif ( isset( $size_data['mime-type'] ) ) {\n\t\t\t\t\t$size_data['mime_type'] = $size_data['mime-type'];\n\t\t\t\t\tunset( $size_data['mime-type'] );\n\t\t\t\t}\n\n\t\t\t\t// Use the same method image_downsize() does.\n\t\t\t\t$image = wp_get_attachment_image_src( $attachment->ID, $size );\n\t\t\t\tif ( ! $image ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\t[ $image_src ] = $image;\n\t\t\t\t$size_data['source_url'] = $image_src;\n\t\t\t}\n\n\t\t\t$img_src = wp_get_attachment_image_src( $attachment->ID, 'full' );\n\n\t\t\tif ( $img_src ) {\n\t\t\t\t[ $src, $width, $height ] = $img_src;\n\n\t\t\t\t$response['media_details']['sizes']['full'] = [\n\t\t\t\t\t'file' => wp_basename( $src ),\n\t\t\t\t\t'width' => $width,\n\t\t\t\t\t'height' => $height,\n\t\t\t\t\t'mime_type' => $attachment->post_mime_type,\n\t\t\t\t\t'source_url' => $src,\n\t\t\t\t];\n\t\t\t}\n\t\t} else {\n\t\t\t$response['media_details']['sizes'] = [];\n\t\t}\n\n\n\t\treturn $response;\n\t}\n\n\n\t/**\n\t * Add image sizes.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @link https://amp.dev/documentation/components/amp-story/#poster-guidelines-for-poster-portrait-src-poster-landscape-src-and-poster-square-src.\n\t */\n\tprotected function add_image_sizes(): void {\n\t\t// Used for amp-story[poster-portrait-src]: The story poster in portrait format (3x4 aspect ratio).\n\t\tadd_image_size(\n\t\t\tself::POSTER_PORTRAIT_IMAGE_SIZE,\n\t\t\tself::POSTER_PORTRAIT_IMAGE_DIMENSIONS[0],\n\t\t\tself::POSTER_PORTRAIT_IMAGE_DIMENSIONS[1],\n\t\t\ttrue\n\t\t);\n\n\t\t// As per https://amp.dev/documentation/components/amp-story/#publisher-logo-src-guidelines.\n\t\tadd_image_size(\n\t\t\tself::PUBLISHER_LOGO_IMAGE_SIZE,\n\t\t\tself::PUBLISHER_LOGO_IMAGE_DIMENSIONS[0],\n\t\t\tself::PUBLISHER_LOGO_IMAGE_DIMENSIONS[1],\n\t\t\ttrue\n\t\t);\n\n\t\t// Used in the editor.\n\t\tadd_image_size(\n\t\t\tself::STORY_THUMBNAIL_IMAGE_SIZE,\n\t\t\tself::STORY_THUMBNAIL_IMAGE_DIMENSIONS[0],\n\t\t\tself::STORY_THUMBNAIL_IMAGE_DIMENSIONS[1],\n\t\t\tfalse\n\t\t);\n\t}\n}\n" }, { "path": "includes/Media/Media_Source_Taxonomy.php", "content": "context = $context;\n\t\t$this->taxonomy_slug = 'web_story_media_source';\n\t\t$this->taxonomy_post_type = 'attachment';\n\t}\n\n\t/**\n\t * Init.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_taxonomy();\n\n\t\tadd_action( 'rest_api_init', [ $this, 'rest_api_init' ] );\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ] );\n\n\t\t// Hide video posters from Media grid view.\n\t\tadd_filter( 'ajax_query_attachments_args', [ $this, 'filter_ajax_query_attachments_args' ], PHP_INT_MAX );\n\t\t// Hide video posters from Media list view.\n\t\tadd_action( 'pre_get_posts', [ $this, 'filter_generated_media_attachments' ], PHP_INT_MAX );\n\t\t// Hide video posters from web-stories/v1/media REST API requests.\n\t\tadd_filter( 'web_stories_rest_attachment_query', [ $this, 'filter_rest_generated_media_attachments' ], PHP_INT_MAX );\n\t}\n\n\t/**\n\t * Act on site initialization.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\tparent::on_site_initialization( $site );\n\n\t\t$this->add_missing_terms();\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\tparent::on_plugin_activation( $network_wide );\n\n\t\t$this->add_missing_terms();\n\t}\n\n\t/**\n\t * Returns all defined media source term names.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @return string[] Media sources\n\t */\n\tpublic function get_all_terms(): array {\n\t\t$consts = ( new ReflectionClass( $this ) )->getConstants();\n\n\t\t/**\n\t\t * List of terms.\n\t\t *\n\t\t * @var string[] $terms\n\t\t */\n\t\t$terms = array_values(\n\t\t\tarray_filter(\n\t\t\t\t$consts,\n\t\t\t\tstatic fn( $key ) => str_starts_with( $key, 'TERM_' ),\n\t\t\t\tARRAY_FILTER_USE_KEY\n\t\t\t)\n\t\t);\n\n\t\treturn $terms;\n\t}\n\n\t/**\n\t * Registers additional REST API fields upon API initialization.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function rest_api_init(): void {\n\t\t// Custom field, as built in term update require term id and not slug.\n\t\tregister_rest_field(\n\t\t\t$this->taxonomy_post_type,\n\t\t\tself::MEDIA_SOURCE_KEY,\n\t\t\t[\n\n\t\t\t\t'get_callback' => [ $this, 'get_callback_media_source' ],\n\t\t\t\t'schema' => [\n\t\t\t\t\t'description' => __( 'Media source.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'enum' => $this->get_all_terms(),\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'update_callback' => [ $this, 'update_callback_media_source' ],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed $response Filtered attachment data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t// @phpstan-ignore argument.type (TODO: improve type)\n\t\t$response[ self::MEDIA_SOURCE_KEY ] = $this->get_callback_media_source( $response );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Force media attachment as string instead of the default array.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array $prepared Prepared data before response.\n\t */\n\tpublic function get_callback_media_source( array $prepared ): string {\n\t\t/**\n\t\t * Taxonomy ID.\n\t\t *\n\t\t * @var int $id\n\t\t */\n\t\t$id = $prepared['id'];\n\n\t\t$terms = get_the_terms( $id, $this->taxonomy_slug );\n\t\tif ( \\is_array( $terms ) && ! empty( $terms ) ) {\n\t\t\treturn array_shift( $terms )->slug;\n\t\t}\n\n\t\treturn '';\n\t}\n\n\t/**\n\t * Update rest field callback.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $value Value to update.\n\t * @param WP_Post $post Object to update on.\n\t * @return true|\\WP_Error\n\t */\n\tpublic function update_callback_media_source( string $value, WP_Post $post ) {\n\t\t$check = wp_set_object_terms( $post->ID, $value, $this->taxonomy_slug );\n\t\tif ( is_wp_error( $check ) ) {\n\t\t\treturn $check;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Filters the attachment query args to hide generated video poster images.\n\t *\n\t * Reduces unnecessary noise in the Media grid view.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array|mixed $args Query args.\n\t * @return array|mixed Filtered query args.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($args is array ? array : mixed)\n\t */\n\tpublic function filter_ajax_query_attachments_args( $args ) {\n\t\tif ( ! \\is_array( $args ) ) {\n\t\t\treturn $args;\n\t\t}\n\n\t\t// @phpstan-ignore argument.type (TODO: improve type)\n\t\t$args['tax_query'] = $this->get_exclude_tax_query( $args ); // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\n\t\treturn $args;\n\t}\n\n\t/**\n\t * Filters the current query to hide generated video poster images and source video.\n\t *\n\t * Reduces unnecessary noise in the Media list view.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param WP_Query $query WP_Query instance, passed by reference.\n\t */\n\tpublic function filter_generated_media_attachments( WP_Query $query ): void {\n\t\tif ( is_admin() && $query->is_main_query() && $this->context->is_upload_screen() ) {\n\t\t\t$tax_query = $query->get( 'tax_query' );\n\n\t\t\t$query->set( 'tax_query', $this->get_exclude_tax_query( [ 'tax_query' => $tax_query ] ) ); // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\t\t}\n\t}\n\n\t/**\n\t * Filters the current query to hide generated video poster images.\n\t *\n\t * Reduces unnecessary noise in media REST API requests.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array|mixed $args Query args.\n\t * @return array|mixed Filtered query args.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($args is array ? array : mixed)\n\t */\n\tpublic function filter_rest_generated_media_attachments( $args ) {\n\t\tif ( ! \\is_array( $args ) ) {\n\t\t\treturn $args;\n\t\t}\n\n\t\t// @phpstan-ignore argument.type (TODO: improve type)\n\t\t$args['tax_query'] = $this->get_exclude_tax_query( $args ); // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\n\t\treturn $args;\n\t}\n\n\t/**\n\t * Adds missing terms to the taxonomy.\n\t *\n\t * @since 1.29.0\n\t */\n\tprivate function add_missing_terms(): void {\n\t\t$existing_terms = get_terms(\n\t\t\t[\n\t\t\t\t'taxonomy' => $this->get_taxonomy_slug(),\n\t\t\t\t'hide_empty' => false,\n\t\t\t\t'fields' => 'slugs',\n\t\t\t]\n\t\t);\n\n\t\tif ( is_wp_error( $existing_terms ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$missing_terms = array_diff( $this->get_all_terms(), $existing_terms );\n\n\t\tforeach ( $missing_terms as $term ) {\n\t\t\twp_insert_term( $term, $this->get_taxonomy_slug() );\n\t\t}\n\t}\n\n\t/**\n\t * Taxonomy args.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array Taxonomy args.\n\t *\n\t * @phpstan-return TaxonomyArgs\n\t */\n\tprotected function taxonomy_args(): array {\n\t\treturn [\n\t\t\t'label' => __( 'Source', 'web-stories' ),\n\t\t\t'public' => false,\n\t\t\t'rewrite' => false,\n\t\t\t'hierarchical' => false,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'rest_controller_class' => Stories_Terms_Controller::class,\n\t\t];\n\t}\n\n\t/**\n\t * Returns the tax query needed to exclude generated video poster images and source videos.\n\t *\n\t * @param array $args Existing WP_Query args.\n\t * @return array Tax query arg.\n\t */\n\tprivate function get_exclude_tax_query( array $args ): array {\n\t\t/**\n\t\t * Tax query.\n\t\t *\n\t\t * @var array $tax_query\n\t\t */\n\t\t$tax_query = ! empty( $args['tax_query'] ) ? $args['tax_query'] : [];\n\n\t\t/**\n\t\t * Filter whether generated attachments should be hidden in the media library.\n\t\t *\n\t\t * @since 1.16.0\n\t\t *\n\t\t * @param bool $enabled Whether the taxonomy check should be applied.\n\t\t * @param array $args Existing WP_Query args.\n\t\t */\n\t\t$enabled = apply_filters( 'web_stories_hide_auto_generated_attachments', true, $args );\n\t\tif ( true !== $enabled ) {\n\t\t\treturn $tax_query;\n\t\t}\n\n\t\t/**\n\t\t * Merge with existing tax query if needed,\n\t\t * in a nested way so WordPress will run them\n\t\t * with an 'AND' relation. Example:\n\t\t *\n\t\t * [\n\t\t * 'relation' => 'AND', // implicit.\n\t\t * [ this query ],\n\t\t * [ [ any ], [ existing ], [ tax queries] ]\n\t\t * ]\n\t\t */\n\t\t$new_tax_query = [\n\t\t\t'relation' => 'AND',\n\t\t\t[\n\t\t\t\t'taxonomy' => $this->taxonomy_slug,\n\t\t\t\t'field' => 'slug',\n\t\t\t\t'terms' => [\n\t\t\t\t\tself::TERM_POSTER_GENERATION,\n\t\t\t\t\tself::TERM_SOURCE_VIDEO,\n\t\t\t\t\tself::TERM_SOURCE_IMAGE,\n\t\t\t\t\tself::TERM_PAGE_TEMPLATE,\n\t\t\t\t],\n\t\t\t\t'operator' => 'NOT IN',\n\t\t\t],\n\t\t];\n\n\t\tif ( ! empty( $tax_query ) ) {\n\t\t\t$new_tax_query[] = [ $tax_query ];\n\t\t}\n\n\t\treturn $new_tax_query;\n\t}\n}\n" }, { "path": "includes/Media/SVG.php", "content": "experiments = $experiments;\n\t}\n\n\t/**\n\t * Register filters and actions.\n\t *\n\t * @since 1.3.0\n\t */\n\tpublic function register(): void {\n\t\tif ( ! $this->experiments->is_experiment_enabled( 'enableSVG' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tadd_filter( 'web_stories_allowed_mime_types', [ $this, 'web_stories_allowed_mime_types' ] );\n\n\t\t// Check if svg uploads, already enabled.\n\t\tif ( $this->svg_already_enabled() ) {\n\t\t\tadd_filter( 'mime_types', [ $this, 'mime_types_add_svg' ] );\n\t\t\treturn;\n\t\t}\n\n\t\tadd_filter( 'upload_mimes', [ $this, 'upload_mimes_add_svg' ] ); // phpcs:ignore WordPressVIPMinimum.Hooks.RestrictedHooks.upload_mimes\n\t\tadd_filter( 'mime_types', [ $this, 'mime_types_add_svg' ] );\n\t\tadd_filter( 'wp_handle_upload_prefilter', [ $this, 'wp_handle_upload' ] );\n\t\tadd_filter( 'wp_generate_attachment_metadata', [ $this, 'wp_generate_attachment_metadata' ], 10, 3 );\n\t\tadd_filter( 'wp_check_filetype_and_ext', [ $this, 'wp_check_filetype_and_ext' ], 10, 5 );\n\t\tadd_filter( 'site_option_upload_filetypes', [ $this, 'filter_list_of_allowed_filetypes' ] );\n\t}\n\n\t/**\n\t * Enable SVG upload.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param array $mime_types Mime types keyed by the file extension regex corresponding to those types.\n\t * @return array\n\t */\n\tpublic function upload_mimes_add_svg( array $mime_types ): array {\n\t\t// allow SVG file upload.\n\t\t$mime_types['svg'] = self::MIME_TYPE;\n\t\t$mime_types['svgz'] = self::MIME_TYPE;\n\n\t\treturn $mime_types;\n\t}\n\n\t/**\n\t * Adds SVG to list of mime types and file extensions\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string[] $mime_types Mime types keyed by the file extension regex\n\t * corresponding to those types.\n\t * @return array\n\t */\n\tpublic function mime_types_add_svg( array $mime_types ): array {\n\t\t// allow SVG files.\n\t\t$mime_types['svg'] = self::MIME_TYPE;\n\n\t\treturn array_unique( $mime_types );\n\t}\n\n\t/**\n\t * Add SVG to allowed mime types.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param array $mime_types Associative array of allowed mime types per media type (image, audio, video).\n\t * @return array\n\t */\n\tpublic function web_stories_allowed_mime_types( array $mime_types ): array {\n\t\t$mime_types['vector'][] = self::MIME_TYPE;\n\n\t\treturn $mime_types;\n\t}\n\n\t/**\n\t * Add svg file type to allow file in multisite.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $value List of allowed file types.\n\t * @return string List of allowed file types.\n\t */\n\tpublic function filter_list_of_allowed_filetypes( string $value ): string {\n\t\t$filetypes = explode( ' ', $value );\n\t\tif ( ! \\in_array( self::EXT, $filetypes, true ) ) {\n\t\t\t$filetypes[] = self::EXT;\n\t\t\t$value = implode( ' ', $filetypes );\n\t\t}\n\n\t\treturn $value;\n\t}\n\n\t/**\n\t * Hook into metadata generation and get height and width for SVG file.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param array $metadata An array of attachment meta data.\n\t * @param int $attachment_id Current attachment ID.\n\t * @param string $context Additional context. Can be 'create' when metadata\n\t * was initially created for new attachment.\n\t * @return array Filtered metadata.\n\t */\n\tpublic function wp_generate_attachment_metadata( array $metadata, int $attachment_id, string $context ): array {\n\t\tif ( 'create' !== $context ) {\n\t\t\treturn $metadata;\n\t\t}\n\t\t$attachment = get_post( $attachment_id );\n\t\t$mime_type = get_post_mime_type( $attachment );\n\n\t\tif ( self::MIME_TYPE !== $mime_type ) {\n\t\t\treturn $metadata;\n\t\t}\n\t\t$file = get_attached_file( $attachment_id );\n\t\tif ( false === $file ) {\n\t\t\treturn $metadata;\n\t\t}\n\n\t\t$size = $this->get_svg_size( $file );\n\t\t// Check if image size failed to generate and return if so.\n\t\tif ( is_wp_error( $size ) ) {\n\t\t\treturn $metadata;\n\t\t}\n\n\t\treturn [\n\t\t\t'width' => (int) $size['width'],\n\t\t\t'height' => (int) $size['height'],\n\t\t\t'file' => _wp_relative_upload_path( $file ),\n\t\t\t'filesize' => (int) filesize( $file ),\n\t\t\t'sizes' => [],\n\t\t];\n\t}\n\n\t/**\n\t * Hook into upload and error if size could not be generated.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param array $upload {\n\t * Array of upload data.\n\t *\n\t * @type string $file Filename of the newly-uploaded file.\n\t * @type string $url URL of the newly-uploaded file.\n\t * @type string $type Mime type of the newly-uploaded file.\n\t * @type string $tmp_name Temporary file name.\n\t * }\n\t * @return string[]\n\t *\n\t * @phpstan-param array{file: string, url: string, type: string, tmp_name: string} $upload\n\t */\n\tpublic function wp_handle_upload( array $upload ): array {\n\t\tif ( self::MIME_TYPE !== $upload['type'] ) {\n\t\t\treturn $upload;\n\t\t}\n\n\t\t$sanitized = $this->sanitize( $upload['tmp_name'] );\n\t\tif ( is_wp_error( $sanitized ) ) {\n\t\t\treturn [ 'error' => $sanitized->get_error_message() ];\n\t\t}\n\n\t\t$size = $this->get_svg_size( $upload['tmp_name'] );\n\t\tif ( is_wp_error( $size ) ) {\n\t\t\treturn [ 'error' => $size->get_error_message() ];\n\t\t}\n\n\t\treturn $upload;\n\t}\n\n\t/**\n\t * Work around for incorrect mime type.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param array $wp_check_filetype_and_ext {\n\t * Values for the extension, mime type, and corrected filename.\n\t *\n\t * @type string|false $ext File extension, or false if the file doesn't match a mime type.\n\t * @type string|false $type File mime type, or false if the file doesn't match a mime type.\n\t * @type string|false $proper_filename File name with its correct extension, or false if it cannot be\n\t * determined.\n\t * }\n\t * @param string $file Full path to the file.\n\t * @param string $filename The name of the file (may differ from $file due to\n\t * $file being in a tmp directory).\n\t * @param string[]|null|false $mimes Array of mime types keyed by their file extension regex.\n\t * @param string|bool $real_mime The actual mime type or false if the type cannot be determined.\n\t * @return array{ext?: string, type?: string, proper_filename?: bool}\n\t *\n\t * @phpstan-param array{ext?: string, type?: string, proper_filename?: bool} $wp_check_filetype_and_ext\n\t */\n\tpublic function wp_check_filetype_and_ext( array $wp_check_filetype_and_ext, string $file, string $filename, $mimes, $real_mime ): array {\n\t\tif ( 'image/svg' === $real_mime ) {\n\t\t\t$wp_check_filetype_and_ext = [\n\t\t\t\t'ext' => self::EXT,\n\t\t\t\t'type' => self::MIME_TYPE,\n\t\t\t\t'proper_filename' => false,\n\t\t\t];\n\t\t}\n\n\t\treturn $wp_check_filetype_and_ext;\n\t}\n\n\t/**\n\t * Helper function to check if svg uploads are already enabled.\n\t *\n\t * @since 1.3.0\n\t */\n\tprivate function svg_already_enabled(): bool {\n\t\t$allowed_mime_types = get_allowed_mime_types();\n\t\t$mime_types = array_values( $allowed_mime_types );\n\n\t\treturn \\in_array( self::MIME_TYPE, $mime_types, true );\n\t}\n\n\n\t/**\n\t * Get SVG image size.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $file Path to SVG file.\n\t * @return array|WP_Error\n\t *\n\t * @phpstan-return array{width: int, height: int}|WP_Error\n\t */\n\tprotected function get_svg_size( string $file ) {\n\t\t$svg = $this->get_svg_data( $file );\n\t\t$xml = $this->get_xml( $svg );\n\n\t\tif ( false === $xml ) {\n\t\t\treturn new \\WP_Error( 'invalid_xml_svg', __( 'Invalid XML in SVG.', 'web-stories' ) );\n\t\t}\n\n\t\t$width = (int) $xml->getAttribute( 'width' );\n\t\t$height = (int) $xml->getAttribute( 'height' );\n\n\t\t// If height and width are not set, try the viewport attribute.\n\t\tif ( ! $width || ! $height ) {\n\t\t\t$view_box = $xml->getAttribute( 'viewBox' );\n\t\t\tif ( empty( $view_box ) ) {\n\t\t\t\t$view_box = $xml->getAttribute( 'viewbox' );\n\t\t\t}\n\t\t\t$pieces = explode( ' ', $view_box );\n\t\t\tif ( 4 === \\count( $pieces ) ) {\n\t\t\t\t[, , $width, $height] = $pieces;\n\t\t\t}\n\t\t}\n\n\t\tif ( ! $width || ! $height ) {\n\t\t\treturn new \\WP_Error( 'invalid_svg_size', __( 'Unable to generate SVG image size.', 'web-stories' ) );\n\t\t}\n\n\t\treturn array_map( 'absint', compact( 'width', 'height' ) );\n\t}\n\n\t/**\n\t * Sanitize the SVG\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $file File path.\n\t * @return true|WP_Error\n\t */\n\tprotected function sanitize( string $file ) {\n\t\t$dirty = $this->get_svg_data( $file );\n\t\t$sanitizer = new Sanitizer();\n\t\t$clean = $sanitizer->sanitize( $dirty );\n\n\t\tif ( empty( $clean ) ) {\n\t\t\treturn new \\WP_Error( 'invalid_xml_svg', __( 'Invalid XML in SVG.', 'web-stories' ) );\n\t\t}\n\n\t\t$errors = $sanitizer->getXmlIssues();\n\t\tif ( \\count( $errors ) > 1 ) {\n\t\t\treturn new \\WP_Error( 'insecure_svg_file', __( \"Sorry, this file couldn't be sanitized so for security reasons wasn't uploaded.\", 'web-stories' ) );\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Get xml document.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $svg String of xml.\n\t * @return DOMElement|false\n\t */\n\tprotected function get_xml( string $svg ) {\n\t\t$dom = new DOMDocument();\n\t\t$dom->preserveWhiteSpace = false;\n\t\t$dom->strictErrorChecking = false;\n\n\t\t$errors = libxml_use_internal_errors( true );\n\t\t$loaded = $dom->loadXML( $svg );\n\t\tif ( ! $loaded ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$node = $dom->getElementsByTagName( 'svg' )->item( 0 );\n\n\t\tlibxml_clear_errors();\n\t\tlibxml_use_internal_errors( $errors );\n\n\t\tif ( ! $node ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $node;\n\t}\n\n\t/**\n\t * Get SVG data.\n\t *\n\t * @since 1.3.0\n\t *\n\t * @param string $file File path.\n\t * @return string File contents.\n\t */\n\tprotected function get_svg_data( string $file ): string {\n\t\t$key = md5( $file );\n\t\tif ( ! isset( $this->svgs[ $key ] ) ) {\n\t\t\tif ( is_readable( $file ) ) {\n\t\t\t\t$this->svgs[ $key ] = (string) file_get_contents( $file ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown\n\t\t\t} else {\n\t\t\t\t$this->svgs[ $key ] = '';\n\t\t\t}\n\t\t}\n\n\t\treturn $this->svgs[ $key ];\n\t}\n}\n" }, { "path": "includes/Media/Types.php", "content": " $mime ) {\n\t\t\tif ( \\in_array( $mime, $mime_types, true ) ) {\n\t\t\t\tarray_push( $allowed_file_types, ...explode( '|', $ext ) );\n\t\t\t}\n\t\t}\n\t\tsort( $allowed_file_types );\n\n\t\treturn $allowed_file_types;\n\t}\n\n\t/**\n\t * Returns a list of allowed mime types per media type (image, audio, video).\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array List of allowed mime types.\n\t */\n\tpublic function get_allowed_mime_types(): array {\n\t\t$default_allowed_mime_types = [\n\t\t\t'image' => [\n\t\t\t\t'image/webp',\n\t\t\t\t'image/png',\n\t\t\t\t'image/jpeg',\n\t\t\t\t'image/jpg',\n\t\t\t\t'image/gif',\n\t\t\t\t'image/avif',\n\t\t\t],\n\t\t\t'audio' => [\n\t\t\t\t'audio/mpeg',\n\t\t\t\t'audio/aac',\n\t\t\t\t'audio/wav',\n\t\t\t\t'audio/ogg',\n\t\t\t],\n\t\t\t'caption' => [ 'text/vtt' ],\n\t\t\t'vector' => [],\n\t\t\t'video' => [\n\t\t\t\t'video/mp4',\n\t\t\t\t'video/webm',\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filter list of allowed mime types.\n\t\t *\n\t\t * This can be used to add additionally supported formats, for example by plugins\n\t\t * that do video transcoding.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $default_allowed_mime_types Associative array of allowed mime types per media type (image, audio, video).\n\t\t */\n\t\t$allowed_mime_types = apply_filters( 'web_stories_allowed_mime_types', $default_allowed_mime_types );\n\n\t\t/**\n\t\t * Media type.\n\t\t *\n\t\t * @var string $media_type\n\t\t */\n\t\tforeach ( array_keys( $default_allowed_mime_types ) as $media_type ) {\n\t\t\tif ( ! isset( $allowed_mime_types[ $media_type ] ) || empty( $allowed_mime_types[ $media_type ] ) ) {\n\t\t\t\t$allowed_mime_types[ $media_type ] = $default_allowed_mime_types[ $media_type ];\n\t\t\t}\n\n\t\t\t// Only add currently supported mime types.\n\t\t\t$allowed_mime_types[ $media_type ] = array_values( array_intersect( $allowed_mime_types[ $media_type ], get_allowed_mime_types() ) );\n\t\t}\n\n\t\treturn $allowed_mime_types;\n\t}\n}\n" }, { "path": "includes/Media/Video/Captions.php", "content": "register_meta();\n\t}\n\n\t/**\n\t * Register post meta\n\t *\n\t * @since 1.23.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_post_meta(\n\t\t\t'attachment',\n\t\t\tself::IS_GIF_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'rest_sanitize_boolean',\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'description' => __( 'Whether the video is to be considered a GIF', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => false,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.23.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed Response data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $response['id'];\n\n\t\t$response[ self::IS_GIF_POST_META_KEY ] = get_post_meta( $post_id, self::IS_GIF_POST_META_KEY, true );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::IS_GIF_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Video/Muting.php", "content": "register_meta();\n\n\t\tadd_action( 'delete_attachment', [ $this, 'delete_video' ] );\n\t\tadd_action( 'rest_api_init', [ $this, 'rest_api_init' ] );\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ] );\n\t}\n\n\t/**\n\t * Register meta for attachment post type.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::IS_MUTED_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'description' => __( 'Whether the video is muted', 'web-stories' ),\n\t\t\t\t'default' => false,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::MUTED_ID_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'absint',\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'description' => __( 'ID of muted video.', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => 0,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Registers additional REST API fields upon API initialization.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function rest_api_init(): void {\n\t\tregister_rest_field(\n\t\t\t'attachment',\n\t\t\tself::IS_MUTED_REST_API_KEY,\n\t\t\t[\n\t\t\t\t'get_callback' => [ $this, 'get_callback_is_muted' ],\n\t\t\t\t'schema' => [\n\t\t\t\t\t'type' => [ 'boolean', 'null' ],\n\t\t\t\t\t'description' => __( 'Whether the video is muted', 'web-stories' ),\n\t\t\t\t\t'default' => null,\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'arg_options' => [\n\t\t\t\t\t\t'sanitize_callback' => 'rest_sanitize_boolean',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'update_callback' => [ $this, 'update_callback_is_muted' ],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed Response data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\t\tif ( 'video' === $response['type'] ) {\n\t\t\t// @phpstan-ignore argument.type\n\t\t\t$response[ self::IS_MUTED_REST_API_KEY ] = $this->get_callback_is_muted( $response );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Get the attachment's post meta.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array $prepared Array of data to add to.\n\t */\n\tpublic function get_callback_is_muted( array $prepared ): ?bool {\n\t\t/**\n\t\t * Attachment ID.\n\t\t *\n\t\t * @var int $id\n\t\t */\n\t\t$id = $prepared['id'];\n\n\t\t/**\n\t\t * Muted value.\n\t\t *\n\t\t * @var bool|null $value\n\t\t */\n\t\t$value = get_metadata_raw( 'post', $id, self::IS_MUTED_POST_META_KEY, true );\n\n\t\tif ( null === $value ) {\n\t\t\treturn $value;\n\t\t}\n\n\t\treturn rest_sanitize_boolean( $value );\n\t}\n\n\t/**\n\t * Update the attachment's post meta.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param mixed $value Value to updated.\n\t * @param WP_Post $post Post object to be updated.\n\t * @return true|WP_Error\n\t */\n\tpublic function update_callback_is_muted( $value, WP_Post $post ) {\n\t\t$object_id = $post->ID;\n\t\t$name = self::IS_MUTED_REST_API_KEY;\n\t\t$meta_key = self::IS_MUTED_POST_META_KEY;\n\n\t\tif ( ! current_user_can( 'edit_post_meta', $object_id, $meta_key ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_cannot_update',\n\t\t\t\t/* translators: %s: Custom field key.**/\n\t\t\t\t\\sprintf( __( 'Sorry, you are not allowed to edit the %s custom field.', 'web-stories' ), $name ),\n\t\t\t\t[\n\t\t\t\t\t'key' => $name,\n\t\t\t\t\t'status' => rest_authorization_required_code(),\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\n\t\tupdate_post_meta( $object_id, $meta_key, $value );\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Deletes associated meta data when a video is deleted.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param int $attachment_id ID of the attachment to be deleted.\n\t */\n\tpublic function delete_video( int $attachment_id ): void {\n\t\tdelete_metadata( 'post', 0, self::MUTED_ID_POST_META_KEY, $attachment_id, true );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::MUTED_ID_POST_META_KEY );\n\t\tdelete_post_meta_by_key( self::IS_MUTED_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Video/Optimization.php", "content": "register_meta();\n\t\tadd_action( 'delete_attachment', [ $this, 'delete_video' ] );\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.15.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::OPTIMIZED_ID_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'absint',\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'description' => __( 'ID of optimized video.', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => 0,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Deletes associated meta data when a video is deleted.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param int $attachment_id ID of the attachment to be deleted.\n\t */\n\tpublic function delete_video( int $attachment_id ): void {\n\t\tdelete_metadata( 'post', 0, self::OPTIMIZED_ID_POST_META_KEY, $attachment_id, true );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::OPTIMIZED_ID_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Media/Video/Poster.php", "content": "media_source_taxonomy = $media_source_taxonomy;\n\t}\n\n\t/**\n\t * Init.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_meta();\n\t\tadd_action( 'rest_api_init', [ $this, 'rest_api_init' ] );\n\t\tadd_action( 'delete_attachment', [ $this, 'delete_video_poster' ] );\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ], 10, 2 );\n\t}\n\n\t/**\n\t * Register meta for attachment post type.\n\t *\n\t * @since 1.10.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::POSTER_ID_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'absint',\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'description' => __( 'Attachment id of generated poster image.', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => 0,\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Registers additional REST API fields upon API initialization.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function rest_api_init(): void {\n\t\tregister_rest_field(\n\t\t\t'attachment',\n\t\t\t'featured_media',\n\t\t\t[\n\t\t\t\t'schema' => [\n\t\t\t\t\t'description' => __( 'The ID of the featured media for the object.', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\tregister_rest_field(\n\t\t\t'attachment',\n\t\t\t'featured_media_src',\n\t\t\t[\n\t\t\t\t'get_callback' => [ $this, 'get_callback_featured_media_src' ],\n\t\t\t\t'schema' => [\n\t\t\t\t\t'description' => __( 'URL, width and height.', 'web-stories' ),\n\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t'src' => [\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'width' => [\n\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'height' => [\n\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'generated' => [\n\t\t\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Get attachment source for featured media.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array $prepared Prepared data before response.\n\t * @return array\n\t */\n\tpublic function get_callback_featured_media_src( array $prepared ): array {\n\t\t/**\n\t\t * Featured media ID.\n\t\t *\n\t\t * @var int|null $id\n\t\t */\n\t\t$id = $prepared['featured_media'] ?? null;\n\t\t$image = [];\n\t\tif ( $id ) {\n\t\t\t$image = $this->get_thumbnail_data( $id );\n\t\t}\n\n\t\treturn $image;\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @param WP_Post $attachment Attachment object.\n\t * @return array|mixed $response\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response, WP_Post $attachment ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\t\tif ( 'video' === $response['type'] ) {\n\t\t\t$thumbnail_id = (int) get_post_thumbnail_id( $attachment );\n\t\t\t$image = '';\n\t\t\tif ( 0 !== $thumbnail_id ) {\n\t\t\t\t$image = $this->get_thumbnail_data( $thumbnail_id );\n\t\t\t}\n\n\t\t\t$response['featured_media'] = $thumbnail_id;\n\t\t\t$response['featured_media_src'] = $image;\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Get poster image data.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param int $thumbnail_id Attachment ID.\n\t * @return array{src?: string, width?: int, height?: int, generated?: bool}\n\t */\n\tpublic function get_thumbnail_data( int $thumbnail_id ): array {\n\t\t$img_src = wp_get_attachment_image_src( $thumbnail_id, 'full' );\n\n\t\tif ( ! $img_src ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t[ $src, $width, $height ] = $img_src;\n\t\t$generated = $this->is_poster( $thumbnail_id );\n\t\treturn compact( 'src', 'width', 'height', 'generated' );\n\t}\n\n\t/**\n\t * Deletes associated poster image when a video is deleted.\n\t *\n\t * This prevents the poster image from becoming an orphan because it is not\n\t * displayed anywhere in WordPress or the story editor.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param int $attachment_id ID of the attachment to be deleted.\n\t */\n\tpublic function delete_video_poster( int $attachment_id ): void {\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int|string $post_id\n\t\t */\n\t\t$post_id = get_post_meta( $attachment_id, self::POSTER_ID_POST_META_KEY, true );\n\n\t\tif ( empty( $post_id ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Used in favor of slow meta queries.\n\t\t$is_poster = $this->is_poster( (int) $post_id );\n\t\tif ( $is_poster ) {\n\t\t\twp_delete_attachment( (int) $post_id, true );\n\t\t}\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::POSTER_ID_POST_META_KEY );\n\t\tdelete_post_meta_by_key( self::POSTER_POST_META_KEY );\n\t}\n\n\t/**\n\t * Helper util to check if attachment is a poster.\n\t *\n\t * @since 1.2.1\n\t *\n\t * @param int $post_id Attachment ID.\n\t */\n\tprotected function is_poster( int $post_id ): bool {\n\t\t$terms = get_the_terms( $post_id, $this->media_source_taxonomy->get_taxonomy_slug() );\n\t\tif ( \\is_array( $terms ) && ! empty( $terms ) ) {\n\t\t\t$slugs = wp_list_pluck( $terms, 'slug' );\n\n\t\t\treturn \\in_array( $this->media_source_taxonomy::TERM_POSTER_GENERATION, $slugs, true );\n\t\t}\n\n\t\treturn false;\n\t}\n}\n" }, { "path": "includes/Media/Video/Trimming.php", "content": "register_meta();\n\n\t\tadd_filter( 'wp_prepare_attachment_for_js', [ $this, 'wp_prepare_attachment_for_js' ] );\n\t}\n\n\t/**\n\t * Register meta for attachment post type.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'post',\n\t\t\tself::TRIM_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'object',\n\t\t\t\t'description' => __( 'Video trim data.', 'web-stories' ),\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t\t'original' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Original attachment id', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'start' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Start time.', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'end' => [\n\t\t\t\t\t\t\t\t'description' => __( 'End time.', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'default' => [\n\t\t\t\t\t'original' => 0,\n\t\t\t\t],\n\t\t\t\t'single' => true,\n\t\t\t\t'object_subtype' => 'attachment',\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the attachment data prepared for JavaScript.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param array|mixed $response Array of prepared attachment data.\n\t * @return array|mixed Response data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($response is array ? array : mixed)\n\t */\n\tpublic function wp_prepare_attachment_for_js( $response ) {\n\t\tif ( ! \\is_array( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\t\tif ( 'video' === $response['type'] ) {\n\t\t\t/**\n\t\t\t * Post ID.\n\t\t\t *\n\t\t\t * @var int $post_id\n\t\t\t */\n\t\t\t$post_id = $response['id'];\n\n\t\t\t$response[ self::TRIM_DATA_KEY ] = get_post_meta( $post_id, self::TRIM_POST_META_KEY, true );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::TRIM_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Mgid.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Initializes all hooks.\n\t *\n\t * @since 1.33.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'web_stories_print_analytics', [ $this, 'print_mgid_tag' ] );\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because settings needs to be registered first.\n\t *\n\t * @since 1.33.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings' ];\n\t}\n\n\t/**\n\t * Prints the tag for single stories.\n\t *\n\t * @since 1.33.0\n\t */\n\tpublic function print_mgid_tag(): void {\n\t\t$widget = $this->get_widget_id();\n\t\t$enabled = $this->is_enabled();\n\n\t\tif ( ! $enabled || ! $widget ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$configuration = [\n\t\t\t'ad-attributes' => [\n\t\t\t\t'type' => 'mgid',\n\t\t\t\t'data-widget' => $widget,\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filters MGID configuration passed to ``.\n\t\t *\n\t\t * @since 1.33.0\n\t\t *\n\t\t * @param array $settings MGID configuration.\n\t\t * @param string $widget MGID Widget ID.\n\t\t */\n\t\t$configuration = apply_filters( 'web_stories_mgid_configuration', $configuration, $widget );\n\n\t\t?>\n\t\t\n\t\t\t\n\t\t\n\t\tsettings->get_setting( $this->settings::SETTING_NAME_MGID_WIDGET_ID );\n\t}\n\n\t/**\n\t * Returns if MGID is enabled.\n\t *\n\t * @since 1.33.0\n\t */\n\tprivate function is_enabled(): bool {\n\t\treturn ( 'mgid' === $this->settings->get_setting( $this->settings::SETTING_NAME_AD_NETWORK, 'none' ) );\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source.php", "content": "media_source_taxonomy = $media_source_taxonomy;\n\t}\n\n\t/**\n\t * Add the editor term, to make sure it exists.\n\t *\n\t * @since 1.9.0\n\t */\n\tpublic function migrate(): void {\n\t\twp_insert_term( $this->get_term(), $this->media_source_taxonomy->get_taxonomy_slug() );\n\t}\n\n\t/**\n\t * Override this method.\n\t *\n\t * @since 1.9.0\n\t */\n\tabstract protected function get_term(): string;\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Editor.php", "content": "media_source_taxonomy::TERM_EDITOR;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Gif_Conversion.php", "content": "media_source_taxonomy::TERM_GIF_CONVERSION;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Page_Template.php", "content": "media_source_taxonomy::TERM_PAGE_TEMPLATE;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Recording.php", "content": "media_source_taxonomy::TERM_RECORDING;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Source_Image.php", "content": "media_source_taxonomy::TERM_SOURCE_IMAGE;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Source_Video.php", "content": "media_source_taxonomy::TERM_SOURCE_VIDEO;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Media_Source_Video_Optimization.php", "content": "media_source_taxonomy::TERM_VIDEO_OPTIMIZATION;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Poster_Generation_Media_Source.php", "content": "get_term_name(), $this->media_source_taxonomy->get_taxonomy_slug() );\n\t\tparent::migrate();\n\t}\n\n\t/**\n\t * Get name of meta key to be used in migration.\n\t *\n\t * @since 1.7.2\n\t */\n\tprotected function get_post_meta_key(): string {\n\t\treturn Poster::POSTER_POST_META_KEY;\n\t}\n}\n" }, { "path": "includes/Migrations/Add_Stories_Caps.php", "content": "capabilities = $capabilities;\n\t}\n\n\t/**\n\t * Adds story capabilities to default user roles.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function migrate(): void {\n\t\t$this->capabilities->add_caps_to_roles();\n\t}\n}\n" }, { "path": "includes/Migrations/Add_VideoPress_Poster_Generation_Media_Source.php", "content": "media_source_taxonomy = $media_source_taxonomy;\n\t}\n\n\t/**\n\t * Migration media post meta to taxonomy term.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @global \\wpdb $wpdb WordPress database abstraction object.\n\t */\n\tpublic function migrate(): void {\n\t\tglobal $wpdb;\n\n\t\t$post_ids = $wpdb->get_col( // phpcs:ignore WordPress.DB.DirectDatabaseQuery\n\t\t\t$wpdb->prepare(\n\t\t\t\t\"SELECT post_id FROM $wpdb->postmeta WHERE meta_key = %s\",\n\t\t\t\t$this->get_post_meta_key()\n\t\t\t)\n\t\t);\n\n\t\tif ( \\is_array( $post_ids ) && ! empty( $post_ids ) ) {\n\t\t\t/**\n\t\t\t * Post ID.\n\t\t\t *\n\t\t\t * @var int|string $post_id\n\t\t\t */\n\t\t\tforeach ( $post_ids as $post_id ) {\n\t\t\t\twp_set_object_terms( (int) $post_id, $this->get_term_name(), $this->media_source_taxonomy->get_taxonomy_slug() );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Get name of meta key to be used in migration.\n\t * This method is designed for overridden.\n\t *\n\t * @since 1.7.2\n\t */\n\tabstract protected function get_post_meta_key(): string;\n\n\t/**\n\t * Get name of term to be used in migration.\n\t * This method is designed for overridden.\n\t *\n\t * @since 1.7.2\n\t */\n\tprotected function get_term_name(): string {\n\t\treturn $this->media_source_taxonomy::TERM_POSTER_GENERATION;\n\t}\n}\n" }, { "path": "includes/Migrations/Remove_Broken_Text_Styles.php", "content": ",\n * textColors: mixed,\n * }\n */\nclass Remove_Broken_Text_Styles extends Migrate_Base {\n\t/**\n\t * Removes broken text styles (with color.r|g|b structure).\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function migrate(): void {\n\t\t/**\n\t\t * List of style presets.\n\t\t *\n\t\t * @phpstan-var StylePresets|false\n\t\t */\n\t\t$style_presets = get_option( Story_Post_Type::STYLE_PRESETS_OPTION, false );\n\n\t\t// Nothing to do if style presets don't exist.\n\t\tif ( ! \\is_array( $style_presets ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$text_styles = [];\n\t\tif ( ! empty( $style_presets['textStyles'] ) ) {\n\t\t\tforeach ( $style_presets['textStyles'] as $preset ) {\n\t\t\t\tif ( isset( $preset['color']['r'] ) ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t$text_styles[] = $preset;\n\t\t\t}\n\t\t}\n\n\t\t$updated_style_presets = [\n\t\t\t'fillColors' => $style_presets['fillColors'],\n\t\t\t'textColors' => $style_presets['textColors'],\n\t\t\t'textStyles' => $text_styles,\n\t\t];\n\t\tupdate_option( Story_Post_Type::STYLE_PRESETS_OPTION, $updated_style_presets );\n\t}\n}\n" }, { "path": "includes/Migrations/Remove_Incorrect_Tracking_Id.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Remove incorrect tracking ID.\n\t *\n\t * @since 1.30.0\n\t */\n\tpublic function migrate(): void {\n\t\t$tracking_id = $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_ID );\n\n\t\tif ( Tracking::TRACKING_ID === $tracking_id ) {\n\t\t\t$this->settings->update_setting(\n\t\t\t\t$this->settings::SETTING_NAME_TRACKING_ID,\n\t\t\t\t''\n\t\t\t);\n\t\t}\n\t}\n}\n" }, { "path": "includes/Migrations/Remove_Unneeded_Attachment_Meta.php", "content": ",\n * textColors: mixed,\n * }\n */\nclass Replace_Conic_Style_Presets extends Migrate_Base {\n\t/**\n\t * Replaces conic color type with linear.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function migrate(): void {\n\t\t/**\n\t\t * List of style presets.\n\t\t *\n\t\t * @var array|null $style_presets\n\t\t * @phpstan-var StylePresets|null $style_presets\n\t\t */\n\t\t$style_presets = get_option( Story_Post_Type::STYLE_PRESETS_OPTION, false );\n\n\t\t// Nothing to do if style presets don't exist.\n\t\tif ( ! \\is_array( $style_presets ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$fill_colors = [];\n\t\t$text_styles = [];\n\t\tif ( ! empty( $style_presets['fillColors'] ) ) {\n\t\t\tforeach ( $style_presets['fillColors'] as $color ) {\n\t\t\t\tif ( ! isset( $color['type'] ) || 'conic' !== $color['type'] ) {\n\t\t\t\t\t$text_styles[] = $color;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t$updated_preset = $color;\n\t\t\t\t$updated_preset['type'] = 'linear';\n\t\t\t\t$fill_colors[] = $updated_preset;\n\t\t\t}\n\t\t}\n\n\t\tif ( ! empty( $style_presets['textStyles'] ) ) {\n\t\t\tforeach ( $style_presets['textStyles'] as $preset ) {\n\t\t\t\tif ( empty( $preset['backgroundColor'] ) ) {\n\t\t\t\t\t$text_styles[] = $preset;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t$bg_color = $preset['backgroundColor'];\n\t\t\t\tif ( 'conic' !== $bg_color['type'] ) {\n\t\t\t\t\t$text_styles[] = $preset;\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\t\t\t\t$updated_preset = $preset;\n\t\t\t\t$updated_preset['backgroundColor']['type'] = 'linear';\n\t\t\t\t$text_styles[] = $updated_preset;\n\t\t\t}\n\t\t}\n\n\t\t$updated_style_presets = [\n\t\t\t'fillColors' => $fill_colors,\n\t\t\t'textColors' => $style_presets['textColors'],\n\t\t\t'textStyles' => $text_styles,\n\t\t];\n\t\tupdate_option( Story_Post_Type::STYLE_PRESETS_OPTION, $updated_style_presets );\n\t}\n}\n" }, { "path": "includes/Migrations/Rewrite_Flush.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Set legacy analytics usage flag.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function migrate(): void {\n\t\t$this->settings->update_setting(\n\t\t\t$this->settings::SETTING_NAME_USING_LEGACY_ANALYTICS,\n\t\t\t! empty( $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_ID ) )\n\t\t);\n\t}\n}\n" }, { "path": "includes/Migrations/Unify_Color_Presets.php", "content": " $colors,\n\t\t];\n\t\tupdate_option( Story_Post_Type::STYLE_PRESETS_OPTION, $updated_style_presets );\n\t}\n}\n" }, { "path": "includes/Migrations/Update_1.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Split publisher logos into two options.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function migrate(): void {\n\t\t$publisher_logo_id = 0;\n\t\t$publisher_logo_settings = (array) get_option( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, [] );\n\n\t\tif ( ! empty( $publisher_logo_settings['active'] ) ) {\n\t\t\t$publisher_logo_id = $publisher_logo_settings['active'];\n\t\t}\n\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO, $publisher_logo_id );\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, array_filter( [ $publisher_logo_id ] ) );\n\t}\n}\n" }, { "path": "includes/Model/Story.php", "content": " $story Array of attributes.\n\t */\n\tpublic function __construct( array $story = [] ) {\n\t\tforeach ( $story as $key => $value ) {\n\t\t\tif ( property_exists( $this, $key ) ) {\n\t\t\t\t$this->$key = $value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Load story from post.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param int|null|WP_Post $_post Post id or Post object.\n\t */\n\tpublic function load_from_post( $_post ): bool {\n\t\t/**\n\t\t * Filters the publisher's name\n\t\t *\n\t\t * @since 1.7.0\n\t\t *\n\t\t * @param string $name Publisher Name.\n\t\t */\n\t\t$this->publisher_name = apply_filters( 'web_stories_publisher_name', get_bloginfo( 'name' ) );\n\n\t\t$post = get_post( $_post );\n\t\tif ( ! $post instanceof WP_Post ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// At this point we assume being passed a legit web-story post or perhaps a web-story revision.\n\n\t\t$this->id = $post->ID;\n\t\t$this->title = get_the_title( $post );\n\t\t$this->excerpt = $post->post_excerpt;\n\t\t$this->markup = $post->post_content;\n\t\t$this->url = (string) get_permalink( $post );\n\n\t\t$thumbnail_id = (int) get_post_thumbnail_id( $post );\n\n\t\tif ( 0 !== $thumbnail_id ) {\n\t\t\t$poster_src = wp_get_attachment_image_src( $thumbnail_id, Image_Sizes::POSTER_PORTRAIT_IMAGE_DIMENSIONS );\n\n\t\t\tif ( $poster_src ) {\n\t\t\t\t[ $poster_url, $width, $height ] = $poster_src;\n\t\t\t\t$this->poster_portrait = $poster_url;\n\t\t\t\t$this->poster_portrait_size = [ (int) $width, (int) $height ];\n\n\t\t\t\t$image_meta = wp_get_attachment_metadata( $thumbnail_id );\n\t\t\t\tif ( $image_meta ) {\n\t\t\t\t\t$size_array = [ $image_meta['width'], $image_meta['height'] ];\n\t\t\t\t\t$this->poster_sizes = (string) wp_calculate_image_sizes( $size_array, $poster_url, $image_meta, $thumbnail_id );\n\t\t\t\t\t$this->poster_srcset = (string) wp_calculate_image_srcset( $size_array, $poster_url, $image_meta, $thumbnail_id );\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\t/**\n\t\t\t * Poster.\n\t\t\t *\n\t\t\t * @var array{url:string, width: int, height: int}|false $poster\n\t\t\t */\n\t\t\t$poster = get_post_meta( $post->ID, Story_Post_Type::POSTER_META_KEY, true );\n\t\t\tif ( ! empty( $poster ) ) {\n\t\t\t\t$this->poster_portrait = $poster['url'];\n\t\t\t\t$this->poster_portrait_size = [ (int) $poster['width'], (int) $poster['height'] ];\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Publisher logo ID.\n\t\t *\n\t\t * @var string|int $publisher_logo_id\n\t\t */\n\t\t$publisher_logo_id = get_post_meta( $this->id, Story_Post_Type::PUBLISHER_LOGO_META_KEY, true );\n\n\t\tif ( ! empty( $publisher_logo_id ) ) {\n\t\t\t$img_src = wp_get_attachment_image_src( (int) $publisher_logo_id, Image_Sizes::PUBLISHER_LOGO_IMAGE_DIMENSIONS );\n\n\t\t\tif ( $img_src ) {\n\t\t\t\t[ $src, $width, $height ] = $img_src;\n\t\t\t\t$this->publisher_logo_size = [ $width, $height ];\n\t\t\t\t$this->publisher_logo = $src;\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Product data.\n\t\t *\n\t\t * @var ProductData[]|false $products\n\t\t */\n\t\t$products = get_post_meta( $this->id, Product_Meta::PRODUCTS_POST_META_KEY, true );\n\n\t\tif ( \\is_array( $products ) ) {\n\t\t\t$product_objects = [];\n\t\t\tforeach ( $products as $product ) {\n\t\t\t\t$product_objects[] = Product::load_from_array( $product );\n\t\t\t}\n\t\t\t$this->products = $product_objects;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Setter for poster set sizes.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $poster_sizes Poster sizes.\n\t */\n\tpublic function set_poster_sizes( string $poster_sizes ): void {\n\t\t$this->poster_sizes = $poster_sizes;\n\t}\n\n\t/**\n\t * Setter for poster source set.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $poster_srcset Poster source set.\n\t */\n\tpublic function set_poster_srcset( string $poster_srcset ): void {\n\t\t$this->poster_srcset = $poster_srcset;\n\t}\n\n\t/**\n\t * Setter for title.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $title Title.\n\t */\n\tpublic function set_title( string $title ): void {\n\t\t$this->title = $title;\n\t}\n\n\t/**\n\t * Getter for poster source set sizes.\n\t *\n\t * @since 1.18.0\n\t */\n\tpublic function get_poster_sizes(): string {\n\t\treturn $this->poster_sizes;\n\t}\n\n\t/**\n\t * Getter for poster source set.\n\t *\n\t * @since 1.18.0\n\t */\n\tpublic function get_poster_srcset(): string {\n\t\treturn $this->poster_srcset;\n\t}\n\n\t/**\n\t * Getter for title attribute.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function get_title(): string {\n\t\treturn $this->title;\n\t}\n\n\t/**\n\t * Getter for excerpt attribute.\n\t */\n\tpublic function get_excerpt(): string {\n\t\treturn $this->excerpt;\n\t}\n\n\t/**\n\t * Getter for url attribute.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function get_url(): string {\n\t\treturn $this->url;\n\t}\n\n\t/**\n\t * Getter for markup attribute.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function get_markup(): string {\n\t\treturn $this->markup;\n\t}\n\n\t/**\n\t * Getter for poster portrait attribute.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function get_poster_portrait(): string {\n\t\treturn $this->poster_portrait;\n\t}\n\n\t/**\n\t * Get the story ID.\n\t */\n\tpublic function get_id(): int {\n\t\treturn $this->id;\n\t}\n\n\t/**\n\t * Get author of the story.\n\t */\n\tpublic function get_author(): string {\n\t\treturn $this->author;\n\t}\n\n\t/**\n\t * Date for the story.\n\t */\n\tpublic function get_date(): string {\n\t\treturn $this->date;\n\t}\n\n\t/**\n\t * Returns the publisher name.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return string Publisher Name.\n\t */\n\tpublic function get_publisher_name(): string {\n\t\treturn $this->publisher_name;\n\t}\n\n\t/**\n\t * Returns the story's publisher logo URL.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return string|null Publisher logo URL or null if not set.\n\t */\n\tpublic function get_publisher_logo_url(): ?string {\n\t\t/**\n\t\t * Filters the publisher logo URL.\n\t\t *\n\t\t * @since 1.0.0\n\t\t * @since 1.1.0 The second parameter was deprecated.\n\t\t * @since 1.12.0 The second parameter was repurposed to provide the current story ID.\n\t\t *\n\t\t * @param string|null $url Publisher logo URL or null if not set.\n\t\t * @param int|null $id Story ID if available.\n\t\t */\n\t\treturn apply_filters( 'web_stories_publisher_logo', $this->publisher_logo, $this->id );\n\t}\n\n\t/**\n\t * Returns the story's publisher logo size.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array {\n\t * Publisher logo size.\n\t *\n\t * Array of image data, or empty array if no image is available.\n\t *\n\t * @type int $1 Image width in pixels.\n\t * @type int $2 Image height in pixels.\n\t * }\n\t *\n\t * @phpstan-return array{0: int, 1: int}|array{}\n\t */\n\tpublic function get_publisher_logo_size(): array {\n\t\t/**\n\t\t * Filters the publisher logo size.\n\t\t *\n\t\t * @since 1.12.0\n\t\t *\n\t\t * @param array $size {\n\t\t * Publisher logo size.\n\t\t *\n\t\t * Array of image data, or empty array if no image is available.\n\t\t *\n\t\t * @type int $1 Image width in pixels.\n\t\t * @type int $2 Image height in pixels.\n\t\t * }\n\t\t * @param int|null $id Story ID if available.\n\t\t */\n\t\treturn apply_filters( 'web_stories_publisher_logo_size', $this->publisher_logo_size, $this->id );\n\t}\n\n\t/**\n\t * Get poster portrait size.\n\t *\n\t * @since 1.23.0\n\t *\n\t * @return array {\n\t * Poster portrait logo size.\n\t *\n\t * Array of image data, or empty array if no image is available.\n\t *\n\t * @type int $1 Image width in pixels.\n\t * @type int $2 Image height in pixels.\n\t * }\n\t *\n\t * @phpstan-return array{0: int, 1: int}|array{}\n\t */\n\tpublic function get_poster_portrait_size(): array {\n\t\treturn $this->poster_portrait_size;\n\t}\n\n\t/**\n\t * Get product data.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @return Product[]\n\t */\n\tpublic function get_products(): array {\n\t\treturn $this->products;\n\t}\n}\n" }, { "path": "includes/Page_Template_Post_Type.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Init\n\t */\n\tpublic function register(): void {\n\t\tparent::register();\n\n\t\tadd_action( 'delete_post', [ $this, 'delete_poster_image' ] );\n\t}\n\n\t/**\n\t * Get post type slug.\n\t *\n\t * @since 1.14.0\n\t */\n\tpublic function get_slug(): string {\n\t\treturn self::POST_TYPE_SLUG;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Deletes the associated featured image when a page template is deleted.\n\t *\n\t * This prevents the featured image from becoming an orphan because it is not\n\t * displayed anywhere in WordPress or the story editor.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param int $post_id Post ID.\n\t */\n\tpublic function delete_poster_image( int $post_id ): void {\n\t\tif ( get_post_type( $post_id ) !== $this->get_slug() ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$thumbnail_id = get_post_thumbnail_id( $post_id );\n\n\t\tif ( $thumbnail_id ) {\n\t\t\twp_delete_attachment( $thumbnail_id, true );\n\t\t}\n\t}\n\n\t/**\n\t * Registers the post type for page templates.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return array Post type args.\n\t *\n\t * @phpstan-return PostTypeArgs\n\t */\n\tprotected function get_args(): array {\n\t\t/**\n\t\t * The edit_posts capability.\n\t\t *\n\t\t * @var string $edit_posts\n\t\t */\n\t\t$edit_posts = $this->story_post_type->get_cap_name( 'edit_posts' );\n\n\t\t/**\n\t\t * The delete_posts capability.\n\t\t *\n\t\t * @var string $delete_posts\n\t\t */\n\t\t$delete_posts = $this->story_post_type->get_cap_name( 'delete_posts' );\n\n\t\t$capabilities = [\n\t\t\t'edit_post' => $edit_posts,\n\t\t\t'read_post' => $edit_posts,\n\t\t\t'delete_post' => $delete_posts,\n\t\t\t'edit_posts' => $edit_posts,\n\t\t\t'edit_others_posts' => $edit_posts,\n\t\t\t'delete_posts' => $delete_posts,\n\t\t\t'publish_posts' => $edit_posts,\n\t\t\t'read_private_posts' => $edit_posts,\n\t\t\t'delete_private_posts' => $delete_posts,\n\t\t\t'delete_published_posts' => $delete_posts,\n\t\t\t'delete_others_posts' => $delete_posts,\n\t\t\t'edit_private_posts' => $edit_posts,\n\t\t\t'edit_published_posts' => $edit_posts,\n\t\t\t'create_posts' => $edit_posts,\n\t\t];\n\n\t\treturn [\n\t\t\t'labels' => [\n\t\t\t\t'name' => _x( 'Page Templates', 'post type general name', 'web-stories' ),\n\t\t\t\t'singular_name' => _x( 'Page Template', 'post type singular name', 'web-stories' ),\n\t\t\t\t'add_new' => __( 'Add New Page Template', 'web-stories' ),\n\t\t\t\t'add_new_item' => __( 'Add New Page Template', 'web-stories' ),\n\t\t\t\t'edit_item' => __( 'Edit Page Template', 'web-stories' ),\n\t\t\t\t'new_item' => __( 'New Page Template', 'web-stories' ),\n\t\t\t\t'view_item' => __( 'View Page Template', 'web-stories' ),\n\t\t\t\t'view_items' => __( 'View Page Templates', 'web-stories' ),\n\t\t\t\t'search_items' => __( 'Search Page Templates', 'web-stories' ),\n\t\t\t\t'not_found' => __( 'No page templates found.', 'web-stories' ),\n\t\t\t\t'not_found_in_trash' => __( 'No page templates found in Trash.', 'web-stories' ),\n\t\t\t\t'all_items' => __( 'All Page Templates', 'web-stories' ),\n\t\t\t\t'archives' => __( 'Page Template Archives', 'web-stories' ),\n\t\t\t\t'attributes' => __( 'Page Template Attributes', 'web-stories' ),\n\t\t\t\t'insert_into_item' => __( 'Insert into page template', 'web-stories' ),\n\t\t\t\t'uploaded_to_this_item' => __( 'Uploaded to this page template', 'web-stories' ),\n\t\t\t\t'featured_image' => _x( 'Featured Image', 'page template', 'web-stories' ),\n\t\t\t\t'set_featured_image' => _x( 'Set featured image', 'page template', 'web-stories' ),\n\t\t\t\t'remove_featured_image' => _x( 'Remove featured image', 'page template', 'web-stories' ),\n\t\t\t\t'use_featured_image' => _x( 'Use as featured image', 'page template', 'web-stories' ),\n\t\t\t\t'filter_by_date' => __( 'Filter by date', 'web-stories' ),\n\t\t\t\t'filter_items_list' => __( 'Filter page templates list', 'web-stories' ),\n\t\t\t\t'items_list_navigation' => __( 'Page Templates list navigation', 'web-stories' ),\n\t\t\t\t'items_list' => __( 'Page Templates list', 'web-stories' ),\n\t\t\t\t'item_published' => __( 'Page Template published.', 'web-stories' ),\n\t\t\t\t'item_published_privately' => __( 'Page Template published privately.', 'web-stories' ),\n\t\t\t\t'item_reverted_to_draft' => __( 'Page Template reverted to draft.', 'web-stories' ),\n\t\t\t\t'item_scheduled' => __( 'Page Template scheduled', 'web-stories' ),\n\t\t\t\t'item_updated' => __( 'Page Template updated.', 'web-stories' ),\n\t\t\t\t'menu_name' => _x( 'Page Templates', 'admin menu', 'web-stories' ),\n\t\t\t\t'name_admin_bar' => _x( 'Page Template', 'add new on admin bar', 'web-stories' ),\n\t\t\t\t'item_link' => _x( 'Page Template Link', 'navigation link block title', 'web-stories' ),\n\t\t\t\t'item_link_description' => _x( 'A link to a page template.', 'navigation link block description', 'web-stories' ),\n\t\t\t\t'item_trashed' => __( 'Page Template trashed.', 'web-stories' ),\n\t\t\t],\n\t\t\t'supports' => [\n\t\t\t\t'title',\n\t\t\t\t'thumbnail', // Used for preview images in the editor.\n\t\t\t],\n\t\t\t'capabilities' => $capabilities,\n\t\t\t'rewrite' => false,\n\t\t\t'public' => false,\n\t\t\t'show_ui' => false,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'rest_controller_class' => Page_Template_Controller::class,\n\t\t];\n\t}\n}\n" }, { "path": "includes/Plugin.php", "content": " => \n\t * associations.\n\t */\n\tpublic const SERVICES = [\n\t\t'activation_notice' => Admin\\Activation_Notice::class,\n\t\t'admin.google_fonts' => Admin\\Google_Fonts::class,\n\t\t'amp_output_buffer' => Output_Buffer::class,\n\t\t'amp_story_player_assets' => AMP_Story_Player_Assets::class,\n\t\t'adsense' => AdSense::class,\n\t\t'ad_manager' => Ad_Manager::class,\n\t\t'mgid' => Mgid::class,\n\t\t'admin' => Admin\\Admin::class,\n\t\t'analytics' => Analytics::class,\n\t\t'coi' => Admin\\Cross_Origin_Isolation::class,\n\t\t'customizer' => Admin\\Customizer::class,\n\t\t'dashboard' => Admin\\Dashboard::class,\n\t\t'database_upgrader' => Database_Upgrader::class,\n\t\t'discovery' => Discovery::class,\n\t\t'editor' => Admin\\Editor::class,\n\t\t'embed_shortcode' => Shortcode\\Embed_Shortcode::class,\n\t\t'experiments' => Experiments::class,\n\t\t'integrations.amp' => Integrations\\AMP::class,\n\t\t'integrations.ezoic' => Integrations\\Ezoic::class,\n\t\t'integrations.jetpack' => Integrations\\Jetpack::class,\n\t\t'integrations.newrelic' => Integrations\\New_Relic::class,\n\t\t'integrations.nextgen_gallery' => Integrations\\NextGen_Gallery::class,\n\t\t'integrations.cfi' => Integrations\\Conditional_Featured_Image::class,\n\t\t'integrations.sitekit' => Integrations\\Site_Kit::class,\n\t\t'integrations.themes_support' => Integrations\\Core_Themes_Support::class,\n\t\t'integrations.shortpixel' => Integrations\\ShortPixel::class,\n\t\t'kses' => KSES::class,\n\t\t'font_post_type' => Font_Post_Type::class,\n\t\t'page_template_post_type' => Page_Template_Post_Type::class,\n\t\t'plugin_row_meta' => Admin\\PluginRowMeta::class,\n\t\t'plugin_action_links' => Admin\\PluginActionLinks::class,\n\t\t'product_meta' => Shopping\\Product_Meta::class,\n\t\t'media.base_color' => Media\\Base_Color::class,\n\t\t'media.blurhash' => Media\\Blurhash::class,\n\t\t'media.image_sizes' => Media\\Image_Sizes::class,\n\t\t'media.media_source' => Media\\Media_Source_Taxonomy::class,\n\t\t'media.video.captions' => Media\\Video\\Captions::class,\n\t\t'media.cropping' => Media\\Cropping::class,\n\t\t'media.video.muting' => Media\\Video\\Muting::class,\n\t\t'media.video.optimization' => Media\\Video\\Optimization::class,\n\t\t'media.video.poster' => Media\\Video\\Poster::class,\n\t\t'media.video.trimming' => Media\\Video\\Trimming::class,\n\t\t'media.video.is_gif' => Media\\Video\\Is_Gif::class,\n\t\t'meta_boxes' => Admin\\Meta_Boxes::class,\n\t\t'settings' => Settings::class,\n\t\t'site_health' => Admin\\Site_Health::class,\n\t\t'story_archive' => Story_Archive::class,\n\t\t'story_post_type' => Story_Post_Type::class,\n\t\t'story_revisions' => Story_Revisions::class,\n\t\t'story_shortcode' => Shortcode\\Stories_Shortcode::class,\n\t\t'svg' => Media\\SVG::class,\n\t\t'tracking' => Tracking::class,\n\t\t'tinymce' => Admin\\TinyMCE::class,\n\t\t'register.widget' => Register_Widget::class,\n\t\t'renderer.archives' => Renderer\\Archives::class,\n\t\t'renderer.single' => Renderer\\Single::class,\n\t\t'renderer.oembed' => Renderer\\Oembed::class,\n\t\t'renderer.feed' => Renderer\\Feed::class,\n\t\t'user.capabilities' => User\\Capabilities::class,\n\t\t'rest.embed_controller' => REST_API\\Embed_Controller::class,\n\t\t'rest.link_controller' => REST_API\\Link_Controller::class,\n\t\t'rest.hotlinking_controller' => REST_API\\Hotlinking_Controller::class,\n\t\t'rest.products' => REST_API\\Products_Controller::class,\n\t\t'rest.publisher_logos' => REST_API\\Publisher_Logos_Controller::class,\n\t\t'rest.status_check_controller' => REST_API\\Status_Check_Controller::class,\n\t\t'rest.stories_lock' => REST_API\\Stories_Lock_Controller::class,\n\t\t'rest.media' => REST_API\\Stories_Media_Controller::class,\n\t\t'rest.settings' => REST_API\\Stories_Settings_Controller::class,\n\t\t'rest.users' => REST_API\\Stories_Users_Controller::class,\n\t\t'rest.taxonomies' => REST_API\\Stories_Taxonomies_Controller::class,\n\t\t'taxonomy.category' => Taxonomy\\Category_Taxonomy::class,\n\t\t'taxonomy.tag' => Taxonomy\\Tag_Taxonomy::class,\n\t\t'user_preferences' => User\\Preferences::class,\n\t\t'remove_transients' => Remove_Transients::class,\n\t\t'web_stories_block' => Block\\Web_Stories_Block::class,\n\t];\n\n\t/**\n\t * Get the list of services to register.\n\t *\n\t * The services array contains a map of => \n\t * associations.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Associative array of identifiers mapped to fully\n\t * qualified class names.\n\t */\n\tprotected function get_service_classes(): array {\n\t\treturn self::SERVICES;\n\t}\n\n\t/**\n\t * Get the shared instances for the dependency injector.\n\t *\n\t * The shared instances array contains a list of FQCNs that are meant to be\n\t * reused. For multiple \"make()\" requests, the injector will return the same\n\t * instance reference for these, instead of always returning a new one.\n\t *\n\t * This effectively turns these FQCNs into a \"singleton\", without incurring\n\t * all the drawbacks of the Singleton design anti-pattern.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Array of fully qualified class names.\n\t */\n\tprotected function get_shared_instances(): array {\n\t\treturn [\n\t\t\tAdmin\\Customizer::class,\n\t\t\tAdmin\\Google_Fonts::class,\n\t\t\tAdmin\\Meta_Boxes::class,\n\t\t\tAnalytics::class,\n\t\t\tAssets::class,\n\t\t\tContext::class,\n\t\t\tDecoder::class,\n\t\t\tExperiments::class,\n\t\t\tStory_Post_Type::class,\n\t\t\tInjector::class,\n\t\t\tIntegrations\\Plugin_Status::class,\n\t\t\tIntegrations\\Site_Kit::class,\n\t\t\tIntegrations\\WooCommerce::class,\n\t\t\tMedia\\Types::class,\n\t\t\tShopping_Vendors::class,\n\t\t\tLocale::class,\n\t\t\tSettings::class,\n\t\t\tStories_Script_Data::class,\n\t\t\tUser\\Preferences::class,\n\t\t];\n\t}\n\n\t/**\n\t * Get the delegations for the dependency injector.\n\t *\n\t * The delegations array contains a map of => \n\t * mappings.\n\t *\n\t * The is basically a factory to provide custom instantiation\n\t * logic for the given .\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array Associative array of callables.\n\t */\n\tprotected function get_delegations(): array {\n\t\treturn [\n\t\t\tInjector::class => static fn() => Services::get( 'injector' ),\n\t\t];\n\t}\n}\n" }, { "path": "includes/PluginFactory.php", "content": ",\n * map_meta_cap?: bool,\n * supports?: array>,\n * register_meta_box_cb?: callable,\n * taxonomies?: string[],\n * has_archive?: bool|string,\n * rewrite?: bool|array{\n * slug?: string,\n * with_front?: bool,\n * feeds?: bool,\n * pages?: bool,\n * ep_mask?: int\n * },\n * query_var?: string|bool,\n * can_export?: bool,\n * delete_with_user?: bool,\n * template?: array\n * }>,\n * template_lock?: string|false,\n * _builtin?: bool,\n * _edit_link?: string\n * }\n */\nabstract class Post_Type_Base extends Service_Base implements PluginActivationAware, PluginDeactivationAware, SiteInitializationAware, PluginUninstallAware {\n\n\t/**\n\t * Default REST Namespace.\n\t */\n\tpublic const REST_NAMESPACE = 'web-stories/v1';\n\n\t/**\n\t * Registers the post type.\n\t *\n\t * @since 1.14.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_post_type();\n\t}\n\n\t/**\n\t * Register post type.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return WP_Post_Type|WP_Error\n\t */\n\tpublic function register_post_type() {\n\t\treturn register_post_type( $this->get_slug(), $this->get_args() );\n\t}\n\n\t/**\n\t * Unregister post type.\n\t *\n\t * @since 1.14.0\n\t */\n\tpublic function unregister_post_type(): void {\n\t\tunregister_post_type( $this->get_slug() );\n\t}\n\n\t/**\n\t * Act on site initialization.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\t$this->register_post_type();\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->register_post_type();\n\t}\n\n\t/**\n\t * Act on plugin deactivation.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param bool $network_wide Whether the deactivation was done network-wide.\n\t */\n\tpublic function on_plugin_deactivation( bool $network_wide ): void {\n\t\t$this->unregister_post_type();\n\t}\n\n\t/**\n\t * Post type slug.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @phpstan-return lowercase-string&non-empty-string\n\t */\n\tabstract public function get_slug(): string;\n\n\t/**\n\t * Get REST base name based on the post type.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return string REST base.\n\t */\n\tpublic function get_rest_base(): string {\n\t\t$post_type_object = $this->get_object();\n\t\t$rest_base = $this->get_slug();\n\t\tif ( $post_type_object instanceof WP_Post_Type ) {\n\t\t\t$rest_base = ! empty( $post_type_object->rest_base ) && \\is_string( $post_type_object->rest_base ) ?\n\t\t\t\t$post_type_object->rest_base :\n\t\t\t\t$post_type_object->name;\n\t\t}\n\n\t\treturn (string) $rest_base;\n\t}\n\n\t/**\n\t * Get REST namespace on the post type.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return string REST base.\n\t */\n\tpublic function get_rest_namespace(): string {\n\t\t$post_type_object = $this->get_object();\n\t\t$rest_namespace = isset( $post_type_object, $post_type_object->rest_namespace ) && \\is_string( $post_type_object->rest_namespace ) ?\n\t\t\t$post_type_object->rest_namespace :\n\t\t\tself::REST_NAMESPACE;\n\n\t\treturn (string) $rest_namespace;\n\t}\n\n\t/**\n\t * Get REST url for post type.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return string REST base.\n\t */\n\tpublic function get_rest_url(): string {\n\t\treturn rest_get_route_for_post_type_items( $this->get_slug() );\n\t}\n\n\t/**\n\t * Returns all capabilities for the post type.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @return string[] The post type capabilities.\n\t */\n\tpublic function get_caps(): array {\n\t\t$post_type_obj = $this->get_object();\n\n\t\tif ( ! $post_type_obj instanceof WP_Post_Type ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn (array) $post_type_obj->cap;\n\t}\n\n\t/**\n\t * Determines whether the current user has a specific capability for this post type.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param string $cap Capability name.\n\t * @return bool Whether the user has the capability.\n\t */\n\tpublic function has_cap( string $cap ): bool {\n\t\t$capability_name = $this->get_cap_name( $cap );\n\t\t$capability = false;\n\t\tif ( $capability_name ) {\n\t\t\t$capability = current_user_can( $capability_name ); // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t}\n\n\t\treturn $capability;\n\t}\n\n\t/**\n\t * Returns a specific post type capability name.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param string $cap Capability name.\n\t * @return string|false Capability name if found, false otherwise.\n\t */\n\tpublic function get_cap_name( string $cap ) {\n\t\t$post_type_obj = $this->get_object();\n\t\t$capability_name = false;\n\n\t\tif ( ! $post_type_obj instanceof WP_Post_Type ) {\n\t\t\treturn $capability_name;\n\t\t}\n\n\t\tif ( property_exists( $post_type_obj->cap, $cap ) ) {\n\t\t\t$capability_name = $post_type_obj->cap->$cap;\n\t\t}\n\n\t\treturn $capability_name;\n\t}\n\n\t/**\n\t * Get Label on the post type slug and name.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param string $label Label name.\n\t */\n\tpublic function get_label( string $label ): string {\n\t\t$post_type_obj = $this->get_object();\n\t\t$name = '';\n\n\t\tif ( ! $post_type_obj instanceof WP_Post_Type ) {\n\t\t\treturn $name;\n\t\t}\n\n\t\tif ( property_exists( $post_type_obj->labels, $label ) ) {\n\t\t\t$name = $post_type_obj->labels->$label;\n\t\t}\n\n\t\treturn $name;\n\t}\n\n\t/**\n\t * Get rest controller on the post type slug.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return WP_REST_Posts_Controller|WP_REST_Controller\n\t */\n\tpublic function get_parent_controller(): WP_REST_Controller {\n\t\t$post_type_obj = $this->get_object();\n\t\t$parent_controller = null;\n\n\t\tif ( $post_type_obj instanceof WP_Post_Type ) {\n\t\t\t$parent_controller = $post_type_obj->get_rest_controller();\n\t\t}\n\n\t\tif ( ! $parent_controller ) {\n\t\t\t$parent_controller = new WP_REST_Posts_Controller( $this->get_slug() );\n\t\t}\n\n\t\treturn $parent_controller;\n\t}\n\n\t/**\n\t * Retrieves the permalink for a post type archive.\n\t *\n\t * Identical to {@see get_post_type_archive_link()}, but also returns a URL\n\t * if the archive page has been disabled.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.14.0\n\t *\n\t * @global WP_Rewrite $wp_rewrite WordPress rewrite component.\n\t *\n\t * @param bool $ignore_has_archive Ignore 'has_archive' value to get default permalink.\n\t * @return string|false The post type archive permalink. False if the post type does not exist.\n\t */\n\tpublic function get_archive_link( bool $ignore_has_archive = false ) {\n\t\tglobal $wp_rewrite;\n\n\t\t$post_type_obj = $this->get_object();\n\t\tif ( ! $post_type_obj instanceof WP_Post_Type ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( get_option( 'permalink_structure' ) && \\is_array( $post_type_obj->rewrite ) ) {\n\t\t\t$struct = true === $post_type_obj->has_archive || $ignore_has_archive ? $post_type_obj->rewrite['slug'] : $post_type_obj->has_archive;\n\t\t\tif ( $post_type_obj->rewrite['with_front'] ) {\n\t\t\t\t$struct = $wp_rewrite->front . $struct;\n\t\t\t} else {\n\t\t\t\t$struct = $wp_rewrite->root . $struct;\n\t\t\t}\n\t\t\t$link = home_url( user_trailingslashit( $struct, 'post_type_archive' ) );\n\t\t} else {\n\t\t\t$link = home_url( '?post_type=' . $this->get_slug() );\n\t\t}\n\n\t\t/** This filter is documented in wp-includes/link-template.php */\n\t\treturn apply_filters( 'post_type_archive_link', $link, $this->get_slug() );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n // phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.get_posts_get_posts -- False positive.\n\t\t$cpt_posts = get_posts(\n\t\t\t[\n\t\t\t\t'fields' => 'ids',\n\t\t\t\t'suppress_filters' => false,\n\t\t\t\t'post_status' => 'any',\n\t\t\t\t'post_type' => $this->get_slug(),\n\t\t\t\t'posts_per_page' => -1,\n\t\t\t]\n\t\t);\n\n\t\tforeach ( $cpt_posts as $post_id ) {\n\t\t\twp_delete_post( (int) $post_id, true );\n\t\t}\n\t}\n\n\t/**\n\t * Post type args.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return array Post type args.\n\t *\n\t * @phpstan-return PostTypeArgs\n\t */\n\tabstract protected function get_args(): array;\n\n\t/**\n\t * Get post type object.\n\t *\n\t * @since 1.14.0\n\t */\n\tprotected function get_object(): ?WP_Post_Type {\n\t\treturn get_post_type_object( $this->get_slug() );\n\t}\n}\n" }, { "path": "includes/REST_API/Embed_Controller.php", "content": "\n * }\n */\nclass Embed_Controller extends REST_Controller implements HasRequirements {\n\n\t/**\n\t * Story_Post_Type instance.\n\t *\n\t * @var Story_Post_Type Story_Post_Type instance.\n\t */\n\tprivate Story_Post_Type $story_post_type;\n\n\t/**\n\t * Constructor.\n\t *\n\t * @param Story_Post_Type $story_post_type Story_Post_Type instance.\n\t */\n\tpublic function __construct( Story_Post_Type $story_post_type ) {\n\t\t$this->story_post_type = $story_post_type;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'embed';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for links.\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_proxy_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'get_proxy_item_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t'description' => __( 'The URL for which to fetch embed data.', 'web-stories' ),\n\t\t\t\t\t\t\t'required' => true,\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Callback for the Web Stories embed endpoints.\n\t *\n\t * Returns information about the given story.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Full data about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function get_proxy_item( $request ) {\n\t\t/**\n\t\t * Requested URL.\n\t\t *\n\t\t * @var string $url\n\t\t */\n\t\t$url = $request['url'];\n\t\t$url = urldecode( untrailingslashit( $url ) );\n\n\t\tif ( empty( $url ) ) {\n\t\t\treturn new \\WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t/**\n\t\t * Filters the link data TTL value.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param int $time Time to live (in seconds). Default is 1 day.\n\t\t * @param string $url The attempted URL.\n\t\t */\n\t\t$cache_ttl = apply_filters( 'web_stories_embed_data_cache_ttl', DAY_IN_SECONDS, $url );\n\t\t$cache_key = 'web_stories_embed_data_' . md5( $url );\n\n\t\t$data = get_transient( $cache_key );\n\n\t\tif ( \\is_string( $data ) && ! empty( $data ) ) {\n\t\t\t/**\n\t\t\t * Decoded cached embed data.\n\t\t\t *\n\t\t\t * @var array|null $embed\n\t\t\t */\n\t\t\t$embed = json_decode( $data, true );\n\n\t\t\tif ( $embed ) {\n\t\t\t\t$response = $this->prepare_item_for_response( $embed, $request );\n\t\t\t\treturn rest_ensure_response( $response );\n\t\t\t}\n\t\t}\n\n\t\t$data = $this->get_data_from_post( $url );\n\t\tif ( $data ) {\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\t$args = [\n\t\t\t'limit_response_size' => 153_600, // 150 KB.\n\t\t\t'timeout' => 7, // phpcs:ignore WordPressVIPMinimum.Performance.RemoteRequestTimeout.timeout_timeout\n\t\t];\n\n\t\t/**\n\t\t * Filters the HTTP request args for link data retrieval.\n\t\t *\n\t\t * Can be used to adjust timeout and response size limit.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $args Arguments used for the HTTP request\n\t\t * @param string $url The attempted URL.\n\t\t *\n\t\t * @phpstan-param array{\n\t\t * method?: string,\n\t\t * timeout?: float,\n\t\t * redirection?: int,\n\t\t * httpversion?: string,\n\t\t * user-agent?: string,\n\t\t * reject_unsafe_urls?: bool,\n\t\t * blocking?: bool,\n\t\t * headers?: string|array,\n\t\t * cookies?: array,\n\t\t * body?: string|array,\n\t\t * compress?: bool,\n\t\t * decompress?: bool,\n\t\t * sslverify?: bool,\n\t\t * sslcertificates?: string,\n\t\t * stream?: bool,\n\t\t * filename?: string,\n\t\t * limit_response_size?: int,\n\t\t * } $args\n\t\t */\n\t\t$args = apply_filters( 'web_stories_embed_data_request_args', $args, $url );\n\n\t\t$response = wp_safe_remote_get( $url, $args );\n\n\t\tif ( WP_Http::OK !== wp_remote_retrieve_response_code( $response ) ) {\n\t\t\t// Not saving the error response to cache since the error might be temporary.\n\t\t\treturn new \\WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t$html = wp_remote_retrieve_body( $response );\n\n\t\tif ( ! $html ) {\n\t\t\treturn new \\WP_Error( 'rest_invalid_story', __( 'URL is not a story', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t$data = $this->get_data_from_document( $html );\n\n\t\tif ( ! $data ) {\n\t\t\treturn new \\WP_Error( 'rest_invalid_story', __( 'URL is not a story', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\n\t\treturn rest_ensure_response( $response );\n\t}\n\n\t/**\n\t * Prepares a single embed output for response.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array|false $embed Embed value, default to false is not set.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $embed, $request ) {\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t$data = [];\n\n\t\tif ( \\is_array( $embed ) ) {\n\t\t\t$check_fields = array_keys( $embed );\n\t\t\tforeach ( $check_fields as $check_field ) {\n\t\t\t\tif ( ! empty( $schema['properties'][ $check_field ] ) && rest_is_field_included( $check_field, $fields ) ) {\n\t\t\t\t\t$data[ $check_field ] = rest_sanitize_value_from_schema( $embed[ $check_field ], $schema['properties'][ $check_field ] );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\treturn rest_ensure_response( $data );\n\t}\n\n\n\t/**\n\t * Retrieves the link's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'embed',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'title' => [\n\t\t\t\t\t'description' => __( 'Embed\\'s title', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'poster' => [\n\t\t\t\t\t'description' => __( 'Embed\\'s image', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Checks if current user can process links.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function get_proxy_item_permissions_check() {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new \\WP_Error( 'rest_forbidden', __( 'Sorry, you are not allowed to make proxied embed requests.', 'web-stories' ), [ 'status' => rest_authorization_required_code() ] );\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Retrieves the story metadata for a given URL on the current site.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $url The URL that should be inspected for metadata.\n\t * @return array{title: string, poster: string}|false Story metadata if the URL does belong to the current site. False otherwise.\n\t */\n\tprivate function get_data_from_post( string $url ) {\n\t\t$post = $this->url_to_post( $url );\n\n\t\tif ( ! $post || $this->story_post_type->get_slug() !== $post->post_type ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $this->get_data_from_document( $post->post_content );\n\t}\n\n\t/**\n\t * Examines a URL and try to determine the post it represents.\n\t *\n\t * Checks are supposedly from the hosted site blog.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.2.0\n\t *\n\t * @see get_oembed_response_data_for_url\n\t * @see url_to_postid\n\t *\n\t * @param string $url Permalink to check.\n\t * @return WP_Post|null Post object on success, null otherwise.\n\t */\n\tprivate function url_to_post( $url ): ?WP_Post {\n\t\t$post = null;\n\t\t$switched_blog = $this->maybe_switch_site( $url );\n\n\n\t\tif ( \\function_exists( 'wpcom_vip_url_to_postid' ) ) {\n\t\t\t$post_id = wpcom_vip_url_to_postid( $url );\n\t\t} else {\n\t\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions\n\t\t\t$post_id = url_to_postid( $url );\n\t\t}\n\n\t\tif ( $post_id ) {\n\t\t\t$post = get_post( $post_id );\n\t\t}\n\n\t\tif ( ! $post_id ) {\n\t\t\t// url_to_postid() does not recognize plain permalinks like https://example.com/?web-story=my-story.\n\t\t\t// Let's check for that ourselves.\n\n\t\t\t/**\n\t\t\t * The URL's hostname.\n\t\t\t *\n\t\t\t * @var string|false|null $url_host\n\t\t\t */\n\t\t\t$url_host = wp_parse_url( $url, PHP_URL_HOST );\n\t\t\tif ( $url_host ) {\n\t\t\t\t$url_host = str_replace( 'www.', '', $url_host );\n\t\t\t}\n\n\t\t\t/**\n\t\t\t * The home URL's hostname.\n\t\t\t *\n\t\t\t * @var string|false|null $home_url_host\n\t\t\t */\n\t\t\t$home_url_host = wp_parse_url( home_url(), PHP_URL_HOST );\n\t\t\tif ( $home_url_host ) {\n\t\t\t\t$home_url_host = str_replace( 'www.', '', $home_url_host );\n\t\t\t}\n\n\t\t\tif ( $url_host && $home_url_host && $url_host === $home_url_host ) {\n\t\t\t\t$values = [];\n\t\t\t\tif (\n\t\t\t\tpreg_match(\n\t\t\t\t\t'#[?&](' . preg_quote( $this->story_post_type->get_slug(), '#' ) . ')=([^&]+)#',\n\t\t\t\t\t$url,\n\t\t\t\t\t$values\n\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\t$slug = $values[2];\n\n\t\t\t\t\tif ( \\function_exists( 'wpcom_vip_get_page_by_path' ) ) {\n\t\t\t\t\t\t$post = wpcom_vip_get_page_by_path( $slug, OBJECT, $this->story_post_type->get_slug() );\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions\n\t\t\t\t\t\t$post = get_page_by_path( $slug, OBJECT, $this->story_post_type->get_slug() );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif ( $switched_blog ) {\n\t\t\trestore_current_blog();\n\t\t}\n\n\t\tif ( ! $post instanceof WP_Post ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn $post;\n\t}\n\n\t/**\n\t * Maybe switch to site.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @param string $url Permalink to check.\n\t */\n\tprivate function maybe_switch_site( $url ): bool {\n\t\tif ( ! is_multisite() ) {\n\t\t\treturn false;\n\t\t}\n\t\t$switched_blog = false;\n\n\t\t/**\n\t\t * URL parts.\n\t\t *\n\t\t * @var array|false $url_parts\n\t\t */\n\t\t$url_parts = wp_parse_url( $url );\n\t\tif ( ! $url_parts ) {\n\t\t\t$url_parts = [];\n\t\t}\n\n\t\t$url_parts = wp_parse_args(\n\t\t\t$url_parts,\n\t\t\t[\n\t\t\t\t'host' => '',\n\t\t\t\t'path' => '/',\n\t\t\t]\n\t\t);\n\n\t\t$qv = [\n\t\t\t'domain' => $url_parts['host'],\n\t\t\t'path' => '/',\n\t\t\t'number' => 1,\n\t\t\t'update_site_cache' => false,\n\t\t\t'update_site_meta_cache' => false,\n\t\t];\n\n\t\t// In case of subdirectory configs, set the path.\n\t\tif ( ! is_subdomain_install() ) {\n\t\t\t// Get \"sub-site\" part of \"http://example.org/sub-site/web-stories/my-story/\".\n\t\t\t// But given just \"http://example.org/web-stories/my-story/\", don't treat \"web-stories\" as site path.\n\t\t\t// This differs from the logic in get_oembed_response_data_for_url() which does not do this.\n\t\t\t// TODO: Investigate possible core bug in get_oembed_response_data_for_url()?\n\t\t\t$path = explode( '/', ltrim( $url_parts['path'], '/' ) );\n\t\t\t$path = \\count( $path ) > 2 ? reset( $path ) : false;\n\t\t\t$network = get_network();\n\t\t\tif ( $path && $network instanceof WP_Network ) {\n\t\t\t\t$qv['path'] = $network->path . $path . '/';\n\t\t\t}\n\t\t}\n\n\t\t$sites = (array) get_sites( $qv );\n\t\t$site = reset( $sites );\n\n\t\tif ( $site && get_current_blog_id() !== (int) $site->blog_id ) {\n\t\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.switch_to_blog_switch_to_blog\n\t\t\tswitch_to_blog( (int) $site->blog_id );\n\n\t\t\t$switched_blog = true;\n\t\t}\n\n\t\treturn $switched_blog;\n\t}\n\n\t/**\n\t * Parses an HTML document to and returns the story's title and poster.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $html HTML document markup.\n\t * @return array{title: string, poster: string}|false Response data or false if document is not a story.\n\t */\n\tprivate function get_data_from_document( string $html ) {\n\t\ttry {\n\t\t\t$doc = Document::fromHtml( $html );\n\t\t} catch ( \\DOMException $exception ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( ! $doc ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t/**\n\t\t * List of elements.\n\t\t *\n\t\t * @var DOMNodeList|false $amp_story\n\t\t */\n\t\t$amp_story = $doc->xpath->query( '//amp-story' );\n\n\t\tif ( ! $amp_story instanceof DOMNodeList || 0 === $amp_story->length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$title = $this->get_dom_attribute_content( $amp_story, 'title' );\n\t\t$poster = $this->get_dom_attribute_content( $amp_story, 'poster-portrait-src' );\n\n\t\treturn [\n\t\t\t'title' => $title ?: '',\n\t\t\t'poster' => $poster ?: '',\n\t\t];\n\t}\n\n\t/**\n\t * Retrieve content of a given DOM node attribute.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param DOMNodeList|false $query XPath query result.\n\t * @param string $attribute Attribute name.\n\t * @return string|false Attribute content on success, false otherwise.\n\t */\n\tprotected function get_dom_attribute_content( $query, string $attribute ) {\n\t\tif ( ! $query instanceof DOMNodeList || 0 === $query->length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t/**\n\t\t * DOMElement\n\t\t *\n\t\t * @var DOMElement|DOMNode $node\n\t\t */\n\t\t$node = $query->item( 0 );\n\n\t\tif ( ! $node instanceof DOMElement ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $node->getAttribute( $attribute );\n\t}\n}\n" }, { "path": "includes/REST_API/Font_Controller.php", "content": ",\n * styles?: string[],\n * variants?: string[],\n * service?: string,\n * metrics?: mixed,\n * id?: string,\n * url?: string\n * }\n * @phpstan-type SchemaEntry array{\n * description: string,\n * type: string,\n * context: string[],\n * default?: mixed,\n * }\n * @phpstan-type Schema array{\n * properties: array{\n * family?: SchemaEntry,\n * fallbacks?: SchemaEntry,\n * weights?: SchemaEntry,\n * styles?: SchemaEntry,\n * variants?: SchemaEntry,\n * service?: SchemaEntry,\n * metrics?: SchemaEntry,\n * id?: SchemaEntry,\n * url?: SchemaEntry\n * }\n * }\n */\nclass Font_Controller extends WP_REST_Posts_Controller {\n\t/**\n\t * Registers the routes for posts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_items' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'get_items_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_collection_params(),\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::CREATABLE,\n\t\t\t\t\t'callback' => [ $this, 'create_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'create_item_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::CREATABLE ),\n\t\t\t\t],\n\t\t\t\t'schema' => [ $this, 'get_public_item_schema' ],\n\t\t\t]\n\t\t);\n\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base . '/(?P[\\d]+)',\n\t\t\t[\n\t\t\t\t'args' => [\n\t\t\t\t\t'id' => [\n\t\t\t\t\t\t'description' => __( 'Unique identifier for the font.', 'web-stories' ),\n\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::DELETABLE,\n\t\t\t\t\t'callback' => [ $this, 'delete_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'delete_item_permissions_check' ],\n\t\t\t\t],\n\t\t\t\t'schema' => [ $this, 'get_public_item_schema' ],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Retrieves a collection of fonts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function get_items( $request ) {\n\t\t/**\n\t\t * Fonts list.\n\t\t *\n\t\t * @phpstan-var Font[] $fonts\n\t\t */\n\t\t$fonts = [];\n\n\t\t// Retrieve the list of registered collection query parameters.\n\t\t$registered = $this->get_collection_params();\n\n\t\tif ( isset( $registered['service'], $request['service'] ) ) {\n\t\t\tif ( 'all' === $request['service'] || 'builtin' === $request['service'] ) {\n\t\t\t\tarray_push( $fonts, ...$this->get_builtin_fonts() );\n\n\t\t\t\t// For custom fonts the searching will be done in WP_Query already.\n\t\t\t\tif ( isset( $registered['search'], $request['search'] ) && ! empty( $request['search'] ) ) {\n\t\t\t\t\t$fonts = array_values(\n\t\t\t\t\t\tarray_filter(\n\t\t\t\t\t\t\t$fonts,\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Font data.\n\t\t\t\t\t\t\t *\n\t\t\t\t\t\t\t * @param array{family: string} $font\n\t\t\t\t\t\t\t * @return bool\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tstatic fn( array $font ) => false !== stripos( $font['family'], $request['search'] )\n\t\t\t\t\t\t)\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tif ( 'all' === $request['service'] || 'custom' === $request['service'] ) {\n\t\t\t\tarray_push( $fonts, ...$this->get_custom_fonts( $request ) );\n\t\t\t}\n\n\t\t\t// Filter before doing any sorting.\n\t\t\tif ( isset( $registered['include'], $request['include'] ) && ! empty( $request['include'] ) ) {\n\t\t\t\t$include_list = array_map( 'strtolower', $request['include'] );\n\n\t\t\t\t$fonts = array_values(\n\t\t\t\t\tarray_filter(\n\t\t\t\t\t\t$fonts,\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Font data.\n\t\t\t\t\t\t *\n\t\t\t\t\t\t * @param array{family: string} $font\n\t\t\t\t\t\t * @return bool\n\t\t\t\t\t\t */\n\t\t\t\t\t\tstatic fn( array $font ): bool => \\in_array( strtolower( $font['family'] ), $include_list, true )\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif ( 'all' === $request['service'] ) {\n\t\t\t\t// Since the built-in fonts and custom fonts both are already sorted,\n\t\t\t\t// we only need to sort when including both.\n\t\t\t\tusort(\n\t\t\t\t\t$fonts,\n\t\t\t\t\t/**\n\t\t\t\t\t * Font A and Font B.\n\t\t\t\t\t *\n\t\t\t\t\t * @phpstan-param Font $a\n\t\t\t\t\t * @phpstan-param Font $b\n\t\t\t\t\t * @return int\n\t\t\t\t\t */\n\t\t\t\t\tstatic fn( array $a, array $b ): int => strnatcasecmp( $a['family'], $b['family'] )\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn rest_ensure_response( $fonts );\n\t}\n\n\t/**\n\t * Checks if a given request has access to read posts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function get_items_permissions_check( $request ) {\n\t\t$post_type = get_post_type_object( $this->post_type );\n\n\t\tif (\n\t\t\t! $post_type ||\n\t\t\t! current_user_can( $post_type->cap->read_post ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden',\n\t\t\t\t__( 'Sorry, you are not allowed to list fonts.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Force-deletes a single font.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function delete_item( $request ) {\n\t\t$request->set_param( 'force', true );\n\n\t\treturn parent::delete_item( $request );\n\t}\n\n\t/**\n\t * Prepares a single post output for response.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_Post $item Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $item, $request ): WP_REST_Response {\n\t\t// Restores the more descriptive, specific name for use within this method.\n\t\t$post = $item;\n\t\t$GLOBALS['post'] = $post; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited\n\n\t\tsetup_postdata( $post );\n\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\t$data = [];\n\n\t\tif ( rest_is_field_included( 'id', $fields ) ) {\n\t\t\t$data['id'] = $post->ID;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'family', $fields ) ) {\n\t\t\t$data['family'] = $post->post_title;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'service', $fields ) ) {\n\t\t\t$data['service'] = 'custom';\n\t\t}\n\n\t\t/**\n\t\t * Font data.\n\t\t *\n\t\t * @var array|null $font_data\n\t\t */\n\t\t$font_data = json_decode( $post->post_content, true );\n\n\t\tif ( $font_data ) {\n\t\t\tforeach ( $font_data as $key => $value ) {\n\t\t\t\tif ( rest_is_field_included( $key, $fields ) ) {\n\t\t\t\t\t$data[ $key ] = $value;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\t/**\n\t\t * Response object.\n\t\t *\n\t\t * @var WP_REST_Response $response\n\t\t */\n\t\t$response = rest_ensure_response( $data );\n\n\t\tif ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {\n\t\t\t$links = $this->prepare_links( $post );\n\t\t\t$response->add_links( $links );\n\n\t\t\tif ( ! empty( $links['self']['href'] ) ) {\n\t\t\t\t$actions = $this->get_available_actions( $post, $request );\n\n\t\t\t\t$self = $links['self']['href'];\n\n\t\t\t\tforeach ( $actions as $rel ) {\n\t\t\t\t\t$response->add_link( $rel, $self );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the query params for the fonts collection.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['context']['default'] = 'view';\n\n\t\t$query_params['search'] = [\n\t\t\t'description' => __( 'Limit results to those matching a string.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'sanitize_callback' => 'sanitize_text_field',\n\t\t\t'validate_callback' => 'rest_validate_request_arg',\n\t\t];\n\n\t\t$query_params['include'] = [\n\t\t\t'description' => __( 'Limit result set to specific fonts.', 'web-stories' ),\n\t\t\t'type' => 'array',\n\t\t\t'items' => [\n\t\t\t\t'type' => 'string',\n\t\t\t],\n\t\t\t'default' => [],\n\t\t];\n\n\t\t$query_params['service'] = [\n\t\t\t'description' => __( 'Filter fonts by service.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'sanitize_callback' => 'sanitize_text_field',\n\t\t\t'default' => 'all',\n\t\t\t'enum' => [\n\t\t\t\t'all',\n\t\t\t\t'custom',\n\t\t\t\t'builtin', // system + fonts.google.com.\n\t\t\t],\n\t\t];\n\n\t\t/** This filter is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */\n\t\treturn apply_filters( \"rest_{$this->post_type}_collection_params\", $query_params, $this->post_type );\n\t}\n\n\t/**\n\t * Retrieves the font's schema, conforming to JSON Schema.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.16.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => $this->post_type,\n\t\t\t'type' => 'object',\n\t\t\t// Base properties for every font.\n\t\t\t'properties' => [\n\t\t\t\t'family' => [\n\t\t\t\t\t'description' => __( 'The font family', 'web-stories' ),\n\t\t\t\t\t'type' => [ 'string', 'null' ],\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'fallbacks' => [\n\t\t\t\t\t'description' => __( 'Fallback fonts', 'web-stories' ),\n\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t'items' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'weights' => [\n\t\t\t\t\t'description' => __( 'Font weights', 'web-stories' ),\n\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t'items' => [\n\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t'minimum' => 0,\n\t\t\t\t\t\t'maximum' => 900,\n\t\t\t\t\t],\n\t\t\t\t\t'minimum' => 1,\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'styles' => [\n\t\t\t\t\t'description' => __( 'Font styles', 'web-stories' ),\n\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t'items' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t],\n\t\t\t\t\t'minimum' => 1,\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'variants' => [\n\t\t\t\t\t'description' => __( 'Font variants', 'web-stories' ),\n\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t'items' => [\n\t\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t\t'items' => [\n\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t\t'minimum' => 0,\n\t\t\t\t\t\t\t'maximum' => 900,\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'minimum' => 2,\n\t\t\t\t\t\t'maximum' => 2,\n\t\t\t\t\t],\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'service' => [\n\t\t\t\t\t'description' => __( 'Font service', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'metrics' => [\n\t\t\t\t\t'description' => __( 'Font metrics', 'web-stories' ),\n\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t\t'id' => [\n\t\t\t\t\t'description' => __( 'Unique identifier for the font.', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'url' => [\n\t\t\t\t\t'description' => __( 'Font URL.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'required' => true,\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Returns a list of Google fonts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @return array List of Google fonts.\n\t *\n\t * @phpstan-return Font[]\n\t */\n\tprotected function get_builtin_fonts(): array {\n\t\t$file = WEBSTORIES_PLUGIN_DIR_PATH . 'includes/data/fonts/fonts.json';\n\n\t\tif ( ! is_readable( $file ) ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t$content = file_get_contents( $file ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents, WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown\n\n\t\tif ( ! $content ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t/**\n\t\t * List of Google Fonts.\n\t\t *\n\t\t * @var array|null $fonts\n\t\t * @phpstan-var Font[]|null $fonts\n\t\t */\n\t\t$fonts = json_decode( $content, true );\n\n\t\tif ( ! $fonts ) {\n\t\t\treturn [];\n\t\t}\n\n\t\treturn $fonts;\n\t}\n\n\t/**\n\t * Returns a list of custom fonts.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return array List of custom fonts.\n\t *\n\t * @phpstan-return Font[]\n\t */\n\tprotected function get_custom_fonts( $request ): array {\n\t\t// Retrieve the list of registered collection query parameters.\n\t\t$registered = $this->get_collection_params();\n\t\t$args = [\n\t\t\t'orderby' => 'title',\n\t\t\t'order' => 'ASC',\n\t\t];\n\n\t\t/*\n\t\t * This array defines mappings between public API query parameters whose\n\t\t * values are accepted as-passed, and their internal WP_Query parameter\n\t\t * name equivalents (some are the same). Only values which are also\n\t\t * present in $registered will be set.\n\t\t */\n\t\t$parameter_mappings = [\n\t\t\t'search' => 's',\n\t\t];\n\n\t\t/*\n\t\t * For each known parameter which is both registered and present in the request,\n\t\t * set the parameter's value on the query $args.\n\t\t */\n\t\tforeach ( $parameter_mappings as $api_param => $wp_param ) {\n\t\t\tif ( isset( $registered[ $api_param ], $request[ $api_param ] ) ) {\n\t\t\t\t$args[ $wp_param ] = $request[ $api_param ];\n\t\t\t}\n\t\t}\n\n\t\t// Ensure our per_page parameter overrides any provided posts_per_page filter.\n\t\tif ( isset( $registered['per_page'] ) ) {\n\t\t\t$args['posts_per_page'] = $request['per_page'];\n\t\t}\n\n\t\t// Force search to be case-insensitive.\n\n\t\t// Force the post_type argument, since it's not a user input variable.\n\t\t$args['post_type'] = $this->post_type;\n\t\t$query_args = $this->prepare_items_query( $args, $request );\n\n\t\t$posts_query = new WP_Query();\n\t\t$query_result = $posts_query->query( $query_args );\n\n\t\t/**\n\t\t * List of custom fonts.\n\t\t *\n\t\t * @var array $posts\n\t\t * @phpstan-var Font[] $posts\n\t\t */\n\t\t$posts = [];\n\n\t\t/**\n\t\t * We're expecting a post object.\n\t\t *\n\t\t * @var WP_Post $post\n\t\t */\n\t\tforeach ( $query_result as $post ) {\n\t\t\tif ( ! $this->check_read_permission( $post ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t$data = $this->prepare_item_for_response( $post, $request );\n\t\t\t$posts[] = $this->prepare_response_for_collection( $data );\n\t\t}\n\n\t\t// Reset filter.\n\t\tif ( 'edit' === $request['context'] ) {\n\t\t\tremove_filter( 'post_password_required', [ $this, 'check_password_required' ] );\n\t\t}\n\n\t\t/**\n\t\t * List of custom fonts.\n\t\t *\n\t\t * @phpstan-var Font[] $posts\n\t\t */\n\n\t\treturn $posts;\n\t}\n\n\t/**\n\t * Prepares a single post for create.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param WP_REST_Request $request Request object.\n\t * @return stdClass|WP_Error Post object or WP_Error.\n\t */\n\tprotected function prepare_item_for_database( $request ) {\n\t\t$prepared_post = new stdClass();\n\t\t$prepared_post->post_status = 'publish';\n\n\t\t$font_data = [];\n\n\t\t$fields = [\n\t\t\t'family',\n\t\t\t'fallbacks',\n\t\t\t'weights',\n\t\t\t'styles',\n\t\t\t'variants',\n\t\t\t'metrics',\n\t\t\t'url',\n\t\t];\n\n\t\t$schema = $this->get_item_schema();\n\n\t\tforeach ( $fields as $field ) {\n\t\t\tif ( ! empty( $schema['properties'][ $field ] ) && ! empty( $request[ $field ] ) ) {\n\t\t\t\t$font_data[ $field ] = $request[ $field ];\n\n\t\t\t\tif ( 'family' === $field ) {\n\t\t\t\t\t/**\n\t\t\t\t\t * Request data.\n\t\t\t\t\t *\n\t\t\t\t\t * @var array{family: string} $request\n\t\t\t\t\t */\n\t\t\t\t\t$font_family = trim( $request['family'] );\n\n\t\t\t\t\t$prepared_post->post_title = $font_family;\n\n\t\t\t\t\tif ( $this->font_exists( $font_family ) ) {\n\t\t\t\t\t\treturn new \\WP_Error(\n\t\t\t\t\t\t\t'rest_invalid_field',\n\t\t\t\t\t\t\t__( 'A font with this name already exists', 'web-stories' ),\n\t\t\t\t\t\t\t[ 'status' => 400 ]\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t$prepared_post->post_content = wp_json_encode( $font_data );\n\n\t\treturn $prepared_post;\n\t}\n\n\t/**\n\t * Determines whether a font with the same name already exists.\n\t *\n\t * Performs a case-insensitive comparison.\n\t *\n\t * @since 1.16.0\n\t *\n\t * @param string $font_family Font family.\n\t * @return bool Whether a font with this exact name already exists.\n\t */\n\tprivate function font_exists( string $font_family ): bool {\n\t\t/**\n\t\t * A custom request to perform the lookup.\n\t\t *\n\t\t * @phpstan-var WP_REST_Request}> $request\n\t\t */\n\t\t$request = new WP_REST_Request(\n\t\t\tWP_REST_Server::READABLE,\n\t\t\t$this->namespace .\n\t\t\t'/' . $this->rest_base\n\t\t);\n\t\t$request->set_param( 'include', [ $font_family ] );\n\t\t$request->set_param( 'service', 'all' );\n\n\t\t/**\n\t\t * Response object.\n\t\t *\n\t\t * @var WP_REST_Response $response\n\t\t */\n\t\t$response = $this->get_items( $request );\n\n\t\treturn ! empty( $response->get_data() );\n\t}\n}\n" }, { "path": "includes/REST_API/Hotlinking_Controller.php", "content": ",\n * cookies?: array,\n * body?: string|string[],\n * compress?: bool,\n * decompress?: bool,\n * sslverify?: bool,\n * sslcertificates?: string,\n * stream?: bool,\n * filename?: string,\n * limit_response_size?: int\n * }\n */\nclass Hotlinking_Controller extends REST_Controller implements HasRequirements {\n\tpublic const PROXY_HEADERS_ALLOWLIST = [\n\t\t'Content-Type',\n\t\t'Cache-Control',\n\t\t'Etag',\n\t\t'Last-Modified',\n\t\t'Content-Range',\n\t];\n\n\t/**\n\t * Story_Post_Type instance.\n\t *\n\t * @var Story_Post_Type Story_Post_Type instance.\n\t */\n\tprivate Story_Post_Type $story_post_type;\n\n\t/**\n\t * Types instance.\n\t *\n\t * @var Types Types instance.\n\t */\n\tprivate Types $types;\n\n\t/**\n\t * File pointer resource.\n\t *\n\t * @var resource\n\t */\n\tprotected $stream_handle;\n\n\t/**\n\t * Constructor.\n\t *\n\t * @param Story_Post_Type $story_post_type Story_Post_Type instance.\n\t * @param Types $types Types instance.\n\t * @return void\n\t */\n\tpublic function __construct( Story_Post_Type $story_post_type, Types $types ) {\n\t\t$this->story_post_type = $story_post_type;\n\t\t$this->types = $types;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'hotlink';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for urls.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base . '/validate',\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'parse_url' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'parse_url_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t'description' => __( 'The URL to process.', 'web-stories' ),\n\t\t\t\t\t\t\t'required' => true,\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t'validate_callback' => [ $this, 'validate_callback' ],\n\t\t\t\t\t\t\t'sanitize_callback' => 'esc_url_raw',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base . '/proxy',\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'proxy_url' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'parse_url_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t'description' => __( 'The URL to process.', 'web-stories' ),\n\t\t\t\t\t\t\t'required' => true,\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t'validate_callback' => [ $this, 'validate_callback' ],\n\t\t\t\t\t\t\t'sanitize_callback' => 'esc_url_raw',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Parses a URL to return some metadata for inserting external media.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_REST_Request $request Full data about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function parse_url( WP_REST_Request $request ) {\n\t\t/**\n\t\t * Requested URL.\n\t\t *\n\t\t * @var string $raw_url\n\t\t */\n\t\t$raw_url = $request['url'];\n\t\t$raw_url = untrailingslashit( $raw_url );\n\n\t\t$url_or_ip = $this->validate_url( $raw_url );\n\n\t\t$host = wp_parse_url( $raw_url, PHP_URL_HOST );\n\n\t\tif ( ! $url_or_ip || ! $host ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t/**\n\t\t * Filters the hotlinking data TTL value.\n\t\t *\n\t\t * @since 1.11.0\n\t\t *\n\t\t * @param int $time Time to live (in seconds). Default is 1 day.\n\t\t * @param string $url The attempted URL.\n\t\t */\n\t\t$cache_ttl = apply_filters( 'web_stories_hotlinking_url_data_cache_ttl', DAY_IN_SECONDS, $raw_url );\n\t\t$cache_key = 'web_stories_url_data_' . md5( $raw_url );\n\n\t\t$data = get_transient( $cache_key );\n\t\tif ( \\is_string( $data ) && ! empty( $data ) ) {\n\t\t\t/**\n\t\t\t * Decoded cached link data.\n\t\t\t *\n\t\t\t * @var array|null $link\n\t\t\t * @phpstan-var LinkData|null $link\n\t\t\t */\n\t\t\t$link = json_decode( $data, true );\n\n\t\t\tif ( $link ) {\n\t\t\t\t$response = $this->prepare_item_for_response( $link, $request );\n\t\t\t\treturn rest_ensure_response( $response );\n\t\t\t}\n\t\t}\n\n\t\t$callback = $this->get_curl_resolve_callback( $raw_url, $url_or_ip );\n\t\tadd_action( 'http_api_curl', $callback );\n\n\t\t$response = wp_safe_remote_head(\n\t\t\t$raw_url,\n\t\t\t[\n\t\t\t\t'redirection' => 0, // No redirects allowed.\n\t\t\t\t'headers' => [\n\t\t\t\t\t'Host' => $host,\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\tremove_action( 'http_api_curl', $callback );\n\n\t\tif ( is_wp_error( $response ) && 'http_request_failed' === $response->get_error_code() ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\tif ( WP_Http::OK !== wp_remote_retrieve_response_code( $response ) ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t$headers = wp_remote_retrieve_headers( $response );\n\t\t$mime_type = $headers['content-type'];\n\t\tif ( $mime_type && str_contains( $mime_type, ';' ) ) {\n\t\t\t$pieces = explode( ';', $mime_type );\n\t\t\t$mime_type = array_shift( $pieces );\n\t\t}\n\t\t$file_size = (int) $headers['content-length'];\n\n\t\t$path = wp_parse_url( $raw_url, PHP_URL_PATH );\n\n\t\tif ( ! \\is_string( $path ) ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\t$file_name = basename( $path );\n\n\t\t$exts = $this->types->get_file_type_exts( [ $mime_type ] );\n\t\t$ext = '';\n\t\tif ( $exts ) {\n\t\t\t$ext = end( $exts );\n\t\t}\n\n\t\t$allowed_mime_types = $this->get_allowed_mime_types();\n\t\t$type = '';\n\t\tforeach ( $allowed_mime_types as $key => $mime_types ) {\n\t\t\tif ( \\in_array( $mime_type, $mime_types, true ) ) {\n\t\t\t\t$type = $key;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\t$data = [\n\t\t\t'ext' => $ext,\n\t\t\t'file_name' => $file_name,\n\t\t\t'file_size' => $file_size,\n\t\t\t'mime_type' => $mime_type,\n\t\t\t'type' => $type,\n\t\t];\n\n\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\n\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\treturn rest_ensure_response( $response );\n\t}\n\n\t/**\n\t * Parses a URL to return proxied file.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ErrorControlOperator\")\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param WP_REST_Request $request Full data about the request.\n\t * @return WP_Error|void Proxied data on success, error otherwise.\n\t */\n\tpublic function proxy_url( WP_REST_Request $request ) {\n\t\t/**\n\t\t * Requested URL.\n\t\t *\n\t\t * @var string $raw_url\n\t\t */\n\t\t$raw_url = $request['url'];\n\t\t$raw_url = untrailingslashit( $raw_url );\n\n\t\t$url_or_ip = $this->validate_url( $raw_url );\n\n\t\t$host = wp_parse_url( $raw_url, PHP_URL_HOST );\n\n\t\tif ( ! $url_or_ip || ! $host ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t// Remove any relevant headers already set by WP_REST_Server::serve_request() // wp_get_nocache_headers().\n\t\tif ( ! headers_sent() ) {\n\t\t\theader_remove( 'Cache-Control' );\n\t\t\theader_remove( 'Content-Type' );\n\t\t\theader_remove( 'Expires' );\n\t\t\theader_remove( 'Last Modified' );\n\t\t}\n\n\t\theader( 'Cache-Control: max-age=3600' );\n\t\theader( 'Accept-Ranges: bytes' );\n\n\t\t$args = [\n\t\t\t'timeout' => 60, // phpcs:ignore WordPressVIPMinimum.Performance.RemoteRequestTimeout.timeout_timeout\n\t\t\t'blocking' => false,\n\t\t\t'headers' => [\n\t\t\t\t'Range' => $request->get_header( 'Range' ),\n\t\t\t\t'Host' => $host,\n\t\t\t],\n\t\t\t'redirection' => 0, // No redirects allowed.\n\t\t];\n\n\t\t$callback = $this->get_curl_resolve_callback( $raw_url, $url_or_ip );\n\t\tadd_action( 'http_api_curl', $callback );\n\n\t\t$http = _wp_http_get_object();\n\t\t$transport = $http->_get_first_available_transport( $args, $raw_url );\n\n\t\t// When cURL is available, we might be able to use it together with fopen().\n\t\tif ( 'WP_Http_Curl' === $transport ) {\n\t\t\t// php://temp is a read-write streams that allows temporary data to be stored in a file-like wrapper.\n\t\t\t// Other than php://memory, php://temp will use a temporary file once the amount of data stored hits a predefined limit (the default is 2 MB).\n\t\t\t// The location of this temporary file is determined in the same way as the {@see sys_get_temp_dir()} function.\n\t\t\tif ( WP_DEBUG ) {\n\t\t\t\t$stream_handle = fopen( 'php://memory', 'wb' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_system_operations_fopen\n\t\t\t} else {\n\t\t\t\t$stream_handle = @fopen( 'php://memory', 'wb' ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_system_operations_fopen, WordPress.PHP.NoSilencedErrors.Discouraged, Generic.PHP.NoSilencedErrors.Forbidden\n\t\t\t}\n\n\t\t\tif ( $stream_handle ) {\n\t\t\t\t$this->stream_handle = $stream_handle;\n\t\t\t\t$this->proxy_url_curl( $raw_url, $args );\n\t\t\t\texit;\n\t\t\t}\n\t\t}\n\n\t\t// If either cURL is not available or fopen() did not succeed,\n\t\t// fall back to using whatever else is set up on the site,\n\t\t// presumably WP_Http_Streams or still WP_Http_Curl but without streams.\n\t\tunset( $args['blocking'] );\n\t\t$this->proxy_url_fallback( $raw_url, $args );\n\n\t\texit;\n\t}\n\n\t/**\n\t * Prepares response asset response.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param LinkData|false $link URL data value, default to false is not set.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error Response object.\n\t *\n\t * @phpstan-param LinkData $link\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $link, $request ) {\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t$data = [];\n\n\t\t$error = new WP_Error();\n\t\tforeach ( $schema['properties'] as $field => $args ) {\n\t\t\tif ( ! isset( $link[ $field ] ) || ! rest_is_field_included( $field, $fields ) ) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\t$check = rest_validate_value_from_schema( $link[ $field ], $args, $field );\n\t\t\tif ( is_wp_error( $check ) ) {\n\t\t\t\t$error->add( 'rest_invalid_' . $field, $check->get_error_message(), [ 'status' => 400 ] );\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t$data[ $field ] = rest_sanitize_value_from_schema( $link[ $field ], $args, $field );\n\t\t}\n\n\t\tif ( $error->get_error_codes() ) {\n\t\t\treturn $error;\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\treturn rest_ensure_response( $data );\n\t}\n\n\t/**\n\t * Retrieves the link's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$allowed_mime_types = $this->get_allowed_mime_types();\n\t\t$types = array_keys( $allowed_mime_types );\n\t\t$allowed_mime_types = array_merge( ...array_values( $allowed_mime_types ) );\n\t\t$exts = $this->types->get_file_type_exts( $allowed_mime_types );\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'link',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'ext' => [\n\t\t\t\t\t'description' => __( 'File extension', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'enum' => $exts,\n\t\t\t\t],\n\t\t\t\t'file_name' => [\n\t\t\t\t\t'description' => __( 'File name', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'file_size' => [\n\t\t\t\t\t'description' => __( 'File size', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'mime_type' => [\n\t\t\t\t\t'description' => __( 'Mime type', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'enum' => $allowed_mime_types,\n\t\t\t\t],\n\t\t\t\t'type' => [\n\t\t\t\t\t'description' => __( 'Type', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'enum' => $types,\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Checks if current user can process urls.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function parse_url_permissions_check() {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new WP_Error(\n\t\t\t\t'rest_forbidden',\n\t\t\t\t__( 'Sorry, you are not allowed to insert external media.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Callback to validate urls.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param string $value Value to be validated.\n\t * @return true|WP_Error\n\t */\n\tpublic function validate_callback( $value ) {\n\t\t$url = untrailingslashit( $value );\n\n\t\tif ( empty( $url ) || ! $this->validate_url( $url ) ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t$path = wp_parse_url( $url, PHP_URL_PATH );\n\n\t\tif ( ! $path ) {\n\t\t\treturn new WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Returns a callback to modify the cURL configuration before the request is executed.\n\t *\n\t * @since 1.22.1\n\t *\n\t * @param string $url URL.\n\t * @param string $url_or_ip URL or IP address.\n\t */\n\tpublic function get_curl_resolve_callback( string $url, string $url_or_ip ): callable {\n\t\t/**\n\t\t * CURL configuration callback.\n\t\t *\n\t\t * @param resource $handle The cURL handle returned by curl_init() (passed by reference).\n\t\t */\n\t\treturn static function ( $handle ) use ( $url, $url_or_ip ): void {\n\t\t\t// Just some safeguard in case cURL is not really available,\n\t\t\t// despite this method being run in the context of WP_Http_Curl.\n\t\t\tif ( ! \\function_exists( '\\curl_setopt' ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( $url === $url_or_ip ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t$host = wp_parse_url( $url, PHP_URL_HOST );\n\t\t\t$scheme = wp_parse_url( $url, PHP_URL_SCHEME ) ?? 'http';\n\t\t\t$port = wp_parse_url( $url, PHP_URL_PORT ) ?? 'http' === $scheme ? 80 : 443;\n\n // phpcs:disable WordPress.WP.AlternativeFunctions.curl_curl_setopt\n\n\t\t\tcurl_setopt(\n\t\t\t\t$handle,\n\t\t\t\tCURLOPT_RESOLVE,\n\t\t\t\t[\n\t\t\t\t\t\"$host:$port:$url_or_ip\",\n\t\t\t\t]\n\t\t\t);\n\n // phpcs:enable WordPress.WP.AlternativeFunctions.curl_curl_setopt\n\t\t};\n\t}\n\n\t/**\n\t * Modifies the cURL configuration before the request is executed.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @param resource $handle The cURL handle returned by {@see curl_init()} (passed by reference).\n\t */\n\tpublic function modify_curl_configuration( $handle ): void {\n\t\t// Just some safeguard in case cURL is not really available,\n\t\t// despite this method being run in the context of WP_Http_Curl.\n\t\tif ( ! \\function_exists( '\\curl_setopt' ) ) {\n\t\t\treturn;\n\t\t}\n\n // phpcs:disable WordPress.WP.AlternativeFunctions.curl_curl_setopt\n\n\t\tcurl_setopt(\n\t\t\t$handle,\n\t\t\tCURLOPT_FILE,\n\t\t\t$this->stream_handle\n\t\t);\n\n\t\tcurl_setopt( $handle, CURLOPT_HEADERFUNCTION, [ $this, 'stream_headers' ] );\n\n // phpcs:enable WordPress.WP.AlternativeFunctions.curl_curl_setopt\n\t}\n\n\t/**\n\t * Grabs the headers of the cURL request.\n\t *\n\t * Each header is sent individually to this callback,\n\t * so we take a look at each one to see if we should \"forward\" it.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @param resource $handle cURL handle.\n\t * @param string $header cURL header.\n\t * @return int Header length.\n\t */\n\tpublic function stream_headers( $handle, $header ): int {\n\t\t// Parse Status-Line, the first component in the HTTP response, e.g. HTTP/1.1 200 OK.\n\t\t// Extract the status code to re-send that here.\n\t\tif ( str_starts_with( $header, 'HTTP/' ) ) {\n\t\t\t$status = explode( ' ', $header );\n\t\t\thttp_response_code( (int) $status[1] );\n\t\t\treturn \\strlen( $header );\n\t\t}\n\n\t\tforeach ( self::PROXY_HEADERS_ALLOWLIST as $_header ) {\n\t\t\tif ( str_starts_with( strtolower( $header ), strtolower( $_header ) . ': ' ) ) {\n\t\t\t\theader( $header, true );\n\t\t\t}\n\t\t}\n\n\t\treturn \\strlen( $header );\n\t}\n\n\t/**\n\t * Proxy a given URL via a PHP read-write stream.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @param string $url Request URL.\n\t * @param array $args Request args.\n\t *\n\t * @phpstan-param HttpArgs $args\n\t */\n\tprivate function proxy_url_curl( string $url, array $args ): void {\n\t\tadd_action( 'http_api_curl', [ $this, 'modify_curl_configuration' ] );\n\t\twp_safe_remote_get( $url, $args );\n\t\tremove_action( 'http_api_curl', [ $this, 'modify_curl_configuration' ] );\n\n\t\trewind( $this->stream_handle );\n\t\twhile ( ! feof( $this->stream_handle ) ) {\n\t\t\techo fread( $this->stream_handle, 1024 * 1024 ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped, WordPress.WP.AlternativeFunctions.file_system_operations_fread\n\t\t}\n\n\t\tfclose( $this->stream_handle );\n\t}\n\n\t/**\n\t * Proxy a given URL by storing in memory.\n\t *\n\t * @since 1.15.0\n\t *\n\t * @param string $url Request URL.\n\t * @param array $args Request args.\n\t *\n\t * @phpstan-param HttpArgs $args\n\t */\n\tprivate function proxy_url_fallback( string $url, array $args ): void {\n\t\t$response = wp_safe_remote_get( $url, $args );\n\t\t$status = wp_remote_retrieve_response_code( $response );\n\n\t\tif ( ! $status ) {\n\t\t\thttp_response_code( 404 );\n\t\t\treturn;\n\t\t}\n\n\t\thttp_response_code( (int) $status );\n\n\t\t$headers = wp_remote_retrieve_headers( $response );\n\n\t\tforeach ( self::PROXY_HEADERS_ALLOWLIST as $_header ) {\n\t\t\tif ( isset( $headers[ $_header ] ) ) {\n\t\t\t\theader( $_header . ': ' . $headers[ $_header ] );\n\t\t\t}\n\t\t}\n\n\t\techo wp_remote_retrieve_body( $response ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t}\n\n\t/**\n\t * Validate a URL for safe use in the HTTP API.\n\t *\n\t * Like {@see wp_http_validate_url} in core, but with extra hardening\n\t * to avoid DNS rebinding issues.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.CyclomaticComplexity\")\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param string $url Request URL.\n\t * @return string|false Original URL, resolved IP address, or false on failure.\n\t */\n\tprivate function validate_url( string $url ) { // phpcs:ignore SlevomatCodingStandard.Complexity.Cognitive.ComplexityTooHigh\n\t\tif ( '' === $url || is_numeric( $url ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$original_url = $url;\n\t\t$url = wp_kses_bad_protocol( $url, [ 'http', 'https' ] );\n\t\tif ( ! $url || strtolower( $url ) !== strtolower( $original_url ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$parsed_url = wp_parse_url( $url );\n\t\tif ( ! $parsed_url || ! isset( $parsed_url['host'], $parsed_url['scheme'] ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( isset( $parsed_url['user'] ) || isset( $parsed_url['pass'] ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif ( false !== strpbrk( $parsed_url['host'], ':#?[]' ) ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t/**\n\t\t * Home URL.\n\t\t *\n\t\t * @var string\n\t\t */\n\t\t$home_url = get_option( 'home' );\n\n\t\t$parsed_home = wp_parse_url( $home_url );\n\n\t\tif ( ! $parsed_home ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t$same_host = isset( $parsed_home['host'] ) && strtolower( $parsed_home['host'] ) === strtolower( $parsed_url['host'] );\n\t\t$host = trim( $parsed_url['host'], '.' );\n\n\t\t$validated_url = $url;\n\n\t\tif ( ! $same_host ) {\n\t\t\tif ( preg_match( '#^(([1-9]?\\d|1\\d\\d|25[0-5]|2[0-4]\\d)\\.){3}([1-9]?\\d|1\\d\\d|25[0-5]|2[0-4]\\d)$#', $host ) ) {\n\t\t\t\t$ip = $host;\n\t\t\t} else {\n\t\t\t\t$ip = gethostbyname( $host );\n\t\t\t\tif ( $ip === $host ) { // Error condition for gethostbyname().\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t$parts = array_map( 'intval', explode( '.', $ip ) );\n\t\t\tif (\n\t\t\t\t0 === $parts[0] // 0.0.0.0/8.\n\t\t\t\t||\n\t\t\t\t127 === $parts[0] // 127.0.0.0/8.\n\t\t\t\t||\n\t\t\t\t10 === $parts[0] // 10.0.0.0/8.\n\t\t\t\t||\n\t\t\t\t( 172 === $parts[0] && 16 <= $parts[1] && 31 >= $parts[1] ) // 172.16.0.0/12.\n\t\t\t\t||\n\t\t\t\t( 192 === $parts[0] && 168 === $parts[1] ) // 192.168.0.0/16.\n\t\t\t\t||\n\t\t\t\t( 169 === $parts[0] && 254 === $parts[1] ) // 169.254.0.0/16.\n\t\t\t\t||\n\t\t\t\t// phpcs:ignore Squiz.PHP.CommentedOutCode.Found\n\t\t\t\t( 100 === $parts[0] && 64 <= $parts[1] && 127 >= $parts[1] ) // Private: 100.64.0.0/10.\n\t\t\t) {\n\t\t\t\t// If host appears local, reject.\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\t// Use resolved IP address to avoid DNS rebinding issues.\n\t\t\t$validated_url = $ip;\n\t\t}\n\n\t\t/** This filter is documented in wp-includes/http.php */\n\t\t$allowed_ports = apply_filters( 'http_allowed_safe_ports', [ 80, 443, 8080 ], $host, $url );\n\t\tif (\n\t\t\t! isset( $parsed_url['port'] ) ||\n\t\t\t( \\is_array( $allowed_ports ) && \\in_array( $parsed_url['port'], $allowed_ports, true ) )\n\t\t) {\n\t\t\treturn $validated_url;\n\t\t}\n\n\t\tif ( $same_host && isset( $parsed_home['port'] ) && $parsed_home['port'] === $parsed_url['port'] ) {\n\t\t\treturn $validated_url;\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Returns a list of allowed mime types per media type (image, audio, video).\n\t *\n\t * @since 1.19.0\n\t *\n\t * @return array List of allowed mime types.\n\t */\n\tprotected function get_allowed_mime_types(): array {\n\t\t$mime_type = $this->types->get_allowed_mime_types();\n\n\t\t// Do not support hotlinking SVGs for security reasons.\n\t\tunset( $mime_type['vector'] );\n\n\t\treturn $mime_type;\n\t}\n}\n" }, { "path": "includes/REST_API/Link_Controller.php", "content": "\n * }\n */\nclass Link_Controller extends REST_Controller implements HasRequirements {\n\n\t/**\n\t * Story_Post_Type instance.\n\t *\n\t * @var Story_Post_Type Story_Post_Type instance.\n\t */\n\tprivate Story_Post_Type $story_post_type;\n\n\t/**\n\t * Constructor.\n\t *\n\t * @param Story_Post_Type $story_post_type Story_Post_Type instance.\n\t */\n\tpublic function __construct( Story_Post_Type $story_post_type ) {\n\t\t$this->story_post_type = $story_post_type;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'link';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for links.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'parse_link' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'parse_link_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t'description' => __( 'The URL to process.', 'web-stories' ),\n\t\t\t\t\t\t\t'required' => true,\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t'validate_callback' => [ $this, 'validate_url' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Parses a URL to return some metadata for inserting links.\n\t *\n\t * @SuppressWarnings(\"PHPMD.CyclomaticComplexity\")\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Full data about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function parse_link( $request ) {\n\t\t/**\n\t\t * Requested URL.\n\t\t *\n\t\t * @var string $url\n\t\t */\n\t\t$url = $request['url'];\n\t\t$url = untrailingslashit( $url );\n\n\t\t/**\n\t\t * Filters the link data TTL value.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param int $time Time to live (in seconds). Default is 1 day.\n\t\t * @param string $url The attempted URL.\n\t\t */\n\t\t$cache_ttl = apply_filters( 'web_stories_link_data_cache_ttl', DAY_IN_SECONDS, $url );\n\t\t$cache_key = 'web_stories_link_data_' . md5( $url );\n\n\t\t$data = get_transient( $cache_key );\n\t\tif ( \\is_string( $data ) && ! empty( $data ) ) {\n\t\t\t/**\n\t\t\t * Decoded cached link data.\n\t\t\t *\n\t\t\t * @var array{title: string, image: string, description: string}|null $link\n\t\t\t */\n\t\t\t$link = json_decode( $data, true );\n\n\t\t\tif ( $link ) {\n\t\t\t\t$response = $this->prepare_item_for_response( $link, $request );\n\t\t\t\treturn rest_ensure_response( $response );\n\t\t\t}\n\t\t}\n\n\t\t$data = [\n\t\t\t'title' => '',\n\t\t\t'image' => '',\n\t\t\t'description' => '',\n\t\t];\n\n\t\t// Do not request instagram.com, as it redirects to a login page.\n\t\t// See https://github.com/GoogleForCreators/web-stories-wp/issues/10451.\n\t\t$matches = [];\n\t\t$query_string = wp_parse_url( $url, PHP_URL_QUERY );\n\t\t$check_url = \\is_string( $query_string ) ? str_replace( \"?$query_string\", '', $url ) : $url;\n\t\tif ( preg_match( '~^https?://(www\\.)?instagram\\.com/([^/]+)/?$~', $check_url, $matches ) ) {\n\t\t\t$data['title'] = \\sprintf(\n\t\t\t\t/* translators: %s: Instagram username. */\n\t\t\t\t__( 'Instagram - @%s', 'web-stories' ),\n\t\t\t\t$matches[2]\n\t\t\t);\n\t\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\t$args = [\n\t\t\t'limit_response_size' => 153_600, // 150 KB.\n\t\t\t'timeout' => 7, // phpcs:ignore WordPressVIPMinimum.Performance.RemoteRequestTimeout.timeout_timeout\n\t\t];\n\n\t\t/**\n\t\t * Filters the HTTP request args for link data retrieval.\n\t\t *\n\t\t * Can be used to adjust timeout and response size limit.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $args Arguments used for the HTTP request\n\t\t * @param string $url The attempted URL.\n\t\t */\n\t\t$args = apply_filters( 'web_stories_link_data_request_args', $args, $url );\n\n\t\t$response = wp_safe_remote_get( $url, $args );\n\n\t\tif ( is_wp_error( $response ) && 'http_request_failed' === $response->get_error_code() ) {\n\t\t\treturn new \\WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 404 ] );\n\t\t}\n\n\t\tif ( WP_Http::OK !== wp_remote_retrieve_response_code( $response ) ) {\n\t\t\t// Not saving to cache since the error might be temporary.\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\t$html = wp_remote_retrieve_body( $response );\n\n\t\t// Strip .\n\t\t$html_head_end = stripos( $html, '' );\n\t\tif ( $html_head_end ) {\n\t\t\t$html = substr( $html, 0, $html_head_end );\n\t\t}\n\n\t\tif ( ! $html ) {\n\t\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\ttry {\n\t\t\t$doc = Document::fromHtml( $html );\n\t\t} catch ( \\DOMException $exception ) {\n\t\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\tif ( ! $doc ) {\n\t\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\t\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\t$xpath = $doc->xpath;\n\n\t\t// Link title.\n\n\t\t$title = '';\n\t\t$title_query = $xpath->query( '//title' );\n\n\t\tif ( $title_query instanceof DOMNodeList && $title_query->length > 0 ) {\n\t\t\t$title_node = $title_query->item( 0 );\n\n\t\t\tif ( $title_node instanceof DOMElement ) {\n\t\t\t\t$title = $title_node->textContent;\n\t\t\t}\n\t\t}\n\n\t\tif ( ! $title ) {\n\t\t\t/**\n\t\t\t * List of found elements.\n\t\t\t *\n\t\t\t * @var DOMNodeList $og_title_query\n\t\t\t */\n\t\t\t$og_title_query = $xpath->query( '//meta[@property=\"og:title\"]' );\n\t\t\t$title = $this->get_dom_attribute_content( $og_title_query, 'content' );\n\t\t}\n\n\t\tif ( ! $title ) {\n\t\t\t/**\n\t\t\t * List of found elements.\n\t\t\t *\n\t\t\t * @var DOMNodeList $og_site_name_query\n\t\t\t */\n\t\t\t$og_site_name_query = $xpath->query( '//meta[@property=\"og:site_name\"]' );\n\t\t\t$title = $this->get_dom_attribute_content( $og_site_name_query, 'content' );\n\t\t}\n\n\t\t// Site icon.\n\n\t\t/**\n\t\t * List of found elements.\n\t\t *\n\t\t * @var DOMNodeList $og_image_query\n\t\t */\n\t\t$og_image_query = $xpath->query( '//meta[@property=\"og:image\"]' );\n\t\t$image = $this->get_dom_attribute_content( $og_image_query, 'content' );\n\n\t\tif ( ! $image ) {\n\t\t\t/**\n\t\t\t * List of found elements.\n\t\t\t *\n\t\t\t * @var DOMNodeList $icon_query\n\t\t\t */\n\t\t\t$icon_query = $xpath->query( '//link[contains(@rel, \"icon\")]' );\n\t\t\t$image = $this->get_dom_attribute_content( $icon_query, 'content' );\n\t\t}\n\n\t\tif ( ! $image ) {\n\t\t\t/**\n\t\t\t * List of found elements.\n\t\t\t *\n\t\t\t * @var DOMNodeList $touch_icon_query\n\t\t\t */\n\t\t\t$touch_icon_query = $xpath->query( '//link[contains(@rel, \"apple-touch-icon\")]' );\n\t\t\t$image = $this->get_dom_attribute_content( $touch_icon_query, 'href' );\n\t\t}\n\n\t\t// Link description.\n\n\t\t/**\n\t\t * List of found elements.\n\t\t *\n\t\t * @var DOMNodeList $description_query\n\t\t */\n\t\t$description_query = $xpath->query( '//meta[@name=\"description\"]' );\n\t\t$description = $this->get_dom_attribute_content( $description_query, 'content' );\n\n\t\tif ( ! $description ) {\n\t\t\t/**\n\t\t\t * List of found elements.\n\t\t\t *\n\t\t\t * @var DOMNodeList $og_description_query\n\t\t\t */\n\t\t\t$og_description_query = $xpath->query( '//meta[@property=\"og:description\"]' );\n\t\t\t$description = $this->get_dom_attribute_content( $og_description_query, 'content' );\n\t\t}\n\n\t\t$data = [\n\t\t\t'title' => $title ?: '',\n\t\t\t'image' => $image ?: '',\n\t\t\t'description' => $description ?: '',\n\t\t];\n\n\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\tset_transient( $cache_key, wp_json_encode( $data ), $cache_ttl );\n\n\t\treturn rest_ensure_response( $response );\n\t}\n\n\n\t/**\n\t * Prepares a single lock output for response.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array $link Link value, default to false is not set.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error Response object.\n\t *\n\t * @phpstan-param array{title: string, image: string, description: string} $link\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $link, $request ) {\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t$data = [];\n\n\t\t$check_fields = array_keys( $link );\n\t\tforeach ( $check_fields as $check_field ) {\n\t\t\tif ( ! empty( $schema['properties'][ $check_field ] ) && rest_is_field_included( $check_field, $fields ) ) {\n\t\t\t\t$data[ $check_field ] = rest_sanitize_value_from_schema( $link[ $check_field ], $schema['properties'][ $check_field ] );\n\t\t\t}\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\t// Wrap the data in a response object.\n\t\treturn rest_ensure_response( $data );\n\t}\n\n\t/**\n\t * Retrieves the link's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'link',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'title' => [\n\t\t\t\t\t'description' => __( 'Link\\'s title', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'image' => [\n\t\t\t\t\t'description' => __( 'Link\\'s image', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'description' => [\n\t\t\t\t\t'description' => __( 'Link\\'s description', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Checks if current user can process links.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function parse_link_permissions_check() {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new \\WP_Error( 'rest_forbidden', __( 'Sorry, you are not allowed to process links.', 'web-stories' ), [ 'status' => rest_authorization_required_code() ] );\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Callback to validate urls.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param string $value Value to be validated.\n\t * @return true|WP_Error\n\t */\n\tpublic function validate_url( $value ) {\n\t\t$url = untrailingslashit( $value );\n\n\t\tif ( empty( $url ) || ! wp_http_validate_url( $url ) ) {\n\t\t\treturn new \\WP_Error( 'rest_invalid_url', __( 'Invalid URL', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Retrieve content of a given DOM node attribute.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param DOMNodeList|false $query XPath query result.\n\t * @param string $attribute Attribute name.\n\t * @return string|false Attribute content on success, false otherwise.\n\t */\n\tprotected function get_dom_attribute_content( $query, string $attribute ) {\n\t\tif ( ! $query instanceof DOMNodeList || 0 === $query->length ) {\n\t\t\treturn false;\n\t\t}\n\n\t\t/**\n\t\t * DOMElement\n\t\t *\n\t\t * @var DOMElement|DOMNode $node\n\t\t */\n\t\t$node = $query->item( 0 );\n\n\t\tif ( ! $node instanceof DOMElement ) {\n\t\t\treturn false;\n\t\t}\n\n\t\treturn $node->getAttribute( $attribute );\n\t}\n}\n" }, { "path": "includes/REST_API/Page_Template_Controller.php", "content": "envelope_response( $response, $embed );\n\t\t}\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the query params for the posts collection.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['_web_stories_envelope'] = [\n\t\t\t'description' => __( 'Envelope request for preloading.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t\t'default' => false,\n\t\t];\n\n\t\treturn $query_params;\n\t}\n\n\t/**\n\t * Retrieves the attachment's schema, conforming to JSON Schema.\n\t *\n\t * Removes some unneeded fields to improve performance by\n\t * avoiding some expensive database queries.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = parent::get_item_schema();\n\n\t\tunset(\n\t\t\t$schema['properties']['permalink_template'],\n\t\t\t$schema['properties']['generated_slug']\n\t\t);\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Checks if a given request has access to read posts.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function get_items_permissions_check( $request ) {\n\t\t$ret = parent::get_items_permissions_check( $request );\n\n\t\tif ( is_wp_error( $ret ) ) {\n\t\t\treturn $ret;\n\t\t}\n\n\t\t$post_type = get_post_type_object( $this->post_type );\n\n\t\tif (\n\t\t\t! $post_type ||\n\t\t\t! current_user_can( $post_type->cap->edit_posts ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden_context',\n\t\t\t\t__( 'Sorry, you are not allowed to edit page templates.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Checks if a given request has access to read a post.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.\n\t */\n\tpublic function get_item_permissions_check( $request ) {\n\t\t$ret = parent::get_item_permissions_check( $request );\n\n\t\tif ( is_wp_error( $ret ) ) {\n\t\t\treturn $ret;\n\t\t}\n\n\t\t$post_type = get_post_type_object( $this->post_type );\n\n\t\tif (\n\t\t\t! $post_type ||\n\t\t\t! current_user_can( $post_type->cap->edit_posts ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden_context',\n\t\t\t\t__( 'Sorry, you are not allowed to edit page templates.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n}\n" }, { "path": "includes/REST_API/Products_Controller.php", "content": "settings = $settings;\n\t\t$this->story_post_type = $story_post_type;\n\t\t$this->shopping_vendors = $shopping_vendors;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'products';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.20.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings', 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for links.\n\t *\n\t * @since 1.20.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_items' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'get_items_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_collection_params(),\n\t\t\t\t],\n\t\t\t\t'schema' => [ $this, 'get_public_item_schema' ],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Checks if a given request has access to get and create items.\n\t *\n\t * @since 1.20.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function get_items_permissions_check( $request ) {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden',\n\t\t\t\t__( 'Sorry, you are not allowed to manage products.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Retrieves all products.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.20.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function get_items( $request ) {\n\t\t/**\n\t\t * Shopping provider.\n\t\t *\n\t\t * @var string $shopping_provider\n\t\t */\n\t\t$shopping_provider = $this->settings->get_setting( Settings::SETTING_NAME_SHOPPING_PROVIDER );\n\t\t$query = $this->shopping_vendors->get_vendor_class( $shopping_provider );\n\n\t\tif ( 'none' === $shopping_provider ) {\n\t\t\treturn new WP_Error( 'rest_shopping_provider', __( 'No shopping provider set up.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\tif ( ! $query ) {\n\t\t\treturn new WP_Error( 'rest_shopping_provider_not_found', __( 'Unable to find shopping integration.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t$search_term = ! empty( $request['search'] ) ? $request['search'] : '';\n\t\t$orderby = ! empty( $request['orderby'] ) ? $request['orderby'] : 'date';\n\t\t$page = ! empty( $request['page'] ) ? $request['page'] : 1;\n\t\t$per_page = ! empty( $request['per_page'] ) ? $request['per_page'] : 100;\n\t\t$order = ! empty( $request['order'] ) ? $request['order'] : 'desc';\n\n\t\t$query_result = $query->get_search( $search_term, $page, $per_page, $orderby, $order );\n\t\tif ( is_wp_error( $query_result ) ) {\n\t\t\treturn $query_result;\n\t\t}\n\n\t\t$products = [];\n\t\tforeach ( $query_result['products'] as $product ) {\n\t\t\t$data = $this->prepare_item_for_response( $product, $request );\n\t\t\t$products[] = $this->prepare_response_for_collection( $data );\n\t\t}\n\n\t\t/**\n\t\t * Response object.\n\t\t *\n\t\t * @var WP_REST_Response $response\n\t\t */\n\t\t$response = rest_ensure_response( $products );\n\n\t\t$response->header( 'X-WP-HasNextPage', $query_result['has_next_page'] ? 'true' : 'false' );\n\n\t\tif ( $request['_web_stories_envelope'] ) {\n\t\t\t$embed = $request['_embed'] ?? false;\n\t\t\t$embed = $embed ? rest_parse_embed_param( $embed ) : false;\n\t\t\t$response = rest_get_server()->envelope_response( $response, $embed );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Prepares a single post output for response.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.CyclomaticComplexity\")\n\t *\n\t * @since 1.20.0\n\t *\n\t * @param Product $item Project object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $item, $request ): WP_REST_Response { // phpcs:ignore SlevomatCodingStandard.Complexity.Cognitive.ComplexityTooHigh\n\t\t$product = $item;\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\t$data = [];\n\n\t\tif ( rest_is_field_included( 'productId', $fields ) ) {\n\t\t\t$data['productId'] = $product->get_id();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productUrl', $fields ) ) {\n\t\t\t$data['productUrl'] = $product->get_url();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productTitle', $fields ) ) {\n\t\t\t$data['productTitle'] = $product->get_title();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productBrand', $fields ) ) {\n\t\t\t$data['productBrand'] = $product->get_brand();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productPrice', $fields ) ) {\n\t\t\t$data['productPrice'] = $product->get_price();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productPriceCurrency', $fields ) ) {\n\t\t\t$data['productPriceCurrency'] = $product->get_price_currency();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productDetails', $fields ) ) {\n\t\t\t$data['productDetails'] = $product->get_details();\n\t\t}\n\n\t\tif ( rest_is_field_included( 'productImages', $fields ) ) {\n\t\t\t$data['productImages'] = [];\n\n\t\t\tforeach ( $product->get_images() as $image ) {\n\t\t\t\t$image_data = [];\n\t\t\t\tif ( rest_is_field_included( 'productImages.url', $fields ) ) {\n\t\t\t\t\t$image_data['url'] = $image['url'];\n\t\t\t\t}\n\t\t\t\tif ( rest_is_field_included( 'productImages.alt', $fields ) ) {\n\t\t\t\t\t$image_data['alt'] = $image['alt'];\n\t\t\t\t}\n\t\t\t\t$data['productImages'][] = $image_data;\n\t\t\t}\n\t\t}\n\n\t\t$rating = $product->get_aggregate_rating();\n\n\t\tif ( $rating ) {\n\t\t\tif ( rest_is_field_included( 'aggregateRating', $fields ) ) {\n\t\t\t\t$data['aggregateRating'] = [];\n\t\t\t}\n\n\t\t\tif ( rest_is_field_included( 'aggregateRating.ratingValue', $fields ) ) {\n\t\t\t\t$data['aggregateRating']['ratingValue'] = isset( $rating['rating_value'] ) ? (float) $rating['rating_value'] : 0;\n\t\t\t}\n\n\t\t\tif ( rest_is_field_included( 'aggregateRating.reviewCount', $fields ) ) {\n\t\t\t\t$data['aggregateRating']['reviewCount'] = isset( $rating['review_count'] ) ? (int) $rating['review_count'] : 0;\n\t\t\t}\n\n\t\t\tif ( rest_is_field_included( 'aggregateRating.reviewUrl', $fields ) ) {\n\t\t\t\t$data['aggregateRating']['reviewUrl'] = $rating['review_url'] ?? null;\n\t\t\t}\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\t/**\n\t\t * Response object.\n\t\t *\n\t\t * @var WP_REST_Response $response\n\t\t */\n\t\t$response = rest_ensure_response( $data );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the product schema, conforming to JSON Schema.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.20.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t// This must not be an actually existing post type like \"product\".\n\t\t\t// See https://github.com/GoogleForCreators/web-stories-wp/issues/12735.\n\t\t\t'title' => 'web-story-product',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'productId' => [\n\t\t\t\t\t'description' => __( 'Product ID.', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productUrl' => [\n\t\t\t\t\t'description' => __( 'Product URL.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productTitle' => [\n\t\t\t\t\t'description' => __( 'Product title.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productBrand' => [\n\t\t\t\t\t'description' => __( 'Product brand.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productPrice' => [\n\t\t\t\t\t'description' => __( 'Product price.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productPriceCurrency' => [\n\t\t\t\t\t'description' => __( 'Product currency.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productImages' => [\n\t\t\t\t\t'description' => __( 'Product brand.', 'web-stories' ),\n\t\t\t\t\t'type' => 'array',\n\t\t\t\t\t'items' => [\n\t\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Product image URL', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'alt' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Product image alt text', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'aggregateRating' => [\n\t\t\t\t\t'description' => __( 'Product rating.', 'web-stories' ),\n\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t'ratingValue' => [\n\t\t\t\t\t\t\t'description' => __( 'Average rating.', 'web-stories' ),\n\t\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'reviewCount' => [\n\t\t\t\t\t\t\t'description' => __( 'Number of reviews.', 'web-stories' ),\n\t\t\t\t\t\t\t'type' => 'number',\n\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'reviewUrl' => [\n\t\t\t\t\t\t\t'description' => __( 'Product review URL.', 'web-stories' ),\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'productDetails' => [\n\t\t\t\t\t'description' => __( 'Product description.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Retrieves the query params for the products collection.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['per_page']['default'] = 100;\n\n\t\t$query_params['orderby'] = [\n\t\t\t'description' => __( 'Sort collection by product attribute.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'default' => 'date',\n\t\t\t'enum' => [\n\t\t\t\t'date',\n\t\t\t\t'price',\n\t\t\t\t'title',\n\t\t\t],\n\t\t];\n\n\t\t$query_params['order'] = [\n\t\t\t'description' => __( 'Order sort attribute ascending or descending.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'default' => 'desc',\n\t\t\t'enum' => [ 'asc', 'desc' ],\n\t\t];\n\n\t\t$query_params['_web_stories_envelope'] = [\n\t\t\t'description' => __( 'Envelope request for preloading.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t\t'default' => false,\n\t\t];\n\n\t\treturn $query_params;\n\t}\n}\n" }, { "path": "includes/REST_API/Publisher_Logos_Controller.php", "content": "settings = $settings;\n\t\t$this->story_post_type = $story_post_type;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'publisher-logos';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings', 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for links.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_items' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'permissions_check' ],\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::CREATABLE,\n\t\t\t\t\t'callback' => [ $this, 'create_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'permissions_check' ],\n\t\t\t\t\t'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::CREATABLE ),\n\t\t\t\t],\n\t\t\t\t'schema' => [ $this, 'get_public_item_schema' ],\n\t\t\t]\n\t\t);\n\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base . '/(?P[\\d]+)',\n\t\t\t[\n\t\t\t\t'args' => [\n\t\t\t\t\t'id' => [\n\t\t\t\t\t\t'description' => __( 'Publisher logo ID.', 'web-stories' ),\n\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::EDITABLE,\n\t\t\t\t\t'callback' => [ $this, 'update_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'update_item_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::EDITABLE ),\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::DELETABLE,\n\t\t\t\t\t'callback' => [ $this, 'delete_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'permissions_check' ],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Checks if a given request has access to get and create items.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function permissions_check() {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden',\n\t\t\t\t__( 'Sorry, you are not allowed to manage publisher logos.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Checks if a given request has access to manage a single item.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has access to update the item, WP_Error object otherwise.\n\t */\n\tpublic function update_item_permissions_check( $request ) {\n\t\tif ( ! current_user_can( 'manage_options' ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_forbidden',\n\t\t\t\t__( 'Sorry, you are not allowed to manage publisher logos.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Retrieves all active publisher logos.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function get_items( $request ) {\n\t\t/**\n\t\t * Publisher logo IDs.\n\t\t *\n\t\t * @var int[] $publisher_logos_ids\n\t\t */\n\t\t$publisher_logos_ids = $this->settings->get_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, [] );\n\t\t_prime_post_caches( $publisher_logos_ids );\n\t\t$publisher_logos = $this->filter_publisher_logos( $publisher_logos_ids );\n\t\t$results = [];\n\n\t\tforeach ( $publisher_logos as $logo ) {\n\t\t\t/**\n\t\t\t * We're expecting a post object after the filtering above.\n\t\t\t *\n\t\t\t * @var WP_Post $post\n\t\t\t */\n\t\t\t$post = get_post( $logo );\n\n\t\t\t$data = $this->prepare_item_for_response( $post, $request );\n\t\t\t$results[] = $this->prepare_response_for_collection( $data );\n\t\t}\n\n\t\t// Ensure the default publisher logo is first in the list.\n\t\t$active = array_column( $results, 'active' );\n\t\tarray_multisort( $active, SORT_DESC, $results );\n\n\t\treturn rest_ensure_response( $results );\n\t}\n\n\t/**\n\t * Adds a new publisher logo to the collection.\n\t *\n\t * Supports adding multiple logos at once.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function create_item( $request ) {\n\t\t/**\n\t\t * List of publisher logos.\n\t\t *\n\t\t * @var int[] $publisher_logos\n\t\t */\n\t\t$publisher_logos = $this->settings->get_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, [] );\n\t\t$publisher_logos = $this->filter_publisher_logos( $publisher_logos );\n\n\t\t/**\n\t\t * Publisher logo ID(s).\n\t\t *\n\t\t * Could be a single attachment ID or an array of attachment IDs.\n\t\t *\n\t\t * @var int|int[] $logo_id\n\t\t */\n\t\t$logo_id = $request['id'];\n\n\t\t$posts = (array) $logo_id;\n\n\t\tif ( empty( $posts ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_invalid_id',\n\t\t\t\t__( 'Invalid ID', 'web-stories' ),\n\t\t\t\t[ 'status' => 400 ]\n\t\t\t);\n\t\t}\n\n\t\tforeach ( $posts as $post_id ) {\n\t\t\t$post = get_post( $post_id );\n\n\t\t\tif ( ! $post || 'attachment' !== $post->post_type ) {\n\t\t\t\treturn new \\WP_Error(\n\t\t\t\t\t'rest_invalid_id',\n\t\t\t\t\t__( 'Invalid ID', 'web-stories' ),\n\t\t\t\t\t[ 'status' => 400 ]\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif ( \\in_array( $post->ID, $publisher_logos, true ) ) {\n\t\t\t\treturn new \\WP_Error(\n\t\t\t\t\t'rest_publisher_logo_exists',\n\t\t\t\t\t__( 'Publisher logo already exists', 'web-stories' ),\n\t\t\t\t\t[ 'status' => 400 ]\n\t\t\t\t);\n\t\t\t}\n\n\t\t\t$publisher_logos[] = $post->ID;\n\t\t}\n\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, $publisher_logos );\n\n\t\t$active_publisher_logo_id = absint( $this->settings->get_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO ) );\n\n\t\tif ( 1 === \\count( $publisher_logos ) || ! \\in_array( $active_publisher_logo_id, $publisher_logos, true ) ) {\n\t\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO, $posts[0] );\n\t\t}\n\n\t\t$results = [];\n\n\t\tforeach ( $posts as $post ) {\n\t\t\t/**\n\t\t\t * Post object.\n\t\t\t *\n\t\t\t * @var WP_Post $post\n\t\t\t */\n\t\t\t$post = get_post( $post );\n\n\t\t\t$data = $this->prepare_item_for_response( $post, $request );\n\n\t\t\tif ( 1 === \\count( $posts ) ) {\n\t\t\t\treturn $data;\n\t\t\t}\n\n\t\t\t$results[] = $this->prepare_response_for_collection( $data );\n\t\t}\n\n\t\treturn rest_ensure_response( $results );\n\t}\n\n\t/**\n\t * Removes a publisher logo from the collection.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function delete_item( $request ) {\n\t\t/**\n\t\t * Publisher logo ID.\n\t\t *\n\t\t * @var int $logo_id\n\t\t */\n\t\t$logo_id = $request['id'];\n\n\t\t$post = $this->get_publisher_logo( $logo_id );\n\n\t\tif ( is_wp_error( $post ) ) {\n\t\t\treturn $post;\n\t\t}\n\n\t\t$prepared = $this->prepare_item_for_response( $post, $request );\n\n\t\t/**\n\t\t * List of publisher logos.\n\t\t *\n\t\t * @var int[] $publisher_logos\n\t\t */\n\t\t$publisher_logos = $this->settings->get_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, [] );\n\t\t$publisher_logos = $this->filter_publisher_logos( $publisher_logos );\n\t\t$publisher_logos = array_values( array_diff( $publisher_logos, [ $post->ID ] ) );\n\n\t\t$active_publisher_logo_id = absint( $this->settings->get_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO ) );\n\n\t\tif ( $post->ID === $active_publisher_logo_id || ! \\in_array( $active_publisher_logo_id, $publisher_logos, true ) ) {\n\t\t\t// Mark the first available publisher logo as the new default.\n\t\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO, ! empty( $publisher_logos[0] ) ? $publisher_logos[0] : 0 );\n\t\t}\n\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, $publisher_logos );\n\n\t\treturn new WP_REST_Response(\n\t\t\t[\n\t\t\t\t'deleted' => true,\n\t\t\t\t'previous' => $prepared->get_data(),\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Updates a publisher logo in the collection.\n\t *\n\t * Can only be used to make it the \"active\" one.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function update_item( $request ) {\n\t\t/**\n\t\t * Publisher logo ID.\n\t\t *\n\t\t * @var int $logo_id\n\t\t */\n\t\t$logo_id = $request['id'];\n\n\t\t$post = $this->get_publisher_logo( $logo_id );\n\n\t\tif ( is_wp_error( $post ) ) {\n\t\t\treturn $post;\n\t\t}\n\n\t\tif ( $request['active'] ) {\n\t\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO, $post->ID );\n\t\t}\n\n\t\treturn $this->prepare_item_for_response( $post, $request );\n\t}\n\n\t/**\n\t * Prepares a single publisher logo output for response.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t */\n\tpublic function prepare_item_for_response( $post, $request ): WP_REST_Response {\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\t// Base fields for every post.\n\t\t$data = [];\n\n\t\tif ( rest_is_field_included( 'id', $fields ) ) {\n\t\t\t$data['id'] = $post->ID;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'title', $fields ) ) {\n\t\t\t$data['title'] = get_the_title( $post->ID );\n\t\t}\n\n\t\tif ( rest_is_field_included( 'active', $fields ) ) {\n\t\t\t$active_publisher_logo_id = absint( $this->settings->get_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO ) );\n\t\t\t$data['active'] = $post->ID === $active_publisher_logo_id;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'url', $fields ) ) {\n\t\t\t$data['url'] = wp_get_attachment_url( $post->ID );\n\t\t}\n\n\t\t/**\n\t\t * Wrapped response object.\n\t\t *\n\t\t * @var WP_REST_Response $response Response object.\n\t\t */\n\t\t$response = rest_ensure_response( $data );\n\n\t\tif ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {\n\t\t\t$response->add_links( $this->prepare_links( $post ) );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the publisher logo's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array|bool|string>>|string> Item schema data.\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t\t}\n\n\t\treturn [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'publisher-logo',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'id' => [\n\t\t\t\t\t'description' => __( 'Publisher logo ID.', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'title' => [\n\t\t\t\t\t'description' => __( 'Publisher logo title.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'url' => [\n\t\t\t\t\t'description' => __( 'Publisher logo URL.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t\t'active' => [\n\t\t\t\t\t'description' => __( 'Whether the publisher logo is the default one.', 'web-stories' ),\n\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t'readonly' => true,\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\t}\n\n\t/**\n\t * Get an existing publisher logo's post object, if valid.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param int $id Supplied ID.\n\t * @return WP_Post|WP_Error Post object if ID is valid, WP_Error otherwise.\n\t */\n\tprotected function get_publisher_logo( $id ) {\n\t\t/**\n\t\t * List of publisher logos.\n\t\t *\n\t\t * @var int[] $publisher_logos\n\t\t */\n\t\t$publisher_logos = $this->settings->get_setting( $this->settings::SETTING_NAME_PUBLISHER_LOGOS, [] );\n\t\t$publisher_logos = $this->filter_publisher_logos( $publisher_logos );\n\n\t\t$post = get_post( $id );\n\n\t\tif ( ! $post || ! \\in_array( $post->ID, $publisher_logos, true ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_invalid_id',\n\t\t\t\t__( 'Invalid ID', 'web-stories' ),\n\t\t\t\t[ 'status' => 400 ]\n\t\t\t);\n\t\t}\n\n\t\treturn $post;\n\t}\n\n\t/**\n\t * Filters publisher logos to remove non-existent or invalid ones.\n\t *\n\t * @param int[] $publisher_logos List of publisher logos.\n\t * @return int[] Filtered list of publisher logos.\n\t */\n\tprotected function filter_publisher_logos( $publisher_logos ): array {\n\t\treturn array_filter( $publisher_logos, 'wp_attachment_is_image' );\n\t}\n\n\t/**\n\t * Prepares links for the request.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @return array Links for the given post.\n\t *\n\t * @phpstan-return Links\n\t */\n\tprotected function prepare_links( $post ): array {\n\t\t$base = \\sprintf( '%s/%s', $this->namespace, $this->rest_base );\n\n\t\t// Entity meta.\n\t\treturn [\n\t\t\t'self' => [\n\t\t\t\t'href' => rest_url( trailingslashit( $base ) . $post->ID ),\n\t\t\t],\n\t\t\t'collection' => [\n\t\t\t\t'href' => rest_url( $base ),\n\t\t\t],\n\t\t];\n\t}\n}\n" }, { "path": "includes/REST_API/REST_Controller.php", "content": "register_routes();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'rest_api_init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 100;\n\t}\n}\n" }, { "path": "includes/REST_API/Status_Check_Controller.php", "content": "story_post_type = $story_post_type;\n\n\t\t$this->namespace = 'web-stories/v1';\n\t\t$this->rest_base = 'status-check';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers routes for links.\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::ALLMETHODS,\n\t\t\t\t\t'callback' => [ $this, 'status_check' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'status_check_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'content' => [\n\t\t\t\t\t\t\t'description' => __( 'Test HTML content.', 'web-stories' ),\n\t\t\t\t\t\t\t'required' => true,\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Status check, return true for now.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @param WP_REST_Request $request Full data about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function status_check( $request ) {\n\t\t$data = [\n\t\t\t'success' => true,\n\t\t];\n\n\t\t$response = $this->prepare_item_for_response( $data, $request );\n\n\t\treturn rest_ensure_response( $response );\n\t}\n\n\t/**\n\t * Prepares a status data output for response.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param array{success: bool} $item Status array.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $item, $request ) {\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t$data = [];\n\n\t\tif ( ! empty( $schema['properties']['success'] ) && rest_is_field_included( 'success', $fields ) ) {\n\t\t\t$data['success'] = rest_sanitize_value_from_schema( $item['success'], $schema['properties']['success'] );\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\treturn rest_ensure_response( $data );\n\t}\n\n\t/**\n\t * Retrieves the status schema, conforming to JSON Schema.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'status',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'success' => [\n\t\t\t\t\t'description' => __( 'Whether check was successful', 'web-stories' ),\n\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Checks if current user can process status.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @return true|WP_Error True if the request has read access, WP_Error object otherwise.\n\t */\n\tpublic function status_check_permissions_check() {\n\t\tif ( ! $this->story_post_type->has_cap( 'edit_posts' ) ) {\n\t\t\treturn new \\WP_Error( 'rest_forbidden', __( 'Sorry, you are not allowed run status check.', 'web-stories' ), [ 'status' => rest_authorization_required_code() ] );\n\t\t}\n\n\t\treturn true;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Autosaves_Controller.php", "content": "get_rest_controller();\n\n\t\t$this->parent_controller = $parent_controller;\n\t\t$this->parent_base = ! empty( $post_type_object->rest_base ) ? (string) $post_type_object->rest_base : $post_type_object->name;\n\t\t$this->namespace = ! empty( $post_type_object->rest_namespace ) ? (string) $post_type_object->rest_namespace : 'wp/v2';\n\t}\n\n\t/**\n\t * Registers the routes for autosaves.\n\t *\n\t * Used to override the create_item() callback.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tparent::register_routes();\n\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->parent_base . '/(?P[\\d]+)/' . $this->rest_base,\n\t\t\t[\n\t\t\t\t'args' => [\n\t\t\t\t\t'parent' => [\n\t\t\t\t\t\t'description' => __( 'The ID for the parent of the object.', 'web-stories' ),\n\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_items' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'get_items_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_collection_params(),\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::CREATABLE,\n\t\t\t\t\t'callback' => [ $this, 'create_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'create_item_permissions_check' ],\n\t\t\t\t\t'args' => $this->parent_controller->get_endpoint_args_for_item_schema( WP_REST_Server::EDITABLE ),\n\t\t\t\t],\n\t\t\t\t'schema' => [ $this, 'get_public_item_schema' ],\n\t\t\t],\n\t\t\ttrue // required so that the existing route is overridden.\n\t\t);\n\t}\n\n\t/**\n\t * Prepares a single template output for response.\n\t *\n\t * Adds post_content_filtered field to output.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $post, $request ): WP_REST_Response {\n\t\t$response = parent::prepare_item_for_response( $post, $request );\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\tif ( ! empty( $schema['properties']['story_data'] ) && rest_is_field_included( 'story_data', $fields ) ) {\n\t\t\t$post_story_data = json_decode( $post->post_content_filtered, true );\n\t\t\t$data['story_data'] = rest_sanitize_value_from_schema( $post_story_data, $schema['properties']['story_data'] );\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\t\t$links = $response->get_links();\n\n\t\t// Wrap the data in a response object.\n\t\t$response = new WP_REST_Response( $data );\n\t\tforeach ( $links as $rel => $rel_links ) {\n\t\t\tforeach ( $rel_links as $link ) {\n\t\t\t\t$response->add_link( $rel, $link['href'], $link['attributes'] );\n\t\t\t}\n\t\t}\n\n\t\t/** This filter is documented in wp-includes/rest-api/endpoints/class-wp-rest-autosaves-controller.php */\n\t\treturn apply_filters( 'rest_prepare_autosave', $response, $post, $request );\n\t}\n\n\t/**\n\t * Retrieves the story's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$autosaves_schema = parent::get_item_schema();\n\t\t$stories_schema = $this->parent_controller->get_item_schema();\n\n\t\t$autosaves_schema['properties']['story_data'] = $stories_schema['properties']['story_data'];\n\n\t\t$this->schema = $autosaves_schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Base_Controller.php", "content": "\n * @phpstan-type SchemaEntry array{\n * description: string,\n * type: string,\n * context: string[],\n * default?: mixed,\n * }\n * @phpstan-type Schema array{\n * properties: array{\n * content?: SchemaEntry,\n * story_data?: SchemaEntry\n * }\n * }\n * @phpstan-type RegisteredMetadata array{\n * type: string,\n * description: string,\n * single: bool,\n * sanitize_callback?: callable,\n * auth_callback: callable,\n * show_in_rest: bool|array{schema: array},\n * default?: mixed\n * }\n */\nclass Stories_Base_Controller extends WP_REST_Posts_Controller {\n\t/**\n\t * Decoder instance.\n\t *\n\t * @var Decoder Decoder instance.\n\t */\n\tprivate Decoder $decoder;\n\n\t/**\n\t * Constructor.\n\t *\n\t * Override the namespace.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $post_type Post type.\n\t */\n\tpublic function __construct( $post_type ) {\n\t\tparent::__construct( $post_type );\n\n\t\t$injector = Services::get_injector();\n\t\t/**\n\t\t * Decoder instance.\n\t\t *\n\t\t * @var Decoder $decoder Decoder instance.\n\t\t */\n\t\t$decoder = $injector->make( Decoder::class );\n\n\t\t$this->decoder = $decoder;\n\t}\n\n\t/**\n\t * Prepares a single template output for response.\n\t *\n\t * Adds post_content_filtered field to output.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $post, $request ): WP_REST_Response {\n\t\t$response = parent::prepare_item_for_response( $post, $request );\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->get_item_schema();\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\tif ( ! empty( $schema['properties']['story_data'] ) && rest_is_field_included( 'story_data', $fields ) ) {\n\t\t\t$post_story_data = json_decode( $post->post_content_filtered, true );\n\t\t\t$data['story_data'] = post_password_required( $post ) ? (object) [] : rest_sanitize_value_from_schema( $post_story_data, $schema['properties']['story_data'] );\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\t\t$links = $response->get_links();\n\n\t\t// Wrap the data in a response object.\n\t\t$response = new WP_REST_Response( $data );\n\t\tforeach ( $links as $rel => $rel_links ) {\n\t\t\tforeach ( $rel_links as $link ) {\n\t\t\t\t$response->add_link( $rel, $link['href'], $link['attributes'] );\n\t\t\t}\n\t\t}\n\n\t\t/** This filter is documented in wp-includes/rest-api/endpoints/class-wp-rest-posts-controller.php */\n\t\treturn apply_filters( \"rest_prepare_{$this->post_type}\", $response, $post, $request );\n\t}\n\n\t/**\n\t * Retrieves the story's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array Item schema data.\n\t *\n\t * @phpstan-return Schema\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\t/**\n\t\t\t * Schema.\n\t\t\t *\n\t\t\t * @phpstan-var Schema $schema\n\t\t\t */\n\t\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\t\treturn $schema;\n\t\t}\n\n\t\t$schema = parent::get_item_schema();\n\n\t\t$schema['properties']['story_data'] = [\n\t\t\t'description' => __( 'Story data', 'web-stories' ),\n\t\t\t'type' => 'object',\n\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t'default' => [],\n\t\t];\n\n\t\t$schema['properties']['original_id'] = [\n\t\t\t'description' => __( 'Unique identifier for original story id.', 'web-stories' ),\n\t\t\t'type' => 'integer',\n\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->add_additional_fields_schema( $this->schema );\n\t\treturn $schema;\n\t}\n\n\t/**\n\t * Prepares a single story for create or update. Add post_content_filtered field to save/insert.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Request object.\n\t * @return stdClass|WP_Error Post object or WP_Error.\n\t */\n\tprotected function prepare_item_for_database( $request ) {\n\t\t$prepared_post = parent::prepare_item_for_database( $request );\n\n\t\tif ( is_wp_error( $prepared_post ) ) {\n\t\t\treturn $prepared_post;\n\t\t}\n\n\t\t/**\n\t\t * Schema.\n\t\t *\n\t\t * @phpstan-var Schema $schema\n\t\t */\n\t\t$schema = $this->get_item_schema();\n\n\t\t// Post content.\n\t\tif ( ! empty( $schema['properties']['content'] ) ) {\n\n\t\t\t// Ensure that content and story_data are updated together.\n\t\t\t// Exception: new auto-draft created from a template.\n\t\t\tif (\n\t\t\t\t(\n\t\t\t\t( ! empty( $request['story_data'] ) && empty( $request['content'] ) ) ||\n\t\t\t\t( ! empty( $request['content'] ) && empty( $request['story_data'] ) )\n\t\t\t\t) && ( 'auto-draft' !== $prepared_post->post_status )\n\t\t\t) {\n\t\t\t\treturn new \\WP_Error(\n\t\t\t\t\t'rest_empty_content',\n\t\t\t\t\t\\sprintf(\n\t\t\t\t\t\t/* translators: 1: content, 2: story_data */\n\t\t\t\t\t\t__( '%1$s and %2$s should always be updated together.', 'web-stories' ),\n\t\t\t\t\t\t'content',\n\t\t\t\t\t\t'story_data'\n\t\t\t\t\t),\n\t\t\t\t\t[ 'status' => 412 ]\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif ( isset( $request['content'] ) ) {\n\t\t\t\t$prepared_post->post_content = $this->decoder->base64_decode( $prepared_post->post_content );\n\t\t\t}\n\t\t}\n\n\t\t// If the request is updating the content as well, let's make sure the JSON representation of the story is saved, too.\n\t\tif ( ! empty( $schema['properties']['story_data'] ) && isset( $request['story_data'] ) ) {\n\t\t\t$prepared_post->post_content_filtered = wp_json_encode( $request['story_data'] );\n\t\t}\n\n\t\treturn $prepared_post;\n\t}\n\n\t/**\n\t * Get registered post meta.\n\t *\n\t * @since 1.23.0\n\t *\n\t * @param WP_Post $original_post Post Object.\n\t * @return array $meta\n\t */\n\tprotected function get_registered_meta( WP_Post $original_post ): array {\n\t\t$meta_keys = get_registered_meta_keys( 'post', $this->post_type );\n\t\t$meta = [];\n\t\t/**\n\t\t * Meta key settings.\n\t\t *\n\t\t * @var array $settings\n\t\t * @phpstan-var RegisteredMetadata $settings\n\t\t */\n\t\tforeach ( $meta_keys as $key => $settings ) {\n\t\t\tif ( $settings['show_in_rest'] ) {\n\t\t\t\t$meta[ $key ] = get_post_meta( $original_post->ID, $key, $settings['single'] );\n\t\t\t}\n\t\t}\n\n\t\treturn $meta;\n\t}\n\n\t/**\n\t * Prepares links for the request.\n\t *\n\t * Ensures that {@see Stories_Users_Controller} is used for author embeds.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @return array Links for the given post.\n\t *\n\t * @phpstan-return Links\n\t */\n\tprotected function prepare_links( $post ): array {\n\t\t$links = parent::prepare_links( $post );\n\n\t\tif ( ! empty( $post->post_author ) && post_type_supports( $post->post_type, 'author' ) ) {\n\t\t\t$links['author'] = [\n\t\t\t\t'href' => rest_url( \\sprintf( '%s/%s/%s', $this->namespace, 'users', $post->post_author ) ),\n\t\t\t\t'embeddable' => true,\n\t\t\t];\n\t\t}\n\n\t\t// If we have a featured media, add that.\n\t\t$featured_media = get_post_thumbnail_id( $post->ID );\n\t\tif ( $featured_media ) {\n\t\t\t$image_url = rest_url( \\sprintf( '%s/%s/%s', $this->namespace, 'media', $featured_media ) );\n\n\t\t\t$links['https://api.w.org/featuredmedia'] = [\n\t\t\t\t'href' => $image_url,\n\t\t\t\t'embeddable' => true,\n\t\t\t];\n\t\t}\n\n\t\tif ( ! \\in_array( $post->post_type, [ 'attachment', 'nav_menu_item', 'revision' ], true ) ) {\n\t\t\t$attachments_url = rest_url( \\sprintf( '%s/%s', $this->namespace, 'media' ) );\n\t\t\t$attachments_url = add_query_arg( 'parent', $post->ID, $attachments_url );\n\n\t\t\t$links['https://api.w.org/attachment'] = [\n\t\t\t\t'href' => $attachments_url,\n\t\t\t];\n\t\t}\n\n\t\treturn $links;\n\t}\n\n\t/**\n\t * Get the link relations available for the post and current user.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return string[] List of link relations.\n\t */\n\tprotected function get_available_actions( $post, $request ): array {\n\t\t$rels = parent::get_available_actions( $post, $request );\n\n\t\tif ( $this->check_delete_permission( $post ) ) {\n\t\t\t$rels[] = 'https://api.w.org/action-delete';\n\t\t}\n\n\t\tif ( $this->check_update_permission( $post ) ) {\n\t\t\t$rels[] = 'https://api.w.org/action-edit';\n\t\t}\n\n\t\treturn $rels;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Controller.php", "content": "\n * }\n * @phpstan-import-type Links from \\Google\\Web_Stories\\REST_API\\Stories_Base_Controller\n */\nclass Stories_Controller extends Stories_Base_Controller {\n\n\t/**\n\t * Default style presets to pass if not set.\n\t */\n\tpublic const EMPTY_STYLE_PRESETS = [\n\t\t'colors' => [],\n\t\t'textStyles' => [],\n\t];\n\n\t/**\n\t * Query args.\n\t *\n\t * @var array\n\t * @phpstan-var QueryArgs\n\t */\n\tprivate array $args = [];\n\n\t/**\n\t * Prepares a single story output for response. Add post_content_filtered field to output.\n\t *\n\t * @SuppressWarnings(\"PHPMD.CyclomaticComplexity\")\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_Post $post Post object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $post, $request ): WP_REST_Response { // phpcs:ignore SlevomatCodingStandard.Complexity.Cognitive.ComplexityTooHigh\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\n\t\tif ( 'auto-draft' === $post->post_status && wp_validate_boolean( $request['web_stories_demo'] ) ) {\n\t\t\t$demo = new Demo_Content();\n\t\t\t$demo_content = $demo->get_content();\n\t\t\tif ( ! empty( $demo_content ) ) {\n\t\t\t\t$post->post_title = $demo->get_title();\n\t\t\t\t$post->post_content_filtered = $demo_content;\n\t\t\t}\n\t\t}\n\n\t\t$response = parent::prepare_item_for_response( $post, $request );\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\tif ( rest_is_field_included( 'style_presets', $fields ) ) {\n\t\t\t$style_presets = get_option( Story_Post_Type::STYLE_PRESETS_OPTION, self::EMPTY_STYLE_PRESETS );\n\t\t\t$data['style_presets'] = \\is_array( $style_presets ) ? $style_presets : self::EMPTY_STYLE_PRESETS;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'preview_link', $fields ) ) {\n\t\t\t// Based on https://github.com/WordPress/wordpress-develop/blob/8153c8ba020c4aec0b9d94243cd39c689a0730f7/src/wp-admin/includes/post.php#L1445-L1457.\n\t\t\tif ( 'draft' === $post->post_status || empty( $post->post_name ) ) {\n\t\t\t\t$view_link = get_preview_post_link( $post );\n\t\t\t} elseif ( 'publish' === $post->post_status ) {\n\t\t\t\t$view_link = get_permalink( $post );\n\t\t\t} else {\n\t\t\t\tif ( ! \\function_exists( 'get_sample_permalink' ) ) {\n\t\t\t\t\trequire_once ABSPATH . 'wp-admin/includes/post.php';\n\t\t\t\t}\n\n\t\t\t\t[ $permalink ] = get_sample_permalink( $post->ID, $post->post_title, '' );\n\n\t\t\t\t// Allow non-published (private, future) to be viewed at a pretty permalink, in case $post->post_name is set.\n\t\t\t\t$view_link = str_replace( [ '%pagename%', '%postname%' ], $post->post_name, $permalink );\n\t\t\t}\n\n\t\t\t$data['preview_link'] = $view_link;\n\t\t}\n\n\t\tif ( rest_is_field_included( 'edit_link', $fields ) ) {\n\t\t\t$edit_link = get_edit_post_link( $post, 'rest-api' );\n\t\t\tif ( $edit_link ) {\n\t\t\t\t$data['edit_link'] = $edit_link;\n\t\t\t}\n\t\t}\n\n\t\tif ( rest_is_field_included( 'embed_post_link', $fields ) && current_user_can( 'edit_posts' ) ) {\n\t\t\t$data['embed_post_link'] = add_query_arg( [ 'from-web-story' => $post->ID ], admin_url( 'post-new.php' ) );\n\t\t}\n\n\t\tif ( rest_is_field_included( 'story_poster', $fields ) ) {\n\t\t\t$story_poster = $this->get_story_poster( $post );\n\t\t\tif ( $story_poster ) {\n\t\t\t\t$data['story_poster'] = $story_poster;\n\t\t\t}\n\t\t}\n\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\t\t$links = $response->get_links();\n\n\t\t$response = new WP_REST_Response( $data );\n\t\tforeach ( $links as $rel => $rel_links ) {\n\t\t\tforeach ( $rel_links as $link ) {\n\t\t\t\t$response->add_link( $rel, $link['href'], $link['attributes'] );\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Filters the post data for a response.\n\t\t *\n\t\t * The dynamic portion of the hook name, `$this->post_type`, refers to the post type slug.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param WP_REST_Response $response The response object.\n\t\t * @param WP_Post $post Post object.\n\t\t * @param WP_REST_Request $request Request object.\n\t\t */\n\t\treturn apply_filters( \"rest_prepare_{$this->post_type}\", $response, $post, $request );\n\t}\n\n\t/**\n\t * Creates a single story.\n\t *\n\t * Override the existing method so we can set parent id.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function create_item( $request ) {\n\t\t$original_id = ! empty( $request['original_id'] ) ? $request['original_id'] : null;\n\t\tif ( ! $original_id ) {\n\t\t\treturn parent::create_item( $request );\n\t\t}\n\n\t\t$original_post = $this->get_post( $original_id );\n\t\tif ( is_wp_error( $original_post ) ) {\n\t\t\treturn $original_post;\n\t\t}\n\n\t\tif ( ! $this->check_update_permission( $original_post ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_cannot_create',\n\t\t\t\t__( 'Sorry, you are not allowed to duplicate this story.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\t$request['content'] = $original_post->post_content;\n\t\t$request['excerpt'] = $original_post->post_excerpt;\n\n\t\t$title = \\sprintf(\n\t\t/* translators: %s: story title. */\n\t\t\t__( '%s (Copy)', 'web-stories' ),\n\t\t\t$original_post->post_title\n\t\t);\n\n\t\t$request['title'] = $title;\n\n\t\t$story_data = json_decode( $original_post->post_content_filtered, true );\n\t\tif ( $story_data ) {\n\t\t\t$request['story_data'] = $story_data;\n\t\t}\n\n\t\t$thumbnail_id = get_post_thumbnail_id( $original_post );\n\t\tif ( $thumbnail_id ) {\n\t\t\t$request['featured_media'] = $thumbnail_id;\n\t\t}\n\n\t\t$meta = $this->get_registered_meta( $original_post );\n\t\tif ( $meta ) {\n\t\t\t$request['meta'] = $meta;\n\t\t}\n\n\t\treturn parent::create_item( $request );\n\t}\n\n\t/**\n\t * Updates a single post.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function update_item( $request ) {\n\t\t$response = parent::update_item( $request );\n\n\t\tif ( is_wp_error( $response ) ) {\n\t\t\treturn rest_ensure_response( $response );\n\t\t}\n\n\t\t// If style presets are set.\n\t\t$style_presets = $request->get_param( 'style_presets' );\n\t\tif ( \\is_array( $style_presets ) ) {\n\t\t\tupdate_option( Story_Post_Type::STYLE_PRESETS_OPTION, $style_presets );\n\t\t}\n\n\t\treturn rest_ensure_response( $response );\n\t}\n\n\t/**\n\t * Retrieves the story's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array>> Item schema data.\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t\t}\n\n\t\t$schema = parent::get_item_schema();\n\n\t\t$schema['properties']['style_presets'] = [\n\t\t\t'description' => __( 'Style presets used by all stories', 'web-stories' ),\n\t\t\t'type' => 'object',\n\t\t\t'context' => [ 'edit' ],\n\t\t];\n\n\t\t$schema['properties']['preview_link'] = [\n\t\t\t'description' => __( 'Preview Link.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'context' => [ 'edit' ],\n\t\t\t'format' => 'uri',\n\t\t\t'default' => '',\n\t\t];\n\n\t\t$schema['properties']['edit_link'] = [\n\t\t\t'description' => _x( 'Edit Link', 'compound noun', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'context' => [ 'edit' ],\n\t\t\t'format' => 'uri',\n\t\t\t'default' => '',\n\t\t];\n\n\t\t$schema['properties']['embed_post_link'] = [\n\t\t\t'description' => __( 'Embed Post Edit Link.', 'web-stories' ),\n\t\t\t'type' => 'string',\n\t\t\t'context' => [ 'edit' ],\n\t\t\t'format' => 'uri',\n\t\t\t'default' => '',\n\t\t];\n\n\t\t$schema['properties']['story_poster'] = [\n\t\t\t'description' => __( 'Story poster image.', 'web-stories' ),\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'id' => [\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'description' => __( 'Poster ID', 'web-stories' ),\n\t\t\t\t],\n\t\t\t\t'needsProxy' => [\n\t\t\t\t\t'description' => __( 'If poster needs to be proxied', 'web-stories' ),\n\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t],\n\t\t\t\t'height' => [\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t'description' => __( 'Poster height', 'web-stories' ),\n\t\t\t\t],\n\t\t\t\t'url' => [\n\t\t\t\t\t'description' => __( 'Poster URL.', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t],\n\t\t\t\t'width' => [\n\t\t\t\t\t'description' => __( 'Poster width.', 'web-stories' ),\n\t\t\t\t\t'type' => 'integer',\n\t\t\t\t],\n\t\t\t],\n\t\t\t'default' => null,\n\t\t];\n\n\t\t$schema['properties']['status']['enum'][] = 'auto-draft';\n\n\t\t$this->schema = $schema;\n\n\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t}\n\n\t/**\n\t * Filters query clauses to sort posts by the author's display name.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string[] $clauses Associative array of the clauses for the query.\n\t * @param WP_Query $query The WP_Query instance.\n\t * @return string[] Filtered query clauses.\n\t */\n\tpublic function filter_posts_clauses( $clauses, WP_Query $query ): array {\n\t\tglobal $wpdb;\n\n\t\tif ( $this->post_type !== $query->get( 'post_type' ) ) {\n\t\t\treturn $clauses;\n\t\t}\n\t\tif ( 'story_author' !== $query->get( 'orderby' ) ) {\n\t\t\treturn $clauses;\n\t\t}\n\n\t\t/**\n\t\t * Order value.\n\t\t *\n\t\t * @var string $order\n\t\t */\n\t\t$order = $query->get( 'order' );\n\n\t\t// phpcs:disable WordPressVIPMinimum.Variables.RestrictedVariables.user_meta__wpdb__users\n\t\t$clauses['join'] .= \" LEFT JOIN {$wpdb->users} ON {$wpdb->posts}.post_author={$wpdb->users}.ID\";\n\t\t$clauses['orderby'] = \"{$wpdb->users}.display_name $order, \" . $clauses['orderby'];\n\t\t// phpcs:enable WordPressVIPMinimum.Variables.RestrictedVariables.user_meta__wpdb__users\n\n\t\treturn $clauses;\n\t}\n\n\t/**\n\t * Prime post caches for attachments and parents.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param WP_Post[] $posts Array of post objects.\n\t * @return WP_Post[] Array of posts.\n\t */\n\tpublic function prime_post_caches( array $posts ): array {\n\t\t$post_ids = $this->get_attached_post_ids( $posts );\n\t\tif ( ! empty( $post_ids ) ) {\n\t\t\t_prime_post_caches( $post_ids );\n\t\t}\n\n\t\treturn $posts;\n\t}\n\n\t/**\n\t * Filter the query to cache the value to a class property.\n\t *\n\t * @param array $args WP_Query arguments.\n\t * @return array Current args.\n\t *\n\t * @phpstan-param QueryArgs $args\n\t */\n\tpublic function filter_query( $args ): array {\n\t\t$this->args = $args;\n\n\t\treturn $args;\n\t}\n\t/**\n\t * Retrieves a collection of web stories.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function get_items( $request ) {\n\t\tadd_filter( \"rest_{$this->post_type}_query\", [ $this, 'filter_query' ], 100, 1 );\n\t\tadd_filter( 'posts_clauses', [ $this, 'filter_posts_clauses' ], 10, 2 );\n\t\tadd_filter( 'posts_results', [ $this, 'prime_post_caches' ] );\n\t\t$response = parent::get_items( $request );\n\t\tremove_filter( 'posts_results', [ $this, 'prime_post_caches' ] );\n\t\tremove_filter( 'posts_clauses', [ $this, 'filter_posts_clauses' ], 10 );\n\t\tremove_filter( \"rest_{$this->post_type}_query\", [ $this, 'filter_query' ], 100 );\n\n\t\tif ( is_wp_error( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\tif ( 'edit' !== $request['context'] ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t$response = $this->add_response_headers( $response, $request );\n\t\tif ( is_wp_error( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\tif ( $request['_web_stories_envelope'] ) {\n\t\t\t$embed = $request['_embed'];\n\t\t\t$embed = $embed ? rest_parse_embed_param( $embed ) : false;\n\t\t\t$response = rest_get_server()->envelope_response( $response, $embed );\n\t\t}\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the query params for the posts collection.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['_web_stories_envelope'] = [\n\t\t\t'description' => __( 'Envelope request for preloading.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t\t'default' => false,\n\t\t];\n\n\t\t$query_params['web_stories_demo'] = [\n\t\t\t'description' => __( 'Load demo data.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t\t'default' => false,\n\t\t];\n\n\t\tif ( ! empty( $query_params['orderby'] ) ) {\n\t\t\t$query_params['orderby']['enum'][] = 'story_author';\n\t\t}\n\n\t\treturn $query_params;\n\t}\n\n\t/**\n\t * Get an array of attached post objects.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param WP_Post[] $posts Array of post objects.\n\t * @return int[] Array of post ids.\n\t */\n\tprotected function get_attached_post_ids( array $posts ): array {\n\t\treturn array_unique( array_filter( array_map( [ $this, 'get_publisher_logo_id' ], $posts ) ) );\n\t}\n\n\t/**\n\t * Add response headers, with post counts.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_REST_Response $response Response object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error\n\t */\n\tprotected function add_response_headers( WP_REST_Response $response, WP_REST_Request $request ) {\n\t\t// Add counts for other statuses.\n\t\t$statuses = [\n\t\t\t'publish' => 'publish',\n\t\t];\n\n\t\t$post_type = get_post_type_object( $this->post_type );\n\n\t\tif ( ! ( $post_type instanceof WP_Post_Type ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\tif ( current_user_can( $post_type->cap->edit_posts ) ) { // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t\t$statuses['draft'] = 'draft';\n\t\t\t$statuses['future'] = 'future';\n\t\t\t$statuses['pending'] = 'pending';\n\t\t}\n\n\t\tif ( current_user_can( $post_type->cap->publish_posts ) ) { // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t\t$statuses['private'] = 'private';\n\t\t}\n\n\t\t$edit_others_posts = current_user_can( $post_type->cap->edit_others_posts ); // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t$edit_private_posts = current_user_can( $post_type->cap->edit_private_posts ); // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\n\t\t$statuses_count = [ 'all' => 0 ];\n\t\t$total_posts = 0;\n\n\t\t$query_args = $this->prepare_items_query( $this->args, $request );\n\n\t\t// Strip down query for speed.\n\t\t$query_args['fields'] = 'ids';\n\t\t$query_args['posts_per_page'] = 1;\n\t\t$query_args['paged'] = 1;\n\t\t$query_args['update_post_meta_cache'] = false;\n\t\t$query_args['update_post_term_cache'] = false;\n\n\t\tforeach ( $statuses as $key => $status ) {\n\t\t\t$posts_query = new WP_Query();\n\t\t\t$query_args['post_status'] = $status;\n\t\t\tif ( \\in_array( $status, [ 'draft', 'future', 'pending' ], true ) && ! $edit_others_posts ) {\n\t\t\t\t$query_args['author'] = get_current_user_id();\n\t\t\t}\n\t\t\tif ( 'private' === $status && ! $edit_private_posts ) {\n\t\t\t\t$query_args['author'] = get_current_user_id();\n\t\t\t}\n\t\t\t$posts_query->query( $query_args );\n\t\t\t$statuses_count[ $key ] = absint( $posts_query->found_posts );\n\t\t\t$statuses_count['all'] += $statuses_count[ $key ];\n\t\t\tif ( \\in_array( $status, $this->args['post_status'] ?? [], true ) ) {\n\t\t\t\t$total_posts += $statuses_count[ $key ] ?? 0;\n\t\t\t}\n\t\t}\n\n\t\t// Encode the array as headers do not support passing an array.\n\t\t$encoded_statuses = wp_json_encode( $statuses_count );\n\t\tif ( $encoded_statuses ) {\n\t\t\t$response->header( 'X-WP-TotalByStatus', $encoded_statuses );\n\t\t}\n\n\t\t$page = (int) $posts_query->query_vars['paged'];\n\t\t$max_pages = ceil( $total_posts / (int) ( $this->args['posts_per_page'] ?? 10 ) );\n\n\t\tif ( $page > $max_pages && $total_posts > 0 ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_post_invalid_page_number',\n\t\t\t\t__( 'The page number requested is larger than the number of pages available.', 'web-stories' ),\n\t\t\t\t[ 'status' => 400 ]\n\t\t\t);\n\t\t}\n\n\t\t$response->header( 'X-WP-Total', (string) $total_posts );\n\t\t$response->header( 'X-WP-TotalPages', (string) $max_pages );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Prepares links for the request.\n\t *\n\t * @param WP_Post $post Post object.\n\t * @return array Links for the given post.\n\t *\n\t * @phpstan-return Links\n\t */\n\tprotected function prepare_links( $post ): array {\n\t\t$links = parent::prepare_links( $post );\n\n\t\t$links = $this->add_post_locking_link( $links, $post );\n\t\t$links = $this->add_publisher_logo_link( $links, $post );\n\n\t\treturn $links;\n\t}\n\n\t/**\n\t * Adds a REST API link if the story is locked.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param array $links Links for the given post.\n\t * @param WP_Post $post Post object.\n\t * @return array Modified list of links.\n\t *\n\t * @phpstan-param Links $links\n\t * @phpstan-return Links\n\t */\n\tprivate function add_post_locking_link( array $links, WP_Post $post ): array {\n\t\t$base = \\sprintf( '%s/%s', $this->namespace, $this->rest_base );\n\t\t$lock_url = rest_url( trailingslashit( $base ) . $post->ID . '/lock' );\n\n\t\t$links['https://api.w.org/lock'] = [\n\t\t\t'href' => $lock_url,\n\t\t\t'embeddable' => true,\n\t\t];\n\n\t\t/**\n\t\t * Lock data.\n\t\t *\n\t\t * @var string|false $lock\n\t\t */\n\t\t$lock = get_post_meta( $post->ID, '_edit_lock', true );\n\n\t\tif ( ! empty( $lock ) ) {\n\t\t\t[ $time, $user ] = explode( ':', $lock );\n\n\t\t\t/** This filter is documented in wp-admin/includes/ajax-actions.php */\n\t\t\t$time_window = apply_filters( 'wp_check_post_lock_window', 150 );\n\n\t\t\tif ( $time && $time > time() - $time_window ) {\n\t\t\t\t$links['https://api.w.org/lockuser'] = [\n\t\t\t\t\t'href' => rest_url( \\sprintf( '%s/%s', $this->namespace, 'users/' ) . $user ),\n\t\t\t\t\t'embeddable' => true,\n\t\t\t\t];\n\t\t\t}\n\t\t}\n\n\t\treturn $links;\n\t}\n\n\t/**\n\t * Helper method to get publisher logo id.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param WP_Post $post Post Object.\n\t * @return int ID of attachment for publisher logo.\n\t */\n\tprivate function get_publisher_logo_id( WP_Post $post ): int {\n\t\t/**\n\t\t * Publisher logo ID.\n\t\t *\n\t\t * @var string|int $publisher_logo_id\n\t\t */\n\t\t$publisher_logo_id = get_post_meta( $post->ID, Story_Post_Type::PUBLISHER_LOGO_META_KEY, true );\n\n\t\treturn (int) $publisher_logo_id;\n\t}\n\n\t/**\n\t * Adds a REST API link for the story's publisher logo.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param array $links Links for the given post.\n\t * @param WP_Post $post Post object.\n\t * @return array Modified list of links.\n\t *\n\t * @phpstan-param Links $links\n\t * @phpstan-return Links\n\t */\n\tprivate function add_publisher_logo_link( array $links, WP_Post $post ): array {\n\t\t$publisher_logo_id = $this->get_publisher_logo_id( $post );\n\n\t\tif ( $publisher_logo_id ) {\n\t\t\t$links['https://api.w.org/publisherlogo'] = [\n\t\t\t\t'href' => rest_url( \\sprintf( '%s/%s/%s', $this->namespace, 'media', $publisher_logo_id ) ),\n\t\t\t\t'embeddable' => true,\n\t\t\t];\n\t\t}\n\n\t\treturn $links;\n\t}\n\n\n\t/**\n\t * Helper method to get the story poster.\n\t *\n\t * Checks for the regular featured image as well as a hotlinked image.\n\t *\n\t * @since 1.23.2\n\t *\n\t * @param WP_Post $post Post Object.\n\t * @return array{url:string, width: int, height: int, needsProxy: bool, id?: int}|null Story poster data.\n\t */\n\tprivate function get_story_poster( WP_Post $post ): ?array {\n\t\t$thumbnail_id = (int) get_post_thumbnail_id( $post );\n\n\t\tif ( 0 !== $thumbnail_id ) {\n\t\t\t$poster_src = wp_get_attachment_image_src( $thumbnail_id, Image_Sizes::POSTER_PORTRAIT_IMAGE_DIMENSIONS );\n\t\t\tif ( $poster_src ) {\n\t\t\t\t[$url, $width, $height] = $poster_src;\n\n\t\t\t\treturn [\n\t\t\t\t\t'id' => $thumbnail_id,\n\t\t\t\t\t'url' => $url,\n\t\t\t\t\t'width' => $width,\n\t\t\t\t\t'height' => $height,\n\t\t\t\t\t'needsProxy' => false,\n\t\t\t\t];\n\t\t\t}\n\t\t} else {\n\n\t\t\t/**\n\t\t\t * Poster.\n\t\t\t *\n\t\t\t * @var array{url:string, width: int, height: int, needsProxy: bool}|false $poster\n\t\t\t */\n\t\t\t$poster = get_post_meta( $post->ID, Story_Post_Type::POSTER_META_KEY, true );\n\n\t\t\tif ( ! empty( $poster ) ) {\n\t\t\t\treturn $poster;\n\t\t\t}\n\t\t}\n\n\t\treturn null;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Lock_Controller.php", "content": "story_post_type = $story_post_type;\n\n\t\t$this->parent_controller = $story_post_type->get_parent_controller();\n\t\t$this->rest_base = $story_post_type->get_rest_base();\n\t\t$this->namespace = $story_post_type->get_rest_namespace();\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Registers the routes for the objects of the controller.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @see register_rest_route()\n\t */\n\tpublic function register_routes(): void {\n\t\tregister_rest_route(\n\t\t\t$this->namespace,\n\t\t\t'/' . $this->rest_base . '/(?P[\\d]+)/lock',\n\t\t\t[\n\t\t\t\t'args' => [\n\t\t\t\t\t'id' => [\n\t\t\t\t\t\t'description' => __( 'Unique identifier for the object.', 'web-stories' ),\n\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::READABLE,\n\t\t\t\t\t'callback' => [ $this, 'get_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'get_item_permissions_check' ],\n\t\t\t\t\t'args' => [\n\t\t\t\t\t\t'context' => $this->get_context_param( [ 'default' => 'view' ] ),\n\t\t\t\t\t],\n\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::EDITABLE,\n\t\t\t\t\t'callback' => [ $this, 'update_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'update_item_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::EDITABLE ),\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'methods' => WP_REST_Server::DELETABLE,\n\t\t\t\t\t'callback' => [ $this, 'delete_item' ],\n\t\t\t\t\t'permission_callback' => [ $this, 'delete_item_permissions_check' ],\n\t\t\t\t\t'args' => $this->get_endpoint_args_for_item_schema( WP_REST_Server::DELETABLE ),\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Get post lock\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success.\n\t */\n\tpublic function get_item( $request ) {\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $request['id'];\n\n\t\t$lock = $this->get_lock( $post_id );\n\n\t\treturn $this->prepare_item_for_response( $lock, $request );\n\t}\n\n\t/**\n\t * Update post lock\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success.\n\t */\n\tpublic function update_item( $request ) {\n\t\tif ( ! \\function_exists( '\\wp_set_post_lock' ) ) {\n\t\t\trequire_once ABSPATH . 'wp-admin/includes/post.php';\n\t\t}\n\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $request['id'];\n\n\t\twp_set_post_lock( $post_id );\n\t\t$lock = $this->get_lock( $post_id );\n\n\t\treturn $this->prepare_item_for_response( $lock, $request );\n\t}\n\n\t/**\n\t * Delete post lock\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response Response object on success.\n\t */\n\tpublic function delete_item( $request ): WP_REST_Response {\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $request['id'];\n\n\t\t$lock = $this->get_lock( $post_id );\n\t\t$previous = $this->prepare_item_for_response( $lock, $request );\n\t\t$result = delete_post_meta( $post_id, '_edit_lock' );\n\t\t$data = [];\n\t\tif ( ! is_wp_error( $previous ) ) {\n\t\t\t$data = $previous->get_data();\n\t\t}\n\t\t$response = new WP_REST_Response();\n\t\t$response->set_data(\n\t\t\t[\n\t\t\t\t'deleted' => $result,\n\t\t\t\t'previous' => $data,\n\t\t\t]\n\t\t);\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Checks if a given request has access to read a lock.\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access for the item, WP_Error object otherwise.\n\t */\n\tpublic function get_item_permissions_check( $request ) {\n\t\treturn $this->parent_controller->update_item_permissions_check( $request );\n\t}\n\n\t/**\n\t * Checks if a given request has access to update a lock.\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has access to update the item, WP_Error object otherwise.\n\t */\n\tpublic function update_item_permissions_check( $request ) {\n\t\treturn $this->parent_controller->update_item_permissions_check( $request );\n\t}\n\n\t/**\n\t * Checks if a given request has access to delete a lock.\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has access to delete the item, WP_Error object otherwise.\n\t */\n\tpublic function delete_item_permissions_check( $request ) {\n\t\t$result = $this->parent_controller->update_item_permissions_check( $request );\n\t\tif ( is_wp_error( $result ) ) {\n\t\t\treturn $result;\n\t\t}\n\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $request['id'];\n\n\t\t$lock = $this->get_lock( $post_id );\n\t\tif ( \\is_array( $lock ) && isset( $lock['user'] ) && get_current_user_id() !== (int) $lock['user'] ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_cannot_delete_others_lock',\n\t\t\t\t__( 'Sorry, you are not allowed delete others lock.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Prepares a single lock output for response.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param array{time?: int, user?: int}|false $item Lock value, default to false is not set.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response|WP_Error Response object.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function prepare_item_for_response( $item, $request ) { // phpcs:ignore SlevomatCodingStandard.Complexity.Cognitive.ComplexityTooHigh\n\t\t$fields = $this->get_fields_for_response( $request );\n\t\t$schema = $this->get_item_schema();\n\n\t\t$nonce = wp_create_nonce( 'wp_rest' );\n\t\t$lock_data = [\n\t\t\t'locked' => false,\n\t\t\t'time' => '',\n\t\t\t'user' => [\n\t\t\t\t'name' => '',\n\t\t\t\t'id' => 0,\n\t\t\t],\n\t\t\t'nonce' => $nonce,\n\t\t];\n\n\t\tif ( get_option( 'show_avatars' ) ) {\n\t\t\t$lock_data['user']['avatar'] = [];\n\t\t}\n\n\t\tif ( ! empty( $item ) ) {\n\t\t\t/** This filter is documented in wp-admin/includes/ajax-actions.php */\n\t\t\t$time_window = apply_filters( 'wp_check_post_lock_window', 150 );\n\n\t\t\tif ( isset( $item['time'] ) && $item['time'] > time() - $time_window ) {\n\t\t\t\t$lock_data = [\n\t\t\t\t\t'locked' => true,\n\t\t\t\t\t'time' => $item['time'],\n\t\t\t\t\t'user' => isset( $item['user'] ) ? (int) $item['user'] : 0,\n\t\t\t\t\t'nonce' => $nonce,\n\t\t\t\t];\n\t\t\t\tif ( isset( $item['user'] ) ) {\n\t\t\t\t\t$user = get_user_by( 'id', $item['user'] );\n\t\t\t\t\tif ( $user ) {\n\t\t\t\t\t\t$lock_data['user'] = [\n\t\t\t\t\t\t\t'name' => $user->display_name,\n\t\t\t\t\t\t\t'id' => $item['user'],\n\t\t\t\t\t\t];\n\n\t\t\t\t\t\tif ( get_option( 'show_avatars' ) ) {\n\t\t\t\t\t\t\t$lock_data['user']['avatar'] = rest_get_avatar_urls( $user );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t$data = [];\n\t\t$check_fields = array_keys( $lock_data );\n\t\tforeach ( $check_fields as $check_field ) {\n\t\t\tif ( ! empty( $schema['properties'][ $check_field ] ) && rest_is_field_included( $check_field, $fields ) ) {\n\t\t\t\t$data[ $check_field ] = rest_sanitize_value_from_schema( $lock_data[ $check_field ], $schema['properties'][ $check_field ] );\n\t\t\t}\n\t\t}\n\n\t\t$context = ! empty( $request['context'] ) ? $request['context'] : 'view';\n\t\t$data = $this->add_additional_fields_to_object( $data, $request );\n\t\t$data = $this->filter_response_by_context( $data, $context );\n\n\t\t/**\n\t\t * Response object.\n\t\t *\n\t\t * @var WP_REST_Response $response\n\t\t */\n\t\t$response = rest_ensure_response( $data );\n\n\t\tif ( rest_is_field_included( '_links', $fields ) || rest_is_field_included( '_embedded', $fields ) ) {\n\t\t\tif ( $request['id'] ) {\n\t\t\t\t$response->add_links( $this->prepare_links( $item, $request['id'] ) );\n\t\t\t}\n\t\t}\n\n\t\t$post_type = $this->story_post_type->get_slug();\n\n\t\t/**\n\t\t * Filters the lock data for a response.\n\t\t *\n\t\t * The dynamic portion of the hook name, `$post_type`, refers to the post type slug.\n\t\t *\n\t\t * @since 1.6.0\n\t\t *\n\t\t * @param WP_REST_Response $response The response object.\n\t\t * @param array|false $item Lock array if available.\n\t\t * @param WP_REST_Request $request Request object.\n\t\t */\n\t\treturn apply_filters( \"rest_prepare_{$post_type}_lock\", $response, $item, $request );\n\t}\n\n\t/**\n\t * Retrieves the post's schema, conforming to JSON Schema.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return array>> Item schema data.\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t\t}\n\n\t\t$schema = [\n\t\t\t'$schema' => 'http://json-schema.org/draft-04/schema#',\n\t\t\t'title' => 'lock',\n\t\t\t'type' => 'object',\n\t\t\t'properties' => [\n\t\t\t\t'time' => [\n\t\t\t\t\t'description' => __( 'Unix time of lock', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'nonce' => [\n\t\t\t\t\t'description' => __( 'Nonce value', 'web-stories' ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'context' => [ 'view', 'edit' ],\n\t\t\t\t],\n\t\t\t\t'locked' => [\n\t\t\t\t\t'description' => __( 'If the current object is locked or not.', 'web-stories' ),\n\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t],\n\t\t\t\t'user' => [\n\t\t\t\t\t'description' => __( 'User', 'web-stories' ),\n\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t'id' => [\n\t\t\t\t\t\t\t'description' => __( 'The ID for the author of the lock.', 'web-stories' ),\n\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t\t'readonly' => true,\n\t\t\t\t\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t\t'name' => [\n\t\t\t\t\t\t\t'description' => __( 'Display name for the user.', 'web-stories' ),\n\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t'readonly' => true,\n\t\t\t\t\t\t\t'context' => [ 'embed', 'view', 'edit' ],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t],\n\t\t];\n\n\t\tif ( get_option( 'show_avatars' ) ) {\n\t\t\t$avatar_properties = [];\n\n\t\t\t$avatar_sizes = rest_get_avatar_sizes();\n\n\t\t\tforeach ( $avatar_sizes as $size ) {\n\t\t\t\t$avatar_properties[ $size ] = [\n\t\t\t\t\t/* translators: %d: Avatar image size in pixels. */\n\t\t\t\t\t'description' => \\sprintf( __( 'Avatar URL with image size of %d pixels.', 'web-stories' ), $size ),\n\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t'context' => [ 'embed', 'view', 'edit' ],\n\t\t\t\t];\n\t\t\t}\n\n\t\t\t$schema['properties']['user']['properties']['avatar'] = [\n\t\t\t\t'description' => __( 'Avatar URLs for the user.', 'web-stories' ),\n\t\t\t\t'type' => 'object',\n\t\t\t\t'context' => [ 'embed', 'view', 'edit' ],\n\t\t\t\t'readonly' => true,\n\t\t\t\t'properties' => $avatar_properties,\n\t\t\t];\n\t\t}\n\n\t\t$this->schema = $schema;\n\n\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t}\n\n\t/**\n\t * Get the lock, if the ID is valid.\n\t *\n\t * @param int $post_id Supplied ID.\n\t * @return array{time?: int, user?: int}|false Lock data or false.\n\t */\n\tprotected function get_lock( int $post_id ) {\n\t\t/**\n\t\t * Lock data.\n\t\t *\n\t\t * @var string|false $lock\n\t\t */\n\t\t$lock = get_post_meta( $post_id, '_edit_lock', true );\n\n\t\tif ( ! empty( $lock ) ) {\n\t\t\t[ $time, $user ] = explode( ':', $lock );\n\t\t\tif ( $time && $user ) {\n\t\t\t\treturn [\n\t\t\t\t\t'time' => (int) $time,\n\t\t\t\t\t'user' => (int) $user,\n\t\t\t\t];\n\t\t\t}\n\t\t}\n\n\t\treturn false;\n\t}\n\n\t/**\n\t * Prepares links for the request.\n\t *\n\t * @param array{time?: int, user?: int}|false $lock Lock state.\n\t * @param int $post_id Post object ID.\n\t * @return array{self: array{href?: string}, author?: array{href: string, embeddable: true}} Links for the given term.\n\t */\n\tprotected function prepare_links( $lock, int $post_id ): array {\n\t\t$base = $this->namespace . '/' . $this->rest_base;\n\t\t$links = [\n\t\t\t'self' => [\n\t\t\t\t'href' => rest_url( trailingslashit( $base ) . $post_id . '/lock' ),\n\t\t\t],\n\t\t];\n\n\t\tif ( ! empty( $lock ) ) {\n\t\t\t/** This filter is documented in wp-admin/includes/ajax-actions.php */\n\t\t\t$time_window = apply_filters( 'wp_check_post_lock_window', 150 );\n\n\t\t\tif ( isset( $lock['time'] ) && $lock['time'] > time() - $time_window && isset( $lock['user'] ) ) {\n\t\t\t\t$links['author'] = [\n\t\t\t\t\t'href' => rest_url( \\sprintf( '%s/%s/%s', $this->namespace, 'users', $lock['user'] ) ),\n\t\t\t\t\t'embeddable' => true,\n\t\t\t\t];\n\t\t\t}\n\t\t}\n\n\t\treturn $links;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Media_Controller.php", "content": "namespace = 'web-stories/v1';\n\t\t$this->types = $types;\n\t}\n\n\t/**\n\t * Register the service.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_routes();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'rest_api_init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 100;\n\t}\n\n\t/**\n\t * Retrieves a collection of media.\n\t *\n\t * Read _web_stories_envelope param to envelope response.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function get_items( $request ) {\n\t\t$response = parent::get_items( $request );\n\n\t\tif ( $request['_web_stories_envelope'] && ! is_wp_error( $response ) ) {\n\t\t\t$embed = $request['_embed'] ?? false;\n\t\t\t$embed = $embed ? rest_parse_embed_param( $embed ) : false;\n\t\t\t$response = rest_get_server()->envelope_response( $response, $embed );\n\t\t}\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Creates a single attachment.\n\t *\n\t * Override the existing method so we can set parent id.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function create_item( $request ) {\n\t\t// WP_REST_Attachments_Controller doesn't allow setting an attachment as the parent post.\n\t\t// Hence we are working around this here.\n\n\t\t$parent_post = ! empty( $request['post'] ) ? $request['post'] : null;\n\n\t\t$original_id = ! empty( $request['original_id'] ) ? $request['original_id'] : null;\n\n\t\tunset( $request['post'] );\n\n\t\t$response = parent::create_item( $request );\n\t\tif ( ( ! $parent_post && ! $original_id ) || is_wp_error( $response ) ) {\n\t\t\treturn $response;\n\t\t}\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\t/**\n\t\t * Post ID.\n\t\t *\n\t\t * @var int $post_id\n\t\t */\n\t\t$post_id = $data['id'];\n\n\t\t$attachment = $this->process_post( $post_id, $parent_post, $original_id );\n\t\tif ( is_wp_error( $attachment ) ) {\n\t\t\treturn $attachment;\n\t\t}\n\n\t\t$new_response = $this->prepare_item_for_response( $attachment, $request );\n\n\t\t$data = $new_response->get_data();\n\t\t$response->set_data( $data );\n\n\t\treturn $response;\n\t}\n\n\t/**\n\t * Retrieves the query params for the posts collection.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['_web_stories_envelope'] = [\n\t\t\t'description' => __( 'Envelope request for preloading.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t\t'default' => false,\n\t\t];\n\n\t\treturn $query_params;\n\t}\n\n\t/**\n\t * Prepares a single attachment output for response.\n\t *\n\t * @since 1.7.2\n\t *\n\t * @param WP_Post $post Attachment object.\n\t * @param WP_REST_Request $request Request object.\n\t * @return WP_REST_Response Response object.\n\t */\n\tpublic function prepare_item_for_response( $post, $request ): WP_REST_Response {\n\t\t$response = parent::prepare_item_for_response( $post, $request );\n\n\t\t/**\n\t\t * Response data.\n\t\t *\n\t\t * @var array|bool> $data\n\t\t * @phpstan-var ResponseData $data\n\t\t */\n\t\t$data = $response->get_data();\n\n\t\t$fields = $this->get_fields_for_response( $request );\n\n\t\tif ( rest_is_field_included( 'media_details', $fields ) ) {\n\t\t\t// Could also be a stdClass if empty.\n\t\t\t$data['media_details'] = (array) $data['media_details'];\n\n\t\t\tif ( empty( $data['media_details']['width'] ) ) {\n\t\t\t\t$data['media_details']['width'] = 150;\n\t\t\t}\n\n\t\t\tif ( empty( $data['media_details']['height'] ) ) {\n\t\t\t\t$data['media_details']['height'] = 150;\n\t\t\t}\n\t\t}\n\n\t\t$response->set_data( $data );\n\n\t\t/**\n\t\t * Filters an attachment returned from the REST API.\n\t\t *\n\t\t * Allows modification of the attachment right before it is returned.\n\t\t *\n\t\t * Note the filter is run after rest_prepare_attachment is run. This filter is designed to only target web stories rest api requests.\n\t\t *\n\t\t * @since 1.7.2\n\t\t *\n\t\t * @param WP_REST_Response $response The response object.\n\t\t * @param WP_Post $post The original attachment post.\n\t\t * @param WP_REST_Request $request Request used to generate the response.\n\t\t */\n\t\treturn apply_filters( 'web_stories_rest_prepare_attachment', $response, $post, $request );\n\t}\n\n\t/**\n\t * Retrieves the attachment's schema, conforming to JSON Schema.\n\t *\n\t * Removes some unneeded fields to improve performance by\n\t * avoiding some expensive database queries.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @return array>> Item schema data.\n\t */\n\tpublic function get_item_schema(): array {\n\t\tif ( $this->schema ) {\n\t\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t\t}\n\n\t\t$schema = parent::get_item_schema();\n\n\t\tunset(\n\t\t\t$schema['properties']['permalink_template'],\n\t\t\t$schema['properties']['generated_slug'],\n\t\t\t$schema['properties']['description']\n\t\t);\n\n\t\t$schema['properties']['original_id'] = [\n\t\t\t'description' => __( 'Unique identifier for original attachment id.', 'web-stories' ),\n\t\t\t'type' => 'integer',\n\t\t\t'context' => [ 'view', 'edit', 'embed' ],\n\t\t];\n\n\t\t$this->schema = $schema;\n\n\t\treturn $this->add_additional_fields_schema( $this->schema );\n\t}\n\n\n\t/**\n\t * Process post to update attribute.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param int $post_id Post id.\n\t * @param int|null $parent_post New post parent. Default null.\n\t * @param int|null $original_id Original id to copy data from. Default null.\n\t * @return WP_Post|WP_Error\n\t */\n\tprotected function process_post( $post_id, $parent_post, $original_id ) {\n\t\t$args = [ 'ID' => $post_id ];\n\n\t\tif ( $parent_post ) {\n\t\t\t$args['post_parent'] = $parent_post;\n\t\t}\n\n\t\tif ( $original_id ) {\n\t\t\t$attachment_post = $this->get_post( (int) $original_id );\n\t\t\tif ( is_wp_error( $attachment_post ) ) {\n\t\t\t\treturn $attachment_post;\n\t\t\t}\n\t\t\t$args['post_content'] = $attachment_post->post_content;\n\t\t\t$args['post_excerpt'] = $attachment_post->post_excerpt;\n\t\t\t$args['post_title'] = $attachment_post->post_title;\n\n\t\t\t$meta_fields = [ '_wp_attachment_image_alt', Base_Color::BASE_COLOR_POST_META_KEY ];\n\t\t\tforeach ( $meta_fields as $meta_field ) {\n\t\t\t\t/**\n\t\t\t\t * Meta value.\n\t\t\t\t *\n\t\t\t\t * @var string $value\n\t\t\t\t */\n\t\t\t\t$value = get_post_meta( $original_id, $meta_field, true );\n\n\t\t\t\tif ( ! empty( $value ) ) {\n\t\t\t\t\t// update_post_meta() expects slashed.\n\t\t\t\t\tupdate_post_meta( $post_id, $meta_field, wp_slash( $value ) );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t$attachment_id = wp_update_post( $args, true );\n\t\tif ( is_wp_error( $attachment_id ) ) {\n\t\t\tif ( 'db_update_error' === $attachment_id->get_error_code() ) {\n\t\t\t\t$attachment_id->add_data( [ 'status' => 500 ] );\n\t\t\t} else {\n\t\t\t\t$attachment_id->add_data( [ 'status' => 400 ] );\n\t\t\t}\n\n\t\t\treturn $attachment_id;\n\t\t}\n\n\t\treturn $this->get_post( $attachment_id );\n\t}\n\n\t/**\n\t * Filter request by allowed mime types.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param array $prepared_args Optional. Array of prepared arguments. Default empty array.\n\t * @param WP_REST_Request $request Optional. Request to prepare items for.\n\t * @return array Array of query arguments.\n\t */\n\tprotected function prepare_items_query( $prepared_args = [], $request = null ): array {\n\t\t$query_args = parent::prepare_items_query( $prepared_args, $request );\n\n\t\tif ( empty( $request['mime_type'] ) && empty( $request['media_type'] ) ) {\n\t\t\t$media_types = $this->get_media_types();\n\t\t\t$media_type_mimes = array_values( $media_types );\n\t\t\t$media_type_mimes = array_filter( $media_type_mimes );\n\t\t\t$media_type_mimes = array_merge( ...$media_type_mimes );\n\n\t\t\t$query_args['post_mime_type'] = $media_type_mimes;\n\t\t}\n\n\t\t/**\n\t\t * Filters WP_Query arguments when querying posts via the REST API.\n\t\t *\n\t\t * @since 1.10.0\n\t\t *\n\t\t * @see WP_Query\n\t\t *\n\t\t * @param array $args Array of arguments for WP_Query.\n\t\t * @param WP_REST_Request|null $request The REST API request.\n\t\t */\n\t\treturn apply_filters( 'web_stories_rest_attachment_query', $query_args, $request );\n\t}\n\n\t/**\n\t * Retrieves the supported media types.\n\t *\n\t * Media types are considered the MIME type category.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return array Array of supported media types.\n\t */\n\tprotected function get_media_types(): array {\n\t\t$mime_type = $this->types->get_allowed_mime_types();\n\t\t// TODO: Update once audio elements are supported.\n\t\t$mime_type['audio'] = [];\n\t\tunset( $mime_type['caption'] );\n\n\t\treturn $mime_type;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Settings_Controller.php", "content": "namespace = 'web-stories/v1';\n\t}\n\n\t/**\n\t * Register the service.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_routes();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'rest_api_init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 100;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Taxonomies_Controller.php", "content": "namespace = 'web-stories/v1';\n\t}\n\n\t/**\n\t * Retrieves all public taxonomies.\n\t *\n\t * Adds support for filtering by the hierarchical attribute.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t *\n\t * @phpstan-param WP_REST_Request $request\n\t */\n\tpublic function get_items( $request ) {\n\t\t// Retrieve the list of registered collection query parameters.\n\t\t$registered = $this->get_collection_params();\n\n\t\tif ( isset( $registered['type'] ) && ! empty( $request['type'] ) ) {\n\t\t\t$type = $request['type'];\n\n\t\t\t$taxonomies = get_object_taxonomies( $type, 'objects' );\n\t\t} else {\n\t\t\t$taxonomies = get_taxonomies( [], 'objects' );\n\t\t}\n\n\t\t$filters = [ 'hierarchical', 'show_ui' ];\n\t\tforeach ( $filters as $filter ) {\n\t\t\tif ( isset( $registered[ $filter ], $request[ $filter ] ) ) {\n\t\t\t\t$taxonomies = wp_filter_object_list( $taxonomies, [ $filter => (bool) $request[ $filter ] ] );\n\t\t\t}\n\t\t}\n\t\t$data = [];\n\n\t\t/**\n\t\t * Taxonomy.\n\t\t *\n\t\t * @var WP_Taxonomy $value\n\t\t */\n\t\tforeach ( $taxonomies as $tax_type => $value ) {\n\t\t\tif (\n\t\t\t\tempty( $value->show_in_rest ) ||\n\t\t\t\t( 'edit' === $request['context'] && ! current_user_can( $value->cap->assign_terms ) ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t\t) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\t$tax = $this->prepare_item_for_response( $value, $request );\n\t\t\t$tax = $this->prepare_response_for_collection( $tax );\n\t\t\t$data[ $tax_type ] = $tax;\n\t\t}\n\n\t\tif ( empty( $data ) ) {\n\t\t\t// Response should still be returned as a JSON object when it is empty.\n\t\t\t$data = (object) $data;\n\t\t}\n\n\t\treturn rest_ensure_response( $data );\n\t}\n\n\t/**\n\t * Retrieves the query params for collections.\n\t *\n\t * Adds support for filtering by the hierarchical attribute.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @return array> Collection parameters.\n\t */\n\tpublic function get_collection_params(): array {\n\t\t$query_params = parent::get_collection_params();\n\n\t\t$query_params['per_page']['default'] = 100;\n\n\t\t$query_params['hierarchical'] = [\n\t\t\t'description' => __( 'Whether to show only hierarchical taxonomies.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t];\n\n\t\t$query_params['show_ui'] = [\n\t\t\t'description' => __( 'Whether to show only show taxonomies that allow a UI in the admin.', 'web-stories' ),\n\t\t\t'type' => 'boolean',\n\t\t];\n\n\t\treturn $query_params;\n\t}\n\n\t/**\n\t * Register the service.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_routes();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'rest_api_init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 100;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Terms_Controller.php", "content": " Links for the given term.\n\t */\n\tprotected function prepare_links( $term ): array {\n\t\t$links = parent::prepare_links( $term );\n\t\t$links['about'] = [\n\t\t\t'href' => rest_url( \\sprintf( '%s/taxonomies/%s', $this->namespace, $this->taxonomy ) ),\n\t\t];\n\n\t\treturn $links;\n\t}\n}\n" }, { "path": "includes/REST_API/Stories_Users_Controller.php", "content": "namespace = 'web-stories/v1';\n\n\t\t$this->story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Register the service.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_routes();\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'rest_api_init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 100;\n\t}\n\n\t/**\n\t * Permissions check for getting all users.\n\t *\n\t * Allows edit_posts capabilities queries for stories if the user has the same cap,\n\t * enabling them to see the users dropdown.\n\t *\n\t * @since 1.28.1\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access, otherwise WP_Error object.\n\t */\n\tpublic function get_items_permissions_check( $request ) {\n\t\t/**\n\t\t * The edit_posts capability.\n\t\t *\n\t\t * @var string $edit_posts\n\t\t */\n\t\t$edit_posts = $this->story_post_type->get_cap_name( 'edit_posts' );\n\n\t\tif (\n\t\t\t! empty( $request['capabilities'] ) &&\n\t\t\t[ $edit_posts ] === $request['capabilities'] &&\n\t\t\tcurrent_user_can( $edit_posts ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t) {\n\t\t\tunset( $request['capabilities'] );\n\t\t}\n\n\t\treturn parent::get_items_permissions_check( $request );\n\t}\n\n\t/**\n\t * Retrieves all users.\n\t *\n\t * Includes a workaround for a shortcoming in WordPress core where\n\t * only users with published posts are returned if not an admin\n\t * and not using a 'who' -> 'authors' query, since we're using\n\t * the recommended capabilities queries instead.\n\t *\n\t * @since 1.28.1\n\t *\n\t * @link https://github.com/WordPress/wordpress-develop/blob/008277583be15ee1738fba51ad235af5bbc5d721/src/wp-includes/rest-api/endpoints/class-wp-rest-users-controller.php#L308-L312\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return WP_REST_Response|WP_Error Response object on success, or WP_Error object on failure.\n\t */\n\tpublic function get_items( $request ) {\n\t\t/**\n\t\t * The edit_posts capability.\n\t\t *\n\t\t * @var string $edit_posts\n\t\t */\n\t\t$edit_posts = $this->story_post_type->get_cap_name( 'edit_posts' );\n\n\t\tif (\n\t\t\t! isset( $request['has_published_posts'] ) &&\n\t\t\t! empty( $request['capabilities'] ) &&\n\t\t\t[ $edit_posts ] === $request['capabilities'] &&\n\t\t\tcurrent_user_can( $edit_posts ) // phpcs:ignore WordPress.WP.Capabilities.Undetermined\n\t\t) {\n\t\t\tadd_filter( 'rest_user_query', [ $this, 'filter_query_args' ] );\n\t\t\t$response = parent::get_items( $request );\n\t\t\tremove_filter( 'rest_user_query', [ $this, 'filter_query_args' ] );\n\n\t\t\treturn $response;\n\t\t}\n\n\t\treturn parent::get_items( $request );\n\t}\n\n\t/**\n\t * Filters WP_User_Query arguments when querying users via the REST API.\n\t *\n\t * Removes 'has_published_posts' query argument.\n\t *\n\t * @since 1.28.1\n\t *\n\t * @param array $prepared_args Array of arguments for WP_User_Query.\n\t * @return array Filtered query args.\n\t */\n\tpublic function filter_query_args( array $prepared_args ): array {\n\t\tunset( $prepared_args['has_published_posts'] );\n\n\t\treturn $prepared_args;\n\t}\n\n\t/**\n\t * Checks if a given request has access to read a user.\n\t *\n\t * Same as the parent function but with using a cached version of {@see count_user_posts()}.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @see WP_REST_Users_Controller::get_item_permissions_check()\n\t *\n\t * @param WP_REST_Request $request Full details about the request.\n\t * @return true|WP_Error True if the request has read access for the item, otherwise WP_Error object.\n\t */\n\tpublic function get_item_permissions_check( $request ) {\n\t\t/**\n\t\t * User ID.\n\t\t *\n\t\t * @var int $user_id\n\t\t */\n\t\t$user_id = $request['id'];\n\n\t\t$user = $this->get_user( $user_id );\n\t\tif ( is_wp_error( $user ) ) {\n\t\t\treturn $user;\n\t\t}\n\n\t\tif ( get_current_user_id() === $user->ID ) {\n\t\t\treturn true;\n\t\t}\n\n\t\tif ( 'edit' === $request['context'] && ! current_user_can( 'list_users' ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_user_cannot_view',\n\t\t\t\t__( 'Sorry, you are not allowed to list users.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\tif ( ! $this->user_posts_count_public( $user->ID, $this->story_post_type->get_slug() ) && ! current_user_can( 'edit_user', $user->ID ) && ! current_user_can( 'list_users' ) ) {\n\t\t\treturn new \\WP_Error(\n\t\t\t\t'rest_user_cannot_view',\n\t\t\t\t__( 'Sorry, you are not allowed to list users.', 'web-stories' ),\n\t\t\t\t[ 'status' => rest_authorization_required_code() ]\n\t\t\t);\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Number of posts user has written.\n\t *\n\t * Wraps {@see count_user_posts()} results in a cache.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.10.0\n\t *\n\t * @link https://core.trac.wordpress.org/ticket/39242\n\t *\n\t * @param int $userid User ID.\n\t * @param string $post_type Optional. Single post type or array of post types to count the number of posts for. Default 'post'.\n\t * @return int Number of posts the user has written in this post type.\n\t */\n\tprotected function user_posts_count_public( int $userid, string $post_type = 'post' ): int {\n\t\t$cache_key = \"count_user_{$post_type}_{$userid}\";\n\t\t$cache_group = 'user_posts_count';\n\n\t\t/**\n\t\t * Post count.\n\t\t *\n\t\t * @var string|false $count\n\t\t */\n\t\t$count = wp_cache_get( $cache_key, $cache_group );\n\t\tif ( false === $count ) {\n\t\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.count_user_posts_count_user_posts\n\t\t\t$count = count_user_posts( $userid, $post_type, true );\n\t\t\twp_cache_add( $cache_key, $count, $cache_group );\n\t\t}\n\n\t\treturn (int) $count;\n\t}\n}\n" }, { "path": "includes/Register_Widget.php", "content": "stories = $stories;\n\t}\n\n\t/**\n\t * Register Widgets.\n\t *\n\t * @since 1.6.0\n\t */\n\tpublic function register(): void {\n\t\tadd_action( 'widgets_init', [ $this, 'register_widgets' ] );\n\t\tadd_filter( 'widget_types_to_hide_from_legacy_widget_block', [ $this, 'hide_widget' ] );\n\t\tadd_filter( 'body_class', [ $this, 'body_class' ] );\n\t}\n\n\t/**\n\t * Register widget.\n\t *\n\t * @since 1.9.0\n\t */\n\tpublic function register_widgets(): void {\n\t\tregister_widget( $this->stories );\n\t}\n\n\t/**\n\t * Hide widget stories from legacy widget list.\n\t *\n\t * @since 1.9.0\n\t *\n\t * @param array|mixed $widget_types An array of excluded widget-type IDs.\n\t * @return array|mixed\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($widget_types is array ? array : mixed)\n\t */\n\tpublic function hide_widget( $widget_types ) {\n\t\tif ( ! \\is_array( $widget_types ) ) {\n\t\t\treturn $widget_types;\n\t\t}\n\t\t$widget_types[] = $this->stories->id_base;\n\n\t\treturn $widget_types;\n\t}\n\n\t/**\n\t * Filters the list of CSS body class names for embedded iframes to add a class.\n\t *\n\t * @since 1.9.0\n\t *\n\t * @param string[]|mixed $classes An array of body class names.\n\t * @return array|mixed\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($classes is array ? array : mixed)\n\t */\n\tpublic function body_class( $classes ) {\n\t\tif ( ! \\is_array( $classes ) ) {\n\t\t\treturn $classes;\n\t\t}\n\t\tif ( is_admin() && \\defined( 'IFRAME_REQUEST' ) && IFRAME_REQUEST ) {\n\t\t\t$classes[] = 'ws-legacy-widget-preview';\n\t\t}\n\n\t\treturn $classes;\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.38.1\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\t// Because wp_widgets_init() runs on priority 1.\n\t\treturn 0;\n\t}\n}\n" }, { "path": "includes/Remove_Transients.php", "content": "delete_transients();\n\t\t\treturn;\n\t\t}\n\n\t\t$this->delete_network_transients();\n\t\t$site_ids = get_sites(\n\t\t\t[\n\t\t\t\t'fields' => 'ids',\n\t\t\t\t'number' => 0,\n\t\t\t\t'update_site_cache' => false,\n\t\t\t\t'update_site_meta_cache' => false,\n\t\t\t]\n\t\t);\n\n\t\tforeach ( $site_ids as $site_id ) {\n\t\t\t// phpcs:ignore WordPressVIPMinimum.Functions.RestrictedFunctions.switch_to_blog_switch_to_blog\n\t\t\tswitch_to_blog( $site_id );\n\n\t\t\t$this->delete_transients();\n\t\t}\n\n\t\trestore_current_blog();\n\t}\n\n\t/**\n\t * Delete transients.\n\t *\n\t * @since 1.26.0\n\t */\n\tprotected function delete_transients(): void {\n\t\tglobal $wpdb;\n\n\t\t// phpcs:ignore WordPress.DB.DirectDatabaseQuery\n\t\t$transients = $wpdb->get_col(\n\t\t\t$wpdb->prepare(\n\t\t\t\t\"SELECT option_name FROM $wpdb->options WHERE option_name LIKE %s OR option_name LIKE %s\",\n\t\t\t\t'_transient_' . self::PREFIX,\n\t\t\t\t'_transient_timeout_' . self::PREFIX\n\t\t\t)\n\t\t);\n\n\t\tif ( ! empty( $transients ) ) {\n\t\t\tarray_map( 'delete_option', (array) $transients );\n\t\t}\n\t}\n\n\t/**\n\t * Delete transients on multisite.\n\t *\n\t * @since 1.26.0\n\t */\n\tprotected function delete_network_transients(): void {\n\t\tglobal $wpdb;\n\n\t\t// phpcs:ignore WordPress.DB.DirectDatabaseQuery\n\t\t$transients = $wpdb->get_col(\n\t\t\t$wpdb->prepare(\n\t\t\t\t\"SELECT meta_key FROM $wpdb->sitemeta WHERE meta_key LIKE %s OR meta_key LIKE %s\",\n\t\t\t\t'_site_transient_' . self::PREFIX,\n\t\t\t\t'_site_transient_timeout_' . self::PREFIX\n\t\t\t)\n\t\t);\n\n\t\tif ( ! empty( $transients ) ) {\n\t\t\tarray_map( 'delete_site_option', (array) $transients );\n\t\t}\n\t}\n}\n" }, { "path": "includes/Renderer/Archives.php", "content": "assets = $assets;\n\t\t$this->amp_story_player_assets = $amp_story_player_assets;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Filter content and excerpt for search and post type archive.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'the_content', [ $this, 'embed_player' ], PHP_INT_MAX );\n\t\tadd_filter( 'the_excerpt', [ $this, 'embed_player' ], PHP_INT_MAX );\n\t}\n\n\t/**\n\t * Change the content to an embedded player\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string|mixed $content Current content of filter.\n\t * @return string|mixed\n\t */\n\tpublic function embed_player( $content ) {\n\t\t$post = get_post();\n\n\t\tif ( is_feed() ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\tif ( ! is_search() && ! is_post_type_archive( Story_Post_Type::POST_TYPE_SLUG ) ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\tif ( $post instanceof WP_Post && Story_Post_Type::POST_TYPE_SLUG === $post->post_type ) {\n\t\t\t$story = new Story();\n\t\t\t$story->load_from_post( $post );\n\n\t\t\t$embed = new Embed( $story, $this->assets, $this->context );\n\t\t\t$content = $embed->render();\n\t\t}\n\n\t\treturn $content;\n\t}\n}\n" }, { "path": "includes/Renderer/Feed.php", "content": "post_type ) {\n\t\t\t$story = new Story();\n\t\t\t$story->load_from_post( $post );\n\n\t\t\t$image = new Image( $story );\n\t\t\t$content = $image->render();\n\t\t}\n\n\t\treturn $content;\n\t}\n}\n" }, { "path": "includes/Renderer/Oembed.php", "content": "post_type ) {\n\t\t\treturn $output;\n\t\t}\n\n\t\tif ( ! has_post_thumbnail( $post ) ) {\n\t\t\treturn $output;\n\t\t}\n\n\t\t$new_data = $this->get_embed_height_width( $width );\n\n\t\t$new_width = $new_data['width'];\n\t\t$new_height = $new_data['height'];\n\n\t\treturn str_replace(\n\t\t\t[ \"width=\\\"$width\\\"\", \"height=\\\"$height\\\"\" ],\n\t\t\t[\n\t\t\t\t\"width=\\\"$new_width\\\"\",\n\t\t\t\t\"height=\\\"$new_height\\\"\",\n\t\t\t],\n\t\t\t$output\n\t\t);\n\t}\n\n\t/**\n\t * Filters the oEmbed response data for a specific post.\n\t *\n\t * For stories, changes the aspect ratio from 16/9 to 3/5.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @param array|mixed $data The response data.\n\t * @param WP_Post $post The post object.\n\t * @param int $width The requested width.\n\t * @return array|mixed The modified response data.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($data is array ? array : mixed)\n\t */\n\tpublic function filter_oembed_response_data( $data, WP_Post $post, int $width ) {\n\t\tif ( Story_Post_Type::POST_TYPE_SLUG !== $post->post_type ) {\n\t\t\treturn $data;\n\t\t}\n\n\t\tif ( ! has_post_thumbnail( $post ) ) {\n\t\t\treturn $data;\n\t\t}\n\t\tif ( ! \\is_array( $data ) ) {\n\t\t\treturn $data;\n\t\t}\n\t\t$new_data = $this->get_embed_height_width( $width );\n\n\t\treturn array_merge( $data, $new_data );\n\t}\n\n\t/**\n\t * Generate new height and width for embed.\n\t *\n\t * @since 1.7.0\n\t *\n\t * @param int $old_width Old width, used to generate new height and width.\n\t * @return array{width: int, height: int}\n\t */\n\tprotected function get_embed_height_width( int $old_width ): array {\n\t\t/** This filter is documented in wp-includes/embed.php */\n\t\t$min_max_width = apply_filters(\n\t\t\t'oembed_min_max_width',\n\t\t\t[\n\t\t\t\t'min' => 200,\n\t\t\t\t'max' => 360,\n\t\t\t]\n\t\t);\n\n\t\t$width = (int) min( max( $min_max_width['min'], $old_width ), $min_max_width['max'] );\n\t\t$height = (int) max( ceil( $width / 3 * 5 ), 330 );\n\n\t\treturn compact( 'width', 'height' );\n\t}\n}\n" }, { "path": "includes/Renderer/Single.php", "content": "context = $context;\n\t}\n\n\t/**\n\t * Initializes the Single logic.\n\t *\n\t * @since 1.7.0\n\t */\n\tpublic function register(): void {\n\t\t// This is hooked to both the `template_include` and the `single_template` filters,\n\t\t// as an additional measure to improve compatibility with themes\n\t\t// overriding the template hierarchy in an unusual way, like the Sage theme does.\n\t\tadd_filter( 'single_template', [ $this, 'filter_template_include' ], PHP_INT_MAX );\n\t\tadd_filter( 'template_include', [ $this, 'filter_template_include' ], PHP_INT_MAX );\n\n\t\tadd_filter( 'show_admin_bar', [ $this, 'show_admin_bar' ] ); // phpcs:ignore WordPressVIPMinimum.UserExperience.AdminBarRemoval.RemovalDetected\n\t}\n\n\t/**\n\t * Filters the path of the queried template for single stories.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string|mixed $template Absolute path to template file.\n\t * @return string|mixed Filtered template file path.\n\t */\n\tpublic function filter_template_include( $template ) {\n\t\tif ( $this->context->is_web_story() ) {\n\t\t\treturn WEBSTORIES_PLUGIN_DIR_PATH . 'includes/templates/frontend/single-web-story.php';\n\t\t}\n\n\t\treturn $template;\n\t}\n\n\t/**\n\t * Filter if show admin bar on single post type.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param bool|mixed $show Current value of filter.\n\t * @return bool|mixed\n\t */\n\tpublic function show_admin_bar( $show ) {\n\t\tif ( $this->context->is_web_story() ) {\n\t\t\t$show = false;\n\t\t}\n\n\t\treturn $show;\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/Carousel_Renderer.php", "content": "load_assets();\n\t}\n\n\t/**\n\t * Enqueue assets.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function load_assets(): void {\n\t\tparent::load_assets();\n\n\t\t$this->assets->register_script_asset( self::SCRIPT_HANDLE, [], false );\n\n\t\twp_localize_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\t'webStoriesCarouselSettings',\n\t\t\t$this->get_carousel_settings()\n\t\t);\n\t}\n\n\t/**\n\t * Renders the stories output for given attributes.\n\t *\n\t * @SuppressWarnings(\"PHPMD.UnusedLocalVariable\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $args Array of rendering arguments.\n\t * @return string Rendered stories output.\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\tif ( ! $this->valid() ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tparent::render( $args );\n\t\t$container_classes = $this->get_container_classes();\n\t\t$container_styles = $this->get_container_styles();\n\n\t\tob_start();\n\t\t?>\n\t\t
\" data-id=\"instance_id ); ?>\">\n\t\t\tinstance_id ); ?>\"\n\t\t\tstyle=\"\"\n\t\t\t>\n\t\t\t\tmaybe_render_archive_link();\n\n\t\t\t\tif ( ! $this->context->is_amp() ) {\n\t\t\t\t\t$this->assets->enqueue_script( self::SCRIPT_HANDLE );\n\t\t\t\t\t?>\n\t\t\t\t\tget_view_type() ); ?>\"\n\t\t\t\t\tdata-id=\"instance_id ); ?>\"\n\t\t\t\t\tdata-prev=\"\"\n\t\t\t\t\tdata-next=\"\"\n\t\t\t\t\t>\n\t\t\t\t\t\trender_single_story_content();\n\t\t\t\t\t\t\t\t$this->next();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t$this->stories\n\t\t\t\t\t\t);\n\t\t\t\t\t\t?>\n\t\t\t\t\t
\n\t\t\t\t\t
\" class=\"glider-prev\">
\n\t\t\t\t\t
\" class=\"glider-next\">
\n\t\t\t\t\t\n\t\t\t\t\t\"\n\t\t\t\t\t>\n\t\t\t\t\t\trender_single_story_content();\n\t\t\t\t\t\t\t\t$this->next();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t$this->stories\n\t\t\t\t\t\t);\n\t\t\t\t\t\t?>\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\n\t\t\n\t\t|string> Carousel settings.\n\t */\n\tprotected function get_carousel_settings(): array {\n\t\treturn [\n\t\t\t'config' => [\n\t\t\t\t'isRTL' => is_rtl(),\n\t\t\t],\n\t\t\t'publicPath' => $this->assets->get_base_url( 'assets/js/' ),\n\t\t];\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldState/BaseFieldState.php", "content": "has_archive = (bool) $story_post_type->get_has_archive();\n\t}\n\n\t/**\n\t * Image alignment FieldState.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function image_alignment() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Image Alignment', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Excerpt FieldState.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function excerpt() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Display Excerpt', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Author Field State.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function author() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Display Author', 'web-stories' ),\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Date field state.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function date() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Display Date', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Archive link field state.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function archive_link() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Display Archive Link', 'web-stories' ),\n\t\t\t\t'show' => $this->has_archive,\n\t\t\t\t'hidden' => ! $this->has_archive,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Title field state.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function title() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Display Title', 'web-stories' ),\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Sharp corners field state.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Field\n\t */\n\tpublic function sharp_corners() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Use Sharp Corners', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Circle size field.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return BaseField\n\t */\n\tpublic function circle_size() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Circle Size', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Number of columns field.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return BaseField\n\t */\n\tpublic function number_of_columns() {\n\t\treturn new BaseField(\n\t\t\t[\n\t\t\t\t'label' => __( 'Number of Columns', 'web-stories' ),\n\t\t\t\t'show' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Prepare a field object.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $args Arguments to build field.\n\t * @return BaseField\n\t */\n\tprotected function prepare_field( array $args ): BaseField {\n\t\treturn new BaseField( $args );\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldState/CarouselView.php", "content": "label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldState/CircleView.php", "content": "label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Author field.\n\t *\n\t * @return \\Google\\Web_Stories\\Interfaces\\Field|BaseField\n\t */\n\tpublic function author() {\n\t\t$label = parent::author()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Date field.\n\t *\n\t * @return \\Google\\Web_Stories\\Interfaces\\Field|BaseField\n\t */\n\tpublic function date() {\n\t\t$label = parent::date()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Sharp corners field.\n\t *\n\t * @return \\Google\\Web_Stories\\Interfaces\\Field|BaseField\n\t */\n\tpublic function sharp_corners() {\n\t\t$label = parent::sharp_corners()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => false,\n\t\t\t\t'hidden' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Circle size field.\n\t *\n\t * @return BaseField\n\t */\n\tpublic function circle_size() {\n\t\t$label = parent::circle_size()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldState/GridView.php", "content": "label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldState/ListView.php", "content": "label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Author field.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return \\Google\\Web_Stories\\Interfaces\\Field|BaseField\n\t */\n\tpublic function date() {\n\t\t$label = parent::date()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Image alignment field.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return \\Google\\Web_Stories\\Interfaces\\Field|BaseField\n\t */\n\tpublic function image_alignment() {\n\t\t$label = parent::image_alignment()->label();\n\n\t\treturn $this->prepare_field(\n\t\t\t[\n\t\t\t\t'label' => $label,\n\t\t\t\t'show' => true,\n\t\t\t\t'hidden' => false,\n\t\t\t]\n\t\t);\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/FieldStateFactory/Factory.php", "content": "injector = $injector;\n\t}\n\n\t/**\n\t * Returns field state for the provided view type.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param string $view View Type.\n\t * @return FieldState\n\t */\n\tpublic function get_field( $view = 'grid' ) {\n\t\tswitch ( $view ) {\n\t\t\tcase 'grid':\n\t\t\t\t/**\n\t\t\t\t * GridView instance.\n\t\t\t\t *\n\t\t\t\t * @var FieldState\n\t\t\t\t */\n\t\t\t\t$field_state = $this->injector->make( GridView::class );\n\t\t\t\tbreak;\n\t\t\tcase 'list':\n\t\t\t\t/**\n\t\t\t\t * ListView instance.\n\t\t\t\t *\n\t\t\t\t * @var FieldState\n\t\t\t\t */\n\t\t\t\t$field_state = $this->injector->make( ListView::class );\n\t\t\t\tbreak;\n\t\t\tcase 'circles':\n\t\t\t\t/**\n\t\t\t\t * CircleView instance.\n\t\t\t\t *\n\t\t\t\t * @var FieldState\n\t\t\t\t */\n\t\t\t\t$field_state = $this->injector->make( CircleView::class );\n\t\t\t\tbreak;\n\t\t\tcase 'carousel':\n\t\t\t\t/**\n\t\t\t\t * CarouselView instance.\n\t\t\t\t *\n\t\t\t\t * @var FieldState\n\t\t\t\t */\n\t\t\t\t$field_state = $this->injector->make( CarouselView::class );\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\t/**\n\t\t\t\t * CircleView instance.\n\t\t\t\t *\n\t\t\t\t * @var FieldState $default_field_state\n\t\t\t\t */\n\t\t\t\t$default_field_state = $this->injector->make( CircleView::class );\n\n\t\t\t\t/**\n\t\t\t\t * Filters the field state object.\n\t\t\t\t *\n\t\t\t\t * This depicts\n\t\t\t\t *\n\t\t\t\t * @since 1.5.0\n\t\t\t\t *\n\t\t\t\t * @param FieldState $default_field_state Field state object.\n\t\t\t\t */\n\t\t\t\t$field_state = apply_filters( 'web_stories_default_field_state', $default_field_state );\n\t\t}\n\n\t\treturn $field_state;\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/Fields/BaseField.php", "content": " $args Arguments.\n\t */\n\tpublic function __construct( array $args ) {\n\t\t$this->label = isset( $args['label'] ) ? (string) $args['label'] : '';\n\t\t$this->hidden = ! isset( $args['hidden'] ) || $args['hidden'];\n\t\t$this->show = ! isset( $args['show'] ) || $args['show'];\n\t}\n\n\t/**\n\t * Label for the field.\n\t *\n\t * @return string\n\t */\n\tpublic function label(): string {\n\t\treturn $this->label;\n\t}\n\n\t/**\n\t * Flag for field display.\n\t *\n\t * @return bool\n\t */\n\tpublic function show(): bool {\n\t\treturn $this->show;\n\t}\n\n\t/**\n\t * Whether the field is hidden.\n\t *\n\t * @return bool\n\t */\n\tpublic function hidden(): bool {\n\t\treturn $this->hidden;\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/Generic_Renderer.php", "content": "load_assets();\n\t}\n\n\t/**\n\t * Renders the stories output for given attributes.\n\t *\n\t * @SuppressWarnings(\"PHPMD.UnusedLocalVariable\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $args Array of rendering arguments.\n\t * @return string Rendered stories output.\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\tif ( ! $this->valid() ) {\n\t\t\treturn '';\n\t\t}\n\n\t\tparent::render( $args );\n\t\t$container_classes = $this->get_container_classes();\n\t\t$container_styles = $this->get_container_styles();\n\n\t\tob_start();\n\t\t?>\n\t\t
\" data-id=\"instance_id ); ?>\">\n\t\t\t
\">\n\t\t\t\trender_single_story_content();\n\t\t\t\t\t\t$this->next();\n\t\t\t\t\t},\n\t\t\t\t\t$this->stories\n\t\t\t\t);\n\t\t\t\t$this->maybe_render_archive_link();\n\t\t\t\t?>\n\t\t\t
\n\t\t
\n\t\tget_view_type();\n\t\t$content = (string) ob_get_clean();\n\n\t\t$content = wp_interactivity_process_directives( $content );\n\n\t\t/**\n\t\t * Filters the Generic renderer stories content.\n\t\t *\n\t\t * The dynamic portion of the hook `$this->get_view_type()` refers to the story view type.\n\t\t *\n\t\t * @since 1.5.0\n\t\t *\n\t\t * @param string $content Stories content.\n\t\t */\n\t\treturn apply_filters( \"web_stories_{$view_type}_renderer_stories_content\", $content );\n\t}\n}\n" }, { "path": "includes/Renderer/Stories/Renderer.php", "content": "\n */\nabstract class Renderer implements RenderingInterface, Iterator {\n\t/**\n\t * Web Stories stylesheet handle.\n\t */\n\tpublic const STYLE_HANDLE = 'web-stories-list-styles';\n\n\t/**\n\t * Number of instances invoked. Kept it static to keep track.\n\t */\n\tprotected static int $instances = 0;\n\n\t/**\n\t * Assets instance.\n\t *\n\t * @var Assets Assets instance.\n\t */\n\tprotected Assets $assets;\n\n\t/**\n\t * Context instance.\n\t *\n\t * @var Context Context instance.\n\t */\n\tprotected Context $context;\n\n\t/**\n\t * Object ID for the Renderer class.\n\t * To enable support for multiple carousels and lightboxes\n\t * on the same page, we needed to identify each Renderer instance.\n\t *\n\t * This variable is used to add appropriate class to the Web Stories\n\t * wrapper.\n\t */\n\tprotected int $instance_id = 0;\n\n\t/**\n\t * Story_Query instance.\n\t *\n\t * @var Story_Query Story_Query instance.\n\t */\n\tprotected Story_Query $query;\n\n\t/**\n\t * Story attributes\n\t *\n\t * @var array An array of story attributes.\n\t * @phpstan-var StoryAttributes\n\t */\n\tprotected array $attributes = [];\n\n\t/**\n\t * Story posts.\n\t *\n\t * @var Story[] An array of story posts.\n\t */\n\tprotected array $stories = [];\n\n\t/**\n\t * Holds required html for the lightbox.\n\t *\n\t * @var string A string of lightbox markup.\n\t */\n\tprotected string $lightbox_html = '';\n\n\t/**\n\t * Pointer to iterate over stories.\n\t */\n\tprivate int $position = 0;\n\n\t/**\n\t * Height for displaying story.\n\t */\n\tprotected int $height = 308;\n\n\t/**\n\t * Width for displaying story.\n\t */\n\tprotected int $width = 185;\n\n\t/**\n\t * Whether content overlay is enabled for story.\n\t */\n\tprotected bool $content_overlay;\n\n\t/**\n\t * Constructor\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param Story_Query $query Story_Query instance.\n\t */\n\tpublic function __construct( Story_Query $query ) {\n\t\t$this->query = $query;\n\t\t$this->attributes = $this->query->get_story_attributes();\n\t\t$this->content_overlay = $this->attributes['show_title'] || $this->attributes['show_date'] || $this->attributes['show_author'] || $this->attributes['show_excerpt'];\n\n\t\t// TODO, find a way to inject this a cleaner way.\n\t\t$injector = Services::get_injector();\n\n\t\t/**\n\t\t * Assets instance.\n\t\t *\n\t\t * @var Assets $assets Assets instance.\n\t\t */\n\t\t$assets = $injector->make( Assets::class );\n\n\t\t/**\n\t\t * Context instance.\n\t\t *\n\t\t * @var Context $context Context instance.\n\t\t */\n\t\t$context = $injector->make( Context::class );\n\n\t\t$this->assets = $assets;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Output markup for amp stories.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $args Array of rendering arguments.\n\t * @return string\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\t++self::$instances;\n\t\t$this->instance_id = self::$instances;\n\n\t\tforeach ( $args as $key => $val ) {\n\t\t\tif ( property_exists( $this, $key ) ) {\n\t\t\t\t$this->{$key} = $val;\n\t\t\t}\n\t\t}\n\n\t\treturn '';\n\t}\n\n\t/**\n\t * Retrieve current story.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Story|null\n\t */\n\tpublic function current(): ?Story {\n\t\treturn $this->stories[ $this->position ] ?? null;\n\t}\n\n\t/**\n\t * Retrieve next story.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function next(): void {\n\t\t++$this->position;\n\t}\n\n\t/**\n\t * Retrieve the key for current node in list.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return bool|float|int|string|void|null\n\t */\n\t#[\\ReturnTypeWillChange]\n\tpublic function key() {\n\t\treturn $this->position;\n\t}\n\n\t/**\n\t * Check if current position is valid.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return bool\n\t */\n\tpublic function valid(): bool {\n\t\treturn isset( $this->stories[ $this->position ] );\n\t}\n\n\t/**\n\t * Reset pointer to start of the list.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function rewind(): void {\n\t\t$this->position = 0;\n\t}\n\n\t/**\n\t * Perform initial setup for object.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function init(): void {\n\t\t$this->stories = array_filter( array_map( [ $this, 'prepare_stories' ], $this->query->get_stories() ) );\n\n\t\tadd_action( 'wp_footer', [ $this, 'render_stories_lightbox' ] );\n\t\tadd_action( 'amp_post_template_footer', [ $this, 'render_stories_lightbox' ] );\n\t}\n\n\t/**\n\t * Initializes renderer functionality.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function load_assets(): void {\n\t\tif ( wp_style_is( self::STYLE_HANDLE, 'registered' ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Web Stories styles for AMP and non-AMP pages.\n\t\t$this->assets->register_style_asset( self::STYLE_HANDLE );\n\n\t\tif ( \\defined( 'AMPFORWP_VERSION' ) ) {\n\t\t\tadd_action( 'amp_post_template_css', [ $this, 'add_amp_post_template_css' ] );\n\t\t}\n\t}\n\n\t/**\n\t * Prints required inline CSS when using the AMP for WP plugin.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return void\n\t */\n\tpublic function add_amp_post_template_css(): void {\n\t\t$path = $this->assets->get_base_path( \\sprintf( 'assets/css/%s%s.css', self::STYLE_HANDLE, is_rtl() ? '-rtl' : '' ) );\n\n\t\tif ( is_readable( $path ) ) {\n\t\t\t$css = file_get_contents( $path ); // phpcs:ignore WordPressVIPMinimum.Performance.FetchingRemoteData.FileGetContentsUnknown\n\t\t\techo $css; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\t}\n\t}\n\n\t/**\n\t * Returns story item data.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param object $post Array of post objects.\n\t * @return Story|null Story object or null if given post\n\t */\n\tpublic function prepare_stories( $post ): ?Story {\n\t\tif ( ! $post instanceof WP_Post ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t$story_data = [];\n\n\t\t// TODO: get from field state instead.\n\t\tif ( ! $this->is_view_type( 'circles' ) ) {\n\t\t\tif ( isset( $this->attributes['show_author'] ) && true === $this->attributes['show_author'] ) {\n\t\t\t\t$author_id = absint( get_post_field( 'post_author', $post->ID ) );\n\n\t\t\t\t$story_data['author'] = get_the_author_meta( 'display_name', $author_id );\n\t\t\t}\n\n\t\t\tif ( isset( $this->attributes['show_date'] ) && true === $this->attributes['show_date'] ) {\n\t\t\t\t/* translators: Date format, see https://www.php.net/manual/en/datetime.format.php */\n\t\t\t\t$story_data['date'] = get_the_date( __( 'M j, Y', 'web-stories' ), $post->ID );\n\t\t\t}\n\t\t}\n\n\t\t$story_data['classes'] = $this->get_single_story_classes();\n\n\t\t$story = new Story( $story_data );\n\t\t$story->load_from_post( $post );\n\n\t\treturn $story;\n\t}\n\n\t/**\n\t * Render story markup.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tpublic function render_single_story_content(): void {\n\t\t/**\n\t\t * Story object.\n\t\t *\n\t\t * @var Story $story\n\t\t */\n\t\t$story = $this->current();\n\n\t\t$single_story_classes = $this->get_single_story_classes();\n\t\t$lightbox_state = 'lightbox' . $story->get_id() . $this->instance_id;\n\t\t// No need to load these styles on admin as editor styles are being loaded by the block.\n\t\tif ( ! is_admin() || ( \\defined( 'IFRAME_REQUEST' ) && IFRAME_REQUEST ) ) {\n\t\t\t// Web Stories Styles for AMP and non-AMP pages.\n\t\t\t$this->assets->enqueue_style_asset( self::STYLE_HANDLE );\n\t\t}\n\n\t\t$this->assets->enqueue_script_module(\n\t\t\t'web-stories-embed-view-script-module',\n\t\t\t$this->assets->get_base_url( 'assets/js/web-stories-block-view.js' )\n\t\t);\n\n\t\tif ( $this->context->is_amp() ) {\n\t\t\t?>\n\t\t\t\"\n\t\t\t\ton=\"\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\trole=\"button\"\n\t\t\t>\n\t\t\t\trender_story_with_poster(); ?>\n\t\t\t\n\t\t\tassets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t\t$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t\t?>\n\t\t\t\"\n\t\t\t\tdata-wp-interactive=\"web-stories-block\"\n\t\t\t\t $this->instance_id,\n\t\t\t\t\t\t]\n\t\t\t\t\t);\n\t\t\t\t?>\n\t\t\t\tdata-wp-on--click=\"actions.open\"\n\t\t\t\tdata-wp-on-window--popstate=\"actions.onPopstate\"\n\t\t\t\t>\n\t\t\t\trender_story_with_poster(); ?>\n\t\t\t\n\t\t\t [\n\t\t\t\t[\n\t\t\t\t\t'name' => 'close',\n\t\t\t\t\t'position' => 'start',\n\t\t\t\t],\n\t\t\t\t[\n\t\t\t\t\t'name' => 'skip-next',\n\t\t\t\t],\n\t\t\t],\n\t\t\t'behavior' => [\n\t\t\t\t'autoplay' => false,\n\t\t\t],\n\t\t];\n\t\t?>\n\t\t
\n\t\t\t\n\t\t\t\t\n\t\t\t\tlightbox_html ); ?>\n\t\t\t\n\t\t
\n\t\tlightbox_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Generated with properly escaped data.\n\t}\n\n\t/**\n\t * Renders stories lightbox on 'wp_footer'.\n\t *\n\t * @return void\n\t */\n\tpublic function render_stories_lightbox(): void {\n\t\t// Return if we don't have anything to render.\n\t\tif ( empty( $this->lightbox_html ) ) {\n\t\t\treturn;\n\t\t}\n\t\t?>\n\t\t
instance_id ); ?>\">\n\t\t\tcontext->is_amp() ) {\n\t\t\t\t$this->render_stories_with_lightbox_amp();\n\t\t\t} else {\n\t\t\t\t$this->render_stories_with_lightbox();\n\t\t\t}\n\t\t\t?>\n\t\t
\n\t\tattributes['view_type'] ) && $view_type === $this->attributes['view_type'] );\n\t}\n\n\t/**\n\t * Get view type for stories.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return string\n\t */\n\tprotected function get_view_type(): string {\n\t\treturn ! empty( $this->attributes['view_type'] ) ? $this->attributes['view_type'] : 'circles';\n\t}\n\n\t/**\n\t * Renders stories archive link if the 'show_archive_link' attribute is set to true.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tprotected function maybe_render_archive_link(): void {\n\t\tif (\n\t\t\tempty( $this->attributes['show_archive_link'] ) ||\n\t\t\ttrue !== $this->attributes['show_archive_link'] ||\n\t\t\tempty( $this->attributes['archive_link_label'] )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t$web_stories_archive = get_post_type_archive_link( Story_Post_Type::POST_TYPE_SLUG );\n\n\t\tif ( empty( $web_stories_archive ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t?>\n\t\t\n\t\tattributes['view_type'] ) ? \\sprintf( 'is-view-type-%1$s', $this->attributes['view_type'] ) : 'is-view-type-circles';\n\n\t\tif ( $this->is_view_type( 'grid' ) && ! empty( $this->attributes['number_of_columns'] ) ) {\n\t\t\t$view_classes[] = \\sprintf( 'columns-%1$d', $this->attributes['number_of_columns'] );\n\t\t}\n\n\t\tif ( ! $this->is_view_type( 'circles' ) && ! empty( $this->attributes['sharp_corners'] ) ) {\n\t\t\t$view_classes[] = 'is-style-squared';\n\t\t} else {\n\t\t\t$view_classes[] = 'is-style-default';\n\t\t}\n\n\t\tif ( $this->is_view_type( 'circles' ) && ! empty( $this->attributes['show_title'] ) ) {\n\t\t\t$view_classes[] = 'has-title';\n\t\t}\n\n\t\tif ( $this->is_view_type( 'circles' ) || $this->is_view_type( 'carousel' ) ) {\n\t\t\t$view_classes[] = 'is-carousel';\n\t\t}\n\n\t\treturn implode( ' ', $view_classes );\n\t}\n\n\t/**\n\t * Gets the classes for renderer container.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return string\n\t */\n\tprotected function get_container_classes(): string {\n\t\t$container_classes = [];\n\t\t$container_classes[] = 'web-stories-list';\n\t\t$container_classes[] = ! empty( $this->attributes['align'] ) ? \\sprintf( 'align%1$s', $this->attributes['align'] ) : 'alignnone';\n\t\t$container_classes[] = ! empty( $this->attributes['class'] ) ? $this->attributes['class'] : '';\n\n\t\tif ( ! empty( $this->attributes['show_archive_link'] ) ) {\n\t\t\t$container_classes[] = 'has-archive-link';\n\t\t}\n\n\t\t$container_classes = array_filter( $container_classes );\n\n\t\t$view_type_classes = $this->get_view_classes();\n\n\t\treturn \\sprintf( '%1$s %2$s', implode( ' ', $container_classes ), $view_type_classes );\n\t}\n\n\t/**\n\t * Gets the single story container classes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return string\n\t */\n\tprotected function get_single_story_classes(): string {\n\t\t$single_story_classes = [];\n\t\t$single_story_classes[] = 'web-stories-list__story';\n\n\t\tif ( $this->context->is_amp() ) {\n\t\t\t$single_story_classes[] = 'web-stories-list__story--amp';\n\t\t}\n\n\t\tif ( ! empty( $this->attributes['image_alignment'] ) && ( 'right' === $this->attributes['image_alignment'] ) ) {\n\t\t\t$single_story_classes[] = 'image-align-right';\n\t\t}\n\n\t\t$classes = implode( ' ', $single_story_classes );\n\n\t\t/**\n\t\t * Filters the web stories renderer single story classes.\n\t\t *\n\t\t * @since 1.5.0\n\t\t *\n\t\t * @param string $classes Single story classes.\n\t\t */\n\t\treturn apply_filters( 'web_stories_renderer_single_story_classes', $classes );\n\t}\n\n\t/**\n\t * Gets the single story container styles.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return string Style string.\n\t */\n\tprotected function get_container_styles(): string {\n\t\t$story_styles = ! empty( $this->attributes['circle_size'] ) && $this->is_view_type( 'circles' ) ?\n\t\t\t\\sprintf( '--ws-circle-size:%1$dpx', $this->attributes['circle_size'] ) :\n\t\t\t'';\n\t\t$story_styles .= $this->is_view_type( 'carousel' ) ? \\sprintf( '--ws-story-max-width:%1$dpx', $this->width ) : '';\n\n\t\t/**\n\t\t * Filters the web stories renderer single story classes.\n\t\t *\n\t\t * @since 1.5.0\n\t\t *\n\t\t * @param string $story_styles Single story classes.\n\t\t */\n\t\treturn apply_filters( 'web_stories_renderer_container_styles', $story_styles );\n\t}\n\n\t/**\n\t * Renders a story with story's poster image.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tprotected function render_story_with_poster(): void {\n\t\t/**\n\t\t * Story object.\n\t\t *\n\t\t * @var Story $story\n\t\t */\n\t\t$story = $this->current();\n\n\t\t$poster_url = $story->get_poster_portrait();\n\t\t$poster_srcset = $story->get_poster_srcset();\n\t\t$poster_sizes = $story->get_poster_sizes();\n\n\t\tif ( ! $poster_url ) {\n\t\t\t?>\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tget_url() ); ?>\" render_link_attributes(); ?>>\n\t\t\t\t\t\tget_title() ); ?>\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\tget_url() ); ?>\" render_link_attributes(); ?>>\n\t\t\t\t\t\"\n\t\t\t\t\t\talt=\"get_title() ); ?>\"\n\t\t\t\t\t\twidth=\"width ); ?>\"\n\t\t\t\t\t\theight=\"height ); ?>\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsrcset=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsizes=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\tdecoding=\"async\"\n\t\t\t\t\t>\n\t\t\t\t\n\t\t\t
\n\t\t\tget_content_overlay();\n\n\t\tif ( ! $this->context->is_amp() ) {\n\t\t\t$this->generate_lightbox_html( $story );\n\t\t} else {\n\t\t\t$this->generate_amp_lightbox_html_amp( $story );\n\t\t}\n\t}\n\n\t/**\n\t * Render additional link attributes.\n\t *\n\t * Allows customization of html attributes in the web stories widget anchor tag loop\n\t * Converts array into escaped inline html attributes.\n\t *\n\t * @since 1.17.0\n\t *\n\t * @return void\n\t */\n\tprotected function render_link_attributes(): void {\n\t\t/**\n\t\t * The current story.\n\t\t *\n\t\t * @var Story $story\n\t\t */\n\t\t$story = $this->current();\n\n\t\t/**\n\t\t * Filters the link attributes added to a story's tag.\n\t\t *\n\t\t * @since 1.17.0\n\t\t *\n\t\t * @param array $attributes Key value array of attribute name to attribute value.\n\t\t * @param Story $story The current story instance.\n\t\t * @param int $position The current story's position within the list.\n\t\t * @param string $view_type The current view type.\n\t\t */\n\t\t$attributes = apply_filters( 'web_stories_renderer_link_attributes', [], $story, $this->position, $this->get_view_type() );\n\n\t\t$attrs = [];\n\n\t\tif ( ! empty( $attributes ) ) {\n\t\t\tforeach ( $attributes as $attribute => $value ) {\n\t\t\t\t$attrs[] = wp_kses_one_attr( $attribute . '=\"' . esc_attr( $value ) . '\"', 'a' );\n\t\t\t}\n\t\t}\n\n\t\t$attrs = array_filter( $attrs ); // Filter out empty values rejected by KSES.\n\n\t\t//phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\techo implode( ' ', $attrs );\n\t}\n\n\t/**\n\t * Renders the content overlay markup.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return void\n\t */\n\tprotected function get_content_overlay(): void {\n\t\t/**\n\t\t * Story object.\n\t\t *\n\t\t * @var Story $story\n\t\t */\n\t\t$story = $this->current();\n\n\t\tif ( empty( $this->content_overlay ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t?>\n\t\t
\n\t\t\tattributes['show_title'] ) ) { ?>\n\t\t\t\t
\n\t\t\t\t\tget_title() ); ?>\n\t\t\t\t
\n\t\t\t\n\n\t\t\tattributes['show_excerpt'] ) ) { ?>\n\t\t\t\t
\n\t\t\t\t\tget_excerpt() ); ?>\n\t\t\t\t
\n\t\t\t\n\n\t\t\tget_author() ) ) { ?>\n\t\t\t\t
\n\t\t\t\t\tget_author() ) );\n\t\t\t\t\t?>\n\t\t\t\t
\n\t\t\t\n\n\t\t\tget_date() ) ) { ?>\n\t\t\t\t\n\t\t\t\n\t\t
\n\t\t\n\t\t\tget_url() ); ?>\" render_link_attributes(); ?>>get_title() ); ?>\n\t\tlightbox_html .= ob_get_clean();\n\t}\n\n\t/**\n\t * Markup for the lightbox used on AMP pages.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param Story $story Current Story.\n\t * @return void\n\t */\n\tprotected function generate_amp_lightbox_html_amp( $story ): void {\n\t\t// Start collecting markup for the lightbox stories. This way we don't have to re-run the loop.\n\t\tob_start();\n\t\t$lightbox_state = 'lightbox' . $story->get_id() . $this->instance_id;\n\t\t$lightbox_id = 'lightbox-' . $story->get_id() . $this->instance_id;\n\t\t?>\n\t\t\"\n\t\t\t[open]=\"\"\n\t\t\tlayout=\"nodisplay\"\n\t\t\ton=\"lightboxClose:AMP.setState({: false})\"\n\t\t\trole=\"button\"\n\t\t\ttabindex=\"0\"\n\t\t>\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\tget_url() ); ?>\" render_link_attributes(); ?>>get_title() ); ?>\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t\t\t\">\n\t\t\t\tattributes['archive_link_label'] ); ?>\n\t\t\t\n\t\t
\n\t\tlightbox_html .= ob_get_clean();\n\t}\n}\n" }, { "path": "includes/Renderer/Story/Embed.php", "content": "assets = $assets;\n\t\t$this->story = $story;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Renders the block output in default context.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array $args Array of Argument to render.\n\t * @return string Rendered block type output.\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\t$defaults = [\n\t\t\t'align' => 'none',\n\t\t\t'class' => 'wp-block-web-stories-embed',\n\t\t\t'height' => 600,\n\t\t\t'width' => 360,\n\t\t];\n\n\t\t$args = wp_parse_args( $args, $defaults );\n\t\t$align = \\sprintf( 'align%s', $args['align'] );\n\t\t$class = $args['class'];\n\t\t$url = $this->story->get_url();\n\t\t$title = $this->story->get_title();\n\t\t$poster = $this->story->get_poster_portrait();\n\t\t$poster_srcset = $this->story->get_poster_srcset();\n\t\t$poster_sizes = $this->story->get_poster_sizes();\n\n\t\t$wrapper_style = \\sprintf(\n\t\t\t'--aspect-ratio: %F; --width: %dpx; --height: %dpx',\n\t\t\t0 !== $args['height'] ? $args['width'] / $args['height'] : 1,\n\t\t\t(int) $args['width'],\n\t\t\t(int) $args['height']\n\t\t);\n\n\t\t// This CSS is used for AMP and non-AMP.\n\t\t$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );\n\n\t\tif ( $this->context->is_amp() ) {\n\t\t\tob_start();\n\t\t\t?>\n\t\t\t
\">\n\t\t\t\t
\">\n\t\t\t\t\t\"\n\t\t\t\t\t\theight=\"\"\n\t\t\t\t\t\tlayout=\"intrinsic\"\n\t\t\t\t\t>\n\t\t\t\t\t\t\">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\t\twidth=\"\"\n\t\t\t\t\t\t\t\t\theight=\"\"\n\t\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tsrcset=\"\"\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\tsizes=\"\"\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\tdecoding=\"async\"\n\t\t\t\t\t\t\t\t\tdata-amp-story-player-poster-img\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\tassets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\n\t\tob_start();\n\t\t?>\n\t\t
\">\n\t\t\t
\">\n\t\t\t\t\n\t\t\t\t\t\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\"\n\t\t\t\t\t\t\t\twidth=\"\"\n\t\t\t\t\t\t\t\theight=\"\"\n\t\t\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tsrcset=\"\"\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\tsizes=\"\"\n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\tdecoding=\"async\"\n\t\t\t\t\t\t\t\tdata-amp-story-player-poster-img\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t
\n\t\tstory = $story;\n\t}\n\n\t/**\n\t * Renders the story.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return string The complete HTML markup for the story.\n\t */\n\tpublic function render(): string {\n\t\t$markup = $this->story->get_markup();\n\t\t$markup = $this->fix_incorrect_charset( $markup );\n\t\t$markup = $this->fix_malformed_script_link_tags( $markup );\n\t\t$markup = $this->replace_html_head( $markup );\n\t\t$markup = wp_replace_insecure_home_url( $markup );\n\t\t$markup = $this->print_analytics( $markup );\n\t\t$markup = $this->print_social_share( $markup );\n\n\t\treturn $markup;\n\t}\n\n\t/**\n\t * Fix incorrect tags.\n\t *\n\t * React/JSX outputs the charset attribute name as \"charSet\",\n\t * but libdom and the AMP toolbox only recognize lowercase \"charset\"\n\t *\n\t * @since 1.28.0\n\t *\n\t * @param string $content Story markup.\n\t * @return string Filtered content\n\t */\n\tpublic function fix_incorrect_charset( string $content ): string {\n\t\treturn (string) preg_replace( '//i', '', $content );\n\t}\n\n\t/**\n\t * Fix malformed tags in the .\n\t *\n\t * On certain environments like WordPress.com VIP, there is additional KSES\n\t * hardening that prevents saving ``\n\t * and `https://cdn.ampproject.org/v0/amp-story-1.0.js`\n\t * into ``.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param string $content Story markup.\n\t * @return string Filtered content\n\t */\n\tprotected function fix_malformed_script_link_tags( string $content ): string {\n\t\t$replaced_content = preg_replace_callback(\n\t\t\t'/]+href=\"(?P[^\"]+)\"[^>]*>\\1<\\/a>/m',\n\t\t\tstatic function ( $matches ) {\n\t\t\t\tif ( str_starts_with( $matches['href'], 'https://cdn.ampproject.org/' ) ) {\n\t\t\t\t\t$script_url = $matches['href'];\n\n\t\t\t\t\t// Turns `https://cdn.ampproject.org/v0.js`\n\t\t\t\t\t// into ``.\n\t\t\t\t\tif ( 'https://cdn.ampproject.org/v0.js' === $script_url ) {\n\t\t\t\t\t\treturn \"\"; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript\n\t\t\t\t\t}\n\n\t\t\t\t\t// Extract 'amp-story' from 'https://cdn.ampproject.org/v0/amp-story-1.0.js'.\n\t\t\t\t\t$sub_matches = [];\n\t\t\t\t\tpreg_match( '/v0\\/(?P[\\w-]+)-[\\d.]+\\.js/', $script_url, $sub_matches );\n\n\t\t\t\t\tif ( isset( $sub_matches['custom_element'] ) ) {\n\t\t\t\t\t\t$custom_element = $sub_matches['custom_element'];\n\n\t\t\t\t\t\t// Turns `https://cdn.ampproject.org/v0/amp-story-1.0.js`\n\t\t\t\t\t\t// into .\n\t\t\t\t\t\treturn \"\"; // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn $matches[0];\n\t\t\t},\n\t\t\t$content\n\t\t);\n\n\t\t// On errors the return value of preg_replace_callback() is null.\n\t\treturn $replaced_content ?: $content;\n\t}\n\n\t/**\n\t * Returns the full HTML markup for a given story besides boilerplate.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return string Filtered content.\n\t */\n\tprotected function get_html_head_markup(): string {\n\t\tob_start();\n\t\t?>\n\t\t\n\t\t\" />\n\t\t with dynamic content.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param string $content Story markup.\n\t * @return string Filtered content.\n\t */\n\tprotected function replace_html_head( string $content ): string {\n\t\t$start_tag = '';\n\t\t$end_tag = '';\n\n\t\t// Replace malformed meta tags with correct tags.\n\t\t$content = (string) preg_replace( '//i', $start_tag, $content );\n\t\t$content = (string) preg_replace( '//i', $end_tag, $content );\n\n\t\t$start_tag_pos = strpos( $content, $start_tag );\n\t\t$end_tag_pos = strpos( $content, $end_tag );\n\n\t\tif ( false !== $start_tag_pos && false !== $end_tag_pos ) {\n\t\t\t$end_tag_pos += \\strlen( $end_tag );\n\t\t\t$content = substr_replace( $content, $this->get_html_head_markup(), $start_tag_pos, $end_tag_pos - $start_tag_pos );\n\t\t}\n\n\t\treturn $content;\n\t}\n\n\t/**\n\t * Print analytics code before closing ``.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param string $content String to replace.\n\t */\n\tprotected function print_analytics( string $content ): string {\n\t\tob_start();\n\n\t\t/**\n\t\t * Fires before the closing tag.\n\t\t *\n\t\t * Can be used to print configuration.\n\t\t *\n\t\t * @since 1.1.0\n\t\t */\n\t\tdo_action( 'web_stories_print_analytics' );\n\n\t\t$output = (string) ob_get_clean();\n\n\t\treturn str_replace( '', $output . '', $content );\n\t}\n\n\t/**\n\t * Print amp-story-social-share before closing ``.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $content String to replace.\n\t */\n\tprotected function print_social_share( string $content ): string {\n\t\t$share_providers = [\n\t\t\t[\n\t\t\t\t'provider' => 'twitter',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'provider' => 'linkedin',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'provider' => 'email',\n\t\t\t],\n\t\t\t[\n\t\t\t\t'provider' => 'system',\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filters the list of sharing providers in the Web Stories sharing dialog.\n\t\t *\n\t\t * @since 1.3.0\n\t\t *\n\t\t * @link https://amp.dev/documentation/components/amp-social-share/?format=stories#pre-configured-providers\n\t\t *\n\t\t * @param array[] $share_providers List of sharing providers.\n\t\t */\n\t\t$share_providers = apply_filters( 'web_stories_share_providers', $share_providers );\n\n\t\tif ( empty( $share_providers ) ) {\n\t\t\treturn $content;\n\t\t}\n\n\t\t$config = [\n\t\t\t'shareProviders' => $share_providers,\n\t\t];\n\t\t$social_share = \\sprintf(\n\t\t\t'',\n\t\t\twp_json_encode( $config )\n\t\t);\n\n\n\t\treturn str_replace( '', $social_share . '', $content );\n\t}\n}\n" }, { "path": "includes/Renderer/Story/Image.php", "content": "story = $story;\n\t}\n\n\t/**\n\t * Renders the block as an image.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array $args Array of Argument to render.\n\t * @return string Rendered block type output.\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\t$defaults = [\n\t\t\t'align' => 'none',\n\t\t\t'class' => 'wp-block-web-stories-embed',\n\t\t\t'height' => 600,\n\t\t\t'width' => 360,\n\t\t];\n\t\t$args = wp_parse_args( $args, $defaults );\n\t\t$align = \\sprintf( 'align%s', $args['align'] );\n\t\t$class = $args['class'];\n\n\t\t$url = $this->story->get_url();\n\t\t$title = $this->story->get_title();\n\t\t$poster = $this->story->get_poster_portrait();\n\t\t$poster_srcset = $this->story->get_poster_srcset();\n\t\t$poster_sizes = $this->story->get_poster_sizes();\n\n\t\tob_start();\n\t\t?>\n\t\t
\">\n\t\t\t\">\n\t\t\t\t\n\t\t\t\t\t\"\n\t\t\t\t\t\twidth=\"\"\n\t\t\t\t\t\theight=\"\"\n\t\t\t\t\t\talt=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsrcset=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsizes=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\tdecoding=\"async\"\n\t\t\t\t\t/>\n\t\t\t\t\t\n\t\t\t\n\t\t
\n\t\tassets = $assets;\n\t\t$this->story = $story;\n\t}\n\n\t/**\n\t * Renders the block output in default context.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.30.0\n\t *\n\t * @param array $args Array of Argument to render.\n\t * @return string Rendered block type output.\n\t */\n\tpublic function render( array $args = [] ): string {\n\t\t++self::$instances;\n\t\t$this->instance_id = self::$instances;\n\n\t\t$defaults = [\n\t\t\t'align' => 'none',\n\t\t\t'class' => 'wp-block-web-stories-embed',\n\t\t\t'height' => 600,\n\t\t\t'width' => 360,\n\t\t];\n\n\t\t$args = wp_parse_args( $args, $defaults );\n\n\t\t$args['align'] = ! empty( $args['align'] ) ? $args['align'] : 'none';\n\t\t$align = \\sprintf( 'align%s', $args['align'] );\n\t\t$class = $args['class'];\n\t\t$wrapper_style = \\sprintf(\n\t\t\t'--aspect-ratio: %F; --width: %dpx; --height: %dpx',\n\t\t\t0 !== $args['height'] ? $args['width'] / $args['height'] : 1,\n\t\t\t(int) $args['width'],\n\t\t\t(int) $args['height']\n\t\t);\n\n\t\t$this->assets->enqueue_style_asset( Renderer::STYLE_HANDLE ); // For the lightbox styles.\n\t\t$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t$this->assets->enqueue_style_asset( Embed_Base::SCRIPT_HANDLE );\n\n\t\t$this->assets->enqueue_script_module(\n\t\t\t'web-stories-embed-view-script-module',\n\t\t\t$this->assets->get_base_url( 'assets/js/web-stories-block-view.js' )\n\t\t);\n\n\t\tob_start();\n\t\t?>\n\t\t\"\n\t\tdata-id=\"instance_id ); ?>\"\n\t\tdata-wp-interactive=\"web-stories-block\"\n\t\t $this->instance_id,\n\t\t\t\t]\n\t\t\t);\n\t\t?>\n\t\t>\n\t\t\t\"\n\t\t\tdata-wp-on--click=\"actions.open\"\n\t\t\t>\n\t\t\trender_story_with_poster( $args ); ?>\n\t\t\t\n\t\t\t [\n\t\t\t\t\t[\n\t\t\t\t\t\t'name' => 'close',\n\t\t\t\t\t\t'position' => 'start',\n\t\t\t\t\t],\n\t\t\t\t\t[\n\t\t\t\t\t\t'name' => 'skip-next',\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'behavior' => [\n\t\t\t\t\t'autoplay' => false,\n\t\t\t\t],\n\t\t\t];\n\n\t\t\t?>\n\t\t\t
instance_id ); ?>\">\n\t\t\t\tinstance_id ); ?>\"\n\t\t\t\t>\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\tstory->get_url() ); ?>\">story->get_title() ); ?>\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t\n\t\t\n\t\t $args Array of Argument to render.\n\t */\n\tprotected function render_story_with_poster( array $args ): void {\n\t\t$poster_url = $this->story->get_poster_portrait();\n\t\t$poster_srcset = $this->story->get_poster_srcset();\n\t\t$poster_sizes = $this->story->get_poster_sizes();\n\n\t\tif ( ! $poster_url ) {\n\t\t\t?>\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tstory->get_url() ); ?>\">\n\t\t\t\t\t\tstory->get_title() ); ?>\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\t\n\t\t\t
\n\t\t\t\tstory->get_url() ); ?>\">\n\t\t\t\t\t\"\n\t\t\t\t\t\talt=\"story->get_title() ); ?>\"\n\t\t\t\t\t\twidth=\"\"\n\t\t\t\t\t\theight=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsrcset=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\tsizes=\"\"\n\t\t\t\t\t\t\n\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\tdecoding=\"async\"\n\t\t\t\t\t>\n\t\t\t\t\n\t\t\t
\n\t\t\trender_content_overlay();\n\t}\n\n\t/**\n\t * Renders the content overlay markup.\n\t *\n\t * @since 1.30.0\n\t */\n\tprotected function render_content_overlay(): void {\n\t\t?>\n\t\t
\n\t\t\t
\n\t\t\t\t\tstory->get_title() ); ?>\n\t\t\t\t
\n\t\t
\n\t\t\n\t */\n\tprivate static ?ServiceContainer $container = null;\n\n\t/**\n\t * Dependency injector object instance.\n\t */\n\tprivate static ?Injector $injector = null;\n\n\t/**\n\t * Get a particular service out of the service container.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $service Service ID to retrieve.\n\t */\n\tpublic static function get( string $service ): Service {\n\t\treturn self::get_container()->get( $service );\n\t}\n\n\t/**\n\t * Check if a particular service has been registered in the service container.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param string $service Service ID to retrieve.\n\t */\n\tpublic static function has( string $service ): bool {\n\t\treturn self::get_container()->has( $service );\n\t}\n\n\t/**\n\t * Get an instance of the plugin.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return Plugin Plugin object instance.\n\t */\n\tpublic static function get_plugin(): Plugin {\n\t\tif ( null === self::$plugin ) {\n\t\t\tself::$plugin = PluginFactory::create();\n\t\t}\n\n\t\treturn self::$plugin;\n\t}\n\n\t/**\n\t * Get an instance of the service container.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return ServiceContainer Service container object instance.\n\t */\n\tpublic static function get_container(): ServiceContainer {\n\t\tif ( null === self::$container ) {\n\t\t\tself::$container = self::get_plugin()->get_container();\n\t\t}\n\n\t\treturn self::$container;\n\t}\n\n\t/**\n\t * Get an instance of the dependency injector.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return Injector Dependency injector object instance.\n\t */\n\tpublic static function get_injector(): Injector {\n\t\tif ( null === self::$injector ) {\n\t\t\tself::$injector = self::get_container()->get( 'injector' );\n\t\t}\n\n\t\treturn self::$injector;\n\t}\n}\n" }, { "path": "includes/Settings.php", "content": "shopping_vendors = $shopping_vendors;\n\t}\n\n\t/**\n\t * Primes option caches for specified groups if the function exists.\n\t *\n\t * @since 1.37.0\n\t */\n\tpublic function prime_option_caches(): void {\n\t\twp_prime_option_caches_by_group( self::SETTING_GROUP );\n\t\twp_prime_option_caches_by_group( self::SETTING_GROUP_EXPERIMENTS );\n\t}\n\n\t/**\n\t * Register settings.\n\t *\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_TRACKING_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'Google Analytics Tracking ID', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_USING_LEGACY_ANALYTICS,\n\t\t\t[\n\t\t\t\t'description' => __( 'Using legacy analytics configuration', 'web-stories' ),\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'default' => false,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'sanitize_callback' => 'rest_sanitize_boolean',\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_AD_NETWORK,\n\t\t\t[\n\t\t\t\t'description' => __( 'Ad Network', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => 'none',\n\t\t\t\t'enum' => [ 'none', 'adsense', 'admanager', 'mgid' ],\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_ADSENSE_PUBLISHER_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'Google AdSense Publisher ID', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_ADSENSE_SLOT_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'Google AdSense Slot ID', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_AD_MANAGER_SLOT_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'Google Ad Manager Slot ID', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_MGID_WIDGET_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'MGID Widget ID', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_ACTIVE_PUBLISHER_LOGO,\n\t\t\t[\n\t\t\t\t'description' => __( 'Default Publisher Logo', 'web-stories' ),\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'default' => 0,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_PUBLISHER_LOGOS,\n\t\t\t[\n\t\t\t\t'description' => __( 'Publisher Logos', 'web-stories' ),\n\t\t\t\t'type' => 'array',\n\t\t\t\t'default' => [],\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'items' => [\n\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t// WPGraphQL errors when encountering array or object types.\n\t\t\t\t// See https://github.com/wp-graphql/wp-graphql/issues/2065.\n\t\t\t\t'show_in_graphql' => false,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_VIDEO_CACHE,\n\t\t\t[\n\t\t\t\t'description' => __( 'Video Cache', 'web-stories' ),\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'default' => false,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_DATA_REMOVAL,\n\t\t\t[\n\t\t\t\t'description' => __( 'Data Removal', 'web-stories' ),\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'default' => false,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_ARCHIVE,\n\t\t\t[\n\t\t\t\t'description' => __( 'Web Stories Archive', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => 'default',\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'enum' => [ 'default', 'disabled', 'custom' ],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_ARCHIVE_PAGE_ID,\n\t\t\t[\n\t\t\t\t'description' => __( 'Web Stories Archive Page ID', 'web-stories' ),\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'default' => 0,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP_EXPERIMENTS,\n\t\t\tself::SETTING_NAME_EXPERIMENTS,\n\t\t\t[\n\t\t\t\t'description' => __( 'Experiments', 'web-stories' ),\n\t\t\t\t'type' => 'object',\n\t\t\t\t'default' => [],\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'properties' => [],\n\t\t\t\t\t\t'additionalProperties' => true,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\t$vendors = $this->shopping_vendors->get_vendors();\n\t\t$vendor_options = array_keys( $vendors );\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_SHOPPING_PROVIDER,\n\t\t\t[\n\t\t\t\t'description' => __( 'Shopping provider', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => 'none',\n\t\t\t\t'enum' => $vendor_options,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_SHOPIFY_HOST,\n\t\t\t[\n\t\t\t\t'description' => __( 'Shopify Host', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_SHOPIFY_ACCESS_TOKEN,\n\t\t\t[\n\t\t\t\t'description' => __( 'Shopify API Access Token', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => '',\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_AUTO_ADVANCE,\n\t\t\t[\n\t\t\t\t'description' => __( 'Auto-advance', 'web-stories' ),\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'default' => true,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_DEFAULT_PAGE_DURATION,\n\t\t\t[\n\t\t\t\t'description' => __( 'Default Page Duration', 'web-stories' ),\n\t\t\t\t'type' => 'number',\n\t\t\t\t'default' => 7,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_TRACKING_HANDLER,\n\t\t\t[\n\t\t\t\t'description' => __( 'Tracking Handler', 'web-stories' ),\n\t\t\t\t'type' => 'string',\n\t\t\t\t'default' => 'site-kit',\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t'enum' => [ 'site-kit', 'web-stories', 'both' ],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\tregister_setting(\n\t\t\tself::SETTING_GROUP,\n\t\t\tself::SETTING_NAME_CUSTOMIZER_SETTINGS,\n\t\t\t[\n\t\t\t\t'description' => __( 'Customizer settings', 'web-stories' ),\n\t\t\t\t'type' => 'array',\n\t\t\t\t'default' => [],\n\t\t\t\t'show_in_rest' => false,\n\t\t\t]\n\t\t);\n\n\t\tadd_action( 'init', [ $this, 'prime_option_caches' ] );\n\t}\n\n\t/**\n\t * Returns the value for a given setting.\n\t *\n\t * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param string $key Setting key.\n\t * @param mixed $default_value Optional. Default value to return if the option does not exist.\n\t * @return string|array|bool|int Setting value.\n\t */\n\tpublic function get_setting( string $key, $default_value = false ) {\n\t\t// Distinguish between `false` as a default, and not passing one, just like WordPress.\n\t\t$passed_default = \\func_num_args() > 1;\n\n\t\tif ( $passed_default ) {\n\t\t\t/**\n\t\t\t * Setting value.\n\t\t\t *\n\t\t\t * @var string|array|bool\n\t\t\t */\n\t\t\t$option = get_option( $key, $default_value );\n\t\t\tif ( $option === $default_value ) {\n\t\t\t\treturn $option;\n\t\t\t}\n\t\t} else {\n\t\t\t/**\n\t\t\t * Setting value.\n\t\t\t *\n\t\t\t * @var string|array|bool\n\t\t\t */\n\t\t\t$option = get_option( $key );\n\t\t}\n\n\t\t$settings = $this->get_registered_options();\n\t\tif ( isset( $settings[ $key ] ) ) {\n\t\t\t$value = rest_sanitize_value_from_schema( $option, $settings[ $key ] );\n\t\t\tif ( is_wp_error( $value ) ) {\n\t\t\t\treturn $option;\n\t\t\t}\n\t\t\t/**\n\t\t\t * Setting value.\n\t\t\t *\n\t\t\t * @var string|array|bool\n\t\t\t */\n\t\t\t$option = $value;\n\t\t}\n\n\t\treturn $option;\n\t}\n\n\t/**\n\t * Updates the given setting with a new value.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param string $key Setting key.\n\t * @param mixed $value Setting value.\n\t * @return mixed Setting value.\n\t */\n\tpublic function update_setting( string $key, $value ) {\n\t\treturn update_option( $key, $value );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_option( self::SETTING_NAME_ARCHIVE );\n\t\tdelete_option( self::SETTING_NAME_EXPERIMENTS );\n\t\tdelete_option( self::SETTING_NAME_TRACKING_ID );\n\t\tdelete_option( self::SETTING_NAME_USING_LEGACY_ANALYTICS );\n\t\tdelete_option( self::SETTING_NAME_AD_NETWORK );\n\t\tdelete_option( self::SETTING_NAME_ADSENSE_PUBLISHER_ID );\n\t\tdelete_option( self::SETTING_NAME_ADSENSE_SLOT_ID );\n\t\tdelete_option( self::SETTING_NAME_AD_MANAGER_SLOT_ID );\n\t\tdelete_option( self::SETTING_NAME_MGID_WIDGET_ID );\n\t\tdelete_option( self::SETTING_NAME_ACTIVE_PUBLISHER_LOGO );\n\t\tdelete_option( self::SETTING_NAME_PUBLISHER_LOGOS );\n\t\tdelete_option( self::SETTING_NAME_VIDEO_CACHE );\n\t\tdelete_option( self::SETTING_NAME_DATA_REMOVAL );\n\t\tdelete_option( self::SETTING_NAME_ARCHIVE );\n\t\tdelete_option( self::SETTING_NAME_ARCHIVE_PAGE_ID );\n\t\tdelete_option( self::SETTING_NAME_SHOPPING_PROVIDER );\n\t\tdelete_option( self::SETTING_NAME_SHOPIFY_HOST );\n\t\tdelete_option( self::SETTING_NAME_SHOPIFY_ACCESS_TOKEN );\n\t\tdelete_option( self::SETTING_NAME_DEFAULT_PAGE_DURATION );\n\t\tdelete_option( self::SETTING_NAME_AUTO_ADVANCE );\n\t\tdelete_option( self::SETTING_NAME_TRACKING_HANDLER );\n\t}\n\n\t/**\n\t * Retrieves all of the registered options for the Settings API.\n\t * Inspired by get_registered_options method found in WordPress. But also get settings that are registered without `show_in_rest` property.\n\t *\n\t * @since 1.28.0\n\t *\n\t * @link https://github.com/WordPress/wordpress-develop/blob/trunk/src/wp-includes/rest-api/endpoints/class-wp-rest-settings-controller.php#L211-L267\n\t *\n\t * @return array> Array of registered options.\n\t */\n\tprotected function get_registered_options(): array {\n\t\t$rest_options = [];\n\n\t\tforeach ( get_registered_settings() as $name => $args ) {\n\t\t\t$rest_args = [];\n\n\t\t\tif ( ! empty( $args['show_in_rest'] ) && \\is_array( $args['show_in_rest'] ) ) {\n\t\t\t\t$rest_args = $args['show_in_rest'];\n\t\t\t}\n\n\t\t\t$defaults = [\n\t\t\t\t'name' => ! empty( $rest_args['name'] ) ? $rest_args['name'] : $name,\n\t\t\t\t'schema' => [],\n\t\t\t];\n\n\t\t\t$rest_args = array_merge( $defaults, $rest_args );\n\n\t\t\t$default_schema = [\n\t\t\t\t'type' => empty( $args['type'] ) ? null : $args['type'],\n\t\t\t\t'description' => empty( $args['description'] ) ? '' : $args['description'],\n\t\t\t\t'default' => $args['default'] ?? null,\n\t\t\t];\n\n\t\t\t$schema = array_merge( $default_schema, $rest_args['schema'] );\n\t\t\t$schema = rest_default_additional_properties_to_false( $schema );\n\n\t\t\t$rest_options[ (string) $name ] = $schema;\n\t\t}\n\n\t\treturn $rest_options;\n\t}\n}\n" }, { "path": "includes/Shopping/Product.php", "content": " $product Array of attributes.\n\t */\n\tpublic function __construct( array $product = [] ) {\n\t\tforeach ( $product as $key => $value ) {\n\t\t\tif ( property_exists( $this, $key ) && ! \\is_null( $value ) ) {\n\t\t\t\t$this->$key = $value;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Get id.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_id(): string {\n\t\treturn $this->id;\n\t}\n\n\t/**\n\t * Get title.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_title(): string {\n\t\treturn $this->title;\n\t}\n\n\t/**\n\t * Get brand.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_brand(): string {\n\t\treturn $this->brand;\n\t}\n\n\t/**\n\t * Get price.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_price(): float {\n\t\treturn $this->price;\n\t}\n\n\t/**\n\t * Get currency.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_price_currency(): string {\n\t\treturn $this->price_currency;\n\t}\n\n\t/**\n\t * Get images property.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return array{url: string, alt: string}[]\n\t */\n\tpublic function get_images(): array {\n\t\treturn $this->images;\n\t}\n\n\t/**\n\t * Get details.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_details(): string {\n\t\treturn $this->details;\n\t}\n\n\t/**\n\t * Get url.\n\t *\n\t * @since 1.21.0\n\t */\n\tpublic function get_url(): string {\n\t\treturn $this->url;\n\t}\n\n\t/**\n\t * Get rating.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return array{rating_value?: float, review_count?: int, review_url?: string}\n\t */\n\tpublic function get_aggregate_rating(): ?array {\n\t\treturn $this->aggregate_rating;\n\t}\n\n\t/**\n\t * Retrieves the response data for JSON serialization.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return mixed Any JSON-serializable value.\n\t */\n\t#[\\ReturnTypeWillChange]\n\tpublic function jsonSerialize() { // phpcs:ignore WordPress.NamingConventions.ValidFunctionName.MethodNameInvalid\n\t\t$rating = $this->get_aggregate_rating();\n\n\t\t$data = [\n\t\t\t'productId' => $this->get_id(),\n\t\t\t'productTitle' => $this->get_title(),\n\t\t\t'productDetails' => $this->get_details(),\n\t\t\t'productBrand' => $this->get_brand(),\n\t\t\t'productUrl' => $this->get_url(),\n\t\t\t'productImages' => $this->get_images(),\n\t\t\t'productPrice' => $this->get_price(),\n\t\t\t'productPriceCurrency' => $this->get_price_currency(),\n\t\t];\n\n\t\tif ( $rating ) {\n\t\t\t$data['aggregateRating'] = [\n\t\t\t\t'ratingValue' => $rating['rating_value'] ?? null,\n\t\t\t\t'reviewCount' => $rating['review_count'] ?? null,\n\t\t\t\t'reviewUrl' => $rating['review_url'] ?? null,\n\t\t\t];\n\t\t}\n\n\t\treturn $data;\n\t}\n\n\t/**\n\t * Convert array to object properties.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param array $product Array of product.\n\t * @return Product Product.\n\t *\n\t * @phpstan-param ProductData $product\n\t */\n\tpublic static function load_from_array( array $product ): Product {\n\t\t$product_object = new self();\n\t\t$product_object->set_id( $product['productId'] ?? '' );\n\t\t$product_object->set_title( $product['productTitle'] ?? '' );\n\t\t$product_object->set_details( $product['productDetails'] ?? '' );\n\t\t$product_object->set_brand( $product['productBrand'] ?? '' );\n\t\t$product_object->set_url( $product['productUrl'] ?? '' );\n\t\t$product_object->set_images( $product['productImages'] ?? [] );\n\t\t$product_object->set_price( $product['productPrice'] ?? 0 );\n\t\t$product_object->set_price_currency( $product['productPriceCurrency'] ?? '' );\n\n\n\t\tif ( isset( $product['aggregateRating'] ) ) {\n\t\t\t$product_object->set_aggregate_rating(\n\t\t\t\t[\n\t\t\t\t\t'rating_value' => $product['aggregateRating']['ratingValue'] ?? 0,\n\t\t\t\t\t'review_count' => $product['aggregateRating']['reviewCount'] ?? 0,\n\t\t\t\t\t'review_url' => $product['aggregateRating']['reviewUrl'] ?? '',\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\n\t\treturn $product_object;\n\t}\n\n\t/**\n\t * Set id.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $id ID.\n\t */\n\tprotected function set_id( string $id ): void {\n\t\t$this->id = $id;\n\t}\n\n\t/**\n\t * Set title.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $title Title.\n\t */\n\tprotected function set_title( string $title ): void {\n\t\t$this->title = $title;\n\t}\n\n\t/**\n\t * Set brand.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $brand Brand.\n\t */\n\tprotected function set_brand( string $brand ): void {\n\t\t$this->brand = $brand;\n\t}\n\n\t/**\n\t * Set price.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param float $price Price.\n\t */\n\tprotected function set_price( float $price ): void {\n\t\t$this->price = $price;\n\t}\n\n\t/**\n\t * Set Price currency.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $price_currency Price Currency.\n\t */\n\tprotected function set_price_currency( string $price_currency ): void {\n\t\t$this->price_currency = $price_currency;\n\t}\n\n\t/**\n\t * Set Images.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param array{url: string, alt: string}[] $images Images.\n\t */\n\tprotected function set_images( array $images ): void {\n\t\t$this->images = $images;\n\t}\n\n\t/**\n\t * Set Details.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $details Details.\n\t */\n\tprotected function set_details( string $details ): void {\n\t\t$this->details = $details;\n\t}\n\n\t/**\n\t * Set url.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param string $url URL.\n\t */\n\tprotected function set_url( string $url ): void {\n\t\t$this->url = $url;\n\t}\n\n\t/**\n\t * Set aggregate rating.\n\t *\n\t * @since 1.26.0\n\t *\n\t * @param array{rating_value: float, review_count: int, review_url: string} $aggregate_rating Rating data in array.\n\t */\n\tprotected function set_aggregate_rating( array $aggregate_rating ): void {\n\t\t$this->aggregate_rating = $aggregate_rating;\n\t}\n}\n" }, { "path": "includes/Shopping/Product_Meta.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Init.\n\t *\n\t * @since 1.22.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_meta();\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.22.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_post_meta(\n\t\t\t$this->story_post_type::POST_TYPE_SLUG,\n\t\t\tself::PRODUCTS_POST_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'object',\n\t\t\t\t'description' => __( 'Products', 'web-stories' ),\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t\t'properties' => [],\n\t\t\t\t\t\t'additionalProperties' => true,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'default' => [],\n\t\t\t\t'single' => true,\n\t\t\t\t'revisions_enabled' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::PRODUCTS_POST_META_KEY );\n\t}\n}\n" }, { "path": "includes/Shopping/Shopify_Query.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Get products by search term.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $search_term Search term.\n\t * @param int $page Number of page for paginated requests.\n\t * @param int $per_page Number of products to be fetched.\n\t * @param string $orderby Sort retrieved products by parameter. Default 'date'.\n\t * @param string $order Whether to order products in ascending or descending order.\n\t * Accepts 'asc' (ascending) or 'desc' (descending). Default 'desc'.\n\t * @return array{products: array, has_next_page: bool}|WP_Error\n\t */\n\tpublic function get_search( string $search_term, int $page = 1, int $per_page = 100, string $orderby = 'date', string $order = 'desc' ) {\n\t\t$result = $this->fetch_remote_products( $search_term, $page, $per_page, $orderby, $order );\n\t\tif ( is_wp_error( $result ) ) {\n\t\t\treturn $result;\n\t\t}\n\n\t\t$products = [];\n\n\t\t$has_next_page = $result['data']['products']['pageInfo']['hasNextPage'];\n\n\t\tforeach ( $result['data']['products']['edges'] as $edge ) {\n\t\t\t$product = $edge['node'];\n\n\t\t\t$images = [];\n\n\t\t\tforeach ( $product['images']['edges'] as $image_edge ) {\n\t\t\t\t$image = $image_edge['node'];\n\t\t\t\t$images[] = [\n\t\t\t\t\t'url' => $image['url'],\n\t\t\t\t\t'alt' => $image['altText'] ?? '',\n\t\t\t\t];\n\t\t\t}\n\n\t\t\t// URL is null if the resource is currently not published to the Online Store sales channel,\n\t\t\t// or if the shop is password-protected.\n\t\t\t// In this case, we can fall back to a manually constructed product URL.\n\t\t\t$product_url = $product['onlineStoreUrl'] ?? \\sprintf( 'https://%1$s/products/%2$s/', $this->get_host(), $product['handle'] );\n\n\t\t\t$products[] = new Product(\n\t\t\t\t[\n\t\t\t\t\t'id' => $product['id'],\n\t\t\t\t\t'title' => $product['title'],\n\t\t\t\t\t'brand' => $product['vendor'],\n\t\t\t\t\t// TODO: Maybe eventually provide full price range.\n\t\t\t\t\t// See https://github.com/ampproject/amphtml/issues/37957.\n\t\t\t\t\t'price' => (float) $product['priceRange']['minVariantPrice']['amount'],\n\t\t\t\t\t'price_currency' => $product['priceRange']['minVariantPrice']['currencyCode'],\n\t\t\t\t\t'images' => $images,\n\t\t\t\t\t'details' => $product['description'],\n\t\t\t\t\t// URL is null if the resource is currently not published to the Online Store sales channel,\n\t\t\t\t\t// or if the shop is password-protected.\n\t\t\t\t\t'url' => $product_url,\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\n\t\treturn compact( 'products', 'has_next_page' );\n\t}\n\n\t/**\n\t * Returns the Shopify host name.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return string Shopify host.\n\t */\n\tprotected function get_host(): string {\n\t\t/**\n\t\t * Host name.\n\t\t *\n\t\t * @var string $host\n\t\t */\n\t\t$host = $this->settings->get_setting( Settings::SETTING_NAME_SHOPIFY_HOST );\n\t\treturn $host;\n\t}\n\n\t/**\n\t * Returns the Shopify access token.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return string Shopify access token.\n\t */\n\tprotected function get_access_token(): string {\n\t\t/**\n\t\t * Access token.\n\t\t *\n\t\t * @var string $access_token\n\t\t */\n\t\t$access_token = $this->settings->get_setting( Settings::SETTING_NAME_SHOPIFY_ACCESS_TOKEN );\n\t\treturn $access_token;\n\t}\n\n\t/**\n\t * Remotely executes a GraphQL query.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $query GraphQL query to execute.\n\t * @return string|WP_Error Query result or error object on failure.\n\t */\n\tprotected function execute_query( string $query ) {\n\t\t$host = $this->get_host();\n\t\t$access_token = $this->get_access_token();\n\n\t\tif ( empty( $host ) || empty( $access_token ) ) {\n\t\t\treturn new WP_Error( 'rest_missing_credentials', __( 'Missing API credentials.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\tif ( ! preg_match( '/^[\\w-]+\\.myshopify\\.com$/i', $host ) ) {\n\t\t\treturn new WP_Error( 'rest_invalid_hostname', __( 'Invalid Shopify hostname.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t$url = esc_url_raw(\n\t\t\t\\sprintf(\n\t\t\t\t'https://%1$s/api/%2$s/graphql.json',\n\t\t\t\t$host,\n\t\t\t\tself::API_VERSION\n\t\t\t)\n\t\t);\n\n\t\t$response = wp_remote_post(\n\t\t\t$url,\n\t\t\t[\n\t\t\t\t'headers' => [\n\t\t\t\t\t'Content-Type' => 'application/graphql',\n\t\t\t\t\t'X-Shopify-Storefront-Access-Token' => $access_token,\n\t\t\t\t],\n\t\t\t\t'body' => $query,\n\t\t\t]\n\t\t);\n\n\t\t$status_code = wp_remote_retrieve_response_code( $response );\n\n\t\tif ( WP_Http::UNAUTHORIZED === $status_code || WP_Http::NOT_FOUND === $status_code ) {\n\t\t\treturn new WP_Error( 'rest_invalid_credentials', __( 'Invalid API credentials.', 'web-stories' ), [ 'status' => $status_code ] );\n\t\t}\n\n\t\tif ( WP_Http::OK !== $status_code ) {\n\t\t\treturn new WP_Error( 'rest_unknown', __( 'Error fetching products', 'web-stories' ), [ 'status' => $status_code ] );\n\t\t}\n\n\t\treturn wp_remote_retrieve_body( $response );\n\t}\n\n\t/**\n\t * Returns the GraphQL query for getting all products from the store.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $search_term Search term to filter products by.\n\t * @param string $after The cursor to retrieve nodes after in the connection.\n\t * @param int $per_page Number of products to be fetched.\n\t * @param string $orderby Sort collection by product attribute.\n\t * @param string $order Order sort attribute ascending or descending.\n\t * @return string The assembled GraphQL query.\n\t */\n\tprotected function get_products_query( string $search_term, string $after, int $per_page, string $orderby, string $order ): string {\n\t\t$search_string = empty( $search_term ) ? '*' : '*' . $search_term . '*';\n\t\t$sortkey = 'date' === $orderby ? 'CREATED_AT' : strtoupper( $orderby );\n\t\t$reverse = 'asc' === $order ? 'false' : 'true';\n\t\t$after = empty( $after ) ? 'null' : \\sprintf( '\"%s\"', $after );\n\n\t\treturn <<get_cache_key( $search_term, $after, $per_page, $orderby, $order );\n\n\t\t$data = get_transient( $cache_key );\n\n\t\tif ( \\is_string( $data ) && ! empty( $data ) ) {\n\t\t\t/**\n\t\t\t * Cached response.\n\t\t\t *\n\t\t\t * @phpstan-var ShopifyGraphQLResponse $cached_result\n\t\t\t */\n\t\t\t$cached_result = (array) json_decode( $data, true );\n\t\t\treturn $cached_result;\n\t\t}\n\n\t\t$query = $this->get_products_query( $search_term, $after, $per_page, $orderby, $order );\n\t\t$body = $this->execute_query( $query );\n\t\tif ( is_wp_error( $body ) ) {\n\t\t\treturn $body;\n\t\t}\n\n\t\t/**\n\t\t * Shopify GraphQL API response.\n\t\t *\n\t\t * @var array $result\n\t\t * @phpstan-var ShopifyGraphQLResponse $result\n\t\t */\n\t\t$result = json_decode( $body, true );\n\t\tif ( isset( $result['errors'] ) ) {\n\t\t\t$wp_error = new WP_Error();\n\t\t\tforeach ( $result['errors'] as $error ) {\n\t\t\t\t$error_code = $error['extensions']['code'];\n\t\t\t\t// https://shopify.dev/api/storefront#status_and_error_codes.\n\t\t\t\tswitch ( $error_code ) {\n\t\t\t\t\tcase 'THROTTLED':\n\t\t\t\t\t\t$wp_error->add( 'rest_throttled', __( 'Shopify API rate limit exceeded. Try again later.', 'web-stories' ), [ 'status' => 429 ] );\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'ACCESS_DENIED':\n\t\t\t\t\t\t$wp_error->add( 'rest_invalid_credentials', __( 'Invalid Shopify API credentials provided.', 'web-stories' ), [ 'status' => 401 ] );\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'SHOP_INACTIVE':\n\t\t\t\t\t\t$wp_error->add( 'rest_inactive_shop', __( 'Inactive Shopify shop.', 'web-stories' ), [ 'status' => 403 ] );\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'INTERNAL_SERVER_ERROR':\n\t\t\t\t\t\t$wp_error->add( 'rest_internal_error', __( 'Shopify experienced an internal server error.', 'web-stories' ), [ 'status' => 500 ] );\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tdefault:\n\t\t\t\t\t\t$wp_error->add( 'rest_unknown', __( 'Error fetching products from Shopify.', 'web-stories' ), [ 'status' => 500 ] );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn $wp_error;\n\t\t}\n\n\t\t// TODO: Maybe cache errors too?\n\t\tset_transient( $cache_key, $body, $cache_ttl );\n\n\t\treturn $result;\n\t}\n\n\t/**\n\t * Get cache key for properties.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param string $search_term Search term to filter products by.\n\t * @param string $after The cursor to retrieve nodes after in the connection.\n\t * @param int $per_page Number of products to be fetched.\n\t * @param string $orderby Sort retrieved products by parameter.\n\t * @param string $order Whether to order products in ascending or descending order.\n\t * Accepts 'asc' (ascending) or 'desc' (descending).\n\t */\n\tprotected function get_cache_key( string $search_term, string $after, int $per_page, string $orderby, string $order ): string {\n\t\t$cache_args = (string) wp_json_encode( compact( 'search_term', 'after', 'per_page', 'orderby', 'order' ) );\n\n\t\treturn 'web_stories_shopify_data_' . md5( $cache_args );\n\t}\n\n\t/**\n\t * Remotely fetches all products from the store.\n\t *\n\t * @since 1.22.0\n\t *\n\t * @param string $search_term Search term to filter products by.\n\t * @param int $page Number of page for paginated requests.\n\t * @param int $per_page Number of products to be fetched.\n\t * @param string $orderby Sort retrieved products by parameter.\n\t * @param string $order Whether to order products in ascending or descending order.\n\t * Accepts 'asc' (ascending) or 'desc' (descending).\n\t * @return array|WP_Error Response data or error object on failure.\n\t *\n\t * @phpstan-return ShopifyGraphQLResponse|WP_Error\n\t */\n\tprotected function fetch_remote_products( string $search_term, int $page, int $per_page, string $orderby, string $order ) {\n\t\t$after = '';\n\t\tif ( $page > 1 ) {\n\t\t\t// Loop around all the pages, getting the endCursor of each page, until you get the last one.\n\t\t\tfor ( $i = 1; $i < $page; $i++ ) {\n\t\t\t\t$result = $this->get_remote_products( $search_term, $after, $per_page, $orderby, $order );\n\t\t\t\tif ( is_wp_error( $result ) ) {\n\t\t\t\t\treturn $result;\n\t\t\t\t}\n\n\t\t\t\t$has_next_page = $result['data']['products']['pageInfo']['hasNextPage'];\n\t\t\t\tif ( ! $has_next_page ) {\n\t\t\t\t\treturn new WP_Error( 'rest_no_page', __( 'Error fetching products from Shopify.', 'web-stories' ), [ 'status' => 404 ] );\n\t\t\t\t}\n\t\t\t\t$after = (string) $result['data']['products']['pageInfo']['endCursor'];\n\t\t\t}\n\t\t}\n\n\t\treturn $this->get_remote_products( $search_term, $after, $per_page, $orderby, $order );\n\t}\n}\n" }, { "path": "includes/Shopping/Shopping_Vendors.php", "content": "injector = $injector;\n\t}\n\n\t/**\n\t * Get an instance of product query class by vendor's name.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $name Name of vendor.\n\t */\n\tpublic function get_vendor_class( string $name ): ?Product_Query {\n\t\t$vendors = $this->get_vendors();\n\n\t\tif ( ! isset( $vendors[ $name ]['class'] ) || ! class_exists( $vendors[ $name ]['class'] ) ) {\n\t\t\treturn null;\n\t\t}\n\n\t\t$query = $this->injector->make( $vendors[ $name ]['class'] );\n\n\t\tif ( ! $query instanceof Product_Query ) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn $query;\n\t}\n\n\t/**\n\t * Get an array of registered vendors.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @return array Array of vendors.\n\t */\n\tpublic function get_vendors(): array {\n\t\t$vendors = [\n\t\t\t'none' => [\n\t\t\t\t'label' => __( 'None', 'web-stories' ),\n\t\t\t],\n\t\t\t'shopify' => [\n\t\t\t\t'label' => __( 'Shopify', 'web-stories' ),\n\t\t\t\t'class' => Shopify_Query::class,\n\t\t\t],\n\t\t\t'woocommerce' => [\n\t\t\t\t'label' => __( 'WooCommerce', 'web-stories' ),\n\t\t\t\t'class' => WooCommerce_Query::class,\n\t\t\t],\n\t\t];\n\n\t\t/**\n\t\t * Filter the array of vendors.\n\t\t *\n\t\t * @since 1.21.0\n\t\t *\n\t\t * @param array $vendors Associative array of vendor, including label and class.\n\t\t */\n\t\t$vendors = apply_filters( 'web_stories_shopping_vendors', $vendors );\n\n\t\treturn $vendors;\n\t}\n}\n" }, { "path": "includes/Shopping/WooCommerce_Query.php", "content": "woocommerce = $woocommerce;\n\t}\n\n\t/**\n\t * Get products by search term.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param string $search_term Search term.\n\t * @param int $page Number of page for paginated requests.\n\t * @param int $per_page Number of products to be fetched.\n\t * @param string $orderby Sort collection by product attribute.\n\t * @param string $order Order sort attribute ascending or descending.\n\t * @return array{products: array, has_next_page: bool}|WP_Error\n\t */\n\tpublic function get_search( string $search_term, int $page = 1, int $per_page = 100, string $orderby = 'date', string $order = 'desc' ) {\n\t\t$status = $this->woocommerce->get_plugin_status();\n\n\t\tif ( ! $status['installed'] ) {\n\t\t\treturn new WP_Error( 'rest_woocommerce_not_installed', __( 'WooCommerce is not installed.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\tif ( ! $status['active'] ) {\n\t\t\treturn new WP_Error( 'rest_woocommerce_not_activated', __( 'WooCommerce is not activated. Please activate it again try again.', 'web-stories' ), [ 'status' => 400 ] );\n\t\t}\n\n\t\t$args = [\n\t\t\t'status' => 'publish',\n\t\t\t'page' => $page,\n\t\t\t'limit' => $per_page,\n\t\t\t's' => $search_term,\n\t\t\t'orderby' => $orderby,\n\t\t\t'order' => $order,\n\t\t\t'paginate' => true,\n\t\t];\n\t\tif ( 'price' === $orderby ) {\n\t\t\t$wc_query = new WC_Query();\n\t\t\t$wc_args = $wc_query->get_catalog_ordering_args( $orderby, strtoupper( $order ) );\n\t\t\t$args = array_merge( $args, $wc_args );\n\t\t}\n\n\t\t/**\n\t\t * Product query object.\n\t\t *\n\t\t * @var \\stdClass $product_query\n\t\t */\n\t\t$product_query = wc_get_products( $args );\n\n\t\t$has_next_page = ( $product_query->max_num_pages > $page );\n\n\t\t/**\n\t\t * Products.\n\t\t *\n\t\t * @var WC_Product[] $wc_products\n\t\t */\n\t\t$wc_products = $product_query->products;\n\n\t\t$product_image_ids = [];\n\t\tforeach ( $wc_products as $product ) {\n\t\t\t$product_image_ids[] = $this->get_product_image_ids( $product );\n\t\t}\n\t\t$products_image_ids = array_merge( [], ...$product_image_ids );\n\n\t\t/**\n\t\t * Warm the object cache with post and meta information for all found\n\t\t * images to avoid making individual database calls.\n\t\t */\n\t\t_prime_post_caches( $products_image_ids, false, true );\n\n\t\t$products = [];\n\t\tforeach ( $wc_products as $product ) {\n\n\t\t\t$images = array_map(\n\t\t\t\t[ $this, 'get_product_image' ],\n\t\t\t\t$this->get_product_image_ids( $product )\n\t\t\t);\n\n\t\t\t$product_object = new Product(\n\t\t\t\t[\n\t\t\t\t\t// amp-story-shopping requires non-numeric IDs.\n\t\t\t\t\t'id' => 'wc-' . $product->get_id(),\n\t\t\t\t\t'title' => $product->get_title(),\n\t\t\t\t\t'brand' => '', // TODO: Figure out how to best provide that.\n\t\t\t\t\t'price' => (float) $product->get_price(),\n\t\t\t\t\t'price_currency' => get_woocommerce_currency(),\n\t\t\t\t\t'images' => $images,\n\t\t\t\t\t'aggregate_rating' => [\n\t\t\t\t\t\t'rating_value' => (float) $product->get_average_rating(),\n\t\t\t\t\t\t'review_count' => $product->get_rating_count(),\n\t\t\t\t\t\t'review_url' => $product->get_permalink(),\n\t\t\t\t\t],\n\t\t\t\t\t'details' => wp_strip_all_tags( $product->get_short_description() ),\n\t\t\t\t\t'url' => $product->get_permalink(),\n\t\t\t\t]\n\t\t\t);\n\n\t\t\t$products[] = $product_object;\n\t\t}\n\n\t\treturn compact( 'products', 'has_next_page' );\n\t}\n\n\t/**\n\t * Get all product image ids (feature image + gallery_images).\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param WC_Product $product Product.\n\t * @return int[]\n\t */\n\tprotected function get_product_image_ids( WC_Product $product ): array {\n\t\t$product_image_ids = $product->get_gallery_image_ids();\n\t\tarray_unshift( $product_image_ids, $product->get_image_id() );\n\t\t$product_image_ids = array_map( 'absint', $product_image_ids );\n\t\treturn array_unique( array_filter( $product_image_ids ) );\n\t}\n\n\t/**\n\t * Get product image, url and alt.\n\t *\n\t * @since 1.21.0\n\t *\n\t * @param int $image_id Attachment ID.\n\t * @return array{url?: string, alt?: string}\n\t */\n\tprotected function get_product_image( int $image_id ): array {\n\t\t$url = wp_get_attachment_image_url( $image_id, 'large' );\n\n\t\tif ( ! $url ) {\n\t\t\treturn [];\n\t\t}\n\n\t\t/**\n\t\t * Alt text.\n\t\t *\n\t\t * @var string $alt\n\t\t */\n\t\t$alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );\n\n\t\tif ( empty( $alt ) ) {\n\t\t\t$alt = '';\n\t\t}\n\n\t\treturn compact( 'url', 'alt' );\n\t}\n}\n" }, { "path": "includes/Shortcode/Embed_Shortcode.php", "content": "|string $attributes Shortcode attributes.\n\t * @param string|null $content Shortcode content.\n\t * @return string Rendered Shortcode\n\t */\n\tpublic function render_shortcode( $attributes, ?string $content ): string { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable\n\t\t// Initialize '$attrs' when not an array OR is an empty string.\n\t\tif ( empty( $attributes ) || ! \\is_array( $attributes ) ) {\n\t\t\t$attributes = [];\n\t\t}\n\n\t\t$attributes = shortcode_atts( $this->default_attrs(), $attributes, self::SHORTCODE_NAME );\n\n\t\t$attributes['class'] = 'wp-shortcode-web-stories-embed';\n\n\t\treturn $this->render( $attributes );\n\t}\n}\n" }, { "path": "includes/Shortcode/Stories_Shortcode.php", "content": "|string $attrs Shortcode attributes.\n\t * @return string Story markup.\n\t */\n\tpublic function render_stories( $attrs ): string {\n\t\t$default_pairs = [\n\t\t\t'view' => 'circles',\n\t\t\t'number_of_columns' => 1,\n\t\t\t'title' => 'false',\n\t\t\t'excerpt' => 'false',\n\t\t\t'author' => 'false',\n\t\t\t'date' => 'false',\n\t\t\t'archive_link' => 'false',\n\t\t\t'archive_link_label' => __( 'View all stories', 'web-stories' ),\n\t\t\t'image_alignment' => 'left',\n\t\t\t'class' => '',\n\t\t\t'circle_size' => 150,\n\t\t\t'number_of_stories' => 10,\n\t\t\t'order' => 'DESC',\n\t\t\t'orderby' => 'post_date',\n\t\t\t'sharp_corners' => 'false',\n\t\t];\n\n\t\t$taxonomies = get_object_taxonomies( Story_Post_Type::POST_TYPE_SLUG );\n\n\t\tforeach ( $taxonomies as $taxonomy ) {\n\t\t\t$default_pairs[ $taxonomy ] = '';\n\t\t}\n\n\t\t// Initialize '$attrs' when not an array OR is an empty string.\n\t\tif ( empty( $attrs ) || ! \\is_array( $attrs ) ) {\n\t\t\t$attrs = [];\n\t\t}\n\t\t\n\t\t$attributes = shortcode_atts(\n\t\t\t$default_pairs,\n\t\t\t$attrs,\n\t\t\tself::SHORTCODE_NAME\n\t\t);\n\n\t\t$stories = new Stories( $this->prepare_story_attrs( $attributes ), $this->prepare_story_args( $attributes ) );\n\n\t\treturn $stories->render();\n\t}\n\n\t/**\n\t * Prepare story attributes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $attributes Shortcode attributes.\n\t * @return array Attributes to pass to Story_Query class.\n\t *\n\t * @phpstan-return StoryAttributes\n\t */\n\tprivate function prepare_story_attrs( array $attributes ): array {\n\t\treturn [\n\t\t\t'view_type' => (string) $attributes['view'],\n\t\t\t'number_of_columns' => (int) $attributes['number_of_columns'],\n\t\t\t'show_title' => ( 'true' === $attributes['title'] ),\n\t\t\t'show_author' => ( 'true' === $attributes['author'] ),\n\t\t\t'show_date' => ( 'true' === $attributes['date'] ),\n\t\t\t'show_excerpt' => ( 'true' === $attributes['excerpt'] ),\n\t\t\t'show_archive_link' => ( 'true' === $attributes['archive_link'] ),\n\t\t\t'archive_link_label' => (string) $attributes['archive_link_label'],\n\t\t\t'image_alignment' => (string) $attributes['image_alignment'],\n\t\t\t'class' => (string) $attributes['class'],\n\t\t\t'circle_size' => (int) $attributes['circle_size'],\n\t\t\t'sharp_corners' => ( 'true' === $attributes['sharp_corners'] ),\n\t\t];\n\t}\n\n\t/**\n\t * Prepare story arguments.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $attributes Array of arguments for Story Query.\n\t * @return array Array of story arguments to pass to Story_Query.\n\t */\n\tprivate function prepare_story_args( array $attributes ): array {\n\t\t$args = [\n\t\t\t// Show 100 stories at most to avoid 500 errors.\n\t\t\t'posts_per_page' => min( (int) $attributes['number_of_stories'], 100 ), // phpcs:ignore WordPress.WP.PostsPerPage.posts_per_page_posts_per_page\n\t\t\t'order' => 'ASC' === $attributes['order'] ? 'ASC' : 'DESC',\n\t\t\t'orderby' => $attributes['orderby'],\n\t\t];\n\n\t\t$taxonomies = get_object_taxonomies( Story_Post_Type::POST_TYPE_SLUG );\n\t\t$should_add_tax_query = false;\n\n\t\tforeach ( $taxonomies as $taxonomy ) {\n\t\t\tif ( '' !== $attributes[ $taxonomy ] ) {\n\t\t\t\t$should_add_tax_query = true;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tif ( $should_add_tax_query ) {\n\t\t\t$tax_query = [\n\t\t\t\t'relation' => 'OR',\n\t\t\t];\n\n\t\t\tforeach ( $taxonomies as $taxonomy ) {\n\t\t\t\t$tax_query[] = [\n\t\t\t\t\t'taxonomy' => $taxonomy,\n\t\t\t\t\t'field' => 'name',\n\t\t\t\t\t'terms' => $attributes[ $taxonomy ] ? array_map( 'trim', explode( ',', (string) $attributes[ $taxonomy ] ) ) : [],\n\t\t\t\t];\n\t\t\t}\n\t\t\t// phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_tax_query\n\t\t\t$args['tax_query'] = $tax_query;\n\t\t}\n\t\treturn $args;\n\t}\n}\n" }, { "path": "includes/Stories_Script_Data.php", "content": "injector = $injector;\n\t}\n\n\t/**\n\t * Returns data array for use in inline script.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array>> Script data.\n\t */\n\tpublic function get_script_data(): array {\n\t\t$views = $this->get_layouts();\n\t\t$view_types = [];\n\n\t\tforeach ( $views as $view_key => $view_label ) {\n\t\t\t$view_types[] = [\n\t\t\t\t'label' => $view_label,\n\t\t\t\t'value' => $view_key,\n\t\t\t];\n\t\t}\n\n\t\t$field_states = $this->fields_states();\n\n\t\treturn [\n\t\t\t'views' => $view_types,\n\t\t\t'fields' => $field_states,\n\t\t];\n\t}\n\n\t/**\n\t * Wrapper function for fetching field states\n\t * based on the view types.\n\t *\n\t * Mainly uses FieldState and Fields classes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array>> Field states.\n\t */\n\tpublic function fields_states(): array {\n\t\t$field_states = [];\n\t\t/**\n\t\t * Factory instance.\n\t\t *\n\t\t * @var Factory\n\t\t */\n\t\t$factory = $this->injector->make( Factory::class );\n\n\t\t$views = $this->get_layouts();\n\n\t\t$fields = [\n\t\t\t'title',\n\t\t\t'author',\n\t\t\t'date',\n\t\t\t'image_alignment',\n\t\t\t'excerpt',\n\t\t\t'sharp_corners',\n\t\t\t'archive_link',\n\t\t\t'circle_size',\n\t\t\t'number_of_columns',\n\t\t];\n\n\t\tforeach ( array_keys( $views ) as $view_type ) {\n\t\t\t$field_state = $factory->get_field( (string) $view_type );\n\t\t\tforeach ( $fields as $field ) {\n\t\t\t\t$field_states[ $view_type ][ $field ] = [\n\t\t\t\t\t'show' => $field_state->$field()->show(),\n\t\t\t\t\t'label' => $field_state->$field()->label(),\n\t\t\t\t\t'hidden' => $field_state->$field()->hidden(),\n\t\t\t\t];\n\t\t\t}\n\t\t}\n\n\t\treturn $field_states;\n\t}\n\n\t/**\n\t * Get supported layouts for web stories.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @return array\n\t */\n\tpublic function get_layouts(): array {\n\t\treturn [\n\t\t\t'carousel' => __( 'Box Carousel', 'web-stories' ),\n\t\t\t'circles' => __( 'Circle Carousel', 'web-stories' ),\n\t\t\t'grid' => __( 'Grid', 'web-stories' ),\n\t\t\t'list' => __( 'List', 'web-stories' ),\n\t\t];\n\t}\n}\n" }, { "path": "includes/Story_Archive.php", "content": "settings = $settings;\n\t\t$this->story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Registers Filters and actions\n\t *\n\t * @since 1.13.0\n\t */\n\tpublic function register(): void {\n\t\tadd_filter( 'pre_handle_404', [ $this, 'redirect_post_type_archive_urls' ], 10, 2 );\n\n\t\tadd_action( 'add_option_' . $this->settings::SETTING_NAME_ARCHIVE, [ $this, 'update_archive_setting' ] );\n\t\tadd_action( 'update_option_' . $this->settings::SETTING_NAME_ARCHIVE, [ $this, 'update_archive_setting' ] );\n\t\tadd_action( 'add_option_' . $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID, [ $this, 'update_archive_setting' ] );\n\t\tadd_action( 'update_option_' . $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID, [ $this, 'update_archive_setting' ] );\n\n\t\tadd_filter( 'display_post_states', [ $this, 'filter_display_post_states' ], 10, 2 );\n\t\tadd_action( 'pre_get_posts', [ $this, 'pre_get_posts' ] );\n\t\tadd_action( 'wp_trash_post', [ $this, 'on_remove_archive_page' ] );\n\t\tadd_action( 'delete_post', [ $this, 'on_remove_archive_page' ] );\n\t}\n\n\t/**\n\t * Handles redirects to the post type archive.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param bool|mixed $bypass Pass-through of the pre_handle_404 filter value.\n\t * @param \\WP_Query $query The WP_Query object.\n\t * @return bool|mixed Whether to pass-through or not.\n\t */\n\tpublic function redirect_post_type_archive_urls( $bypass, WP_Query $query ) {\n\t\tglobal $wp_rewrite;\n\n\t\tif ( $bypass || ! \\is_string( $this->story_post_type->get_has_archive() ) || ( ! $wp_rewrite instanceof WP_Rewrite || ! $wp_rewrite->using_permalinks() ) ) {\n\t\t\treturn $bypass;\n\t\t}\n\n\t\t// 'pagename' is for most permalink types, name is for when the %postname% is used as a top-level field.\n\t\tif ( $this->story_post_type::REWRITE_SLUG === $query->get( 'pagename' ) || $this->story_post_type::REWRITE_SLUG === $query->get( 'name' ) ) {\n\t\t\t$redirect_url = get_post_type_archive_link( $this->story_post_type->get_slug() );\n\n\t\t\tif ( ! $redirect_url ) {\n\t\t\t\treturn $bypass;\n\t\t\t}\n\n\t\t\t// Only exit if there was actually a location to redirect to.\n\t\t\t// Allows filtering location in tests to verify behavior.\n\t\t\tif ( wp_safe_redirect( $redirect_url, 301 ) ) {\n\t\t\t\texit;\n\t\t\t}\n\t\t}\n\n\t\treturn $bypass;\n\t}\n\n\t/**\n\t * Clear rewrite rules on update on setting.\n\t *\n\t * @since 1.13.0\n\t */\n\tpublic function update_archive_setting(): void {\n\t\t$this->story_post_type->unregister_post_type();\n\t\t$this->story_post_type->register_post_type();\n\n\t\tif ( ! \\defined( '\\WPCOM_IS_VIP_ENV' ) || false === \\WPCOM_IS_VIP_ENV ) {\n\t\t\tflush_rewrite_rules( false );\n\t\t}\n\t}\n\n\t/**\n\t * Modifies the current query to set up the custom archive page.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param WP_Query $query Current query instance, passed by reference.\n\t */\n\tpublic function pre_get_posts( WP_Query $query ): void {\n\t\tif ( ! \\is_string( $this->story_post_type->get_has_archive() ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( $query->is_admin || ! $query->is_main_query() ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! $query->is_post_type_archive( $this->story_post_type->get_slug() ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$custom_archive_page_id = (int) $this->settings->get_setting( $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID );\n\n\t\t$query->set( 'page_id', $custom_archive_page_id );\n\t\t$query->set( 'post_type', 'page' );\n\t\t$query->is_post_type_archive = false;\n\t\t$query->is_archive = false;\n\t\t$query->is_singular = true;\n\t\t$query->is_page = true;\n\t}\n\n\t/**\n\t * Resets archive settings when the custom archive page is trashed.\n\t *\n\t * @since 1.14.0\n\t *\n\t * @param int $postid Post ID.\n\t */\n\tpublic function on_remove_archive_page( int $postid ): void {\n\t\tif ( 'page' !== get_post_type( $postid ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$custom_archive_page_id = (int) $this->settings->get_setting( $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID );\n\n\t\tif ( $custom_archive_page_id !== $postid ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ARCHIVE, 'default' );\n\t\t$this->settings->update_setting( $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID, 0 );\n\t}\n\n\t/**\n\t * Filters the default post display states used in the posts list table.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @param string[]|mixed $post_states An array of post display states.\n\t * @param WP_Post|null $post The current post object.\n\t * @return string[]|mixed Filtered post display states.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($post_states is array ? array : mixed)\n\t */\n\tpublic function filter_display_post_states( $post_states, ?WP_Post $post ) {\n\t\tif ( ! \\is_array( $post_states ) || ! $post ) {\n\t\t\treturn $post_states;\n\t\t}\n\n\t\tif ( ! \\is_string( $this->story_post_type->get_has_archive() ) ) {\n\t\t\treturn $post_states;\n\t\t}\n\n\t\t$custom_archive_page_id = (int) $this->settings->get_setting( $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID );\n\n\t\tif ( $post->ID === $custom_archive_page_id ) {\n\t\t\t$post_states['web_stories_archive_page'] = __( 'Web Stories Archive Page', 'web-stories' );\n\t\t}\n\n\t\treturn $post_states;\n\t}\n}\n" }, { "path": "includes/Story_Post_Type.php", "content": "settings = $settings;\n\t}\n\n\t/**\n\t * Registers the post type for stories.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @todo refactor\n\t */\n\tpublic function register(): void {\n\t\t$this->register_post_type();\n\t\t$this->register_meta();\n\n\t\tadd_filter( 'wp_insert_post_data', [ $this, 'change_default_title' ] );\n\t\tadd_filter( 'wp_insert_post_empty_content', [ $this, 'filter_empty_content' ], 10, 2 );\n\t\tadd_filter( 'bulk_post_updated_messages', [ $this, 'bulk_post_updated_messages' ], 10, 2 );\n\t\tadd_action( 'clean_post_cache', [ $this, 'clear_user_posts_count' ], 10, 2 );\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because settings needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'settings' ];\n\t}\n\n\t/**\n\t * Get post type slug.\n\t *\n\t * @since 1.14.0\n\t */\n\tpublic function get_slug(): string {\n\t\treturn self::POST_TYPE_SLUG;\n\t}\n\n\t/**\n\t * Register post meta.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function register_meta(): void {\n\t\t$active_publisher_logo_id = absint( $this->settings->get_setting( $this->settings::SETTING_NAME_ACTIVE_PUBLISHER_LOGO, 0 ) );\n\n\t\tregister_post_meta(\n\t\t\t$this->get_slug(),\n\t\t\tself::PUBLISHER_LOGO_META_KEY,\n\t\t\t[\n\t\t\t\t'sanitize_callback' => 'absint',\n\t\t\t\t'type' => 'integer',\n\t\t\t\t'description' => __( 'Publisher logo ID.', 'web-stories' ),\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'default' => $active_publisher_logo_id,\n\t\t\t\t'single' => true,\n\t\t\t\t'revisions_enabled' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_post_meta(\n\t\t\t$this->get_slug(),\n\t\t\tself::POSTER_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'object',\n\t\t\t\t'description' => __( 'Poster object', 'web-stories' ),\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'type' => 'object',\n\t\t\t\t\t\t'properties' => [\n\t\t\t\t\t\t\t'needsProxy' => [\n\t\t\t\t\t\t\t\t'description' => __( 'If poster needs to be proxied', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'boolean',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'height' => [\n\t\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t\t\t'description' => __( 'Poster height', 'web-stories' ),\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'url' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Poster URL.', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'string',\n\t\t\t\t\t\t\t\t'format' => 'uri',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t'width' => [\n\t\t\t\t\t\t\t\t'description' => __( 'Poster width.', 'web-stories' ),\n\t\t\t\t\t\t\t\t'type' => 'integer',\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t],\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'default' => [],\n\t\t\t\t'single' => true,\n\t\t\t\t'revisions_enabled' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Filters the bulk action updated messages.\n\t *\n\t * @since 1.1.0\n\t *\n\t * @param array[]|mixed $bulk_messages Arrays of messages, each keyed by the corresponding post type. Messages are\n\t * keyed with 'updated', 'locked', 'deleted', 'trashed', and 'untrashed'.\n\t * @param array $bulk_counts Array of item counts for each message, used to build internationalized\n\t * strings.\n\t * @return array|mixed Bulk counts.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($bulk_messages is array ? array : mixed)\n\t */\n\tpublic function bulk_post_updated_messages( $bulk_messages, array $bulk_counts ) {\n\t\tif ( ! \\is_array( $bulk_messages ) ) {\n\t\t\treturn $bulk_messages;\n\t\t}\n\t\t$bulk_messages[ $this->get_slug() ] = [\n\t\t\t/* translators: %s: Number of stories. */\n\t\t\t'updated' => _n( '%s story updated.', '%s stories updated.', $bulk_counts['updated'], 'web-stories' ),\n\t\t\t'locked' => 1 === $bulk_counts['locked'] ? __( 'Story not updated, somebody is editing it.', 'web-stories' ) :\n\t\t\t\t/* translators: %s: Number of stories. */\n\t\t\t\t_n( '%s story not updated, somebody is editing it.', '%s stories not updated, somebody is editing them.', $bulk_counts['locked'], 'web-stories' ),\n\t\t\t/* translators: %s: Number of stories. */\n\t\t\t'deleted' => _n( '%s story permanently deleted.', '%s stories permanently deleted.', $bulk_counts['deleted'], 'web-stories' ),\n\t\t\t/* translators: %s: Number of stories. */\n\t\t\t'trashed' => _n( '%s story moved to the Trash.', '%s stories moved to the Trash.', $bulk_counts['trashed'], 'web-stories' ),\n\t\t\t/* translators: %s: Number of stories. */\n\t\t\t'untrashed' => _n( '%s story restored from the Trash.', '%s stories restored from the Trash.', $bulk_counts['untrashed'], 'web-stories' ),\n\t\t];\n\n\t\treturn $bulk_messages;\n\t}\n\n\t/**\n\t * Reset default title to empty string for auto-drafts.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @param array|mixed $data Array of data to save.\n\t * @return array|mixed\n\t *\n\t * @template T\n\t *\n\t * @phpstan-return ($data is array ? array : mixed)\n\t */\n\tpublic function change_default_title( $data ) {\n\t\tif ( ! \\is_array( $data ) ) {\n\t\t\treturn $data;\n\t\t}\n\t\tif ( $this->get_slug() === $data['post_type'] && 'auto-draft' === $data['post_status'] ) {\n\t\t\t$data['post_title'] = '';\n\t\t}\n\n\t\treturn $data;\n\t}\n\n\t/**\n\t * Filters whether the post should be considered \"empty\".\n\t *\n\t * Takes into account post_content_filtered for stories.\n\t *\n\t * @since 1.25.1\n\t *\n\t * @param bool|mixed $maybe_empty Whether the post should be considered \"empty\".\n\t * @param array $data Array of post data.\n\t * @return bool Whether the post should be considered \"empty\".\n\t *\n\t * @phpstan-param array{post_type: string, post_content_filtered: string} $data\n\t */\n\tpublic function filter_empty_content( $maybe_empty, array $data ): bool {\n\t\tif ( $this->get_slug() === $data['post_type'] ) {\n\t\t\treturn $maybe_empty && ! $data['post_content_filtered'];\n\t\t}\n\n\t\treturn (bool) $maybe_empty;\n\t}\n\n\t/**\n\t * Invalid cache.\n\t *\n\t * @since 1.10.0\n\t *\n\t * @param int $post_id Post ID.\n\t * @param WP_Post $post Post object.\n\t */\n\tpublic function clear_user_posts_count( int $post_id, WP_Post $post ): void {\n\t\tif ( $this->get_slug() !== $post->post_type ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$cache_key = \"count_user_{$post->post_type}_{$post->post_author}\";\n\t\t$cache_group = 'user_posts_count';\n\t\twp_cache_delete( $cache_key, $cache_group );\n\t}\n\n\t/**\n\t * Determines whether the post type should have an archive or not.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return bool|string Whether the post type should have an archive, or archive slug.\n\t */\n\tpublic function get_has_archive() {\n\t\t$archive_page_option = $this->settings->get_setting( $this->settings::SETTING_NAME_ARCHIVE );\n\t\t$has_archive = true;\n\n\t\tif ( 'disabled' === $archive_page_option ) {\n\t\t\t$has_archive = false;\n\t\t} elseif ( 'custom' === $archive_page_option ) {\n\t\t\t$custom_archive_page_id = (int) $this->settings->get_setting( $this->settings::SETTING_NAME_ARCHIVE_PAGE_ID );\n\t\t\tif ( $custom_archive_page_id && 'publish' === get_post_status( $custom_archive_page_id ) ) {\n\t\t\t\t$uri = get_page_uri( $custom_archive_page_id );\n\t\t\t\tif ( $uri ) {\n\t\t\t\t\t$has_archive = urldecode( $uri );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn $has_archive;\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_post_meta_by_key( self::POSTER_META_KEY );\n\t\tdelete_post_meta_by_key( self::PUBLISHER_LOGO_META_KEY );\n\n\t\tdelete_option( self::STYLE_PRESETS_OPTION );\n\t\tparent::on_plugin_uninstall();\n\t}\n\n\t/**\n\t * Register post type.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array Post type args.\n\t *\n\t * @phpstan-return PostTypeArgs\n\t */\n\tprotected function get_args(): array {\n\t\treturn [\n\t\t\t'labels' => [\n\t\t\t\t'name' => _x( 'Stories', 'post type general name', 'web-stories' ),\n\t\t\t\t'singular_name' => _x( 'Story', 'post type singular name', 'web-stories' ),\n\t\t\t\t'add_new' => __( 'Add New Story', 'web-stories' ),\n\t\t\t\t'add_new_item' => __( 'Add New Story', 'web-stories' ),\n\t\t\t\t'edit_item' => __( 'Edit Story', 'web-stories' ),\n\t\t\t\t'new_item' => __( 'New Story', 'web-stories' ),\n\t\t\t\t'view_item' => __( 'View Story', 'web-stories' ),\n\t\t\t\t'view_items' => __( 'View Stories', 'web-stories' ),\n\t\t\t\t'search_items' => __( 'Search Stories', 'web-stories' ),\n\t\t\t\t'not_found' => __( 'No stories found.', 'web-stories' ),\n\t\t\t\t'not_found_in_trash' => __( 'No stories found in Trash.', 'web-stories' ),\n\t\t\t\t'all_items' => __( 'All Stories', 'web-stories' ),\n\t\t\t\t'archives' => __( 'Story Archives', 'web-stories' ),\n\t\t\t\t'attributes' => __( 'Story Attributes', 'web-stories' ),\n\t\t\t\t'insert_into_item' => __( 'Insert into story', 'web-stories' ),\n\t\t\t\t'uploaded_to_this_item' => __( 'Uploaded to this story', 'web-stories' ),\n\t\t\t\t'featured_image' => _x( 'Featured Image', 'story', 'web-stories' ),\n\t\t\t\t'set_featured_image' => _x( 'Set featured image', 'story', 'web-stories' ),\n\t\t\t\t'remove_featured_image' => _x( 'Remove featured image', 'story', 'web-stories' ),\n\t\t\t\t'use_featured_image' => _x( 'Use as featured image', 'story', 'web-stories' ),\n\t\t\t\t'filter_items_list' => __( 'Filter stories list', 'web-stories' ),\n\t\t\t\t'filter_by_date' => __( 'Filter by date', 'web-stories' ),\n\t\t\t\t'items_list_navigation' => __( 'Stories list navigation', 'web-stories' ),\n\t\t\t\t'items_list' => __( 'Stories list', 'web-stories' ),\n\t\t\t\t'item_published' => __( 'Story published.', 'web-stories' ),\n\t\t\t\t'item_published_privately' => __( 'Story published privately.', 'web-stories' ),\n\t\t\t\t'item_reverted_to_draft' => __( 'Story reverted to draft.', 'web-stories' ),\n\t\t\t\t'item_scheduled' => __( 'Story scheduled', 'web-stories' ),\n\t\t\t\t'item_updated' => __( 'Story updated.', 'web-stories' ),\n\t\t\t\t'menu_name' => _x( 'Stories', 'admin menu', 'web-stories' ),\n\t\t\t\t'name_admin_bar' => _x( 'Story', 'add new on admin bar', 'web-stories' ),\n\t\t\t\t'item_link' => _x( 'Story Link', 'navigation link block title', 'web-stories' ),\n\t\t\t\t'item_link_description' => _x( 'A link to a story.', 'navigation link block description', 'web-stories' ),\n\t\t\t\t'item_trashed' => __( 'Story trashed.', 'web-stories' ),\n\t\t\t],\n\t\t\t'menu_icon' => $this->get_post_type_icon(),\n\t\t\t'supports' => [\n\t\t\t\t'title', // Used for amp-story[title].\n\t\t\t\t'author',\n\t\t\t\t'editor',\n\t\t\t\t'excerpt',\n\t\t\t\t'thumbnail', // Used for poster images.\n\t\t\t\t'revisions', // Without this, the REST API will return 404 for an autosave request.\n\t\t\t\t'custom-fields',\n\t\t\t],\n\t\t\t'rewrite' => [\n\t\t\t\t'slug' => self::REWRITE_SLUG,\n\t\t\t\t'with_front' => false,\n\t\t\t\t'feeds' => true,\n\t\t\t],\n\t\t\t'public' => true,\n\t\t\t'has_archive' => $this->get_has_archive(),\n\t\t\t'exclude_from_search' => true,\n\t\t\t'show_ui' => true,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'rest_controller_class' => Stories_Controller::class,\n\t\t\t'autosave_rest_controller_class' => Stories_Autosaves_Controller::class,\n\t\t\t'capability_type' => [ 'web-story', 'web-stories' ],\n\t\t\t'map_meta_cap' => true,\n\t\t];\n\t}\n\n\t/**\n\t * Base64 encoded svg icon.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return string Base64-encoded SVG icon.\n\t */\n\tprotected function get_post_type_icon(): string {\n\t\treturn 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMCAyMGM1LjUyMyAwIDEwLTQuNDc3IDEwLTEwUzE1LjUyMyAwIDEwIDAgMCA0LjQ3NyAwIDEwczQuNDc3IDEwIDEwIDEwek01LjUgNmExIDEgMCAwMTEtMUgxMWExIDEgMCAwMTEgMXY4YTEgMSAwIDAxLTEgMUg2LjVhMSAxIDAgMDEtMS0xVjZ6TTEzIDZhMSAxIDAgMDExIDF2NmExIDEgMCAwMS0xIDFWNnptMi43NSAxLjc1QS43NS43NSAwIDAwMTUgN3Y2YS43NS43NSAwIDAwLjc1LS43NXYtNC41eiIgZmlsbD0iI2EwYTVhYSIvPjwvc3ZnPg==';\n\t}\n}\n" }, { "path": "includes/Story_Query.php", "content": " An array of story attributes.\n\t */\n\tprotected array $story_attributes = [];\n\n\t/**\n\t * Story query arguments.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @var array An array of query arguments.\n\t */\n\tprotected array $query_args = [];\n\n\t/**\n\t * Renderer object.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic Renderer $renderer;\n\n\t/**\n\t * Class constructor\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $story_attributes {\n\t * An array of story attributes.\n\t *\n\t * @type string $view_type Stories View type. Default circles.\n\t * @type int $number_of_columns Number of columns to show in grid view. Default 2.\n\t * @type bool $show_title Whether to show story title or not. Default false.\n\t * @type bool $show_author Whether to show story author or not. Default false.\n\t * @type bool $show_date Whether to show story date or not. Default false.\n\t * @type bool $show_archive_link Whether to show view all link or not. Default false.\n\t * @type string $archive_link_label The label for view all link. Default 'View all stories'.\n\t * @type string $image_alignment The list mode image alignment. Default 'left'.\n\t * @type string $class Additional CSS classes for the container. Default empty string.\n\t * }\n\t * @param array $query_args An array of query arguments for story. {@see WP_Query::parse_query()} for\n\t * all available arguments.\n\t *\n\t * @phpstan-param StoryAttributes $story_attributes\n\t */\n\tpublic function __construct( array $story_attributes = [], array $query_args = [] ) {\n\t\t$this->story_attributes = $story_attributes;\n\n\t\t$default_query_args = [\n\t\t\t'post_type' => Story_Post_Type::POST_TYPE_SLUG,\n\t\t\t'posts_per_page' => 10,\n\t\t\t'post_status' => 'publish',\n\t\t\t'suppress_filters' => false,\n\t\t\t'no_found_rows' => true,\n\t\t];\n\n\t\t$this->query_args = wp_parse_args( $query_args, $default_query_args );\n\t}\n\n\t/**\n\t * Retrieves an array of the latest stories, or Stories matching the given criteria.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return WP_Post[] List of Story posts.\n\t */\n\tpublic function get_stories(): array {\n\t\t$stories_query = new WP_Query();\n\n\t\t/**\n\t\t * List of story posts.\n\t\t *\n\t\t * @var WP_Post[] $result\n\t\t */\n\t\t$result = $stories_query->query( $this->query_args );\n\n\t\tupdate_post_thumbnail_cache( $stories_query );\n\n\t\treturn $result;\n\t}\n\n\t/**\n\t * Instantiates the renderer classes based on the view type.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return Renderer Renderer Instance.\n\t */\n\tpublic function get_renderer(): Renderer {\n\t\t$story_attributes = $this->get_story_attributes();\n\t\t$view_type = ! empty( $story_attributes['view_type'] ) ? $story_attributes['view_type'] : '';\n\n\t\tswitch ( $view_type ) {\n\t\t\tcase 'carousel':\n\t\t\tcase 'circles':\n\t\t\t\t$renderer = new Carousel_Renderer( $this );\n\t\t\t\tbreak;\n\t\t\tcase 'list':\n\t\t\tcase 'grid':\n\t\t\tdefault:\n\t\t\t\t$renderer = new Generic_Renderer( $this );\n\t\t}\n\n\t\t$renderer->init();\n\n\t\treturn $renderer;\n\t}\n\n\t/**\n\t * Renders the stories output.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function render(): string {\n\t\t$this->renderer = $this->get_renderer();\n\n\t\treturn $this->renderer->render();\n\t}\n\n\t/**\n\t * Gets an array of story attributes.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array An array of story attributes.\n\t *\n\t * @phpstan-return StoryAttributesWithDefaults\n\t */\n\tpublic function get_story_attributes(): array {\n\t\t$default_attributes = [\n\t\t\t'view_type' => 'circles',\n\t\t\t'number_of_columns' => 2,\n\t\t\t'show_title' => false,\n\t\t\t'show_author' => false,\n\t\t\t'show_date' => false,\n\t\t\t'show_excerpt' => false,\n\t\t\t'show_archive_link' => false,\n\t\t\t'sharp_corners' => false,\n\t\t\t'archive_link_label' => __( 'View all stories', 'web-stories' ),\n\t\t\t'image_alignment' => 'left',\n\t\t\t'class' => '',\n\t\t\t'circle_size' => 150,\n\t\t];\n\n\t\t/**\n\t\t * Attributes with defaults applied.\n\t\t *\n\t\t * @phpstan-var StoryAttributesWithDefaults $attributes\n\t\t */\n\t\t$attributes = wp_parse_args( $this->story_attributes, $default_attributes );\n\n\t\treturn $attributes;\n\t}\n}\n" }, { "path": "includes/Story_Revisions.php", "content": "story_post_type = $story_post_type;\n\t\t$this->assets = $assets;\n\t}\n\n\t/**\n\t * Initialize admin-related functionality.\n\t *\n\t * @since 1.25.0\n\t */\n\tpublic function register(): void {\n\t\t$post_type = $this->story_post_type->get_slug();\n\t\tadd_filter( \"wp_{$post_type}_revisions_to_keep\", [ $this, 'revisions_to_keep' ] );\n\t\tadd_filter( '_wp_post_revision_fields', [ $this, 'filter_revision_fields' ], 10, 2 );\n\t\tadd_filter( 'wp_get_revision_ui_diff', [ $this, 'filter_revision_ui_diff' ], 10, 3 );\n\n\t\tadd_action( 'admin_print_footer_scripts-revision.php', [ $this, 'enqueue_player_script' ] );\n\t}\n\n\t/**\n\t * Force WordPress to only keep 10 revisions for the web stories post type.\n\t *\n\t * @since 1.25.0\n\t *\n\t * @param int|bool|string $num Number of revisions to store.\n\t * @return int Number of revisions to store.\n\t */\n\tpublic function revisions_to_keep( $num ): int {\n\t\t$num = (int) $num;\n\t\treturn $num >= 0 && $num < 10 ? $num : 10;\n\t}\n\n\t/**\n\t * Filters the revision fields to ensure that JSON representation gets saved to Story revisions.\n\t *\n\t * @since 1.25.0\n\t *\n\t * @param array|mixed $fields Array of allowed revision fields.\n\t * @param array $story Story post array.\n\t * @return array|mixed Array of allowed fields.\n\t *\n\t * @template T\n\t *\n\t * @phpstan-param PostData $story\n\t * @phpstan-return ($fields is array ? array : mixed)\n\t */\n\tpublic function filter_revision_fields( $fields, array $story ) {\n\t\tif ( ! \\is_array( $fields ) ) {\n\t\t\treturn $fields;\n\t\t}\n\n\t\tif (\n\t\t\t$this->story_post_type->get_slug() === $story['post_type'] ||\n\t\t\t(\n\t\t\t\t'revision' === $story['post_type'] &&\n\t\t\t\t! empty( $story['post_parent'] ) &&\n\t\t\t\tget_post_type( $story['post_parent'] ) === $this->story_post_type->get_slug()\n\t\t\t)\n\t\t) {\n\t\t\t$fields['post_content_filtered'] = __( 'Story data', 'web-stories' );\n\t\t}\n\n\t\treturn $fields;\n\t}\n\n\t/**\n\t * Filters the fields displayed in the post revision diff UI.\n\t *\n\t * @since 1.25.0\n\t *\n\t * @param array[]|mixed $fields Array of revision UI fields. Each item is an array of id, name, and diff.\n\t * @param WP_Post|false $compare_from The revision post to compare from or false if dealing with the first revision.\n\t * @param WP_Post $compare_to The revision post to compare to.\n\t * @return array[]|mixed Filtered array of revision UI fields.\n\t *\n\t * @phpstan-return array|mixed\n\t */\n\tpublic function filter_revision_ui_diff( $fields, $compare_from, WP_Post $compare_to ) {\n\t\tif ( ! \\is_array( $fields ) ) {\n\t\t\treturn $fields;\n\t\t}\n\n\t\t$parent = get_post_parent( $compare_to );\n\n\t\tif (\n\t\t\t! $parent instanceof WP_Post ||\n\t\t\t$this->story_post_type->get_slug() !== $parent->post_type\n\t\t) {\n\t\t\treturn $fields;\n\t\t}\n\n\t\t$player_from = '';\n\n\t\tif ( $compare_from instanceof WP_Post ) {\n\t\t\t$player_from = $this->get_story_player( $compare_from );\n\t\t}\n\n\t\t$player_to = $this->get_story_player( $compare_to );\n\n\t\t$args = [\n\t\t\t'show_split_view' => true,\n\t\t\t'title_left' => __( 'Removed' ), // phpcs:ignore WordPress.WP.I18n.MissingArgDomain\n\t\t\t'title_right' => __( 'Added' ), // phpcs:ignore WordPress.WP.I18n.MissingArgDomain\n\t\t];\n\n\t\t/** This filter is documented in wp-admin/includes/revision.php */\n\t\t$args = apply_filters( 'revision_text_diff_options', $args, 'post_content', $compare_from, $compare_to );\n\n\t\t$fields_to_return = [];\n\n\t\t/**\n\t\t * Revision field.\n\t\t *\n\t\t * @phpstan-var RevisionField $field\n\t\t * @var array $field\n\t\t */\n\t\tforeach ( $fields as $field ) {\n\t\t\tif ( 'post_title' === $field['id'] ) {\n\t\t\t\t$fields_to_return[] = $field;\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t'post_content' === $field['id'] ||\n\t\t\t\t'post_content_filtered' === $field['id']\n\t\t\t) {\n\t\t\t\t$field['title'] = __( 'Content', 'web-stories' );\n\n\t\t\t\t$diff = '';\n\n\t\t\t\t// In split screen mode, show the title before/after side by side.\n\t\t\t\tif ( true === $args['show_split_view'] ) {\n\t\t\t\t\t$diff .= '';\n\t\t\t\t} else {\n\t\t\t\t\t$diff .= '';\n\t\t\t\t}\n\n\t\t\t\t$diff .= '';\n\t\t\t\t$diff .= '
' . $player_from . '' . $player_to . '' . $player_from . '
' . $player_to . '
';\n\n\t\t\t\t$field['diff'] = $diff;\n\n\t\t\t\t$fields_to_return[] = $field;\n\t\t\t\treturn $fields_to_return;\n\t\t\t}\n\t\t}\n\n\t\treturn $fields;\n\t}\n\n\t/**\n\t * Enqueues amp-story-player assets on the revisions screen.\n\t *\n\t * @since 1.25.0\n\t */\n\tpublic function enqueue_player_script(): void {\n\t\t$this->assets->enqueue_style( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\t\t$this->assets->enqueue_script( AMP_Story_Player_Assets::SCRIPT_HANDLE );\n\n\t\twp_add_inline_script(\n\t\t\tAMP_Story_Player_Assets::SCRIPT_HANDLE,\n\t\t\t<<<'JS'\n\t\t\t\tconst loadPlayers = () => document.querySelectorAll('amp-story-player').forEach(playerEl => (new AmpStoryPlayer(window, playerEl)).load());\n\t\t\t\tconst originalFrame = wp.revisions.view.Frame;\n\t\t\t\twp.revisions.view.Frame = originalFrame.extend({\n\t\t\t\t\trender: function() {\n\t\t\t\t\t\toriginalFrame.prototype.render.apply(this, arguments);\n\t\t\t\t\t\tloadPlayers();\n\t\t\t\t\t\tthis.listenTo( this.model, 'update:diff', () => loadPlayers() );\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\tJS\n\t\t);\n\t}\n\n\t/**\n\t * Returns the story player markup for a given post.\n\t *\n\t * @since 1.25.0\n\t *\n\t * @param WP_Post $post Post instance.\n\t * @return string Story player markup.\n\t */\n\tprotected function get_story_player( WP_Post $post ): string {\n\t\t$url = esc_url(\n\t\t\twp_nonce_url(\n\t\t\t\tadd_query_arg( 'rev_id', $post->ID, get_permalink( $post->post_parent ) ),\n\t\t\t\t'web_stories_revision_for_' . $post->post_parent\n\t\t\t)\n\t\t);\n\t\t$title = esc_html( get_the_title( $post ) );\n\t\treturn <<$title\n\t\t\t\tPlayer;\n\t}\n}\n" }, { "path": "includes/Taxonomy/Category_Taxonomy.php", "content": "taxonomy_post_type = $story_post_type->get_slug();\n\t\t$this->taxonomy_slug = 'web_story_category';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Category args.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array Taxonomy args.\n\t *\n\t * @phpstan-return TaxonomyArgs\n\t */\n\tprotected function taxonomy_args(): array {\n\t\t$labels = [\n\t\t\t'name' => _x( 'Categories', 'taxonomy general name', 'web-stories' ),\n\t\t\t'singular_name' => _x( 'Category', 'taxonomy singular name', 'web-stories' ),\n\t\t\t'search_items' => __( 'Search Categories', 'web-stories' ),\n\t\t\t'all_items' => __( 'All Categories', 'web-stories' ),\n\t\t\t'parent_item' => __( 'Parent Category', 'web-stories' ),\n\t\t\t'parent_item_colon' => __( 'Parent Category:', 'web-stories' ),\n\t\t\t'edit_item' => __( 'Edit Category', 'web-stories' ),\n\t\t\t'view_item' => __( 'View Category', 'web-stories' ),\n\t\t\t'update_item' => __( 'Update Category', 'web-stories' ),\n\t\t\t'add_new_item' => __( 'Add New Category', 'web-stories' ),\n\t\t\t'new_item_name' => __( 'New Category Name', 'web-stories' ),\n\t\t\t'not_found' => __( 'No categories found.', 'web-stories' ),\n\t\t\t'no_terms' => __( 'No categories', 'web-stories' ),\n\t\t\t'filter_by_item' => __( 'Filter by category', 'web-stories' ),\n\t\t\t'items_list_navigation' => __( 'Categories list navigation', 'web-stories' ),\n\t\t\t'items_list' => __( 'Categories list', 'web-stories' ),\n\t\t\t/* translators: Tab heading when selecting from the most used terms. */\n\t\t\t'most_used' => _x( 'Most Used', 'Categories', 'web-stories' ),\n\t\t\t'back_to_items' => __( '← Go to Categories', 'web-stories' ),\n\t\t\t'item_link' => _x( 'Category Link', 'navigation link block title', 'web-stories' ),\n\t\t\t'item_link_description' => _x( 'A link to a category.', 'navigation link block description', 'web-stories' ),\n\t\t];\n\t\treturn [\n\t\t\t'labels' => $labels,\n\t\t\t'hierarchical' => true,\n\t\t\t'public' => false,\n\t\t\t'publicly_queryable' => true,\n\t\t\t'show_ui' => true,\n\t\t\t'show_admin_column' => true,\n\t\t\t'rewrite' => true,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'capabilities' => self::DEFAULT_CAPABILITIES,\n\t\t\t'rest_controller_class' => Stories_Terms_Controller::class,\n\t\t];\n\t}\n}\n" }, { "path": "includes/Taxonomy/Tag_Taxonomy.php", "content": "taxonomy_post_type = $story_post_type->get_slug();\n\t\t$this->taxonomy_slug = 'web_story_tag';\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.13.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Taxonomy args.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array Taxonomy args.\n\t *\n\t * @phpstan-return TaxonomyArgs\n\t */\n\tprotected function taxonomy_args(): array {\n\t\t$labels = [\n\t\t\t'name' => _x( 'Tags', 'taxonomy general name', 'web-stories' ),\n\t\t\t'singular_name' => _x( 'Tag', 'taxonomy singular name', 'web-stories' ),\n\t\t\t'search_items' => __( 'Search Tags', 'web-stories' ),\n\t\t\t'popular_items' => __( 'Popular Tags', 'web-stories' ),\n\t\t\t'all_items' => __( 'All Tags', 'web-stories' ),\n\t\t\t'edit_item' => __( 'Edit Tag', 'web-stories' ),\n\t\t\t'view_item' => __( 'View Tag', 'web-stories' ),\n\t\t\t'update_item' => __( 'Update Tag', 'web-stories' ),\n\t\t\t'add_new_item' => __( 'Add New Tag', 'web-stories' ),\n\t\t\t'new_item_name' => __( 'New Tag Name', 'web-stories' ),\n\t\t\t'separate_items_with_commas' => __( 'Separate tags with commas', 'web-stories' ),\n\t\t\t'add_or_remove_items' => __( 'Add or remove tags', 'web-stories' ),\n\t\t\t'choose_from_most_used' => __( 'Choose from the most used tags', 'web-stories' ),\n\t\t\t'not_found' => __( 'No tags found.', 'web-stories' ),\n\t\t\t'no_terms' => __( 'No tags', 'web-stories' ),\n\t\t\t'items_list_navigation' => __( 'Tags list navigation', 'web-stories' ),\n\t\t\t'items_list' => __( 'Tags list', 'web-stories' ),\n\t\t\t/* translators: Tab heading when selecting from the most used terms. */\n\t\t\t'most_used' => _x( 'Most Used', 'Tags', 'web-stories' ),\n\t\t\t'back_to_items' => __( '← Go to Tags', 'web-stories' ),\n\t\t\t'item_link' => _x( 'Tag Link', 'navigation link block title', 'web-stories' ),\n\t\t\t'item_link_description' => _x( 'A link to a tag.', 'navigation link block description', 'web-stories' ),\n\t\t];\n\t\treturn [\n\t\t\t'labels' => $labels,\n\t\t\t'hierarchical' => false,\n\t\t\t'public' => false,\n\t\t\t'publicly_queryable' => true,\n\t\t\t'show_ui' => true,\n\t\t\t'show_admin_column' => true,\n\t\t\t'rewrite' => true,\n\t\t\t'show_in_rest' => true,\n\t\t\t'rest_namespace' => self::REST_NAMESPACE,\n\t\t\t'capabilities' => self::DEFAULT_CAPABILITIES,\n\t\t\t'rest_controller_class' => Stories_Terms_Controller::class,\n\t\t];\n\t}\n}\n" }, { "path": "includes/Taxonomy/Taxonomy_Base.php", "content": ",\n * _builtin?: bool,\n * }\n */\nabstract class Taxonomy_Base extends Service_Base implements PluginActivationAware, PluginDeactivationAware, SiteInitializationAware, PluginUninstallAware {\n\n\tpublic const DEFAULT_CAPABILITIES = [\n\t\t'manage_terms' => 'manage_terms_web-stories',\n\t\t'edit_terms' => 'edit_terms_web-stories',\n\t\t'delete_terms' => 'delete_terms_web-stories',\n\t\t'assign_terms' => 'assign_terms_web-stories',\n\t];\n\n\t/**\n\t * Default REST Namespace.\n\t */\n\tpublic const REST_NAMESPACE = 'web-stories/v1';\n\n\t/**\n\t * Taxonomy key, must not exceed 32 characters.\n\t */\n\tprotected string $taxonomy_slug;\n\n\t/**\n\t * Object type which the taxonomy should be associated.\n\t */\n\tprotected string $taxonomy_post_type;\n\n\t/**\n\t * Register taxonomy on register service.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function register(): void {\n\t\t$this->register_taxonomy();\n\t}\n\n\t/**\n\t * Register taxonomy.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function register_taxonomy(): void {\n\t\tregister_taxonomy( $this->taxonomy_slug, $this->taxonomy_post_type, $this->taxonomy_args() );\n\t}\n\n\t/**\n\t * Unregister taxonomy.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function unregister_taxonomy(): void {\n\t\tunregister_taxonomy( $this->taxonomy_slug );\n\t}\n\n\t/**\n\t * Act on site initialization.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\t$this->register_taxonomy();\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->register_taxonomy();\n\t}\n\n\t/**\n\t * Act on plugin deactivation.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param bool $network_wide Whether the deactivation was done network-wide.\n\t */\n\tpublic function on_plugin_deactivation( bool $network_wide ): void {\n\t\t$this->unregister_taxonomy();\n\t}\n\n\t/**\n\t * Get taxonomy slug.\n\t *\n\t * @since 1.12.0\n\t */\n\tpublic function get_taxonomy_slug(): string {\n\t\treturn $this->taxonomy_slug;\n\t}\n\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tclean_taxonomy_cache( $this->get_taxonomy_slug() );\n\n\t\t$term_query = new WP_Term_Query();\n\t\t$terms = $term_query->query(\n\t\t\t[\n\t\t\t\t'taxonomy' => $this->get_taxonomy_slug(),\n\t\t\t\t'hide_empty' => false,\n\t\t\t]\n\t\t);\n\n\t\tif ( empty( $terms ) || ! \\is_array( $terms ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tforeach ( $terms as $term ) {\n\t\t\tif ( $term instanceof WP_Term ) {\n\t\t\t\twp_delete_term( $term->term_id, $term->taxonomy );\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Taxonomy args.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return TaxonomyArgs Taxonomy args.\n\t */\n\tabstract protected function taxonomy_args(): array;\n}\n" }, { "path": "includes/Tracking.php", "content": "assets = $assets;\n\t\t$this->experiments = $experiments;\n\t\t$this->site_kit = $site_kit;\n\t\t$this->settings = $settings;\n\t\t$this->preferences = $preferences;\n\t\t$this->woocommerce = $woocommerce;\n\t\t$this->context = $context;\n\t}\n\n\t/**\n\t * Initializes tracking.\n\t *\n\t * Registers the script in WordPress.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function register(): void {\n\t\t// By not passing an actual script src we can print only the inline script.\n\t\t$this->assets->register_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\tfalse,\n\t\t\t[],\n\t\t\tWEBSTORIES_VERSION,\n\t\t\tfalse\n\t\t);\n\n\t\tadd_action( 'admin_enqueue_scripts', [ $this, 'enqueue_assets' ] );\n\t}\n\n\t/**\n\t * Get the action to use for registering the service.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @return string Registration action to use.\n\t */\n\tpublic static function get_registration_action(): string {\n\t\treturn 'init';\n\t}\n\n\t/**\n\t * Get the action priority to use for registering the service.\n\t *\n\t * @since 1.43.0\n\t *\n\t * @return int Registration action priority to use.\n\t */\n\tpublic static function get_registration_action_priority(): int {\n\t\treturn 1;\n\t}\n\n\t/**\n\t * Enqueues tracking scripts\n\t *\n\t * @since 1.43.0\n\t *\n\t * @param string $hook_suffix The current admin page.\n\t */\n\tpublic function enqueue_assets( string $hook_suffix ): void {\n\t\tif ( ! $this->context->is_story_editor() && 'web-story' !== $this->context->get_screen_post_type() ) {\n\t\t\treturn;\n\t\t}\n\n\t\twp_add_inline_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\t'window.webStoriesTrackingSettings = ' . wp_json_encode( $this->get_settings() ) . ';'\n\t\t);\n\t}\n\n\t/**\n\t * Returns tracking settings to pass to the inline script.\n\t *\n\t * @since 1.0.0\n\t *\n\t * @return array|bool|string> Tracking settings.\n\t */\n\tpublic function get_settings(): array {\n\t\treturn [\n\t\t\t'trackingAllowed' => $this->is_active(),\n\t\t\t'trackingId' => self::TRACKING_ID,\n\t\t\t'trackingIdGA4' => self::TRACKING_ID_GA4,\n\t\t\t// This doesn't seem to be fully working for web properties.\n\t\t\t// So we send it as both app_version and a user property.\n\t\t\t// See https://support.google.com/analytics/answer/9268042.\n\t\t\t'appVersion' => WEBSTORIES_VERSION,\n\t\t\t'userProperties' => $this->get_user_properties(),\n\t\t];\n\t}\n\n\t/**\n\t * Is tracking active for the current user?\n\t *\n\t * @return bool True if tracking enabled, and False if not.\n\t */\n\tpublic function is_active(): bool {\n\t\treturn (bool) $this->preferences->get_preference( get_current_user_id(), Preferences::OPTIN_META_KEY );\n\t}\n\n\t/**\n\t * Returns a list of user properties.\n\t *\n\t * @since 1.4.0\n\t *\n\t * @return array User properties.\n\t */\n\tprivate function get_user_properties(): array {\n\t\t/**\n\t\t * Current user.\n\t\t *\n\t\t * @var null|WP_User $current_user\n\t\t */\n\t\t$current_user = wp_get_current_user();\n\t\t$roles = $current_user instanceof WP_User ? array_values( $current_user->roles ) : [];\n\t\t$role = ! empty( $roles ) ? array_shift( $roles ) : '';\n\t\t$experiments = implode( ',', $this->experiments->get_enabled_experiments() );\n\n\t\t$active_plugins = [];\n\n\t\t$woocommerce_status = $this->woocommerce->get_plugin_status();\n\t\tif ( $woocommerce_status['active'] ) {\n\t\t\t$active_plugins[] = 'woocommerce';\n\t\t}\n\n\t\t$site_kit_status = $this->site_kit->get_plugin_status();\n\t\t$analytics = $site_kit_status['analyticsActive'] ? 'google-site-kit' : ! empty( $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_ID ) );\n\t\tif ( $site_kit_status['active'] ) {\n\t\t\t$active_plugins[] = 'google-site-kit';\n\t\t}\n\n\t\t/**\n\t\t * Ad network type.\n\t\t *\n\t\t * @var string $ad_network\n\t\t */\n\t\t$ad_network = $this->settings->get_setting( $this->settings::SETTING_NAME_AD_NETWORK, 'none' );\n\n\t\treturn [\n\t\t\t'siteLocale' => get_locale(),\n\t\t\t'userLocale' => get_user_locale(),\n\t\t\t'userRole' => $role,\n\t\t\t'enabledExperiments' => $experiments,\n\t\t\t'wpVersion' => (string) get_bloginfo( 'version' ),\n\t\t\t'phpVersion' => (string) PHP_VERSION,\n\t\t\t'isMultisite' => (int) is_multisite(),\n\t\t\t'serverEnvironment' => wp_get_environment_type(),\n\t\t\t'adNetwork' => $ad_network,\n\t\t\t'analytics' => $analytics,\n\t\t\t'activePlugins' => implode( ',', $active_plugins ),\n\t\t\t// This doesn't seem to be fully working for web properties.\n\t\t\t// So we send it as both app_version and a user property.\n\t\t\t// See https://support.google.com/analytics/answer/9268042.\n\t\t\t'pluginVersion' => WEBSTORIES_VERSION,\n\t\t];\n\t}\n}\n" }, { "path": "includes/User/Capabilities.php", "content": "story_post_type = $story_post_type;\n\t}\n\n\t/**\n\t * Get the list of service IDs required for this service to be registered.\n\t *\n\t * Needed because the story post type needs to be registered first.\n\t *\n\t * @since 1.29.0\n\t *\n\t * @return string[] List of required services.\n\t */\n\tpublic static function get_requirements(): array {\n\t\treturn [ 'story_post_type' ];\n\t}\n\n\t/**\n\t * Act on plugin activation.\n\t *\n\t * @since 1.6.0\n\t *\n\t * @param bool $network_wide Whether the activation was done network-wide.\n\t */\n\tpublic function on_plugin_activation( bool $network_wide ): void {\n\t\t$this->add_caps_to_roles();\n\t}\n\n\t/**\n\t * Act on site initialization.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_Site $site The site being initialized.\n\t */\n\tpublic function on_site_initialization( WP_Site $site ): void {\n\t\t$this->add_caps_to_roles();\n\t}\n\n\t/**\n\t * Act on site removal.\n\t *\n\t * @since 1.11.0\n\t *\n\t * @param WP_Site $site The site being removed.\n\t */\n\tpublic function on_site_removal( WP_Site $site ): void {\n\t\t$this->remove_caps_from_roles();\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\t$this->remove_caps_from_roles();\n\t}\n\n\t/**\n\t * Adds story capabilities to default user roles.\n\t *\n\t * This gives WordPress site owners more granular control over story management,\n\t * as they can customize this to their liking.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function add_caps_to_roles(): void {\n\t\t$all_capabilities_raw = $this->get_all_capabilities();\n\t\t$all_capabilities = array_values( $all_capabilities_raw );\n\n\t\t$administrator = get_role( 'administrator' );\n\t\t$editor = get_role( 'editor' );\n\t\t$author = get_role( 'author' );\n\t\t$contributor = get_role( 'contributor' );\n\n\t\tif ( $administrator instanceof WP_Role ) {\n\t\t\tforeach ( $all_capabilities as $cap ) {\n\t\t\t\t$administrator->add_cap( $cap );\n\t\t\t}\n\t\t}\n\n\t\tif ( $editor instanceof WP_Role ) {\n\t\t\tforeach ( $all_capabilities as $cap ) {\n\t\t\t\t$editor->add_cap( $cap );\n\t\t\t}\n\t\t}\n\n\t\tif ( $author instanceof WP_Role ) {\n\t\t\t$author->add_cap( $all_capabilities_raw['edit_posts'] );\n\t\t\t$author->add_cap( $all_capabilities_raw['edit_published_posts'] );\n\t\t\t$author->add_cap( $all_capabilities_raw['delete_posts'] );\n\t\t\t$author->add_cap( $all_capabilities_raw['delete_published_posts'] );\n\t\t\t$author->add_cap( $all_capabilities_raw['publish_posts'] );\n\t\t\t$author->add_cap( $all_capabilities_raw['assign_terms'] );\n\t\t}\n\n\t\tif ( $contributor instanceof WP_Role ) {\n\t\t\t$contributor->add_cap( $all_capabilities_raw['edit_posts'] );\n\t\t\t$contributor->add_cap( $all_capabilities_raw['delete_posts'] );\n\t\t\t$contributor->add_cap( $all_capabilities_raw['assign_terms'] );\n\t\t}\n\n\t\t/**\n\t\t * Fires when adding the custom capabilities to existing roles.\n\t\t *\n\t\t * Can be used to add the capabilities to other, custom roles.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $all_capabilities List of all post type capabilities, for reference.\n\t\t */\n\t\tdo_action( 'web_stories_add_capabilities', $all_capabilities );\n\t}\n\n\t/**\n\t * Removes story capabilities from all user roles.\n\t *\n\t * @since 1.0.0\n\t */\n\tpublic function remove_caps_from_roles(): void {\n\t\t$all_capabilities_raw = $this->get_all_capabilities();\n\t\t$all_capabilities = array_values( $all_capabilities_raw );\n\t\t$all_capabilities = array_filter(\n\t\t\t$all_capabilities,\n\t\t\tstatic fn( $value ) => 'read' !== $value\n\t\t);\n\t\t$all_roles = wp_roles();\n\t\t$roles = array_values( $all_roles->role_objects );\n\t\tforeach ( $roles as $role ) {\n\t\t\tforeach ( $all_capabilities as $cap ) {\n\t\t\t\t$role->remove_cap( $cap );\n\t\t\t}\n\t\t}\n\n\t\t/**\n\t\t * Fires when removing the custom capabilities from existing roles.\n\t\t *\n\t\t * Can be used to remove the capabilities from other, custom roles.\n\t\t *\n\t\t * @since 1.0.0\n\t\t *\n\t\t * @param array $all_capabilities List of all post type capabilities, for reference.\n\t\t */\n\t\tdo_action( 'web_stories_remove_capabilities', $all_capabilities );\n\t}\n\n\t/**\n\t * Get a array of capability for post types and taxonomies.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @return array Capabilities.\n\t */\n\tprotected function get_all_capabilities(): array {\n\t\treturn array_merge(\n\t\t\tTaxonomy_Base::DEFAULT_CAPABILITIES,\n\t\t\t$this->story_post_type->get_caps(),\n\t\t);\n\t}\n}\n" }, { "path": "includes/User/Preferences.php", "content": "register_meta();\n\t}\n\n\t/**\n\t * Register meta\n\t *\n\t * @since 1.15.0\n\t */\n\tpublic function register_meta(): void {\n\t\tregister_meta(\n\t\t\t'user',\n\t\t\tstatic::OPTIN_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'sanitize_callback' => 'rest_sanitize_boolean',\n\t\t\t\t'default' => false,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'auth_callback' => [ $this, 'can_edit_current_user' ],\n\t\t\t\t'single' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_meta(\n\t\t\t'user',\n\t\t\tstatic::MEDIA_OPTIMIZATION_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'boolean',\n\t\t\t\t'sanitize_callback' => 'rest_sanitize_boolean',\n\t\t\t\t'default' => true,\n\t\t\t\t'show_in_rest' => true,\n\t\t\t\t'auth_callback' => [ $this, 'can_edit_current_user' ],\n\t\t\t\t'single' => true,\n\t\t\t]\n\t\t);\n\n\t\tregister_meta(\n\t\t\t'user',\n\t\t\tstatic::ONBOARDING_META_KEY,\n\t\t\t[\n\t\t\t\t'type' => 'object',\n\t\t\t\t'default' => [],\n\t\t\t\t'show_in_rest' => [\n\t\t\t\t\t'schema' => [\n\t\t\t\t\t\t'properties' => [],\n\t\t\t\t\t\t'additionalProperties' => true,\n\t\t\t\t\t],\n\t\t\t\t],\n\t\t\t\t'auth_callback' => [ $this, 'can_edit_current_user' ],\n\t\t\t\t'single' => true,\n\t\t\t]\n\t\t);\n\t}\n\n\t/**\n\t * Auth callback.\n\t *\n\t * @since 1.4.0\n\t *\n\t * @param bool $allowed Unused. Whether the user can add the object meta.\n\t * @param string $meta_key Unused. The meta key.\n\t * @param int $user_id ID of the user being edited.\n\t * @param int $current_user_id The currently editing user's ID.\n\t */\n\tpublic function can_edit_current_user( bool $allowed, string $meta_key, int $user_id, int $current_user_id ): bool {\n\t\treturn user_can( $current_user_id, 'edit_user', $user_id );\n\t}\n\n\t/**\n\t * Returns the specific preference for a givern user.\n\t *\n\t * @since 1.12.0\n\t *\n\t * @param int $user_id User ID.\n\t * @param string $key Preference key.\n\t * @return mixed User preference value.\n\t */\n\tpublic function get_preference( int $user_id, string $key ) {\n\t\treturn get_user_meta( $user_id, $key, true );\n\t}\n\n\t/**\n\t * Act on plugin uninstall.\n\t *\n\t * @since 1.26.0\n\t */\n\tpublic function on_plugin_uninstall(): void {\n\t\tdelete_metadata( 'user', 0, self::OPTIN_META_KEY, '', true );\n\t\tdelete_metadata( 'user', 0, self::ONBOARDING_META_KEY, '', true );\n\t\tdelete_metadata( 'user', 0, self::MEDIA_OPTIMIZATION_META_KEY, '', true );\n\t}\n}\n" }, { "path": "includes/Widgets/Stories.php", "content": "\n * }\n */\nclass Stories extends WP_Widget {\n\n\tpublic const SCRIPT_HANDLE = 'web-stories-widget';\n\n\t/**\n\t * Widget args.\n\t *\n\t * @var array\n\t */\n\tpublic array $args = [\n\t\t'before_title' => '

',\n\t\t'after_title' => '

',\n\t\t'before_widget' => '
',\n\t\t'after_widget' => '
',\n\t];\n\n\t/**\n\t * Assets instance.\n\t *\n\t * @var Assets Assets instance.\n\t */\n\tprotected Assets $assets;\n\n\t/**\n\t * Story_Post_Type instance.\n\t *\n\t * @var Story_Post_Type Story_Post_Type instance.\n\t */\n\tprivate Story_Post_Type $story_post_type;\n\n\t/**\n\t * Stories_Script_Data instance.\n\t *\n\t * @var Stories_Script_Data Stories_Script_Data instance.\n\t */\n\tprotected Stories_Script_Data $stories_script_data;\n\n\t/**\n\t * Stories constructor.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param Assets $assets Assets instance.\n\t * @param Story_Post_Type $story_post_type Story_Post_Type instance.\n\t * @param Stories_Script_Data $stories_script_data Stories_Script_Data instance.\n\t * @return void\n\t */\n\tpublic function __construct( Assets $assets, Story_Post_Type $story_post_type, Stories_Script_Data $stories_script_data ) {\n\t\t$this->assets = $assets;\n\t\t$this->story_post_type = $story_post_type;\n\t\t$this->stories_script_data = $stories_script_data;\n\t\t$id_base = 'web_stories_widget';\n\t\t$name = __( 'Web Stories', 'web-stories' );\n\t\t$widget_options = [\n\t\t\t'description' => __( 'Display Web Stories in sidebar section.', 'web-stories' ),\n\t\t\t'classname' => 'web-stories-widget',\n\t\t\t'show_instance_in_rest' => true,\n\t\t];\n\n\t\tparent::__construct( $id_base, $name, $widget_options );\n\t}\n\n\t/**\n\t * Output widget.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $args Widget args.\n\t * @param array $instance Widget instance.\n\t */\n\tpublic function widget( $args, $instance ): void {\n\t\t// phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\techo $args['before_widget'];\n\n\t\t$instance = wp_parse_args( $instance, $this->default_values() );\n\n\t\t$title = $instance['title'];\n\n\t\t/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */\n\t\t$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );\n\n\t\tif ( ! empty( $title ) ) {\n\t\t\techo $args['before_title'] . $title . $args['after_title'];\n\t\t}\n\n\t\t$instance['number_of_columns'] = (int) $instance['number_of_columns'];\n\t\t$instance['number_of_stories'] = (int) $instance['number_of_stories'];\n\t\t$instance['circle_size'] = (int) $instance['circle_size'];\n\n\t\t$story_attrs = [\n\t\t\t'view_type' => $instance['view_type'],\n\t\t\t'show_title' => (bool) $instance['show_title'],\n\t\t\t'show_excerpt' => (bool) $instance['show_excerpt'],\n\t\t\t'show_author' => (bool) $instance['show_author'],\n\t\t\t'show_date' => (bool) $instance['show_date'],\n\t\t\t'show_archive_link' => (bool) $instance['show_archive_link'],\n\t\t\t'archive_link_label' => (string) $instance['archive_link_label'],\n\t\t\t'circle_size' => min( absint( $instance['circle_size'] ), 150 ),\n\t\t\t'sharp_corners' => (bool) $instance['sharp_corners'],\n\t\t\t'image_alignment' => (string) $instance['image_alignment'],\n\t\t\t'number_of_columns' => min( absint( $instance['number_of_columns'] ), 4 ),\n\t\t\t'class' => 'web-stories-list--widget',\n\t\t];\n\n\t\t$story_args = [\n\t\t\t'posts_per_page' => min( absint( $instance['number_of_stories'] ), 20 ), // phpcs:ignore WordPress.WP.PostsPerPage.posts_per_page_posts_per_page\n\t\t\t'orderby' => $instance['orderby'],\n\t\t\t'order' => $instance['order'],\n\t\t];\n\n\t\t$story_query = new Story_Query( $story_attrs, $story_args );\n\t\techo $story_query->render();\n\n\t\techo $args['after_widget'];\n\n\t\t// phpcs:enable WordPress.Security.EscapeOutput.OutputNotEscaped\n\t}\n\n\t/**\n\t * Display widget form.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t * @SuppressWarnings(\"PHPMD.ExcessiveMethodLength\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $instance Widget instance.\n\t */\n\tpublic function form( $instance ): string {\n\t\t$this->enqueue_scripts();\n\n\t\t$instance = wp_parse_args( $instance, $this->default_values() );\n\n\t\t$title = (string) $instance['title'];\n\t\t$view_types = $this->stories_script_data->get_layouts();\n\t\t$current_view_type = (string) $instance['view_type'];\n\t\t$show_title = ! empty( $instance['show_title'] );\n\t\t$show_author = ! empty( $instance['show_author'] );\n\t\t$show_date = ! empty( $instance['show_date'] );\n\t\t$show_excerpt = ! empty( $instance['show_excerpt'] );\n\t\t$show_archive_link = ! empty( $instance['show_archive_link'] );\n\t\t$archive_link_label = (string) $instance['archive_link_label'];\n\t\t$circle_size = (int) $instance['circle_size'];\n\t\t$sharp_corners = (int) $instance['sharp_corners'];\n\t\t$image_alignment = (string) $instance['image_alignment'];\n\t\t$number_of_columns = (int) $instance['number_of_columns'];\n\t\t$number_of_stories = (int) $instance['number_of_stories'];\n\t\t$orderby = (string) $instance['orderby'];\n\t\t$order = (string) $instance['order'];\n\n\t\t$has_archive = $this->story_post_type->get_has_archive();\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'title',\n\t\t\t\t'name' => 'title',\n\t\t\t\t'label' => __( 'Widget Title', 'web-stories' ),\n\t\t\t\t'type' => 'text',\n\t\t\t\t'value' => $title,\n\t\t\t\t'label_before' => true,\n\t\t\t]\n\t\t);\n\n\t\t$this->dropdown(\n\t\t\t[\n\t\t\t\t'options' => $view_types,\n\t\t\t\t'selected' => $current_view_type,\n\t\t\t\t'name' => 'view_type',\n\t\t\t\t'id' => 'view_type',\n\t\t\t\t'label' => __( 'Select Layout', 'web-stories' ),\n\t\t\t\t'classname' => 'widefat view_type stories-widget-field',\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'number_of_stories',\n\t\t\t\t'name' => 'number_of_stories',\n\t\t\t\t'label' => __( 'Number of Stories', 'web-stories' ),\n\t\t\t\t'type' => 'number',\n\t\t\t\t'classname' => 'widefat number_of_stories stories-widget-field',\n\t\t\t\t'wrapper_class' => 'number_of_stories_wrapper',\n\t\t\t\t'value' => $number_of_stories,\n\t\t\t\t'label_before' => true,\n\t\t\t\t'attributes' => [\n\t\t\t\t\t'min' => 1,\n\t\t\t\t\t'max' => 20,\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\t$this->dropdown(\n\t\t\t[\n\t\t\t\t'options' => [\n\t\t\t\t\t'post_title' => __( 'Title', 'web-stories' ),\n\t\t\t\t\t'post_date' => __( 'Date', 'web-stories' ),\n\t\t\t\t],\n\t\t\t\t'selected' => $orderby,\n\t\t\t\t'name' => 'orderby',\n\t\t\t\t'id' => 'orderby',\n\t\t\t\t'label' => __( 'Order By', 'web-stories' ),\n\t\t\t\t'classname' => 'widefat orderby stories-widget-field',\n\t\t\t]\n\t\t);\n\n\t\t$this->dropdown(\n\t\t\t[\n\t\t\t\t'options' => [\n\t\t\t\t\t'ASC' => __( 'Ascending', 'web-stories' ),\n\t\t\t\t\t'DESC' => __( 'Descending', 'web-stories' ),\n\t\t\t\t],\n\t\t\t\t'selected' => $order,\n\t\t\t\t'name' => 'order',\n\t\t\t\t'id' => 'order',\n\t\t\t\t'label' => __( 'Order', 'web-stories' ),\n\t\t\t\t'classname' => 'widefat order stories-widget-field',\n\t\t\t]\n\t\t);\n\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'circle-size',\n\t\t\t\t'name' => 'circle_size',\n\t\t\t\t'label' => __( 'Circle Size', 'web-stories' ),\n\t\t\t\t'type' => 'number',\n\t\t\t\t'classname' => 'widefat circle_size stories-widget-field',\n\t\t\t\t'wrapper_class' => 'circle_size_wrapper',\n\t\t\t\t'value' => $circle_size,\n\t\t\t\t'label_before' => true,\n\t\t\t\t'attributes' => [\n\t\t\t\t\t'min' => 80,\n\t\t\t\t\t'max' => 200,\n\t\t\t\t\t'step' => 5,\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'number_of_columns',\n\t\t\t\t'name' => 'number_of_columns',\n\t\t\t\t'label' => __( 'Number of Columns', 'web-stories' ),\n\t\t\t\t'type' => 'number',\n\t\t\t\t'classname' => 'widefat number_of_columns stories-widget-field',\n\t\t\t\t'wrapper_class' => 'number_of_columns_wrapper',\n\t\t\t\t'value' => $number_of_columns,\n\t\t\t\t'label_before' => true,\n\t\t\t\t'attributes' => [\n\t\t\t\t\t'min' => 1,\n\t\t\t\t\t'max' => 4,\n\t\t\t\t],\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'show_title',\n\t\t\t\t'name' => 'show_title',\n\t\t\t\t'label' => __( 'Display Title', 'web-stories' ),\n\t\t\t\t'type' => 'checkbox',\n\t\t\t\t'classname' => 'widefat title stories-widget-field',\n\t\t\t\t'wrapper_class' => 'title_wrapper',\n\t\t\t\t'value' => $show_title,\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'show_excerpt',\n\t\t\t\t'name' => 'show_excerpt',\n\t\t\t\t'label' => __( 'Display Excerpt', 'web-stories' ),\n\t\t\t\t'type' => 'checkbox',\n\t\t\t\t'classname' => 'widefat excerpt stories-widget-field',\n\t\t\t\t'wrapper_class' => 'excerpt_wrapper',\n\t\t\t\t'value' => $show_excerpt,\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'show_author',\n\t\t\t\t'name' => 'show_author',\n\t\t\t\t'label' => __( 'Display Author', 'web-stories' ),\n\t\t\t\t'type' => 'checkbox',\n\t\t\t\t'classname' => 'widefat author stories-widget-field',\n\t\t\t\t'wrapper_class' => 'author_wrapper',\n\t\t\t\t'value' => $show_author,\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'show_date',\n\t\t\t\t'name' => 'show_date',\n\t\t\t\t'label' => __( 'Display Date', 'web-stories' ),\n\t\t\t\t'type' => 'checkbox',\n\t\t\t\t'classname' => 'widefat date stories-widget-field',\n\t\t\t\t'wrapper_class' => 'date_wrapper',\n\t\t\t\t'value' => $show_date,\n\t\t\t]\n\t\t);\n\n\t\t$this->radio(\n\t\t\t[\n\t\t\t\t'options' => [\n\t\t\t\t\t'left' => __( 'Left', 'web-stories' ),\n\t\t\t\t\t'right' => __( 'Right', 'web-stories' ),\n\t\t\t\t],\n\t\t\t\t'selected' => $image_alignment,\n\t\t\t\t'id' => 'image_alignment',\n\t\t\t\t'name' => 'image_alignment',\n\t\t\t\t'label' => __( 'Image Alignment', 'web-stories' ),\n\t\t\t\t'classname' => 'widefat image_alignment stories-widget-field',\n\t\t\t\t'wrapper_class' => 'image_alignment_wrapper',\n\t\t\t]\n\t\t);\n\n\t\t$this->input(\n\t\t\t[\n\t\t\t\t'id' => 'sharp_corners',\n\t\t\t\t'name' => 'sharp_corners',\n\t\t\t\t'label' => __( 'Use Sharp Corners', 'web-stories' ),\n\t\t\t\t'type' => 'checkbox',\n\t\t\t\t'classname' => 'widefat sharp_corners stories-widget-field',\n\t\t\t\t'wrapper_class' => 'sharp_corners_wrapper',\n\t\t\t\t'value' => $sharp_corners,\n\t\t\t]\n\t\t);\n\n\t\tif ( $has_archive ) {\n\t\t\t$this->input(\n\t\t\t\t[\n\t\t\t\t\t'id' => 'show_archive_link',\n\t\t\t\t\t'name' => 'show_archive_link',\n\t\t\t\t\t'label' => __( 'Display Archive Link', 'web-stories' ),\n\t\t\t\t\t'type' => 'checkbox',\n\t\t\t\t\t'classname' => 'widefat show_archive_link stories-widget-field',\n\t\t\t\t\t'wrapper_class' => 'archive_link_wrapper',\n\t\t\t\t\t'value' => $show_archive_link,\n\t\t\t\t]\n\t\t\t);\n\n\t\t\t$this->input(\n\t\t\t\t[\n\t\t\t\t\t'id' => 'archive_link_label',\n\t\t\t\t\t'name' => 'archive_link_label',\n\t\t\t\t\t'label' => __( 'Archive Link Label', 'web-stories' ),\n\t\t\t\t\t'type' => 'text',\n\t\t\t\t\t'classname' => 'widefat archive_link_label stories-widget-field',\n\t\t\t\t\t'wrapper_class' => 'archive_link_label_wrapper',\n\t\t\t\t\t'value' => $archive_link_label,\n\t\t\t\t\t'label_before' => true,\n\t\t\t\t]\n\t\t\t);\n\t\t}\n\n\t\treturn '';\n\t}\n\n\t/**\n\t * Update widget settings.\n\t *\n\t * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array $new_instance New instance.\n\t * @param array $old_instance Old instance.\n\t * @return array\n\t */\n\tpublic function update( $new_instance, $old_instance ): array {\n\t\t$instance = [];\n\n\t\t$new_instance = wp_parse_args( $new_instance, $this->default_values() );\n\n\t\t$instance['title'] = wp_strip_all_tags( $new_instance['title'] );\n\t\t$instance['view_type'] = $new_instance['view_type'];\n\t\t$instance['show_title'] = $new_instance['show_title'];\n\t\t$instance['show_excerpt'] = $new_instance['show_excerpt'];\n\t\t$instance['show_author'] = $new_instance['show_author'];\n\t\t$instance['show_date'] = $new_instance['show_date'];\n\t\t$instance['show_archive_link'] = $new_instance['show_archive_link'];\n\t\t$instance['image_alignment'] = $new_instance['image_alignment'];\n\t\t$instance['number_of_columns'] = min( absint( $new_instance['number_of_columns'] ), 4 );\n\t\t$instance['number_of_stories'] = min( absint( $new_instance['number_of_stories'] ), 20 );\n\t\t$instance['circle_size'] = min( absint( $new_instance['circle_size'] ), 150 );\n\t\t$instance['archive_link_label'] = $new_instance['archive_link_label'];\n\t\t$instance['sharp_corners'] = $new_instance['sharp_corners'];\n\t\t$instance['orderby'] = $new_instance['orderby'];\n\t\t$instance['order'] = $new_instance['order'];\n\n\t\treturn $instance;\n\t}\n\n\t/**\n\t * Enqueue widget script.\n\t *\n\t * @since 1.5.0\n\t */\n\tpublic function enqueue_scripts(): void {\n\t\tif ( wp_script_is( self::SCRIPT_HANDLE ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t$this->assets->enqueue_style_asset( self::SCRIPT_HANDLE );\n\t\t$this->assets->enqueue_script_asset( self::SCRIPT_HANDLE, [ 'jquery' ] );\n\n\t\twp_localize_script(\n\t\t\tself::SCRIPT_HANDLE,\n\t\t\t'webStoriesData',\n\t\t\t$this->stories_script_data->get_script_data()\n\t\t);\n\t}\n\n\t/**\n\t * Default values of an instance.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @return array Default values.\n\t */\n\tprivate function default_values(): array {\n\t\treturn [\n\t\t\t'title' => esc_html__( 'Web Stories', 'web-stories' ),\n\t\t\t'view_type' => 'circles',\n\t\t\t'show_title' => '',\n\t\t\t'show_excerpt' => '',\n\t\t\t'show_author' => '',\n\t\t\t'show_date' => '',\n\t\t\t'show_archive_link' => '',\n\t\t\t'image_alignment' => 'left',\n\t\t\t'number_of_columns' => 1,\n\t\t\t'number_of_stories' => 5,\n\t\t\t'circle_size' => 100,\n\t\t\t'archive_link_label' => __( 'View all stories', 'web-stories' ),\n\t\t\t'sharp_corners' => '',\n\t\t\t'orderby' => 'post_date',\n\t\t\t'order' => 'DESC',\n\t\t];\n\t}\n\n\t/**\n\t * Display dropdown.\n\t *\n\t * @since 1.5.0\n\t *\n\t * @param array> $args Field args.\n\t */\n\tprivate function dropdown( array $args ): void {\n\t\t$args = wp_parse_args(\n\t\t\t$args,\n\t\t\t[\n\t\t\t\t'options' => [],\n\t\t\t\t'selected' => '',\n\t\t\t\t'id' => wp_generate_uuid4(),\n\t\t\t\t'name' => wp_generate_uuid4(),\n\t\t\t\t'label' => '',\n\t\t\t\t'classname' => 'widefat',\n\t\t\t\t'wrapper_class' => 'web-stories-field-wrapper',\n\t\t\t]\n\t\t);\n\t\t?>\n\t

\">\n\t\tlabel( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>\n\n\t\t\"\n\t\t\tid=\"get_field_id( $args['id'] ) ); ?>\"\n\t\t\tname=\"get_field_name( $args['name'] ) ); ?>\"\n\t\t>\n\t\t\t $type ) {\n\t\t\t\t?>\n\t\t\t\t\n\t\t\t\t\n\t\t\n\t\t

\n\t\t $args Field args.\n\t */\n\tprivate function radio( array $args ): void {\n\t\t$args = wp_parse_args(\n\t\t\t$args,\n\t\t\t[\n\t\t\t\t'options' => [],\n\t\t\t\t'selected' => '',\n\t\t\t\t'id' => wp_generate_uuid4(),\n\t\t\t\t'name' => wp_generate_uuid4(),\n\t\t\t\t'label' => '',\n\t\t\t\t'classname' => 'widefat',\n\t\t\t\t'wrapper_class' => 'web-stories-field-wrapper',\n\t\t\t]\n\t\t);\n\t\t?>\n\t\t
\">\n\t\t\tlabel( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>\n\t\t\t

\n\t\t\t\t $type ) {\n\t\t\t\t\t?>\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t

\n\t\t
\n\t\t 'text',\n\t\t\t\t'id' => wp_generate_uuid4(),\n\t\t\t\t'name' => wp_generate_uuid4(),\n\t\t\t\t'label' => '',\n\t\t\t\t'value' => '',\n\t\t\t\t'classname' => 'widefat',\n\t\t\t\t'wrapper_class' => 'web-stories-field-wrapper',\n\t\t\t\t'label_before' => false,\n\t\t\t\t'attributes' => [],\n\t\t\t]\n\t\t);\n\n\t\t?>\n\t\t

\">\n\n\t\t\tlabel( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\t\t}\n\n\t\t\t$extra_attrs = '';\n\n\t\t\tif ( ! empty( $args['attributes'] ) && \\is_array( $args['attributes'] ) ) {\n\t\t\t\t/**\n\t\t\t\t * Value.\n\t\t\t\t *\n\t\t\t\t * @var string $attr_val\n\t\t\t\t */\n\t\t\t\tforeach ( $args['attributes'] as $attr_key => $attr_val ) {\n\t\t\t\t\t$extra_attrs .= \\sprintf( ' %1s=%2s', $attr_key, esc_attr( $attr_val ) );\n\t\t\t\t}\n\t\t\t}\n\t\t\t?>\n\n\t\t\t\"\n\t\t\t\ttype=\"\"\n\t\t\t\tid=\"get_field_id( $args['id'] ) ); ?>\"\n\t\t\t\tname=\"get_field_name( $args['name'] ) ); ?>\"\n\t\t\t\tvalue=\"\"\n\t\t\t\t\n\t\t\t\t\n\t\t\t/>\n\n\t\t\tlabel( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\t\t}\n\t\t\t?>\n\n\t\t

\n\t\t $args Label args.\n\t */\n\tprivate function label( array $args ): string {\n\t\t$args = wp_parse_args(\n\t\t\t$args,\n\t\t\t[\n\t\t\t\t'id' => '',\n\t\t\t\t'label' => '',\n\t\t\t]\n\t\t);\n\t\tob_start();\n\t\t?>\n\t\t\n\t\t\n\t */\n\tprotected $extensions = array();\n\n\t/**\n\t * Array of required files.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @var string[]\n\t */\n\tprotected $required_files = array();\n\n\t/**\n\t * Compatibility constructor.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param WP_Error $error WP_Error object passed back.\n\t */\n\tpublic function __construct( WP_Error $error ) { // phpcs:ignore SlevomatCodingStandard.Namespaces.FullyQualifiedExceptions.NonFullyQualifiedException\n\t\t$this->error = $error;\n\t}\n\n\t/**\n\t * Check to see if PHP version check passes.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_php_version() {\n\t\tif ( version_compare( PHP_VERSION, $this->get_php_version(), '<' ) ) {\n\t\t\t/* translators: %s: PHP version number */\n\t\t\t$message = esc_html( sprintf( __( 'Web Stories requires PHP %s or higher.', 'web-stories' ), $this->get_php_version() ) );\n\t\t\t$data = array(\n\t\t\t\t'title' => $message,\n\t\t\t);\n\t\t\t$this->add_to_error( 'failed_check_php_version', $message, $data );\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check to see if WordPress version check passes.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_wp_version() {\n\t\tif ( version_compare( get_bloginfo( 'version' ), $this->get_wp_version(), '<' ) ) {\n\t\t\t/* translators: %s: WordPress version number */\n\t\t\t$message = esc_html( sprintf( __( 'Web Stories requires WordPress %s or higher.', 'web-stories' ), $this->get_wp_version() ) );\n\t\t\t$data = array(\n\t\t\t\t'title' => $message,\n\t\t\t);\n\t\t\t$this->add_to_error( 'failed_check_wp_version', $message, $data );\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check if required files.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_required_files() {\n\t\t$required_files = $this->get_required_files();\n\t\tif ( $required_files ) {\n\t\t\tforeach ( $required_files as $required_file ) {\n\t\t\t\tif ( ! is_readable( $required_file ) ) {\n\t\t\t\t\t$message =\n\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t/* translators: %s: build commands. */\n\t\t\t\t\t\t\t__( 'You appear to be running an incomplete version of the plugin. Please run %s to finish installation.', 'web-stories' ),\n\t\t\t\t\t\t\t'composer install && npm install && npm run build'\n\t\t\t\t\t\t);\n\t\t\t\t\t$data = array(\n\t\t\t\t\t\t'title' => esc_html__( 'Web Stories plugin could not be initialized.', 'web-stories' ),\n\t\t\t\t\t);\n\t\t\t\t\t$this->add_to_error( 'failed_check_required_files', $message, $data );\n\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check to see if all required PHP extensions are installed.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_extensions() {\n\t\t$missing_extensions = array();\n\t\tforeach ( array_keys( $this->get_extensions() ) as $required_extension ) {\n\t\t\tif ( ! extension_loaded( $required_extension ) ) {\n\t\t\t\t$missing_extensions[] = \"$required_extension\";\n\t\t\t}\n\t\t}\n\n\t\tif ( count( $missing_extensions ) > 0 ) {\n\t\t\t$this->add_to_error(\n\t\t\t\t'missing_extension',\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s is list of missing extensions */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'The following PHP extension is missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\t'The following PHP extensions are missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\tcount( $missing_extensions ),\n\t\t\t\t\t\t'web-stories'\n\t\t\t\t\t),\n\t\t\t\t\timplode( ', ', $missing_extensions )\n\t\t\t\t)\n\t\t\t);\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check to see if classes exist.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_classes() {\n\t\t$missing_classes = array();\n\t\tforeach ( $this->get_extensions() as $required_constructs ) {\n\t\t\tforeach ( $required_constructs as $construct_type => $constructs ) {\n\t\t\t\tif ( 'classes' !== $construct_type ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tforeach ( $constructs as $construct ) {\n\t\t\t\t\tif ( ! class_exists( $construct ) ) {\n\t\t\t\t\t\t$missing_classes[] = \"$construct\";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif ( count( $missing_classes ) > 0 ) {\n\t\t\t$this->add_to_error(\n\t\t\t\t'missing_class',\n\t\t\t\tsprintf(\n\t\t\t\t\t/* translators: %s is list of missing extensions */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'The following PHP class is missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\t'The following PHP classes are missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\tcount( $missing_classes ),\n\t\t\t\t\t\t'web-stories'\n\t\t\t\t\t),\n\t\t\t\t\timplode( ', ', $missing_classes )\n\t\t\t\t)\n\t\t\t);\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Check to see if all require functions exist.\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return bool\n\t */\n\tpublic function check_functions() {\n\t\t$missing_functions = array();\n\t\tforeach ( $this->get_extensions() as $required_constructs ) {\n\t\t\tforeach ( $required_constructs as $construct_type => $constructs ) {\n\t\t\t\tif ( 'functions' !== $construct_type ) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tforeach ( $constructs as $construct ) {\n\t\t\t\t\tif ( ! function_exists( $construct ) ) {\n\t\t\t\t\t\t$missing_functions[] = \"$construct\";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif ( count( $missing_functions ) > 0 ) {\n\t\t\t$this->add_to_error(\n\t\t\t\t'missing_function',\n\t\t\t\tsprintf(\n\t\t\t\t/* translators: %s is list of missing extensions */\n\t\t\t\t\t_n(\n\t\t\t\t\t\t'The following PHP function is missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\t'The following PHP functions are missing: %s. Please contact your host to finish installation.',\n\t\t\t\t\t\tcount( $missing_functions ),\n\t\t\t\t\t\t'web-stories'\n\t\t\t\t\t),\n\t\t\t\t\timplode( ', ', $missing_functions )\n\t\t\t\t)\n\t\t\t);\n\n\t\t\treturn false;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\t/**\n\t * Run checks in admin.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return void\n\t */\n\tpublic function run_checks() {\n\t\t$this->check_php_version();\n\t\t$this->check_wp_version();\n\t\t$this->check_required_files();\n\t\t$this->check_extensions();\n\t\t$this->check_classes();\n\t\t$this->check_functions();\n\t}\n\n\t/**\n\t * Get min WP version.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @return string\n\t */\n\tpublic function get_wp_version() {\n\t\treturn $this->wp_version;\n\t}\n\n\t/**\n\t * Get min PHP version.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return string\n\t */\n\tpublic function get_php_version() {\n\t\treturn $this->php_version;\n\t}\n\n\t/**\n\t * Array of extensions.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return array\n\t */\n\tpublic function get_extensions() {\n\t\treturn $this->extensions;\n\t}\n\n\t/**\n\t * Get JavaScript path.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return string[]\n\t */\n\tpublic function get_required_files() {\n\t\treturn $this->required_files;\n\t}\n\n\t/**\n\t * Getter to get the error object.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @return WP_Error\n\t */\n\tpublic function get_error() {\n\t\treturn $this->error;\n\t}\n\n\t/**\n\t * Set WordPress version.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param string $wp_version WordPress version.\n\t * @return void\n\t */\n\tpublic function set_wp_version( $wp_version ) {\n\t\t$this->wp_version = $wp_version;\n\t}\n\n\t/**\n\t * Set PHP version.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param string $php_version PHP version.\n\t * @return void\n\t */\n\tpublic function set_php_version( $php_version ) {\n\t\t$this->php_version = $php_version;\n\t}\n\n\t/**\n\t * Set extensions.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param array $extensions Array of extensions.\n\t * @return void\n\t */\n\tpublic function set_extensions( array $extensions ) {\n\t\t$this->extensions = $extensions;\n\t}\n\n\t/**\n\t * Array of require files.\n\t *\n\t * @codeCoverageIgnore\n\t *\n\t * @since 1.2.0\n\t *\n\t * @param string[] $required_files Array of require files.\n\t * @return void\n\t */\n\tpublic function set_required_files( array $required_files ) {\n\t\t$this->required_files = $required_files;\n\t}\n\n\t/**\n\t * Helper to add error code to WP_Error object.\n\t *\n\t * @param string|int $code Error code.\n\t * @param string $message Error message.\n\t * @param mixed $data Optional. Error data.\n\t * @return void\n\t */\n\tprotected function add_to_error( $code, $message, $data = '' ) {\n\t\tif ( ! in_array( $code, $this->error->get_error_codes(), true ) ) {\n\t\t\t$this->error->add( $code, $message, $data );\n\t\t}\n\t}\n}\n" }, { "path": "includes/compat/amp.php", "content": "L10N_PLACEHOLDER_1_1\",\n \"width\": 334,\n \"height\": 220,\n \"id\": \"103b0de3-c269-4dbc-bd68-568ef5b7dbd3\",\n \"x\": 62,\n \"y\": 373,\n \"type\": \"text\"\n },\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"image\",\n \"mimeType\": \"image/png\",\n \"creationDate\": \"2020-09-22T08:25:46\",\n \"src\": \"https://replaceme.com/images/demo-story/web-stories-logo.png\",\n \"width\": 194,\n \"height\": 194,\n \"posterId\": 0,\n \"id\": 12757,\n \"title\": \"\",\n \"alt\": \"Web Stories\",\n \"sizes\": [],\n \"isExternal\": false\n },\n \"type\": \"image\",\n \"x\": 53,\n \"y\": 280,\n \"width\": 83,\n \"height\": 83,\n \"mask\": {\n \"type\": \"rectangle\",\n \"showInLibrary\": true,\n \"name\": \"Rectangle\",\n \"path\": \"M 0,0 1,0 1,1 0,1 0,0 Z\",\n \"ratio\": 1\n },\n \"id\": \"1f6c6ae7-01b2-4edb-9626-dac1cb0e5e91\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"cf91578e-22d6-424d-928a-8e0917cfa48d\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"ceeacb28-f8c6-45b4-aa80-46ab655a7c45\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -16,\n \"y\": 5,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"ceed60ed-294a-4adb-a28a-2a285b2a320d\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-1.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-1-poster.jpeg\",\n \"posterId\": 12831,\n \"id\": 12830,\n \"length\": 4,\n \"lengthFormatted\": \"0:04\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": false,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"004a2890-04b2-4cea-aa73-961f2450507f\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_2_2\",\n \"width\": 328,\n \"height\": 78,\n \"type\": \"text\",\n \"marginOffset\": 0\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_2_1\",\n \"width\": 316,\n \"height\": 24,\n \"id\": \"68b0dbfc-c986-4267-b96e-b2bc025d56c9\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"266aff79-1125-4ffd-a4e5-9100541c1b5f\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"d9915c74-6777-4322-aedc-0f5998f82781\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -40,\n \"y\": 13,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"20c8b7f3-ef75-4f02-b4b3-6e272167f84b\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-2.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-2-poster.jpeg\",\n \"posterId\": 12833,\n \"id\": 12832,\n \"length\": 9,\n \"lengthFormatted\": \"0:09\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_3_2\",\n \"width\": 328,\n \"height\": 104,\n \"type\": \"text\",\n \"id\": \"8352409b-8d75-45b1-8a56-bd2f57c81a7f\",\n \"x\": 42,\n \"y\": 501\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_3_1\",\n \"width\": 327,\n \"height\": 24,\n \"type\": \"text\",\n \"id\": \"2619d1cc-3328-4683-a5ea-3e6f07f9b5ba\",\n \"x\": 43,\n \"y\": 462\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"9d8b64c3-5692-4e4c-ae46-785e23613db1\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"e9ddfe89-4c10-43cf-8892-bc49d52a90a5\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -12,\n \"y\": 8,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"4b1780d0-1edf-4e1c-a3a0-77d91fb5243d\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-3.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-3-poster.jpeg\",\n \"posterId\": 12806,\n \"id\": 12805,\n \"length\": 9,\n \"lengthFormatted\": \"0:09\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": false,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"f8b4a07c-1f1b-4140-945c-66a729bd77ae\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_4_2\",\n \"width\": 328,\n \"height\": 104,\n \"type\": \"text\",\n \"marginOffset\": 0\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_4_1\",\n \"width\": 310,\n \"height\": 24,\n \"id\": \"00b5e9e3-1134-4407-974c-8f0f0770eb19\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 74, \"g\": 64, \"b\": 177 } },\n \"type\": \"page\",\n \"id\": \"f3d54fcf-e8ae-4232-b400-465c81953282\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"e8eb4129-84a9-4e15-b9f9-611e2ef238da\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -33,\n \"y\": 8,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"c412199f-d6f5-45cc-8ad8-c4020c3968ad\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-4.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-4-poster.jpeg\",\n \"posterId\": 12809,\n \"id\": 12808,\n \"length\": 6,\n \"lengthFormatted\": \"0:06\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"8abc8e46-48f4-4a57-8396-3a74d5fa0790\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_5_2\",\n \"width\": 326,\n \"height\": 104,\n \"type\": \"text\"\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_5_1\",\n \"width\": 230,\n \"height\": 24,\n \"id\": \"8f0b5de9-1252-4dab-9596-d1bc7dd45e1c\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"6728de08-eedb-40a2-9a3a-604ff4c87214\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"f9a4110f-8c26-41cc-b36f-3144ae5570c7\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -29,\n \"y\": 15,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"c412199f-d6f5-45cc-8ad8-c4020c3968ad\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-5.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-5-poster.jpeg\",\n \"posterId\": 12813,\n \"id\": 12812,\n \"length\": 3,\n \"lengthFormatted\": \"0:03\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"3cdc3e2c-80b9-4946-b0c6-5d473ffe127d\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_6_2\",\n \"width\": 322,\n \"height\": 104,\n \"type\": \"text\"\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_6_1\",\n \"width\": 281,\n \"height\": 24,\n \"id\": \"7d453d81-a14d-4420-b143-6a39854dceea\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"87eb274d-a2dd-495f-add0-ad681cf757f5\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"e730f3df-a4f3-4415-9dea-820aa8cde222\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -3,\n \"y\": 15,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"c412199f-d6f5-45cc-8ad8-c4020c3968ad\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-6.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-6-poster.jpeg\",\n \"posterId\": 12816,\n \"id\": 12815,\n \"length\": 22,\n \"lengthFormatted\": \"0:22\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 20,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"0108f423-121e-41e7-8fb9-68da265caaba\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_7_2\",\n \"width\": 318,\n \"height\": 104,\n \"type\": \"text\"\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_7_1\",\n \"width\": 282,\n \"height\": 24,\n \"id\": \"bee50053-183a-43dc-95cd-dcfa6817f4e6\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"f79a3e34-81ab-4165-a2aa-83da192b1e9d\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"a5b02ad2-9692-4794-a206-0da280de8e11\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": -16,\n \"y\": 11,\n \"width\": 330,\n \"height\": 586,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"1c6ec285-92e7-41f8-b140-722e3a2fab3b\",\n \"type\": \"video\",\n \"scale\": 100,\n \"focalX\": 50,\n \"focalY\": 50,\n \"resource\": {\n \"type\": \"video\",\n \"mimeType\": \"video/mp4\",\n \"src\": \"https://replaceme.com/images/demo-story/video-7.mp4\",\n \"width\": 824,\n \"height\": 1464,\n \"poster\": \"https://replaceme.com/images/demo-story/video-7-poster.jpeg\",\n \"posterId\": 12819,\n \"id\": 12818,\n \"length\": 10,\n \"lengthFormatted\": \"0:10\",\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n },\n \"overlay\": null\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 19,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"x\": 42,\n \"y\": 501,\n \"id\": \"5542ba59-9388-49fc-b7e1-f2ec50c047a9\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_8_2\",\n \"width\": 330,\n \"height\": 96,\n \"type\": \"text\"\n },\n {\n \"opacity\": 84,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 24,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"left\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_8_1\",\n \"width\": 321,\n \"height\": 24,\n \"id\": \"86baa049-1a48-44ae-a82c-08ba93244754\",\n \"x\": 42,\n \"y\": 461,\n \"type\": \"text\"\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"4cbf7ec8-cf12-4ff2-bfb0-3bef7f3d76cb\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"d82bbd0e-7539-48df-9cc5-158424a4a3d1\",\n \"type\": \"shape\"\n }\n },\n {\n \"elements\": [\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 48,\n \"y\": 0,\n \"width\": 330,\n \"height\": 538,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"id\": \"c412199f-d6f5-45cc-8ad8-c4020c3968ad\",\n \"type\": \"image\",\n \"scale\": 124,\n \"focalX\": 38.51180131399874,\n \"focalY\": 51.981874424803884,\n \"resource\": {\n \"type\": \"image\",\n \"mimeType\": \"image/png\",\n \"creationDate\": \"2020-09-22T04:07:58\",\n \"src\": \"https://replaceme.com/images/demo-story/image-2.png\",\n \"width\": 330,\n \"height\": 538,\n \"posterId\": 0,\n \"id\": 12730,\n \"title\": \"\",\n \"alt\": \"\",\n \"sizes\": [],\n \"isExternal\": false\n }\n },\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [0, 200],\n [0, 300],\n [0, 400],\n [0, 500],\n [0, 600],\n [0, 700],\n [0, 800],\n [0, 900],\n [1, 100],\n [1, 200],\n [1, 300],\n [1, 400],\n [1, 500],\n [1, 600],\n [1, 700],\n [1, 800],\n [1, 900]\n ]\n },\n \"fontSize\": 38,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1,\n \"textAlign\": \"initial\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"type\": \"text\",\n \"title\": \"\",\n \"content\": \"L10N_PLACEHOLDER_9_1\",\n \"width\": 313,\n \"height\": 190,\n \"id\": \"0106c119-e3d1-416f-92e4-b3f5b7e6c2c5\",\n \"x\": 49,\n \"y\": 292\n },\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": false,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 117, \"b\": 52 } },\n \"type\": \"shape\",\n \"width\": 30,\n \"height\": 4,\n \"mask\": { \"type\": \"rectangle\" },\n \"id\": \"9acf6b79-00a8-4264-854d-63a465f0a8c7\",\n \"x\": 48.5,\n \"y\": 518\n },\n {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundTextMode\": \"NONE\",\n \"font\": {\n \"family\": \"Poppins\",\n \"service\": \"fonts.google.com\",\n \"fallbacks\": [\"sans-serif\"],\n \"weights\": [100, 200, 300, 400, 500, 600, 700, 800, 900],\n \"styles\": [\"italic\", \"regular\"],\n \"variants\": [\n [0, 100],\n [1, 100],\n [0, 200],\n [1, 200],\n [0, 300],\n [1, 300],\n [0, 400],\n [1, 400],\n [0, 500],\n [1, 500],\n [0, 600],\n [1, 600],\n [0, 700],\n [1, 700],\n [0, 800],\n [1, 800],\n [0, 900],\n [1, 900]\n ]\n },\n \"fontSize\": 18,\n \"backgroundColor\": { \"color\": { \"r\": 196, \"g\": 196, \"b\": 196 } },\n \"lineHeight\": 1.3,\n \"textAlign\": \"initial\",\n \"padding\": { \"locked\": true, \"horizontal\": 0, \"vertical\": 0 },\n \"type\": \"text\",\n \"id\": \"e59aa680-9a49-439a-98fd-18660d8dfa21\",\n \"content\": \"bit.ly/storybestpractices\",\n \"x\": 49,\n \"y\": 536,\n \"width\": 226,\n \"height\": 23,\n \"link\": {\n \"url\": \"L10N_PLACEHOLDER_9_2\",\n \"icon\": \"https://amp.dev/static/img/sharing/docs-guide-600x314.png\",\n \"desc\": \"L10N_PLACEHOLDER_9_3\"\n }\n }\n ],\n \"animations\": [],\n \"backgroundColor\": { \"color\": { \"r\": 21, \"g\": 22, \"b\": 22 } },\n \"type\": \"page\",\n \"id\": \"17fc30f7-8968-41a2-aaef-c7a1be1b753c\",\n \"defaultBackgroundElement\": {\n \"opacity\": 100,\n \"flip\": { \"vertical\": false, \"horizontal\": false },\n \"rotationAngle\": 0,\n \"lockAspectRatio\": true,\n \"backgroundColor\": { \"color\": { \"r\": 255, \"g\": 255, \"b\": 255 } },\n \"x\": 1,\n \"y\": 1,\n \"width\": 1,\n \"height\": 1,\n \"mask\": { \"type\": \"rectangle\" },\n \"isBackground\": true,\n \"isDefaultBackground\": true,\n \"id\": \"b37b1843-756e-48e4-b497-2680412c1381\",\n \"type\": \"shape\"\n }\n }\n ],\n \"autoAdvance\": false,\n \"defaultPageDuration\": 7\n}\n" }, { "path": "includes/functions.php", "content": " $attrs Arguments for displaying stories.\n * @param array $query_args Query arguments for stories.\n *\n * @phpstan-param array{view_type?: string, number_of_columns?: int, show_title?: bool, show_author?: bool, show_date?: bool, show_archive_link?: bool|string, show_excerpt?: bool, image_alignment?: string, class?: string, archive_link_label?: string, circle_size?: int, sharp_corners?: bool, order?: string, orderby?: string} $attrs\n */\nfunction render_stories( array $attrs = [], array $query_args = [] ): void {\n\t$stories_obj = new Story_Query( $attrs, $query_args );\n\t//phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped\n\techo $stories_obj->render();\n}\n\n/**\n * Returns list of stories based on the arguments passed to it.\n *\n * @since 1.5.0\n *\n * @param array $attrs Arguments for displaying stories.\n * @param array $query_args Query arguments for stories.\n * @return WP_Post[]\n *\n * @phpstan-param array{view_type?: string, number_of_columns?: int, show_title?: bool, show_author?: bool, show_date?: bool, show_archive_link?: bool|string, show_excerpt?: bool, image_alignment?: string, class?: string, archive_link_label?: string, circle_size?: int, sharp_corners?: bool, order?: string, orderby?: string} $attrs\n */\nfunction get_stories( array $attrs = [], array $query_args = [] ): array {\n\treturn ( new Story_Query( $attrs, $query_args ) )->get_stories();\n}\n\n/**\n * Render stories based on customizer settings.\n *\n * @since 1.5.0\n */\nfunction render_theme_stories(): void {\n\t$injector = Services::get_injector();\n\n\t/**\n\t * Customizer instance.\n\t *\n\t * @var Customizer $customizer Customizer instance.\n\t */\n\t$customizer = $injector->make( Customizer::class );\n\t//phpcs:disable WordPress.Security.EscapeOutput.OutputNotEscaped\n\techo $customizer->render_stories();\n}\n" }, { "path": "includes/namespace.php", "content": "on_plugin_activation( $network_wide );\n\n\t/**\n\t * Fires after plugin activation.\n\t *\n\t * @param bool $network_wide Whether to activate network-wide.\n\t */\n\tdo_action( 'web_stories_activation', $network_wide );\n}\n\nregister_activation_hook( WEBSTORIES_PLUGIN_FILE, __NAMESPACE__ . '\\activate' );\n\n/**\n * Hook into new site creation on Multisite.\n *\n * @since 1.0.0\n *\n * @param int|WP_Site $site Site ID or object.\n */\nfunction new_site( $site ): void {\n\tif ( ! is_multisite() ) {\n\t\treturn;\n\t}\n\n\t$site = get_site( $site );\n\n\tif ( ! $site ) {\n\t\treturn;\n\t}\n\n\t// Runs all SiteInitializationAware services.\n\t// This will also flush rewrite rules.\n\tPluginFactory::create()->on_site_initialization( $site );\n}\n\nadd_action( 'wp_initialize_site', __NAMESPACE__ . '\\new_site', PHP_INT_MAX );\n\n/**\n * Hook into site removal on Multisite.\n *\n * @since 1.1.0\n *\n * @param WP_Error $error Unused.\n * @param int|WP_Site $site Site ID or object.\n */\nfunction remove_site( WP_Error $error, $site ): void {\n\tif ( ! is_multisite() ) {\n\t\treturn;\n\t}\n\n\t$site = get_site( $site );\n\n\tif ( ! $site ) {\n\t\treturn;\n\t}\n\n\tPluginFactory::create()->on_site_removal( $site );\n}\n\nadd_action( 'wp_validate_site_deletion', __NAMESPACE__ . '\\remove_site', PHP_INT_MAX, 2 );\n\n/**\n * Handles plugin deactivation.\n *\n * @SuppressWarnings(\"PHPMD.BooleanArgumentFlag\")\n *\n * @since 1.0.0\n *\n * @param bool $network_wide Whether to deactivate network-wide.\n */\nfunction deactivate( ?bool $network_wide = false ): void {\n\t$network_wide = (bool) $network_wide;\n\n\t// Runs all PluginDeactivationAware services.\n\t// This will also flush rewrite rules.\n\tPluginFactory::create()->on_plugin_deactivation( $network_wide );\n\n\t/**\n\t * Fires after plugin deactivation.\n\t *\n\t * @param bool $network_wide Whether to deactivate network-wide.\n\t */\n\tdo_action( 'web_stories_deactivation', $network_wide );\n}\n\nregister_deactivation_hook( WEBSTORIES_PLUGIN_FILE, __NAMESPACE__ . '\\deactivate' );\n\n/**\n * Initializes functionality to improve compatibility with the AMP plugin.\n *\n * Loads a separate PHP file that allows defining functions in the global namespace.\n *\n * Runs on the 'wp' hook to ensure the WP environment has been fully set up,\n */\nfunction load_amp_plugin_compat(): void {\n\trequire_once WEBSTORIES_PLUGIN_DIR_PATH . 'includes/compat/amp.php';\n}\n\nadd_action( 'wp', __NAMESPACE__ . '\\load_amp_plugin_compat' );\n\n/**\n * Load functions for use by plugin developers.\n *\n * @todo Move to autoloader\n */\nfunction load_functions(): void {\n\trequire_once WEBSTORIES_PLUGIN_DIR_PATH . 'includes/functions.php';\n}\n\nadd_action( 'init', __NAMESPACE__ . '\\load_functions' );\n\n/**\n * Append result of internal request to REST API for purpose of preloading data to be attached to a page.\n * Expected to be called in the context of `array_reduce`.\n *\n * Like rest_preload_api_request() in core, but embeds links and removes trailing slashes.\n *\n * @SuppressWarnings(\"PHPMD.NPathComplexity\")\n *\n * @since 1.2.0\n *\n * @link https://core.trac.wordpress.org/ticket/51722\n * @link https://core.trac.wordpress.org/ticket/51636\n * @see \\rest_preload_api_request\n *\n * @param array}|array}>> $memo Reduce accumulator.\n * @param string|array $path REST API path to preload.\n * @return array}|array}>> Modified reduce accumulator.\n */\nfunction rest_preload_api_request( array $memo, $path ): array {\n\tif ( empty( $path ) ) {\n\t\treturn $memo;\n\t}\n\n\t$method = 'GET';\n\tif ( \\is_array( $path ) ) {\n\t\tif ( 2 !== \\count( $path ) ) {\n\t\t\treturn $memo;\n\t\t}\n\n\t\t$method = end( $path );\n\t\t$path = (string) reset( $path );\n\n\t\tif ( ! \\in_array( $method, [ 'GET', 'OPTIONS' ], true ) ) {\n\t\t\t$method = 'GET';\n\t\t}\n\t}\n\n\t/**\n\t * URL parts.\n\t *\n\t * @var array{path:string, query?: string}|false $path_parts\n\t */\n\t$path_parts = wp_parse_url( (string) $path );\n\tif ( ! \\is_array( $path_parts ) ) {\n\t\treturn $memo;\n\t}\n\n\t// This line is different from code. Adds untrailingslashit. See https://core.trac.wordpress.org/ticket/57048.\n\t$request = new WP_REST_Request( $method, untrailingslashit( $path_parts['path'] ) );\n\tif ( ! empty( $path_parts['query'] ) ) {\n\t\t$query_params = [];\n\t\tparse_str( $path_parts['query'], $query_params );\n\t\t$request->set_query_params( $query_params );\n\t}\n\n\t$response = rest_do_request( $request );\n\tif ( 200 === $response->status ) {\n\t\t$server = rest_get_server();\n\t\t/**\n\t\t * Embed directive.\n\t\t *\n\t\t * @var string|string[] $embed\n\t\t */\n\t\t$embed = $request['_embed'] ?? false;\n\t\t$embed = $embed ? rest_parse_embed_param( $embed ) : false;\n\t\t$data = $server->response_to_data( $response, $embed );\n\n\t\tif ( 'OPTIONS' === $method ) {\n\t\t\t$response = rest_send_allow_header( $response, $server, $request );\n\n\t\t\t$memo[ $method ][ $path ] = [\n\t\t\t\t'body' => $data,\n\t\t\t\t'headers' => $response->headers,\n\t\t\t];\n\t\t} else {\n\t\t\t$memo[ $path ] = [\n\t\t\t\t'body' => $data,\n\t\t\t\t'headers' => $response->headers,\n\t\t\t];\n\t\t}\n\t}\n\n\treturn $memo;\n}\n\n/**\n * Returns the Web stories plugin instance.\n *\n * Can be used by other plugins to integrate with the plugin\n * or to simply detect whether the plugin is active.\n */\nfunction get_plugin_instance(): Plugin {\n\treturn PluginFactory::create();\n}\n\n/**\n * Bootstrap the plugin.\n *\n * @since 1.11.0\n */\nfunction bootstrap_plugin(): void {\n\tPluginFactory::create()->register();\n}\n\nadd_action( 'plugins_loaded', __NAMESPACE__ . '\\bootstrap_plugin' );\n" }, { "path": "includes/polyfills/mbstring.php", "content": "\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\n\n// This is is a copy of symfony/polyfill-mbstring/bootstrap.php.\n// The file is not used directly because after running through PHP-Scoper\n// it won't be in the global scope anymore.\n\nuse Google\\Web_Stories_Dependencies\\Symfony\\Polyfill\\Mbstring as Google_Web_Stories_Mbstring;\n\nif ( ! function_exists( 'mb_convert_encoding' ) ) {\n\tfunction mb_convert_encoding( $s, $to, $from = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_convert_encoding( $s, $to, $from );\n\t}\n}\nif ( ! function_exists( 'mb_decode_mimeheader' ) ) {\n\tfunction mb_decode_mimeheader( $s ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_decode_mimeheader( $s );\n\t}\n}\nif ( ! function_exists( 'mb_encode_mimeheader' ) ) {\n\tfunction mb_encode_mimeheader( $s, $charset = null, $transferEnc = null, $lf = null, $indent = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_encode_mimeheader( $s, $charset, $transferEnc, $lf, $indent );\n\t}\n}\nif ( ! function_exists( 'mb_decode_numericentity' ) ) {\n\tfunction mb_decode_numericentity( $s, $convmap, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_decode_numericentity( $s, $convmap, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_encode_numericentity' ) ) {\n\tfunction mb_encode_numericentity( $s, $convmap, $enc = null, $is_hex = false ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_encode_numericentity( $s, $convmap, $enc, $is_hex );\n\t}\n}\nif ( ! function_exists( 'mb_convert_case' ) ) {\n\tfunction mb_convert_case( $s, $mode, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_convert_case( $s, $mode, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_internal_encoding' ) ) {\n\tfunction mb_internal_encoding( $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_internal_encoding( $enc );\n\t}\n}\nif ( ! function_exists( 'mb_language' ) ) {\n\tfunction mb_language( $lang = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_language( $lang );\n\t}\n}\nif ( ! function_exists( 'mb_list_encodings' ) ) {\n\tfunction mb_list_encodings() {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_list_encodings();\n\t}\n}\nif ( ! function_exists( 'mb_encoding_aliases' ) ) {\n\tfunction mb_encoding_aliases( $encoding ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_encoding_aliases( $encoding );\n\t}\n}\nif ( ! function_exists( 'mb_check_encoding' ) ) {\n\tfunction mb_check_encoding( $var = null, $encoding = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_check_encoding( $var, $encoding );\n\t}\n}\nif ( ! function_exists( 'mb_detect_encoding' ) ) {\n\tfunction mb_detect_encoding( $str, $encodingList = null, $strict = false ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_detect_encoding( $str, $encodingList, $strict );\n\t}\n}\nif ( ! function_exists( 'mb_detect_order' ) ) {\n\tfunction mb_detect_order( $encodingList = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_detect_order( $encodingList );\n\t}\n}\nif ( ! function_exists( 'mb_parse_str' ) ) {\n\tfunction mb_parse_str( $s, &$result = [] ) {\n\t\tparse_str( $s, $result );\n\t}\n}\nif ( ! function_exists( 'mb_strlen' ) ) {\n\tfunction mb_strlen( $s, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strlen( $s, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strpos' ) ) {\n\tfunction mb_strpos( $s, $needle, $offset = 0, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strpos( $s, $needle, $offset, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strtolower' ) ) {\n\tfunction mb_strtolower( $s, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strtolower( $s, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strtoupper' ) ) {\n\tfunction mb_strtoupper( $s, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strtoupper( $s, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_substitute_character' ) ) {\n\tfunction mb_substitute_character( $char = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_substitute_character( $char );\n\t}\n}\nif ( ! function_exists( 'mb_substr' ) ) {\n\tfunction mb_substr( $s, $start, $length = 2147483647, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_substr( $s, $start, $length, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_stripos' ) ) {\n\tfunction mb_stripos( $s, $needle, $offset = 0, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_stripos( $s, $needle, $offset, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_stristr' ) ) {\n\tfunction mb_stristr( $s, $needle, $part = false, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_stristr( $s, $needle, $part, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strrchr' ) ) {\n\tfunction mb_strrchr( $s, $needle, $part = false, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strrchr( $s, $needle, $part, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strrichr' ) ) {\n\tfunction mb_strrichr( $s, $needle, $part = false, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strrichr( $s, $needle, $part, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strripos' ) ) {\n\tfunction mb_strripos( $s, $needle, $offset = 0, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strripos( $s, $needle, $offset, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strrpos' ) ) {\n\tfunction mb_strrpos( $s, $needle, $offset = 0, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strrpos( $s, $needle, $offset, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strstr' ) ) {\n\tfunction mb_strstr( $s, $needle, $part = false, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strstr( $s, $needle, $part, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_get_info' ) ) {\n\tfunction mb_get_info( $type = 'all' ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_get_info( $type );\n\t}\n}\nif ( ! function_exists( 'mb_http_output' ) ) {\n\tfunction mb_http_output( $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_http_output( $enc );\n\t}\n}\nif ( ! function_exists( 'mb_strwidth' ) ) {\n\tfunction mb_strwidth( $s, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_strwidth( $s, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_substr_count' ) ) {\n\tfunction mb_substr_count( $haystack, $needle, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_substr_count( $haystack, $needle, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_output_handler' ) ) {\n\tfunction mb_output_handler( $contents, $status ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_output_handler( $contents, $status );\n\t}\n}\nif ( ! function_exists( 'mb_http_input' ) ) {\n\tfunction mb_http_input( $type = '' ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_http_input( $type );\n\t}\n}\nif ( ! function_exists( 'mb_convert_variables' ) ) {\n\tfunction mb_convert_variables( $toEncoding, $fromEncoding, &$a = null, &$b = null, &$c = null, &$d = null, &$e = null, &$f = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_convert_variables( $toEncoding, $fromEncoding, $a, $b, $c, $d, $e, $f );\n\t}\n}\nif ( ! function_exists( 'mb_ord' ) ) {\n\tfunction mb_ord( $s, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_ord( $s, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_chr' ) ) {\n\tfunction mb_chr( $code, $enc = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_chr( $code, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_scrub' ) ) {\n\tfunction mb_scrub( $s, $enc = null ) {\n\t\t$enc = $enc ?? mb_internal_encoding();\n\t\treturn mb_convert_encoding( $s, $enc, $enc );\n\t}\n}\nif ( ! function_exists( 'mb_str_split' ) ) {\n\tfunction mb_str_split( $string, $split_length = 1, $encoding = null ) {\n\t\treturn Google_Web_Stories_Mbstring\\Mbstring::mb_str_split( $string, $split_length, $encoding );\n\t}\n}\nif ( extension_loaded( 'mbstring' ) ) {\n\treturn;\n}\nif ( ! defined( 'MB_CASE_UPPER' ) ) {\n\tdefine( 'MB_CASE_UPPER', 0 );\n}\nif ( ! defined( 'MB_CASE_LOWER' ) ) {\n\tdefine( 'MB_CASE_LOWER', 1 );\n}\nif ( ! defined( 'MB_CASE_TITLE' ) ) {\n\tdefine( 'MB_CASE_TITLE', 2 );\n}\n" }, { "path": "includes/templates/admin/activation-notice.php", "content": "\n
\n\n
\n" }, { "path": "includes/templates/admin/dashboard.php", "content": "get_dashboard_settings();\n\n$init_script = <<<'JS'\n\twp.domReady( function() {\n\t webStories.initializeStoryDashboard( 'web-stories-dashboard', %s );\n\t} );\nJS;\n\n$script = sprintf( $init_script, wp_json_encode( $dashboard_settings ) );\n\nwp_add_inline_script( Dashboard::SCRIPT_HANDLE, $script );\n\n?>\n\n
\n\t

\n\t
\n\t\t

\n\t
\n\n\t\n\t
\n\t\t

\n\t\t
\n\t\t\t

\n\t\t
\n\t
\n
\n" }, { "path": "includes/templates/admin/edit-story.php", "content": "rest_base ) ? $post_type_object->rest_base : $post_type_object->name;\n$initial_edits = [ 'story' => null ];\n\n\n// Preload common data.\n// Important: keep in sync with usage & definition in React app.\n$preload_paths = [\n\t'/web-stories/v1/media/?' . build_query(\n\t\t[\n\t\t\t'context' => 'view',\n\t\t\t'per_page' => 50,\n\t\t\t'page' => 1,\n\t\t\t'_web_stories_envelope' => 'true',\n\t\t\t'_fields' => rawurlencode(\n\t\t\t\timplode(\n\t\t\t\t\t',',\n\t\t\t\t\t[\n\t\t\t\t\t\t'id',\n\t\t\t\t\t\t'date_gmt',\n\t\t\t\t\t\t'media_details',\n\t\t\t\t\t\t'mime_type',\n\t\t\t\t\t\t'featured_media',\n\t\t\t\t\t\t'featured_media_src',\n\t\t\t\t\t\t'alt_text',\n\t\t\t\t\t\t'source_url',\n\t\t\t\t\t\t'meta',\n\t\t\t\t\t\t'web_stories_media_source',\n\t\t\t\t\t\t'web_stories_is_muted',\n\t\t\t\t\t\t// _web_stories_envelope will add these fields, we need them too.\n\t\t\t\t\t\t'body',\n\t\t\t\t\t\t'status',\n\t\t\t\t\t\t'headers',\n\t\t\t\t\t]\n\t\t\t\t)\n\t\t\t),\n\t\t]\n\t),\n\t'/web-stories/v1/media/?' . build_query(\n\t\t[\n\t\t\t'context' => 'view',\n\t\t\t'per_page' => 10,\n\t\t\t'_fields' => 'source_url',\n\t\t]\n\t),\n\t'/web-stories/v1/users/me/',\n\t'/web-stories/v1/taxonomies/?' . build_query(\n\t\t[\n\t\t\t'context' => 'edit',\n\t\t\t'show_ui' => 'true',\n\t\t\t'type' => $post_type_object->name,\n\t\t]\n\t),\n];\n\n$story_initial_path = \"/web-stories/v1/$stories_rest_base/{$post->ID}/?\";\n$story_query_params = [\n\t'_embed' => rawurlencode(\n\t\timplode(\n\t\t\t',',\n\t\t\t[ 'wp:lock', 'author', 'wp:publisherlogo', 'wp:term' ]\n\t\t)\n\t),\n\t'context' => 'edit',\n\t'_fields' => rawurlencode(\n\t\timplode(\n\t\t\t',',\n\t\t\t[\n\t\t\t\t'id',\n\t\t\t\t'title',\n\t\t\t\t'status',\n\t\t\t\t'slug',\n\t\t\t\t'date',\n\t\t\t\t'modified',\n\t\t\t\t'excerpt',\n\t\t\t\t'link',\n\t\t\t\t'story_poster',\n\t\t\t\t'story_data',\n\t\t\t\t'preview_link',\n\t\t\t\t'edit_link',\n\t\t\t\t'embed_post_link',\n\t\t\t\t'permalink_template',\n\t\t\t\t'style_presets',\n\t\t\t\t'password',\n\t\t\t\t'_links',\n\t\t\t\t'_embedded',\n\t\t\t]\n\t\t)\n\t),\n];\n\n/*\n * Ensure the global $post remains the same after API data is preloaded.\n * Because API preloading can call the_content and other filters, plugins\n * can unexpectedly modify $post.\n */\n$backup_global_post = $post;\n\nif ( empty( $_GET['web-stories-demo'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended\n\t$preload_paths[] = $story_initial_path . build_query( $story_query_params );\n} else {\n\t$story_query_params['web_stories_demo'] = 'true';\n\n\t$story_path = $story_initial_path . build_query( $story_query_params );\n\t$story_data = rest_preload_api_request( [], $story_path );\n\t$initial_edits['story'] = ! empty( $story_data[ $story_path ]['body'] ) ? $story_data[ $story_path ]['body'] : [];\n}\n\n/**\n * Preload common data by specifying an array of REST API paths that will be preloaded.\n *\n * Filters the array of paths that will be preloaded.\n *\n * @param string[] $preload_paths Array of paths to preload.\n * @param WP_Post $post Post being edited.\n */\n$preload_paths = apply_filters( 'web_stories_editor_preload_paths', $preload_paths, $post );\n\n$preload_data = array_reduce(\n\t$preload_paths,\n\t'\\Google\\Web_Stories\\rest_preload_api_request',\n\t[]\n);\n\n// Restore the global $post as it was before API preloading.\n$post = $backup_global_post; // phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited\n\n// In order to duplicate classic meta box behaviour, we need to run the classic meta box actions.\nrequire_once ABSPATH . 'wp-admin/includes/meta-boxes.php';\nregister_and_do_post_meta_boxes( $post );\n\n$editor_settings = Services::get( 'editor' )->get_editor_settings();\n\nwp_add_inline_script(\n\t'wp-api-fetch',\n\tsprintf( 'wp.apiFetch.use( wp.apiFetch.createPreloadingMiddleware( %s ) );', wp_json_encode( $preload_data ) ),\n\t'after'\n);\n\n$init_script = <<<'JS'\n\twp.domReady( function() {\n\t webStories.initializeStoryEditor( 'web-stories-editor', %s, %s );\n\t} );\nJS;\n\n$script = sprintf( $init_script, wp_json_encode( $editor_settings ), wp_json_encode( $initial_edits ) );\n\nwp_add_inline_script( Editor::SCRIPT_HANDLE, $script );\n\nrequire_once ABSPATH . 'wp-admin/admin-header.php';\n\n// TODO: Use custom version of the_block_editor_meta_boxes() without the block editor specifics?\n?>\n\n
\n\t

\n\t
\n\t\t

\n\t
\n\n\t
\n\t\t\n\t
\n\n\t\n\t
\n\t\t

\n\t\t
\n\t\t\t

\n\t\t
\n\t
\n
\n" }, { "path": "includes/templates/admin/experiments.php", "content": "\n\t
\n\t\t

\n\t\t\n\t\t
\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t
\n\t
\nload_from_post( $current_post );\n\t\t\t$renderer = new Image( $story );\n\t\t\techo $renderer->render(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n\t\t} else {\n\t\t\tget_template_part( 'embed', 'content' );\n\t\t}\n\tendwhile;\nelse :\n\tget_template_part( 'embed', '404' );\nendif;\n\nget_footer( 'embed' );\n" }, { "path": "includes/templates/frontend/single-web-story.php", "content": "ID\n\t\t)\n\t) {\n\t\t$rev_id = absint( sanitize_text_field( (string) wp_unslash( $_GET['rev_id'] ) ) );\n\t\t$revision_post = get_post( $rev_id );\n\n\t\tif ( $revision_post instanceof WP_Post && $revision_post->post_parent === $current_post->ID ) {\n\t\t\t$current_post = $revision_post;\n\t\t}\n\t}\n\n\t$story->load_from_post( $current_post );\n\t$renderer = new HTML( $story );\n\techo $renderer->render(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped\n}\n\n// Some themes like the Sage theme override the WordPress template hierarchy in an unusual way,\n// which the Single Renderer tries to work around with filters.\n// However, that means this template potentially gets loaded twice when using such a theme, causing duplicate markup.\n// Exiting here avoids that, while still guaranteeing the output buffer to function properly.\nexit;\n" }, { "path": "jest-puppeteer.config.cjs", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Environment variables\n */\nconst {\n PUPPETEER_DEVTOOLS = false,\n PUPPETEER_HEADLESS = true,\n PUPPETEER_PRODUCT = 'chrome',\n PUPPETEER_SLOWMO = 0,\n} = process.env;\n\nmodule.exports = {\n launch: {\n devtools: PUPPETEER_DEVTOOLS === 'true',\n headless: Boolean(PUPPETEER_HEADLESS),\n slowMo: Number(PUPPETEER_SLOWMO) || 0,\n product: PUPPETEER_PRODUCT,\n args: ['--window-size=1600,1000'], // Same as in percy.config.yml.\n },\n exitOnPageError: false,\n};\n" }, { "path": "jsconfig.json", "content": "{\n \"compilerOptions\": {\n \"baseUrl\": \".\",\n \"paths\": {\n \"@googleforcreators/*\": [\"./packages/*/src\"],\n \"@web-stories-wp/*\": [\"./packages/*/src\"]\n }\n },\n \"exclude\": [\n \"dist\",\n \"dist-module\",\n \"node_modules\",\n \"packages/e2e-tests/src/plugins\",\n \"vendor\"\n ]\n}\n" }, { "path": "karma-dashboard.config.cjs", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use strict';\n\n/**\n * External dependencies\n */\nconst { readFileSync, existsSync } = require('fs');\n\n/**\n * Internal dependencies\n */\nconst getWebpackConfig = require('./webpack.config.test.cjs');\n\nmodule.exports = function (config) {\n let specsToRetry;\n if (\n config.retryFailed &&\n existsSync('build/karma-dashboard-failed-tests.txt')\n ) {\n // Loads names of failed specs and prepares them for use in a regex.\n specsToRetry = readFileSync(\n 'build/karma-dashboard-failed-tests.txt',\n 'utf-8'\n )\n .replace(/\\s+$/g, '')\n .replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n .replace(/-/g, '\\\\x2d')\n .split('\\n')\n .join('|');\n }\n\n config.set({\n plugins: [\n 'karma-chrome-launcher',\n 'karma-jasmine',\n 'karma-sourcemap-loader',\n 'karma-webpack',\n 'karma-coverage-istanbul-reporter',\n require('@web-stories-wp/karma-puppeteer-launcher'),\n require('@web-stories-wp/karma-puppeteer-client'),\n require('@web-stories-wp/karma-failed-tests-reporter'),\n ],\n\n // Frameworks to use.\n // Available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n frameworks: [\n 'jasmine',\n '@web-stories-wp/karma-puppeteer-client',\n 'webpack',\n ],\n\n // list of files / patterns to load in the browser\n files: [\n { pattern: 'packages/dashboard/src/**/karma/**/*.js', watched: false },\n { pattern: 'packages/karma-fixture/src/init.js', watched: false },\n {\n pattern: '__static__/**/*',\n watched: false,\n included: false,\n served: true,\n nocache: false,\n },\n 'node_modules/axe-core/axe.js',\n ],\n\n // list of files / patterns to exclude\n exclude: ['**/test/**/*.js', '**/*.test.js'],\n\n // preprocess matching files before serving them to the browser\n // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor\n preprocessors: {\n 'packages/dashboard/src/**/karma/**/*.js': ['webpack', 'sourcemap'],\n },\n\n proxies: {\n '/__static__/': '/base/__static__/',\n },\n\n webpack: getWebpackConfig('web-stories-dashboard', config),\n\n webpackMiddleware: {\n // webpack-dev-middleware configuration\n // i. e.\n stats: 'errors-only',\n },\n\n webpackServer: {\n noInfo: true,\n },\n\n // test results reporter to use\n // possible values: 'dots', 'progress'\n // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n reporters: [\n 'dots',\n '@web-stories-wp/karma-failed-tests-reporter',\n config.coverage && 'coverage-istanbul',\n ].filter(Boolean),\n\n // web server port\n port: 9876,\n\n // enable / disable colors in the output (reporters and logs)\n colors: true,\n\n // level of logging\n // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG\n logLevel: config.LOG_INFO,\n\n // enable / disable watching file and executing tests whenever any file changes\n autoWatch: true,\n\n // start these browsers\n // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher\n browsers: ['karma-puppeteer-launcher'], // @web-stories-wp/karma-puppeteer-launcher package\n\n puppeteerLauncher: {\n puppeteer: {\n headless: Boolean(config.headless),\n slowMo: config.slowMo || 0,\n devtools: config.devtools || false,\n snapshots: config.snapshots || false,\n defaultViewport: getViewport(config.viewport),\n },\n },\n client: {\n args: [\n specsToRetry && '--grep',\n specsToRetry && `/${specsToRetry}/`,\n ].filter(Boolean),\n jasmine: {\n timeoutInterval: 20000,\n },\n useIframe: false,\n runInParent: true,\n },\n\n coverageIstanbulReporter: {\n dir: 'build/logs/karma-coverage/dashboard',\n reports: ['text-summary', 'lcovonly'],\n },\n\n failedTestsReporter: {\n outputFile: 'build/karma-dashboard-failed-tests.txt',\n },\n\n // Continuous Integration mode\n // if true, Karma captures browsers, runs the tests and exits\n singleRun: false,\n\n // Concurrency level\n // how many browsers should be started simultaneously\n concurrency: Infinity,\n\n // Allow not having any tests\n failOnEmptyTestSuite: false,\n\n // Prevent duplicate logging to console\n browserConsoleLogOptions: {\n terminal: false,\n },\n\n // Bump browserNoActivityTimeout to 100s to prevent Github Actions timeout\n browserNoActivityTimeout: 100000,\n\n // Wait a bit longer for browser to reconnect.\n browserDisconnectTimeout: 10000,\n\n // Custom context file.\n customClientContextFile:\n 'packages/karma-fixture/src/client_with_context.html',\n });\n};\n\n/**\n * Returns a viewport object for a given flag.\n *\n * The following viewports are supported:\n * - default: no special viewport is used.\n * - 1600:1000: empirical laptop size. Also used for screenshots.\n *\n * A custom W:H viewport is intentionally not supported to reduce number of\n * test variations.\n *\n * Todo: Support the viewport sizes from Figma:\n * - 1920:1080: the canonical desktop size.\n * - 1024:680: the canonical iPad size.\n *\n * @param {string} flag Viewport flag.\n * @return {{width: number, height: number}|null} Viewport.\n */\nfunction getViewport(flag) {\n if (!flag) {\n // @todo: switch to 1600:1000 default once Percy is fully launched.\n return null;\n }\n if (flag === '1600:1000') {\n return { width: 1600, height: 1000 };\n }\n throw new Error(`Unsupported viewport: \"${flag}\"`);\n}\n" }, { "path": "karma-story-editor.config.cjs", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use strict';\n\n/**\n * External dependencies\n */\nconst { readFileSync } = require('fs');\n\n/**\n * Internal dependencies\n */\nconst getWebpackConfig = require('./webpack.config.test.cjs');\n\nmodule.exports = function (config) {\n let specsToRetry;\n if (config.retryFailed) {\n // Loads names of failed specs and prepares them for use in a regex.\n specsToRetry = readFileSync(\n 'build/karma-story-editor-failed-tests.txt',\n 'utf-8'\n )\n .replace(/\\s+$/g, '')\n .replace(/[|\\\\{}()[\\]^$+*?.]/g, '\\\\$&')\n .replace(/-/g, '\\\\x2d')\n .split('\\n')\n .join('|');\n }\n\n let totalShards = 1;\n let shardNumber = 1;\n if (config.shard) {\n [shardNumber, totalShards] = config.shard.split('/');\n }\n const shardIndex = shardNumber - 1;\n\n const enableParallelRuns = config.shard || config.parallel;\n // Default is number of CPU cores minus 1.\n const parallelExecutors =\n config.parallel && true !== config.parallel\n ? Number(config.parallel)\n : undefined;\n\n config.set({\n plugins: [\n 'karma-chrome-launcher',\n 'karma-jasmine',\n 'karma-sourcemap-loader',\n 'karma-webpack',\n 'karma-coverage-istanbul-reporter',\n 'karma-parallel',\n require('@web-stories-wp/karma-puppeteer-launcher'),\n require('@web-stories-wp/karma-puppeteer-client'),\n require('@web-stories-wp/karma-failed-tests-reporter'),\n ],\n\n // Frameworks to use.\n // Available frameworks: https://npmjs.org/browse/keyword/karma-adapter\n frameworks: [\n enableParallelRuns && 'parallel',\n 'jasmine',\n '@web-stories-wp/karma-puppeteer-client',\n 'webpack',\n ].filter(Boolean),\n\n // list of files / patterns to load in the browser\n files: [\n { pattern: 'packages/story-editor/src/**/karma/**/*.js', watched: false },\n { pattern: 'packages/karma-fixture/src/init.js', watched: false },\n {\n pattern: '__static__/**/*',\n watched: false,\n included: false,\n served: true,\n nocache: false,\n },\n 'node_modules/axe-core/axe.js',\n ],\n // list of files / patterns to exclude\n exclude: ['**/test/**/*.js', '**/*.test.js'],\n\n // preprocess matching files before serving them to the browser\n // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor\n preprocessors: {\n 'packages/story-editor/src/**/karma/**/*.js': ['webpack', 'sourcemap'],\n },\n\n proxies: {\n '/__static__/': '/base/__static__/',\n },\n\n webpack: getWebpackConfig('web-stories-editor', config),\n\n webpackMiddleware: {\n // webpack-dev-middleware configuration\n // i. e.\n stats: 'errors-only',\n },\n\n webpackServer: {\n noInfo: true,\n },\n\n // test results reporter to use\n // possible values: 'dots', 'progress'\n // available reporters: https://npmjs.org/browse/keyword/karma-reporter\n reporters: [\n 'dots',\n '@web-stories-wp/karma-failed-tests-reporter',\n config.coverage && 'coverage-istanbul',\n ].filter(Boolean),\n\n // web server port\n port: 9876,\n\n // enable / disable colors in the output (reporters and logs)\n colors: true,\n\n // level of logging\n // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG\n logLevel: config.LOG_INFO,\n\n // enable / disable watching file and executing tests whenever any file changes\n autoWatch: true,\n\n // start these browsers\n // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher\n browsers: ['karma-puppeteer-launcher'], // @web-stories-wp/karma-puppeteer-launcher package\n\n puppeteerLauncher: {\n puppeteer: {\n headless: Boolean(config.headless),\n slowMo: config.slowMo || 0,\n devtools: config.devtools || false,\n snapshots: config.snapshots || false,\n snapshotsDir: '.test_artifacts/karma_snapshots',\n defaultViewport: getViewport(config.viewport),\n args: config.headless ? undefined : ['--window-size=1600,1000'],\n },\n },\n client: {\n args: [\n specsToRetry && '--grep',\n specsToRetry && `/${specsToRetry}/`,\n ].filter(Boolean),\n jasmine: {\n timeoutInterval: 20000,\n },\n useIframe: false,\n runInParent: true,\n },\n\n coverageIstanbulReporter: {\n dir: 'build/logs/karma-coverage/story-editor',\n reports: ['text-summary', 'lcovonly'],\n },\n\n failedTestsReporter: {\n outputFile: 'build/karma-story-editor-failed-tests.txt',\n },\n\n // Continuous Integration mode\n // if true, Karma captures browsers, runs the tests and exits\n singleRun: false,\n\n // Concurrency level\n // how many browsers should be started simultaneously\n concurrency: Infinity,\n\n // Sharding configuration for CI.\n // We trick karma-parallel into using only 1 browser (parallelOptions.executors === 1)\n // while using a custom strategy that splits up the tests into multiple shards (config.executors > 1).\n // This allows us to run only a subset of the tests like so:\n // npm run test:karma:story-editor -- --headless --shard=1/3 # Run the first of 3 desired shards.\n parallelOptions: {\n shardStrategy: config.shard ? 'custom' : 'round-robin',\n // If we're using custom sharding, just spin up 1 browser,\n // but do the splitting in the custom strategy below.\n executors: config.shard ? 1 : parallelExecutors,\n // Re-implements a round-robin strategy, but with a custom shardIndex.\n // Need to use the Function constructor here so we have access to the outer shardIndex and totalShards vars,\n // because karma-parallel serializes this function.\n // eslint-disable-next-line no-new-func -- karma-test\n customShardStrategy: new Function(\n 'parallelOptions',\n `\n window.parallelDescribeCount = window.parallelDescribeCount || 0;\n window.parallelDescribeCount++;\n const shouldRunThisTest = (window.parallelDescribeCount % ${totalShards} === ${shardIndex});\n return shouldRunThisTest;\n `\n ),\n },\n\n // Allow not having any tests\n failOnEmptyTestSuite: false,\n\n // Prevent duplicate logging to console\n browserConsoleLogOptions: {\n terminal: false,\n },\n\n // When a browser crashes,try to relaunch more than just 2 times (which is the default)\n retryLimit: 5,\n\n // Bump browserNoActivityTimeout to 100s to prevent Github Actions timeout\n browserNoActivityTimeout: 100000,\n\n // Wait a bit longer for browser to reconnect.\n browserDisconnectTimeout: 10000,\n\n // Custom context file.\n customClientContextFile:\n 'packages/karma-fixture/src/client_with_context.html',\n });\n};\n\n/**\n * Returns a viewport object for a given flag.\n *\n * The following viewports are supported:\n * - default: no special viewport is used.\n * - 1600:1000: empirical laptop size. Also used for screenshots.\n *\n * A custom W:H viewport is intentionally not supported to reduce number of\n * test variations.\n *\n * Todo: Support the viewport sizes from Figma:\n * - 1920:1080: the canonical desktop size.\n * - 1024:680: the canonical iPad size.\n *\n * @param {string} flag Viewport flag.\n * @return {{width: number, height: number}|null} Viewport.\n */\nfunction getViewport(flag) {\n if (!flag) {\n // @todo: switch to 1600:1000 default once Percy is fully launched.\n return null;\n }\n if (flag === '1600:1000') {\n return { width: 1600, height: 1000 };\n }\n throw new Error(`Unsupported viewport: \"${flag}\"`);\n}\n" }, { "path": "package.json", "content": "{\n \"name\": \"web-stories-wp\",\n \"description\": \"Visual storytelling for WordPress.\",\n \"private\": true,\n \"author\": {\n \"name\": \"Google\",\n \"url\": \"https://creators.google/\"\n },\n \"license\": \"Apache-2.0\",\n \"keywords\": [\n \"amp\",\n \"stories\",\n \"storytelling\",\n \"wordpress\"\n ],\n \"homepage\": \"https://github.com/googleforcreators/web-stories-wp/\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GoogleForCreators/web-stories-wp.git\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/googleforcreators/web-stories-wp/issues\"\n },\n \"engines\": {\n \"node\": \">= 24\",\n \"npm\": \">= 10\"\n },\n \"type\": \"module\",\n \"workspaces\": {\n \"packages\": [\n \"packages/*\"\n ]\n },\n \"devDependencies\": {\n \"@ampproject/toolbox-optimizer\": \"^2.10.1\",\n \"@babel/core\": \"^7.29.0\",\n \"@babel/eslint-parser\": \"^7.28.6\",\n \"@babel/eslint-plugin\": \"^7.27.1\",\n \"@babel/preset-env\": \"^7.29.2\",\n \"@babel/preset-react\": \"^7.28.5\",\n \"@babel/preset-typescript\": \"^7.28.5\",\n \"@eslint-community/eslint-plugin-eslint-comments\": \"^4.5.0\",\n \"@googleforcreators/dashboard\": \"*\",\n \"@googleforcreators/design-system\": \"*\",\n \"@googleforcreators/fonts\": \"*\",\n \"@googleforcreators/media\": \"*\",\n \"@googleforcreators/migration\": \"*\",\n \"@googleforcreators/moveable\": \"*\",\n \"@googleforcreators/story-editor\": \"*\",\n \"@jest/types\": \"^30.2.0\",\n \"@jsdevtools/coverage-istanbul-loader\": \"^3.0.5\",\n \"@manypkg/get-packages\": \"^2.2.2\",\n \"@pmmmwh/react-refresh-webpack-plugin\": \"^0.6.1\",\n \"@prettier/plugin-xml\": \"^3.4.2\",\n \"@rollup/plugin-babel\": \"^6.0.4\",\n \"@rollup/plugin-commonjs\": \"^29.0.0\",\n \"@rollup/plugin-dynamic-import-vars\": \"^2.1.5\",\n \"@rollup/plugin-json\": \"^6.1.0\",\n \"@rollup/plugin-node-resolve\": \"^16.0.3\",\n \"@rollup/plugin-terser\": \"^1.0.0\",\n \"@rollup/plugin-url\": \"^8.0.2\",\n \"@storybook/addon-a11y\": \"^9.1.10\",\n \"@storybook/addon-docs\": \"^9.1.10\",\n \"@storybook/addon-links\": \"^9.1.10\",\n \"@storybook/addon-webpack5-compiler-babel\": \"^3.0.6\",\n \"@storybook/csf\": \"^0.1.13\",\n \"@storybook/react-webpack5\": \"^9.1.10\",\n \"@stylelint/postcss-css-in-js\": \"^0.38.0\",\n \"@svgr/rollup\": \"^8.0.1\",\n \"@svgr/webpack\": \"^8.0.1\",\n \"@testing-library/dom\": \"^10.4.1\",\n \"@testing-library/jest-dom\": \"^6.9.1\",\n \"@testing-library/react\": \"^12.1.5\",\n \"@testing-library/react-hooks\": \"^8.0.1\",\n \"@testing-library/user-event\": \"^14.6.1\",\n \"@types/jest\": \"^29.5.14\",\n \"@types/jsdom\": \"^27.0.0\",\n \"@types/node\": \"^24.7.1\",\n \"@types/styled-components\": \"^5.1.26\",\n \"@types/uuid\": \"^10.0.0\",\n \"@typescript-eslint/eslint-plugin\": \"^8.58.0\",\n \"@typescript-eslint/parser\": \"^8.58.0\",\n \"@web-stories-wp/e2e-tests\": \"*\",\n \"@web-stories-wp/eslint-import-resolver\": \"*\",\n \"@web-stories-wp/jest-amp\": \"*\",\n \"@web-stories-wp/jest-resolver\": \"*\",\n \"@web-stories-wp/karma-failed-tests-reporter\": \"*\",\n \"@web-stories-wp/karma-puppeteer-client\": \"*\",\n \"@web-stories-wp/karma-puppeteer-launcher\": \"*\",\n \"@wordpress/babel-plugin-import-jsx-pragma\": \"^5.43.0\",\n \"@wordpress/dependency-extraction-webpack-plugin\": \"^6.43.0\",\n \"@wordpress/eslint-plugin\": \"^24.5.0\",\n \"ajv-cli\": \"^5.0.0\",\n \"ajv-formats\": \"^3.0.1\",\n \"babel-jest\": \"^30.3.0\",\n \"babel-loader\": \"^10.1.1\",\n \"babel-plugin-react-compiler\": \"19.1.0-rc.3\",\n \"babel-plugin-styled-components\": \"^2.1.4\",\n \"babel-plugin-transform-react-remove-prop-types\": \"^0.4.24\",\n \"browserslist\": \"^4.27.0\",\n \"circular-dependency-plugin\": \"^5.2.2\",\n \"core-js\": \"^3.46.0\",\n \"cross-env\": \"^10.1.0\",\n \"css-loader\": \"^7.1.2\",\n \"css-minimizer-webpack-plugin\": \"^8.0.0\",\n \"cssnano\": \"^7.1.2\",\n \"eslint\": \"^8.57.1\",\n \"eslint-config-prettier\": \"^10.1.8\",\n \"eslint-plugin-header\": \"^3.1.0\",\n \"eslint-plugin-import\": \"^2.32.0\",\n \"eslint-plugin-jasmine\": \"^4.2.2\",\n \"eslint-plugin-jest\": \"^29.0.1\",\n \"eslint-plugin-jest-dom\": \"^5.5.0\",\n \"eslint-plugin-jest-extended\": \"^3.0.1\",\n \"eslint-plugin-jsdoc\": \"^61.0.1\",\n \"eslint-plugin-jsx-a11y\": \"^6.10.2\",\n \"eslint-plugin-markdown\": \"^5.1.0\",\n \"eslint-plugin-n\": \"^17.23.1\",\n \"eslint-plugin-oxlint\": \"^1.48.0\",\n \"eslint-plugin-prettier\": \"^5.5.4\",\n \"eslint-plugin-react\": \"^7.37.5\",\n \"eslint-plugin-react-hooks\": \"^7.0.1\",\n \"eslint-plugin-security\": \"^3.0.1\",\n \"eslint-plugin-styled-components-a11y\": \"^2.2.1\",\n \"eslint-plugin-testing-library\": \"^7.16.0\",\n \"html-webpack-plugin\": \"^5.6.6\",\n \"husky\": \"^9.1.7\",\n \"jest\": \"^29.7.0\",\n \"jest-axe\": \"^9.0.0\",\n \"jest-canvas-mock\": \"^2.5.2\",\n \"jest-environment-jsdom\": \"^30.3.0\",\n \"jest-extended\": \"^6.0.0\",\n \"jest-fetch-mock\": \"^3.0.3\",\n \"jest-matcher-deep-close-to\": \"^3.0.2\",\n \"jest-silent-reporter\": \"^0.6.0\",\n \"jest-styled-components\": \"^7.2.0\",\n \"karma\": \"^6.4.4\",\n \"karma-chrome-launcher\": \"^3.2.0\",\n \"karma-coverage-istanbul-reporter\": \"^3.0.3\",\n \"karma-jasmine\": \"^5.1.0\",\n \"karma-parallel\": \"^0.3.1\",\n \"karma-sourcemap-loader\": \"^0.4.0\",\n \"karma-webpack\": \"^5.0.1\",\n \"lint-staged\": \"^16.2.3\",\n \"markdownlint-cli\": \"^0.45.0\",\n \"mini-css-extract-plugin\": \"^2.9.4\",\n \"mockdate\": \"^3.0.5\",\n \"npm-package-json-lint\": \"^9.0.0\",\n \"npm-run-all\": \"^4.1.5\",\n \"oxlint\": \"^1.48.0\",\n \"patch-package\": \"^8.0.1\",\n \"postcss-jsx\": \"^0.36.4\",\n \"postcss-styled-syntax\": \"^0.7.1\",\n \"postcss-syntax\": \"^0.36.2\",\n \"prettier\": \"^3.8.1\",\n \"puppeteer\": \"^24.37.3\",\n \"react-compiler-runtime\": \"19.1.0-rc.3\",\n \"react-refresh\": \"^0.18.0\",\n \"react-test-renderer\": \"^17.0.2\",\n \"rollup\": \"^2.80.0\",\n \"rollup-plugin-copy\": \"^3.5.0\",\n \"rollup-plugin-delete\": \"^3.0.2\",\n \"rollup-plugin-web-worker-loader\": \"^1.7.0\",\n \"rtlcss-webpack-plugin\": \"^4.0.7\",\n \"source-map-loader\": \"^5.0.0\",\n \"storybook\": \"^9.1.20\",\n \"styled-components\": \"^5.3.11\",\n \"stylelint\": \"^16.25.0\",\n \"stylelint-config-recommended\": \"^16.0.0\",\n \"stylelint-prettier\": \"^5.0.3\",\n \"stylis-plugin-rtl\": \"^1.0.0\",\n \"terser-webpack-plugin\": \"^5.4.0\",\n \"typescript\": \"^5.9.3\",\n \"webpack\": \"^5.99.7\",\n \"webpack-bundle-analyzer\": \"^5.3.0\",\n \"webpack-cli\": \"^6.0.1\",\n \"webpack-dev-server\": \"^5.2.3\",\n \"webpackbar\": \"^7.0.0\",\n \"worker-loader\": \"^3.0.8\"\n },\n \"overrides\": {\n \"@axe-core/puppeteer\": {\n \"puppeteer\": \"$puppeteer\"\n },\n \"@typescript-eslint/parser\": \"$@typescript-eslint/parser\",\n \"@typescript-eslint/eslint-plugin\": \"$@typescript-eslint/eslint-plugin\",\n \"braces\": \"3.0.3\",\n \"date-fns\": \"^2.30.0\",\n \"eslint-plugin-jsdoc\": \"$eslint-plugin-jsdoc\",\n \"eslint-plugin-prettier\": \"$eslint-plugin-prettier\",\n \"fast-json-patch\": \"3.1.1\",\n \"terser\": \"5.37.0\",\n \"ua-parser-js\": \"0.7.38\",\n \"postcss\": \"8.5.1\",\n \"webpack\": \"$webpack\",\n \"storybook\": \"$storybook\"\n },\n \"scripts\": {\n \"build\": \"npm-run-all build:*\",\n \"prebuild:js\": \"rm -rf assets/css/* assets/js/*\",\n \"build:js\": \"cross-env NODE_ENV=production webpack --config webpack.config.cjs\",\n \"postbuild:js\": \"rm -rf assets/js/web-stories-list-styles* assets/js/web-stories-theme-style*\",\n \"predev\": \"rm -rf assets/css/* assets/js/*\",\n \"dev\": \"webpack --config webpack.config.cjs --watch\",\n \"postdev\": \"rm -rf assets/js/web-stories-list-styles* assets/js/web-stories-theme-style*\",\n \"preserve\": \"rm -rf assets/css/* assets/js/*\",\n \"serve\": \"webpack serve --config webpack.config.cjs\",\n \"postserve\": \"rm -rf assets/js/web-stories-list-styles* assets/js/web-stories-theme-style*\",\n \"env:start\": \"bash ./bin/local-env/start.sh\",\n \"env:stop\": \"bash ./bin/local-env/stop.sh\",\n \"env:reset-site\": \"bash ./bin/local-env/install-wordpress.sh --reset-site\",\n \"format\": \"npm-run-all --parallel format:*\",\n \"format:css\": \"npm run lint:css:css:fix\",\n \"format:css-in-js\": \"npm run lint:css:js:fix\",\n \"format:js\": \"npm run lint:js:fix\",\n \"format:md\": \"prettier --write '**/*.md'\",\n \"format:php\": \"npm run lint:php:fix\",\n \"format:xml\": \"prettier --write '**/*.{xml,xml.dist}'\",\n \"format:yml\": \"prettier --write '**/*.yml'\",\n \"lint\": \"npm-run-all --parallel lint:*\",\n \"lint:css\": \"npm-run-all --parallel --continue-on-error lint:css:*\",\n \"lint:css:js\": \"stylelint \\\"**/*.js\\\"\",\n \"lint:css:js:fix\": \"stylelint \\\"**/*.js\\\" --fix\",\n \"lint:css:css\": \"stylelint \\\"**/*.css\\\"\",\n \"lint:css:css:fix\": \"stylelint \\\"**/*.css\\\" --fix\",\n \"lint:js\": \"oxlint && eslint .\",\n \"lint:js:fix\": \"oxlint --fix && eslint --fix .\",\n \"lint:js:report\": \"oxlint -c=.oxlintrc.json --tsconfig=tsconfig.json --ignore-pattern=@types --react-perf-plugin && eslint --output-file build/lint-js-report.json --format json .\",\n \"lint:package-json\": \"npmPkgJsonLint .\",\n \"lint:php\": \"composer phpcs\",\n \"lint:php:fix\": \"composer phpcbf\",\n \"lint:phpstan\": \"composer phpstan\",\n \"lint:phpmd\": \"composer phpmd\",\n \"lint:md\": \"markdownlint .\",\n \"postinstall\": \"patch-package\",\n \"storybook\": \"storybook dev --quiet\",\n \"storybook:build\": \"storybook build -c .storybook -o build/storybook --quiet\",\n \"test\": \"npm-run-all --parallel test:*\",\n \"pretest:js\": \"if [ -z $AMP_VALIDATOR_FILE ]; then curl --output-dir $TMPDIR -O -f https://cdn.ampproject.org/v0/validator_wasm.js; fi\",\n \"test:js\": \"jest --config=tests/js/jest.config.js\",\n \"test:js:coverage\": \"npm run test:js -- --collectCoverage; open build/logs/lcov-report/index.html\",\n \"test:js:debug\": \"node --inspect-brk node_modules/.bin/jest --config=tests/js/jest.config.js\",\n \"test:js:help\": \"npm run test:js -- --help\",\n \"test:js:watch\": \"npm run test:js -- --watch\",\n \"test:karma\": \"npm-run-all --parallel test:karma:*\",\n \"pretest:karma:story-editor\": \"rm -rf build/karma-story-editor-failed-tests.txt\",\n \"test:karma:story-editor\": \"karma start karma-story-editor.config.cjs --single-run\",\n \"test:karma:story-editor:retry-failed\": \"karma start karma-story-editor.config.cjs --single-run --retry-failed\",\n \"test:karma:story-editor:watch\": \"karma start karma-story-editor.config.cjs\",\n \"pretest:karma:dashboard\": \"rm -rf build/karma-dashboard-failed-tests.txt\",\n \"test:karma:dashboard\": \"karma start karma-dashboard.config.cjs --single-run\",\n \"test:karma:dashboard:retry-failed\": \"karma start karma-dashboard.config.cjs --single-run --retry-failed\",\n \"test:karma:dashboard:watch\": \"karma start karma-dashboard.config.cjs --debug\",\n \"test:php\": \"npm-run-all test:php:*\",\n \"test:php:unit\": \"vendor/bin/phpunit\",\n \"test:php:integration\": \"npm-run-all test:php:integration:*\",\n \"test:php:integration:single\": \"vendor/bin/phpunit -c phpunit-integration.xml.dist\",\n \"test:php:integration:multisite\": \"vendor/bin/phpunit -c phpunit-integration-multisite.xml.dist\",\n \"test:php:unit:help\": \"npm run test:php -- --help\",\n \"pretest:e2e\": \"if [ -z $AMP_VALIDATOR_FILE ]; then curl --output-dir $TMPDIR -O -f https://cdn.ampproject.org/v0/validator_wasm.js; fi\",\n \"test:e2e\": \"cross-env JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs jest --runInBand --config=packages/e2e-tests/src/jest.config.js\",\n \"test:e2e:help\": \"npm run test:e2e -- --help\",\n \"test:e2e:percy\": \"percy exec --quiet --parallel --config=percy.config.yml -- npm run test:e2e\",\n \"test:e2e:watch\": \"npm run test:e2e -- --watch\",\n \"test:e2e:interactive\": \"cross-env PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test:e2e\",\n \"test:e2e:debug\": \"cross-env PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true JEST_PUPPETEER_CONFIG=jest-puppeteer.config.cjs node --inspect-brk node_modules/.bin/jest --runInBand --config=packages/e2e-tests/src/jest.config.js\",\n \"test:e2e:firefox\": \"cross-env PUPPETEER_PRODUCT=firefox npm run test:e2e\",\n \"test:e2e:firefox:interactive\": \"cross-env PUPPETEER_PRODUCT=firefox npm run test:e2e:interactive\",\n \"test:e2e:firefox:debug\": \"cross-env PUPPETEER_PRODUCT=firefox PUPPETEER_HEADLESS=false PUPPETEER_DEVTOOLS=true node --inspect-brk node_modules/.bin/jest --runInBand --config=packages/e2e-tests/src/jest.config.js\",\n \"test:schema\": \"npm-run-all --parallel test:schema:*\",\n \"test:schema:templates\": \"ls -1 packages/templates/src/raw/*/template.json | xargs -I% npx ajv validate -s bin/schemas/story.json -d % -c ajv-formats\",\n \"test:schema:text-sets\": \"ls -1 packages/text-sets/src/raw/*.json | xargs -I% npx ajv validate -s bin/schemas/story.json -d % -c ajv-formats\",\n \"test:schema:ftue-story\": \"npx ajv validate -s bin/schemas/story.json -d includes/data/stories/demo.json -c ajv-formats\",\n \"percy\": \"percy snapshot --config=percy.config.yml .test_artifacts/karma_snapshots/\",\n \"local-registry:start\": \"bash ./bin/setup-local-npm-registry.sh\",\n \"local-registry:stop\": \"bash ./bin/stop-local-npm-registry.sh\",\n \"workflow:assets-version\": \"commander assets-version\",\n \"workflow:version\": \"commander version\",\n \"workflow:build-plugin\": \"commander build-plugin\",\n \"workflow:bundle-packages\": \"npm-run-all --parallel workflow:bundle-packages:*\",\n \"workflow:bundle-packages:code\": \"rollup -c\",\n \"workflow:bundle-packages:types\": \"tsc --build\",\n \"workflow:fonts\": \"npm run update-fonts --workspace packages/fonts\",\n \"postworkflow:fonts\": \"npx prettier --write packages/fonts/src/fonts.json; cp packages/fonts/src/fonts.json includes/data/fonts/fonts.json\",\n \"workflow:render-text-sets\": \"npm run render-text-sets --workspace packages/text-sets\",\n \"workflow:render-template-posters\": \"npm run render-template-posters --workspace=packages/templates\",\n \"preworkflow:migrate\": \"[ -f packages/migration/scripts/module.js ] || npx rollup --config packages/migration/rollup.config.js\",\n \"workflow:migrate\": \"npm-run-all --parallel workflow:migrate:*\",\n \"workflow:migrate:text-sets\": \"npm run migration --workspace packages/migration packages/text-sets/src/raw\",\n \"postworkflow:migrate:text-sets\": \"npx prettier --write packages/text-sets/src/raw\",\n \"workflow:migrate:templates\": \"npm run migration --workspace packages/migration packages/templates/src/raw\",\n \"postworkflow:migrate:templates\": \"npx prettier --write packages/templates/src/raw\",\n \"workflow:migrate:ftue-story\": \"npm run migration --workspace packages/migration includes/data/stories\",\n \"postworkflow:migrate:ftue-story\": \"npx prettier --write includes/data/stories\",\n \"workflow:normalize-path\": \"commander normalize-path\"\n },\n \"lint-staged\": {\n \"*.(cjs|js|ts|tsx)\": [\n \"eslint --fix\"\n ],\n \"*.(js|tsx)\": [\n \"stylelint --fix --allow-empty-input\"\n ],\n \"*.json\": [\n \"prettier --write\"\n ],\n \"*.css\": \"stylelint --fix --allow-empty-input\",\n \"*.md\": [\n \"eslint --fix\",\n \"markdownlint -f\"\n ],\n \"*.php\": \"npm run lint:php:fix\",\n \"*.(xml|xml.dist)\": \"prettier --write\",\n \"*.yml\": \"prettier --write\"\n },\n \"changelog\": {\n \"labels\": {\n \"Type: Enhancement\": \"🚀 Features\",\n \"Type: Bug\": \"🐛 Bug Fixes\",\n \"Type: Infrastructure\": \"🧰 Maintenance\",\n \"Type: Documentation\": \":memo: Documentation\"\n },\n \"ignoreCommitters\": [\n \"dependabot\",\n \"github-actions\"\n ]\n }\n}\n" }, { "path": "packages/activation-notice/README.md", "content": "# Activation Notice\n\nWordPress plugin activation notice.\n" }, { "path": "packages/activation-notice/package.json", "content": "{\n \"name\": \"@web-stories-wp/activation-notice\",\n \"description\": \"Web Stories for WordPress plugin activation notice\",\n \"private\": true,\n \"author\": {\n \"name\": \"Google\",\n \"url\": \"https://creators.google/\"\n },\n \"license\": \"Apache-2.0\",\n \"keywords\": [\n \"web stories\",\n \"wordpress\"\n ],\n \"homepage\": \"https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/activation-notice/README.md\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GoogleForCreators/web-stories-wp.git\",\n \"directory\": \"packages/activation-notice\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/googleforcreators/web-stories-wp/issues\"\n },\n \"engines\": {\n \"node\": \">= 20 || >= 22 || >= 24\",\n \"npm\": \">= 7.3\"\n },\n \"main\": \"./src/index.tsx\",\n \"types\": \"dist-types/index.d.ts\",\n \"dependencies\": {\n \"@emotion/is-prop-valid\": \"^1.4.0\",\n \"@googleforcreators/tracking\": \"*\",\n \"@wordpress/element\": \"^6.32.0\",\n \"@wordpress/i18n\": \"^6.16.0\",\n \"flagged\": \"^2.0.10\",\n \"polished\": \"^4.3.1\",\n \"styled-components\": \"^6.0.7\",\n \"stylis-plugin-rtl\": \"^2.1.1\"\n },\n \"devDependencies\": {\n \"@testing-library/react\": \"^16.3.0\"\n }\n}\n" }, { "path": "packages/activation-notice/src/app/components/dismiss.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Renders a Dismiss button as required/used by WordPress.\n *\n * Does not actually *render* the button itself, but emits an event so that\n * WordPress detects the notice and registers a click handler.\n *\n * @return Rendered component.\n */\nfunction Dismiss() {\n useEffect(() => {\n document.dispatchEvent(new Event('wp-updates-notice-added'));\n }, []);\n\n return null;\n}\n\nexport default Dismiss;\n" }, { "path": "packages/activation-notice/src/app/components/image.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\ninterface ImgProps {\n $rotationAngle: string;\n}\n\ninterface ImageProps {\n name: string;\n name2x: string;\n width: number;\n height: number;\n}\n\nconst Img = styled.img`\n transform: rotate(${(props) => props.$rotationAngle});\n margin-top: 60px;\n`;\n\nfunction Image({ name, name2x, ...props }: ImageProps) {\n const { cdnURL, isRTL } = useConfig();\n return (\n \n );\n}\n\nexport default Image;\n" }, { "path": "packages/activation-notice/src/app/components/link.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\nconst Link = styled.a`\n font-family: ${({ theme }) => theme.fonts.body.family};\n font-size: ${({ theme }) => theme.fonts.body.size};\n line-height: ${({ theme }) => theme.fonts.body.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.body.fontWeight};\n color: ${({ theme }) => theme.colors.link.fg};\n text-decoration: none;\n cursor: pointer;\n display: block;\n &:focus,\n &:hover {\n color: ${({ theme }) => theme.colors.link.hover.fg};\n }\n`;\n\nexport default Link;\n" }, { "path": "packages/activation-notice/src/app/components/messageContent.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { rgba } from 'polished';\n\n/**\n * Internal dependencies\n */\nimport SuccessMessage from './successMessage';\nimport Dismiss from './dismiss';\nimport Step1 from './step1';\nimport Step2 from './step2';\nimport Step3 from './step3';\n\nconst Wrapper = styled.div`\n font-family: ${({ theme }) => theme.fonts.body.family};\n font-size: ${({ theme }) => theme.fonts.body.size};\n line-height: ${({ theme }) => theme.fonts.body.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.body.fontWeight};\n color: ${({ theme }) => theme.colors.primary};\n\n background: ${({ theme }) => `linear-gradient(\n 115.54deg,\n ${rgba(theme.colors.bg.start, 0.2)} 9.27%,\n ${rgba(theme.colors.bg.end, 0.2)} 47.82%,\n ${rgba(theme.colors.bg.end, 0)} 66.64%\n ),\n linear-gradient(\n 158.59deg,\n ${rgba(theme.colors.bg.start, 0.3)} 13.24%,\n ${rgba(theme.colors.bg.end, 0.3)} 86.01%\n ),\n linear-gradient(\n 115.54deg,\n ${rgba(theme.colors.bg.start, 0.2)} 9.27%,\n ${rgba(theme.colors.bg.end, 0.2)} 47.82%,\n ${rgba(theme.colors.bg.end, 0)} 66.64%\n ),\n linear-gradient(70.23deg, #010218 -28.03%, #1b0418 95.56%)`};\n\n box-sizing: border-box;\n display: flex;\n overflow: hidden;\n padding: 0 30px 0 45px;\n justify-content: center;\n\n @media ${({ theme }) => theme.breakpoint.tabletSmall} {\n max-height: 245px;\n }\n\n @media ${({ theme }) => theme.breakpoint.tabletLarge} {\n justify-content: space-around;\n }\n`;\n\nfunction MessageContent() {\n return (\n \n \n \n \n \n \n \n );\n}\n\nexport default MessageContent;\n" }, { "path": "packages/activation-notice/src/app/components/number.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\nconst Number = styled.span`\n font-family: ${({ theme }) => theme.fonts.stepNumber.family};\n font-size: ${({ theme }) => theme.fonts.stepNumber.size};\n line-height: ${({ theme }) => theme.fonts.stepNumber.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.stepNumber.fontWeight};\n color: ${({ theme }) => theme.colors.tertiary};\n`;\n\nexport default Number;\n" }, { "path": "packages/activation-notice/src/app/components/paragraph.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\ninterface ParagraphProps {\n $secondary?: boolean;\n}\n\nconst Paragraph = styled.p`\n font-family: ${({ theme }) => theme.fonts.body.family};\n font-size: ${({ theme }) => theme.fonts.body.size};\n line-height: ${({ theme }) => theme.fonts.body.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.body.fontWeight};\n color: ${({ theme, $secondary }) =>\n $secondary ? theme.colors.secondary : theme.colors.primary};\n margin: 0 !important;\n`;\n\nexport default Paragraph;\n" }, { "path": "packages/activation-notice/src/app/components/step1.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { trackClick } from '@googleforcreators/tracking';\nimport type { MouseEventHandler, MouseEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { createInterpolateElement, useCallback } from '@wordpress/element';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\nimport Paragraph from './paragraph';\nimport Link from './link';\nimport Number from './number';\nimport Image from './image';\n\nconst Wrapper = styled.div`\n display: none;\n min-width: 300px;\n justify-content: center;\n\n @media ${({ theme }) => theme.breakpoint.tabletSmall} {\n display: flex;\n }\n`;\n\nconst ParagraphWrapper = styled.div`\n align-self: flex-start;\n margin: 20px 0 0 70px;\n text-align: right;\n min-width: 100px;\n\n @media ${({ theme }) => theme.breakpoint.desktop} {\n margin-left: 30px;\n }\n`;\n\nfunction Step1() {\n const { demoStoryURL } = useConfig();\n\n const onClick: MouseEventHandler = useCallback(\n (evt: MouseEvent) => {\n void trackClick(evt, 'open_demo_story');\n },\n []\n );\n\n // createInterpolateElement doesn't support br tags.\n const translatedString = createInterpolateElement(\n __('Read the Get Started story', 'web-stories'),\n {\n a: ,\n }\n );\n\n return (\n \n \n \n \n \n \n {\n /* translators: Number of the step displayed in plugin activation message. */\n _x('1', 'Step number', 'web-stories')\n }\n \n {translatedString}\n \n \n );\n}\n\nexport default Step1;\n" }, { "path": "packages/activation-notice/src/app/components/step2.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { trackClick } from '@googleforcreators/tracking';\nimport type { MouseEventHandler, MouseEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { createInterpolateElement, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\nimport Paragraph from './paragraph';\nimport Link from './link';\nimport Number from './number';\nimport Image from './image';\n\nconst Wrapper = styled.div`\n display: none;\n margin-left: 20px;\n justify-content: center;\n\n @media ${({ theme }) => theme.breakpoint.tabletLarge} {\n display: flex;\n }\n`;\n\nconst ParagraphWrapper = styled.div`\n align-self: flex-start;\n margin: 20px 0 0 -50px;\n min-width: 100px;\n`;\n\nfunction Step2() {\n const { dashboardURL } = useConfig();\n\n const onClick: MouseEventHandler = useCallback(\n (evt: MouseEvent) => {\n void trackClick(evt, 'open_dashboard');\n },\n []\n );\n\n // createInterpolateElement doesn't support br tags.\n const translatedString = createInterpolateElement(\n __('Head to the Dashboard', 'web-stories'),\n {\n a: ,\n }\n );\n\n return (\n \n \n \n \n \n \n {\n /* translators: Number of the step displayed in plugin activation message. */\n _x('2', 'Step number', 'web-stories')\n }\n \n {translatedString}\n \n \n );\n}\n\nexport default Step2;\n" }, { "path": "packages/activation-notice/src/app/components/step3.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { trackClick } from '@googleforcreators/tracking';\n\n/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { useCallback, createInterpolateElement } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { MouseEventHandler, MouseEvent } from 'react';\nimport { useConfig } from '../config';\n\nimport Paragraph from './paragraph';\nimport Link from './link';\nimport Number from './number';\nimport Image from './image';\n\nconst Wrapper = styled.div`\n display: none;\n margin-left: 30px;\n justify-content: center;\n\n @media ${({ theme }) => theme.breakpoint.desktop} {\n display: flex;\n }\n`;\n\nconst ParagraphWrapper = styled.div`\n align-self: flex-start;\n margin: 20px 0 0 -50px;\n`;\n\nfunction Step3() {\n const { newStoryURL } = useConfig();\n\n const onClick: MouseEventHandler = useCallback(\n (event: MouseEvent) => {\n void trackClick(event, 'open_story_editor');\n },\n []\n );\n\n // createInterpolateElement doesn't support br tags.\n const translatedString = createInterpolateElement(\n __('Jump into the Editor', 'web-stories'),\n {\n a: ,\n }\n );\n\n return (\n \n \n \n \n \n \n {\n /* translators: Number of the step displayed in plugin activation message. */\n _x('3', 'Step number', 'web-stories')\n }\n \n {translatedString}\n \n \n );\n}\n\nexport default Step3;\n" }, { "path": "packages/activation-notice/src/app/components/successMessage.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { trackClick } from '@googleforcreators/tracking';\nimport type { MouseEventHandler, MouseEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\nimport Paragraph from './paragraph';\nimport SecondaryLink from './link';\n\nconst Message = styled.div`\n min-width: 260px;\n padding: 30px 0 30px;\n\n ${SecondaryLink} {\n @media ${({ theme }) => theme.breakpoint.tabletSmall} {\n display: none;\n }\n }\n`;\n\nconst Title = styled.h2`\n font-family: ${({ theme }) => theme.fonts.title.family};\n font-size: ${({ theme }) => theme.fonts.title.size};\n line-height: ${({ theme }) => theme.fonts.title.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.title.fontWeight};\n color: ${({ theme }) => theme.colors.primary};\n margin: 0 0 10px;\n`;\n\nconst PrimaryLink = styled.a`\n font-family: ${({ theme }) => theme.fonts.button.family};\n font-size: ${({ theme }) => theme.fonts.button.size};\n line-height: ${({ theme }) => theme.fonts.button.lineHeight};\n font-weight: ${({ theme }) => theme.fonts.button.fontWeight};\n background: ${({ theme }) => theme.colors.action.bg};\n color: ${({ theme }) => theme.colors.action.fg};\n padding: 5px 8px;\n cursor: pointer;\n text-decoration: none;\n border-radius: 2px;\n\n &:focus,\n &:hover {\n background: ${({ theme }) => theme.colors.action.hover.bg};\n color: ${({ theme }) => theme.colors.action.fg};\n }\n`;\n\nconst ParagraphWithSpace = styled(Paragraph)`\n margin-bottom: 15px !important;\n`;\n\nfunction SuccessMessage() {\n const { dashboardURL, demoStoryURL } = useConfig();\n\n const onClickPrimary: MouseEventHandler = useCallback(\n (evt: MouseEvent) => {\n void trackClick(evt, 'open_dashboard');\n },\n []\n );\n const onClickSecondary: MouseEventHandler = useCallback(\n (evt: MouseEvent) => {\n void trackClick(evt, 'open_demo_story');\n },\n []\n );\n\n return (\n \n \n {__(\"You're all set!\", 'web-stories')}\n <br />\n {__('Tell some stories.', 'web-stories')}\n \n \n {__('Welcome to Web Stories for WordPress.', 'web-stories')}\n \n \n \n {__('Go to Stories Dashboard', 'web-stories')}\n \n \n \n \n {__('Read the Get Started story', 'web-stories')}\n \n \n \n );\n}\n\nexport default SuccessMessage;\n" }, { "path": "packages/activation-notice/src/app/components/test/dismiss.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { renderWithTheme } from '../../../testUtils';\n\nimport Dismiss from '../dismiss';\n\ndescribe('Dismiss', () => {\n it('should render nothing', () => {\n const { container } = renderWithTheme();\n expect(container).toBeEmptyDOMElement();\n });\n});\n" }, { "path": "packages/activation-notice/src/app/components/test/step1.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithTheme } from '../../../testUtils';\n\nimport Step1 from '../step1';\nimport { ConfigProvider } from '../../config';\n\nfunction render() {\n const config = {\n demoStoryURL: 'bar',\n };\n\n return renderWithTheme(\n \n \n \n );\n}\n\ndescribe('Step 1', () => {\n it('should render', () => {\n render();\n\n expect(screen.getByText(/Get Started story/i)).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/activation-notice/src/app/components/test/step2.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithTheme } from '../../../testUtils';\n\nimport Step2 from '../step2';\nimport { ConfigProvider } from '../../config';\n\nfunction render() {\n const config = {\n dashboardURL: 'foo',\n };\n\n return renderWithTheme(\n \n \n \n );\n}\n\ndescribe('Step 2', () => {\n it('should render', () => {\n render();\n\n expect(screen.getByText(/Dashboard/i)).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/activation-notice/src/app/components/test/step3.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithTheme } from '../../../testUtils';\n\nimport Step3 from '../step3';\nimport { ConfigProvider } from '../../config';\n\nfunction render() {\n const config = {\n newStoryURL: 'foo',\n demoStoryURL: 'bar',\n };\n\n return renderWithTheme(\n \n \n \n );\n}\n\ndescribe('Step 3', () => {\n it('should render', () => {\n render();\n\n expect(screen.getByText(/Jump into/i)).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/activation-notice/src/app/components/test/successMessage.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithTheme } from '../../../testUtils';\n\nimport SuccessMessage from '../successMessage';\nimport { ConfigProvider } from '../../config';\n\nfunction render() {\n const config = {\n dashboardURL: 'foo',\n demoStoryURL: 'bar',\n };\n\n return renderWithTheme(\n \n \n \n );\n}\n\ndescribe('SuccessMessage', () => {\n it('should render', () => {\n render();\n\n expect(screen.getByText(/Tell some stories/i)).toBeInTheDocument();\n expect(screen.getByText(/Go to Stories Dashboard/i)).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/activation-notice/src/app/config/configProvider.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport Context, { type ContextState } from './context';\n\ninterface ConfigProviderProps {\n config: ContextState;\n children: ReactNode;\n}\n\nfunction ConfigProvider({ config, children }: ConfigProviderProps) {\n return {children};\n}\n\nexport default ConfigProvider;\n" }, { "path": "packages/activation-notice/src/app/config/context.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst INITIAL_STATE = {};\n\nexport interface ContextState {\n isRTL: boolean;\n cdnURL: string;\n demoStoryURL: string;\n newStoryURL: string;\n dashboardURL: string;\n}\n\nexport default createContext(INITIAL_STATE);\n" }, { "path": "packages/activation-notice/src/app/config/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as ConfigProvider } from './configProvider';\nexport { default as useConfig } from './useConfig';\n" }, { "path": "packages/activation-notice/src/app/config/useConfig.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Context, { type ContextState } from './context';\n\nfunction useConfig(): ContextState {\n return useContext(Context) as ContextState;\n}\n\nexport default useConfig;\n" }, { "path": "packages/activation-notice/src/app/index.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport isPropValid from '@emotion/is-prop-valid';\nimport { StyleSheetManager, ThemeProvider } from 'styled-components';\nimport stylisRTLPlugin from 'stylis-plugin-rtl';\nObject.defineProperty(stylisRTLPlugin, 'name', { value: 'stylisRTLPlugin' });\n\n/**\n * Internal dependencies\n */\nimport { theme, GlobalStyle } from '../theme';\nimport MessageContent from './components/messageContent';\nimport { ConfigProvider } from './config';\nimport type { ContextState } from './config/context';\n\ninterface AppProps {\n config: ContextState;\n}\n\nfunction App({ config }: AppProps) {\n const { isRTL } = config;\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default App;\n" }, { "path": "packages/activation-notice/src/index.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { FlagsProvider } from 'flagged';\nimport { initializeTracking } from '@googleforcreators/tracking';\n\n/**\n * WordPress dependencies\n */\nimport { StrictMode, createRoot } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport App from './app';\nimport type { ContextState } from './app/config/context';\n\ninterface ActivationNoticeSettings {\n publicPath: string;\n id: string;\n config: ContextState;\n flags: Record;\n}\n\ndeclare global {\n let __webpack_public_path__: string;\n\n interface Window {\n webStoriesActivationSettings: ActivationNoticeSettings;\n }\n}\n\n__webpack_public_path__ = window.webStoriesActivationSettings.publicPath;\n\n/**\n * Initializes the Web Stories dashboard screen.\n *\n * @param id ID of the root element to render the screen in.\n * @param config Story editor settings.\n * @param flags The flags for the application.\n */\nconst initialize = (\n id: string,\n config: ContextState,\n flags: Record\n) => {\n const appElement = document.getElementById(id);\n\n if (!appElement) {\n return;\n }\n\n void initializeTracking('Plugin Activation');\n\n const root = createRoot(appElement);\n\n root.render(\n \n \n \n \n \n );\n};\n\nconst initializeWithConfig = () => {\n const { id, config, flags } = window.webStoriesActivationSettings;\n initialize(id, config, flags);\n};\n\nif ('loading' === document.readyState) {\n document.addEventListener('DOMContentLoaded', initializeWithConfig);\n} else {\n initializeWithConfig();\n}\n" }, { "path": "packages/activation-notice/src/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport App from '../app';\n\nexport default {\n title: 'WordPress/Plugin Activation',\n args: {\n cdnURL: 'https://wp.stories.google/static/main/',\n demoStoryURL: 'https://example:com',\n dashboardURL: 'https://example:com',\n isRTL: false,\n },\n};\n\n// TODO (#10380): Support RTL using something like @pxblue/storybook-rtl-addon;\nexport const _default = {\n render: function Render(args) {\n return ;\n },\n};\n" }, { "path": "packages/activation-notice/src/testUtils/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as renderWithTheme } from './renderWithTheme';\n" }, { "path": "packages/activation-notice/src/testUtils/renderWithTheme.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { render } from '@testing-library/react';\nimport { ThemeProvider } from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { theme } from '../theme';\n\nconst WithThemeProvider = ({ children }) => {\n return {children};\n};\n\nconst renderWithTheme = (ui, options) =>\n render(ui, {\n wrapper: WithThemeProvider,\n ...options,\n });\n\nexport default renderWithTheme;\n" }, { "path": "packages/activation-notice/src/theme.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createGlobalStyle, ThemeContext } from 'styled-components';\nimport type { DefaultTheme } from 'styled-components';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\nexport const GlobalStyle = createGlobalStyle`\n #web-stories-plugin-activation-notice {\n padding: 0;\n border: none;\n }\n`;\n\nexport function useTheme(): DefaultTheme {\n return useContext(ThemeContext);\n}\n\nexport const theme: DefaultTheme = {\n colors: {\n bg: {\n start: '#CBACFF',\n end: '#79B3FF',\n },\n primary: 'rgba(255, 255, 255, 0.84)',\n secondary: 'rgba(255, 255, 255, 0.64)',\n tertiary: 'rgba(255, 255, 255, 0.54)',\n link: {\n fg: '#B99DEA',\n hover: {\n fg: 'rgba(255, 255, 255, 0.84)',\n },\n },\n action: {\n bg: '#619CE8',\n fg: '#ffffff',\n hover: {\n bg: '#010218',\n },\n },\n },\n fonts: {\n body: {\n family: \"'Google Sans', sans-serif\",\n size: '16px',\n lineHeight: '24px',\n fontWeight: 400,\n },\n title: {\n family: \"'Google Sans', sans-serif\",\n size: '32px',\n lineHeight: '40px',\n fontWeight: 400,\n },\n button: {\n family: \"'Google Sans', sans-serif\",\n size: '16px',\n lineHeight: '32px',\n fontWeight: 400,\n },\n stepNumber: {\n family: \"'Google Sans', sans-serif\",\n size: '80px',\n lineHeight: '80px',\n fontWeight: 900,\n },\n },\n breakpoint: {\n tabletSmall: 'screen and (min-width: 700px)',\n tabletLarge: 'screen and (min-width: 1300px)',\n desktop: 'screen and (min-width: 1800px)',\n },\n};\n" }, { "path": "packages/activation-notice/src/typings/styled-components.d.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport 'styled-components';\n\ninterface Font {\n family: string;\n size: string;\n lineHeight: string;\n fontWeight: number;\n}\n\ndeclare module 'styled-components' {\n export interface DefaultTheme {\n colors: {\n bg: {\n [key: string]: string;\n };\n primary: string;\n secondary: string;\n tertiary: string;\n link: {\n fg: string;\n hover: {\n [key: string]: string;\n };\n };\n action: {\n bg: string;\n fg: string;\n hover: {\n [key: string]: string;\n };\n };\n };\n fonts: {\n [key: string]: Font;\n };\n breakpoint: {\n [key: string]: string;\n };\n }\n}\n" }, { "path": "packages/activation-notice/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.shared.json\",\n \"compilerOptions\": {\n \"rootDir\": \"src\",\n \"declarationDir\": \"dist-types\"\n },\n \"references\": [{ \"path\": \"../tracking\" }],\n \"include\": [\"src/**/*\"]\n}\n" }, { "path": "packages/animation/.npmignore", "content": "src\n" }, { "path": "packages/animation/README.md", "content": "# Animation\n\nLibrary for rendering animations in web stories.\n" }, { "path": "packages/animation/package.json", "content": "{\n \"name\": \"@googleforcreators/animation\",\n \"description\": \"Web Stories editor animation library.\",\n \"private\": false,\n \"version\": \"0.1.202410011217\",\n \"author\": {\n \"name\": \"Google\",\n \"url\": \"https://creators.google/\"\n },\n \"license\": \"Apache-2.0\",\n \"keywords\": [\n \"web stories\",\n \"animations\",\n \"web animations\"\n ],\n \"homepage\": \"https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/animation/README.md\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GoogleForCreators/web-stories-wp.git\",\n \"directory\": \"packages/animation\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/googleforcreators/web-stories-wp/issues\"\n },\n \"engines\": {\n \"node\": \">= 20 || >= 22 || >= 24\",\n \"npm\": \">= 7.3\"\n },\n \"customExports\": {\n \".\": {\n \"default\": \"./src/index.ts\"\n }\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist-module/index.js\",\n \"types\": \"dist-types/index.d.ts\",\n \"source\": \"src/index.ts\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@googleforcreators/i18n\": \"*\",\n \"@googleforcreators/media\": \"*\",\n \"@googleforcreators/react\": \"*\",\n \"@googleforcreators/units\": \"*\",\n \"flagged\": \"^2.0.10\",\n \"prop-types\": \"^15.8.1\",\n \"styled-components\": \"^5.3.11\",\n \"uuid\": \"^11.1.0\"\n },\n \"devDependencies\": {\n \"@testing-library/react\": \"^12.1.5\",\n \"@testing-library/react-hooks\": \"^8.0.1\",\n \"@types/styled-components\": \"^5.1.26\",\n \"@types/web-animations-js\": \"^2.2.16\"\n }\n}\n" }, { "path": "packages/animation/src/components/AMPAnimations.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport useStoryAnimationContext from './useStoryAnimationContext';\n\nfunction AMPAnimations() {\n const {\n state: { providerId, animationTargets },\n actions: { getAnimationParts },\n } = useStoryAnimationContext();\n\n return (\n <>\n {animationTargets\n .map((target) => [\n getAnimationParts(target).map(({ id, AMPAnimation }) => (\n \n )),\n ])\n .flat(2)}\n \n );\n}\n\nexport default AMPAnimations;\n" }, { "path": "packages/animation/src/components/AMPKeyframes.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useMemo } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport { KeyframesOutput } from '../outputs';\nimport useStoryAnimationContext from './useStoryAnimationContext';\nimport generateKeyframesMap from './generateKeyframesMap';\n\nfunction AMPKeyframes() {\n const {\n state: { providerId, animationTargets },\n actions: { getAnimationParts },\n } = useStoryAnimationContext();\n\n const keyframesMap = useMemo(\n () => generateKeyframesMap(animationTargets, getAnimationParts),\n [animationTargets, getAnimationParts]\n );\n\n return Object.keys(keyframesMap).map((animationName) => (\n \n ));\n}\n\nexport default AMPKeyframes;\n" }, { "path": "packages/animation/src/components/AMPWrapper.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useMemo } from '@googleforcreators/react';\nimport type { FunctionComponent, PropsWithChildren } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from '../parts';\nimport type { WrapperProps } from './types';\nimport useStoryAnimationContext from './useStoryAnimationContext';\n\nconst fullSizeAbsoluteStyles = {\n width: '100%',\n height: '100%',\n display: 'block',\n position: 'absolute',\n top: 0,\n left: 0,\n} as const;\n\ntype ComposableWrapperProps = PropsWithChildren<{\n animationParts: AnimationPart[];\n}>;\n\ntype Composed = PropsWithChildren;\n\nfunction ComposableWrapper({\n animationParts,\n children,\n}: ComposableWrapperProps) {\n const root: FunctionComponent = (props: Composed) =>\n props.children as React.ReactElement;\n const ComposedWrapper = useMemo(\n () =>\n animationParts.reduce(\n (Composable: FunctionComponent, animationPart: AnimationPart) => {\n const { AMPTarget } = animationPart;\n const Composed = (props: Composed) => {\n return (\n \n \n {props.children}\n \n \n );\n };\n return Composed;\n },\n root\n ),\n [animationParts]\n );\n\n // eslint-disable-next-line react-hooks/static-components -- FIXME\n return {children};\n}\nfunction AMPWrapper({ target, children }: WrapperProps) {\n const {\n actions: { getAnimationParts },\n } = useStoryAnimationContext();\n\n return (\n \n {children}\n \n );\n}\n\nexport default AMPWrapper;\n" }, { "path": "packages/animation/src/components/WAAPIWrapper.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { useCallback, useRef, useEffect } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport createKeyframeEffect from '../utils/createKeyframeEffect';\nimport FullSizeAbsolute from './fullSizeAbsolute';\nimport type { WAAPIAnimationWrapperProps, WrapperProps } from './types';\nimport useStoryAnimationContext from './useStoryAnimationContext';\n\nfunction WAAPIAnimationWrapper({\n children,\n hoistAnimation,\n keyframes,\n timings,\n targetLeafElement = false,\n}: WAAPIAnimationWrapperProps) {\n const target = useRef(null);\n\n useEffect(() => {\n if (!keyframes) {\n return () => undefined;\n }\n\n const targetEl = targetLeafElement\n ? target.current?.querySelector('[data-leaf-element=\"true\"]')\n : target.current;\n\n if (!targetEl) {\n return () => undefined;\n }\n const effect = createKeyframeEffect(targetEl, keyframes, timings);\n return hoistAnimation(new Animation(effect, document.timeline));\n }, [hoistAnimation, keyframes, targetLeafElement, timings]);\n\n return {children};\n}\n\nfunction WAAPIWrapper({ children, target }: WrapperProps) {\n const { hoistWAAPIAnimation, animationParts } = useStoryAnimationContext(\n ({ actions }) => ({\n hoistWAAPIAnimation: actions.hoistWAAPIAnimation,\n animationParts: actions.getAnimationParts(target),\n })\n );\n const WAAPIAnimationParts = animationParts?.map(\n (anim) => anim.WAAPIAnimation\n );\n\n const hoistAnimation = useCallback(\n (animation: Animation) =>\n hoistWAAPIAnimation({ animation, elementId: target }),\n [target, hoistWAAPIAnimation]\n );\n\n // Parents/Wrappers need to stay consistent here and only have prop changes\n // to allow react's reconcilliation algorithm to function properly\n // and not generate a new subtree of DOM nodes:\n // https://github.com/facebook/react/issues/3965\n //\n // To Accommodate for this, we're setting a max of 3 levels deep. All stories built recently should\n // only have 1 animation per element, however this allows for backward compatibility with old stories\n // created from legacy templates that use stacked animation parts on single elements\n return (\n \n \n \n {children}\n \n \n \n );\n}\n\nexport default WAAPIWrapper;\n" }, { "path": "packages/animation/src/components/animationMachine.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useCallback, useReducer } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport { AnimationMachineState, AnimationMachineTransition } from './types';\n\nconst AnimationMachine: Record<\n AnimationMachineState,\n Partial>\n> = {\n [AnimationMachineState.Idle]: {\n [AnimationMachineTransition.Complete]: AnimationMachineState.Complete,\n },\n [AnimationMachineState.Complete]: {\n [AnimationMachineTransition.Reset]: AnimationMachineState.Idle,\n },\n};\n\nconst animationStateReducer = (\n state: AnimationMachineState,\n action: AnimationMachineTransition\n) => {\n return AnimationMachine[state][action] || state;\n};\n\nfunction useAnimationMachine() {\n const [animationState, dispatchWAAPIAnimationState] = useReducer(\n animationStateReducer,\n AnimationMachineState.Idle\n );\n const reset = useCallback(\n () => dispatchWAAPIAnimationState(AnimationMachineTransition.Reset),\n []\n );\n const complete = useCallback(\n () => dispatchWAAPIAnimationState(AnimationMachineTransition.Complete),\n []\n );\n\n return { animationState, reset, complete };\n}\nexport default useAnimationMachine;\n" }, { "path": "packages/animation/src/components/context.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createContext } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationProviderState } from './types';\n\nconst AnimationContext = createContext({\n state: {\n providerId: '',\n animationTargets: [],\n },\n actions: {\n getAnimationParts: () => [],\n hoistWAAPIAnimation: () => () => undefined,\n WAAPIAnimationMethods: {\n play: () => undefined,\n pause: () => undefined,\n setCurrentTime: () => undefined,\n reset: () => undefined,\n },\n },\n});\n\nexport default AnimationContext;\n" }, { "path": "packages/animation/src/components/fullSizeAbsolute.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled, { css } from 'styled-components';\n\nexport default styled.div<{ overflowHidden?: boolean }>`\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform-origin: 50% 50%;\n\n ${({ overflowHidden }) =>\n overflowHidden &&\n css`\n overflow: hidden;\n `};\n`;\n" }, { "path": "packages/animation/src/components/generateKeyframesMap.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AnimationProviderState, ElementId } from './types';\n\nfunction generateKeyframesMap(\n targets: ElementId[],\n getAnimationParts: AnimationProviderState['actions']['getAnimationParts']\n) {\n const allKeyframeEntries = targets\n .map((target) =>\n getAnimationParts(target).map((part) =>\n Object.entries(part.generatedKeyframes)\n )\n )\n .flat(2);\n const keyframesAsMap = new Map(allKeyframeEntries);\n return Object.fromEntries(keyframesAsMap);\n}\n\nexport default generateKeyframesMap;\n" }, { "path": "packages/animation/src/components/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as AnimationProvider } from './provider';\nexport { default as WAAPIWrapper } from './WAAPIWrapper';\nexport { default as AMPWrapper } from './AMPWrapper';\nexport { default as AMPKeyframes } from './AMPKeyframes';\nexport { default as AMPAnimations } from './AMPAnimations';\nexport { default as useStoryAnimationContext } from './useStoryAnimationContext';\n" }, { "path": "packages/animation/src/components/provider.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from '@googleforcreators/react';\nimport { clamp } from '@googleforcreators/units';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Internal dependencies\n */\nimport { type AnimationPart, createAnimationPart } from '../parts';\nimport type { Element, StoryAnimation } from '../types';\nimport type {\n ElementId,\n ElementMap,\n ElementAnimationPartsMap,\n AnimationProviderProps,\n WAAPIElementAnimation,\n WAAPIElementAnimationMap,\n StoryAnimationMap,\n} from './types';\nimport Context from './context';\nimport { AnimationMachineState } from './types';\nimport useAnimationMachine from './animationMachine';\n\nconst createOnFinishPromise = (animation: Animation) => {\n return new Promise((resolve) => {\n animation.onfinish = resolve;\n });\n};\n\nconst filterWAAPIAnimations = (\n animations: WAAPIElementAnimation[],\n selectedElementIds: ElementId[]\n) =>\n selectedElementIds.length > 0\n ? animations.filter(({ elementId }) =>\n selectedElementIds.includes(elementId)\n )\n : animations;\n\nconst STABLE: unknown[] = [];\n\nfunction mapHasReferentialEntry(\n map: null | Map,\n [key, val]: [K, V]\n) {\n return map?.has(key) && map.get(key) === val;\n}\n\nfunction Provider({\n animations = STABLE as StoryAnimation[],\n elements = STABLE as Element[],\n children,\n onWAAPIFinish,\n selectedElementIds = [],\n}: AnimationProviderProps) {\n const elementsInstanceMapRef = useRef(null);\n const elementsInstanceMap: ElementMap = useMemo(\n () => new Map(elements.map((element) => [element.id, element])),\n [elements]\n );\n\n const animationsInstanceMapRef = useRef(null);\n const animationsInstanceMap: StoryAnimationMap = useMemo(\n () => new Map(animations.map((animation) => [animation.id, animation])),\n [animations]\n );\n\n const animationPartsMapRef = useRef(null);\n const animationPartsMap = useMemo(() => {\n // Keeping track of maps from previous renders to be able to persist\n // referentially stable generated animations that need no update.\n const { current: oldAnimationsInstanceMap } = animationsInstanceMapRef;\n const { current: oldElementsInstanceMap } = elementsInstanceMapRef;\n const { current: oldAnimationPartsMap } = animationPartsMapRef;\n\n const _animationPartsMap: ElementAnimationPartsMap = new Map();\n for (const [animationId, animation] of animationsInstanceMap.entries()) {\n // See if animationPart needs an update from last animation update\n const isAnimationRefentiallyStable = mapHasReferentialEntry(\n oldAnimationsInstanceMap,\n [animationId, animation]\n );\n\n // See if animationPart needs an update from any target elements updating\n // (animations only have 1 target element, so this may look O(n) but it's\n // really O(1) in actuality)\n const areAnimationTargetElementsReferentiallyStable =\n animation.targets.every((elementId) =>\n mapHasReferentialEntry(oldElementsInstanceMap, [\n elementId,\n elementsInstanceMap.get(elementId),\n ])\n );\n\n // Persist last generated animation if neither animation nor targets have updated\n if (\n isAnimationRefentiallyStable &&\n areAnimationTargetElementsReferentiallyStable &&\n oldAnimationPartsMap !== null\n ) {\n animation.targets.forEach((elementId) => {\n const element = elementsInstanceMap.get(elementId);\n if (!element?.isHidden) {\n _animationPartsMap.set(\n elementId,\n oldAnimationPartsMap.get(elementId) || []\n );\n }\n });\n } else {\n // Generate new animationPart if input has changed.\n const { targets } = animation;\n\n (targets || []).forEach((elementId) => {\n const generatedParts = _animationPartsMap.get(elementId) || [];\n const element = elementsInstanceMap.get(elementId);\n\n if (!element) {\n // This should not happen.\n return;\n }\n\n if (!element.isHidden) {\n _animationPartsMap.set(elementId, [\n ...generatedParts,\n createAnimationPart(animation, element),\n ]);\n }\n });\n }\n }\n\n // Sync up map refs to reference on next generation of animationPartsMap\n animationsInstanceMapRef.current = animationsInstanceMap;\n elementsInstanceMapRef.current = elementsInstanceMap;\n animationPartsMapRef.current = _animationPartsMap;\n\n return _animationPartsMap;\n }, [animationsInstanceMap, elementsInstanceMap]);\n\n const providerId = useMemo(() => uuidv4(), []);\n\n const animationTargets = useMemo(\n () => Array.from(animationPartsMap.keys() || []),\n [animationPartsMap]\n );\n\n const getAnimationParts = useCallback(\n (target: ElementId) =>\n animationPartsMap.get(target) || (STABLE as AnimationPart[]),\n [animationPartsMap]\n );\n\n /**\n * WAAPI interface\n */\n const onWAAPIFinishRef = useRef(onWAAPIFinish);\n const { animationState, reset, complete } = useAnimationMachine();\n const WAAPIAnimationRef = useRef(new Map());\n const [WAAPIAnimations, setWAAPIAnimations] = useState<\n WAAPIElementAnimation[]\n >([]);\n const filteredWAAPIAnimations = useMemo(\n () => filterWAAPIAnimations(WAAPIAnimations, selectedElementIds),\n [selectedElementIds, WAAPIAnimations]\n );\n\n const hoistWAAPIAnimation = useCallback(\n ({ animation, elementId }: WAAPIElementAnimation) => {\n const symbol = Symbol();\n WAAPIAnimationRef.current.set(symbol, {\n animation,\n elementId,\n });\n setWAAPIAnimations(Array.from(WAAPIAnimationRef.current.values()));\n return () => {\n animation?.cancel();\n WAAPIAnimationRef.current.delete(symbol);\n setWAAPIAnimations(Array.from(WAAPIAnimationRef.current.values()));\n };\n },\n []\n );\n\n const WAAPIAnimationMethods = useMemo(() => {\n const play = () =>\n filteredWAAPIAnimations.forEach(({ animation }) => {\n // Sometimes an animation part can get into a\n // stuck state where executing `play` doesn't\n // trigger the animation. A workaround to avoid\n // this is to first `cancel` the animation\n // before playing.\n animation?.cancel();\n\n animation?.play();\n });\n const pause = () =>\n filteredWAAPIAnimations.forEach(({ animation }) => animation?.pause());\n const setCurrentTime = (time: number | 'end') =>\n filteredWAAPIAnimations.forEach(({ animation }) => {\n const { duration = 0, delay = 0 } = animation.effect?.getTiming() ?? {};\n // The duration can be \"auto\", which we must treat as 0 in this instance\n // @see https://w3c.github.io/csswg-drafts/web-animations-1/#dictdef-effecttiming\n // Note that we could use `getComputedTiming` above instead, but the typings\n // in @types/web-animations-js aren't completely correct for that return.\n const actualDuration = typeof duration === 'string' ? 0 : duration;\n // TODO: Address case where duration can be of type CSSNumericValue.\n\n const animationEndTime = delay + (actualDuration as number);\n animation.currentTime =\n time === 'end'\n ? animationEndTime\n : clamp(time, { MIN: 0, MAX: animationEndTime });\n });\n\n return {\n play,\n pause,\n setCurrentTime,\n reset: () => {\n pause();\n requestAnimationFrame(() => {\n setCurrentTime('end');\n });\n },\n };\n }, [filteredWAAPIAnimations]);\n\n /**\n * Browser support for `animation.finished` is no good.\n * https://developer.mozilla.org/en-US/docs/Web/API/Animation/finished\n *\n * So we're mimicking the spec by creating a new promise everytime all\n * animations complete.\n */\n useEffect(() => {\n let cancel: () => void = () => undefined;\n if (\n AnimationMachineState.Idle === animationState &&\n filteredWAAPIAnimations.length\n ) {\n new Promise((resolve, reject) => {\n cancel = reject;\n void Promise.all(\n filteredWAAPIAnimations.map(({ animation }) =>\n createOnFinishPromise(animation)\n )\n ).then(() => {\n cancel = () => undefined;\n resolve();\n });\n })\n .then(complete)\n /* needed if promise gets canceled to swallow the error */\n .catch(() => undefined);\n }\n return cancel;\n }, [filteredWAAPIAnimations, animationState, complete]);\n\n // eslint-disable-next-line react-hooks/refs -- FIXME\n onWAAPIFinishRef.current = onWAAPIFinish;\n useEffect(() => {\n if (AnimationMachineState.Complete === animationState) {\n onWAAPIFinishRef.current?.();\n reset();\n }\n }, [animationState, reset]);\n\n const value = useMemo(\n () => ({\n state: {\n providerId,\n animationTargets,\n },\n actions: {\n getAnimationParts,\n hoistWAAPIAnimation,\n WAAPIAnimationMethods,\n },\n }),\n [\n providerId,\n getAnimationParts,\n animationTargets,\n hoistWAAPIAnimation,\n WAAPIAnimationMethods,\n ]\n );\n\n return {children};\n}\n\nexport default Provider;\n" }, { "path": "packages/animation/src/components/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useState } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '..';\nimport { PlayButton } from '../../storybookUtils';\nimport { AnimationType } from '../../types';\n\nexport default {\n title: 'Dashboard/Components/StoryAnimation',\n component: StoryAnimation,\n};\n\nfunction ColorSquare({ color, ...rest }) {\n return (\n \n );\n}\nColorSquare.propTypes = {\n color: PropTypes.string,\n};\n\nfunction SquareWrapper({ children }) {\n return (\n \n {children}\n \n );\n}\nSquareWrapper.propTypes = {\n children: PropTypes.node,\n};\n\nconst animations = [\n { id: '1', targets: ['some-id'], type: AnimationType.Fade },\n { id: '2', targets: ['some-id'], type: AnimationType.Flip },\n { id: '3', targets: ['some-id'], type: AnimationType.Spin },\n {\n id: '4',\n targets: ['some-id'],\n type: AnimationType.FloatOn,\n duration: 1000,\n },\n];\n\nexport const _default = {\n render: function Render() {\n const [state, setState] = useState(0);\n return (\n {\n setState((v) => v + 1);\n }}\n >\n \n \n \n \n \n \n \n );\n },\n};\n\nexport const AMPStory = {\n render: function Render() {\n const pages = [\n {\n id: 'first-page',\n animations: [\n {\n id: 'ir',\n targets: ['el1'],\n type: AnimationType.Bounce,\n duration: 1000,\n },\n ],\n },\n {\n id: 'second-page',\n animations: [\n {\n id: 'a5',\n targets: ['el2'],\n type: AnimationType.Bounce,\n duration: 2000,\n },\n ],\n },\n {\n id: 'third-page',\n animations: [\n { id: 'a1', targets: ['el3'], type: AnimationType.Bounce },\n {\n id: 'a2',\n targets: ['el4'],\n type: AnimationType.Bounce,\n delay: 100,\n },\n {\n id: 'a3',\n targets: ['el5'],\n type: AnimationType.Bounce,\n delay: 300,\n },\n {\n id: 'a4',\n targets: ['el6'],\n type: AnimationType.Bounce,\n delay: 500,\n },\n ],\n elements: [\n { id: 'el3', color: 'red', width: '50px' },\n { id: 'el4', color: 'orange', width: '100px' },\n { id: 'el5', color: 'blue', width: '200px' },\n { id: 'el6', color: 'green', width: '150px' },\n ],\n },\n ];\n\n return (\n
\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n\n \n \n \n \n
\n \n \n \n \n \n \n\n \n {pages[2].elements.map((element) => (\n \n \n \n ))}\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/components/test/WAAPIWrapper.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useMemo } from '@googleforcreators/react';\nimport { render, act } from '@testing-library/react';\nimport type { FunctionComponent } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { AnimationType } from '../../types';\nimport type { Element, ElementId, StoryAnimation } from '../../types';\nimport Provider from '../provider';\nimport WAAPIWrapper from '../WAAPIWrapper';\n\ntype Tracker = FunctionComponent<{ target: string }>;\ntype TrackersProps = {\n ElOneWAAPIInvocationTracker: Tracker;\n ElTwoWAAPIInvocationTracker: Tracker;\n};\ntype ElementsWithWrapperProps = {\n animations: StoryAnimation[];\n elements: Element[];\n ElOneWAAPIInvocationTracker: Tracker;\n ElTwoWAAPIInvocationTracker: Tracker;\n};\nfunction Trackers({\n ElOneWAAPIInvocationTracker,\n ElTwoWAAPIInvocationTracker,\n}: TrackersProps) {\n return useMemo(\n () => (\n
\n \n
\n \n \n
\n \n
\n ),\n [ElOneWAAPIInvocationTracker, ElTwoWAAPIInvocationTracker]\n );\n}\n\ndescribe('StoryAnimation.WAAPIWrapper', () => {\n describe('tracking necessary rerenders', () => {\n // Create mock data\n const createMockAnim = (\n id: string,\n targets: ElementId[]\n ): StoryAnimation => ({\n type: AnimationType.EffectPulse,\n delay: 0,\n duration: 350,\n iterations: 1,\n scale: 0.5,\n id,\n targets,\n });\n const createMockElement = (partial: Partial): Element => ({\n id: '2e04154c-bc58-4969-bb4d-c69d32da0eac',\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n rotationAngle: 0,\n ...partial,\n });\n const initialAnimations = [\n createMockAnim('animOne', ['elOne']),\n createMockAnim('animTwo', ['elTwo']),\n ];\n const initialElements = [\n createMockElement({ id: 'elOne' }),\n createMockElement({ id: 'elTwo' }),\n ];\n\n const ElementsWithWrapper = ({\n animations,\n elements,\n ElOneWAAPIInvocationTracker,\n ElTwoWAAPIInvocationTracker,\n }: ElementsWithWrapperProps) => (\n \n \n \n );\n\n it('doesnt rerender wrappers uneffected by animation updates', () => {\n // Render with mock methods\n const ElOneWAAPIInvocationTracker = jest.fn(WAAPIWrapper);\n const ElTwoWAAPIInvocationTracker = jest.fn(WAAPIWrapper);\n const { rerender } = render(\n \n );\n\n // See that mock methods were called on mount\n expect(ElOneWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n expect(ElTwoWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n\n // Update animations with one new animation and one\n // previous animation instance\n act(() => {\n rerender(\n \n );\n });\n\n // See that only the element effected by the animation update rerendered\n // See that mock methods were called on mount\n expect(ElOneWAAPIInvocationTracker).toHaveBeenCalledTimes(2);\n expect(ElTwoWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n });\n\n it('doesnt rerender wrappers uneffected by element updates', () => {\n // Render with mock methods\n const ElOneWAAPIInvocationTracker = jest.fn(WAAPIWrapper);\n const ElTwoWAAPIInvocationTracker = jest.fn(WAAPIWrapper);\n const { rerender } = render(\n \n );\n\n // See that mock methods were called on mount\n expect(ElOneWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n expect(ElTwoWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n\n // Update animations with one new element and one\n // previous element instance\n act(() => {\n rerender(\n \n );\n });\n\n // See that only the element effected by the animation update rerendered\n expect(ElOneWAAPIInvocationTracker).toHaveBeenCalledTimes(2);\n expect(ElTwoWAAPIInvocationTracker).toHaveBeenCalledTimes(1);\n });\n });\n});\n" }, { "path": "packages/animation/src/components/test/animationProvider.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useFeature } from 'flagged';\nimport { renderHook, act } from '@testing-library/react-hooks';\nimport type { PropsWithChildren } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { createAnimationPart } from '../../parts';\nimport { AnimationType, type Element, type StoryAnimation } from '../../types';\nimport { AnimationProvider, useStoryAnimationContext } from '..';\n\njest.mock('flagged');\njest.mock('../../parts', () => ({\n createAnimationPart: jest.fn().mockImplementation(() => ({\n id: '',\n keyframes: {},\n WAAPIAnimation: { keyframes: {}, timings: {} },\n AMPTarget: () => null,\n AMPAnimation: () => null,\n generatedKeyframes: {},\n })),\n}));\nconst mockedUseFeature = jest.mocked(useFeature);\nconst mockedCreateAnimationPart = jest.mocked(createAnimationPart);\n\nfunction flushPromiseQueue() {\n return Promise.resolve();\n}\n\nfunction createWrapperWithProps(\n Wrapper: React.FunctionComponent,\n props: T\n) {\n const WrapperWithProps = ({ children }: PropsWithChildren) => (\n {children}\n );\n return WrapperWithProps;\n}\n\nconst mockWAAPIAnimation = (overrides = {}) => ({\n ...new Animation(),\n ...overrides,\n});\n\ntype MockAnimation = Animation & {\n play: (this: void) => void;\n pause: (this: void) => void;\n};\n\ndescribe('AnimationProvider', () => {\n beforeAll(() => {\n mockedUseFeature.mockImplementation(() => true);\n });\n\n afterEach(() => {\n mockedCreateAnimationPart.mockReset();\n });\n\n describe('getAnimationParts(target)', () => {\n it('gets all generated parts for a target', () => {\n const target = 'id1';\n const otherTarget = 'id2';\n const animations = [\n {\n id: '1',\n targets: [target],\n type: AnimationType.Move as const,\n duration: 1000,\n },\n {\n id: '2',\n targets: [target],\n type: AnimationType.Spin as const,\n duration: 1000,\n },\n {\n id: '3',\n targets: [otherTarget],\n type: AnimationType.Move as const,\n duration: 1000,\n },\n {\n id: '4',\n targets: [target, otherTarget],\n type: AnimationType.Zoom as const,\n duration: 1000,\n },\n ];\n const elements: Element[] = [\n { id: target, x: 0, y: 0, width: 0, height: 0, rotationAngle: 0 },\n { id: otherTarget, x: 0, y: 0, width: 0, height: 0, rotationAngle: 0 },\n ];\n\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations,\n elements,\n }),\n });\n\n const {\n actions: { getAnimationParts },\n } = result.current;\n\n expect(getAnimationParts(target)).toHaveLength(3);\n expect(getAnimationParts(otherTarget)).toHaveLength(2);\n expect(getAnimationParts('id3')).toHaveLength(0);\n });\n\n it('calls generators for a target in ascending order', () => {\n const target = 'id1';\n const targets = [target];\n const args = { someProp: 1, duration: 1000 };\n const types = [\n AnimationType.Move as const,\n AnimationType.Spin as const,\n AnimationType.Zoom as const,\n ];\n const animations = [\n { id: '1', targets, type: types[0], ...args },\n { id: '2', targets, type: types[1], ...args },\n { id: '3', targets, type: types[2], ...args },\n ];\n const elements: Element[] = [\n { id: target, x: 0, y: 0, width: 0, height: 0, rotationAngle: 0 },\n ];\n\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations,\n elements,\n }),\n });\n\n const {\n actions: { getAnimationParts },\n } = result.current;\n\n getAnimationParts(target);\n\n animations.forEach((animation) => {\n expect(createAnimationPart).toHaveBeenCalledWith(\n animation,\n elements[0]\n );\n });\n });\n\n it('calls generators for a target with proper args', () => {\n const target = 'some-target';\n const target2 = 'that-target';\n const element1 = {\n id: target,\n type: 'text',\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n rotationAngle: 0,\n };\n const element2 = {\n id: target2,\n type: 'text',\n x: 0,\n y: 0,\n width: 0,\n height: 0,\n rotationAngle: 0,\n };\n const elements = [element1, element2];\n const animType = AnimationType.Move;\n const args = [\n { bounces: 3, duration: 1000 },\n { blinks: 2, offset: 20, blarks: 6, duration: 1000 },\n { columns: 4, duration: 400 },\n ];\n const animations: StoryAnimation[] = [\n { id: '1', targets: [target], type: animType, ...args[0] },\n { id: '2', targets: [target], type: animType, ...args[1] },\n { id: '3', targets: [target2], type: animType, ...args[2] },\n ];\n\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations,\n elements,\n }),\n });\n\n const {\n actions: { getAnimationParts },\n } = result.current;\n\n getAnimationParts(target);\n animations\n .filter(({ targets }) => targets.includes(target))\n .forEach(({ type, ...rest }) => {\n expect(mockedCreateAnimationPart).toHaveBeenCalledWith(\n { type, ...rest },\n element1\n );\n });\n\n getAnimationParts(target2);\n animations\n .filter(({ targets }) => targets.includes(target2))\n .forEach(({ type, ...rest }) => {\n expect(mockedCreateAnimationPart).toHaveBeenCalledWith(\n { type, ...rest },\n element2\n );\n });\n });\n });\n\n describe('hoistWAAPIAnimation(WAAPIAnimation)', () => {\n it('returns a cleanup function when called', () => {\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n }),\n });\n\n let unhoist;\n act(() => {\n unhoist = result.current.actions.hoistWAAPIAnimation({\n animation: mockWAAPIAnimation(),\n elementId: '',\n });\n });\n expect(typeof unhoist).toBe('function');\n });\n\n /**\n * Animation.cancel()**\n *\n * Clears all KeyframeEffects caused by this animation\n * and aborts its playback.\n *\n * https://developer.mozilla.org/en-US/docs/Web/API/Animation/cancel\n */\n it('calls Animation.cancel() method on hoisted animation when cleanup performed', () => {\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n }),\n });\n\n const cancel = jest.fn();\n act(() => {\n const unhoist = result.current.actions.hoistWAAPIAnimation({\n animation: mockWAAPIAnimation({ cancel }),\n elementId: '',\n });\n unhoist();\n });\n expect(cancel).toHaveBeenCalledWith();\n });\n });\n\n describe('WAAPIAnimationMethods', () => {\n it('calls all hoisted Animation methods when called', () => {\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n }),\n });\n\n const numCalls = 10;\n const play = jest.fn();\n const pause = jest.fn();\n const cancel = jest.fn();\n const animations = Array.from({ length: numCalls }, () => {\n const animation = mockWAAPIAnimation({\n play,\n pause,\n cancel,\n currentTime: 0,\n effect: {\n getTiming: () => ({\n duration: 300,\n delay: 0,\n }),\n },\n });\n act(() => {\n result.current.actions.hoistWAAPIAnimation({\n animation,\n elementId: '',\n });\n });\n return animation;\n });\n\n act(() => result.current.actions.WAAPIAnimationMethods.play());\n act(() => result.current.actions.WAAPIAnimationMethods.pause());\n act(() =>\n result.current.actions.WAAPIAnimationMethods.setCurrentTime(200)\n );\n\n expect(play).toHaveBeenCalledTimes(numCalls);\n expect(pause).toHaveBeenCalledTimes(numCalls);\n animations.forEach((animation) => {\n expect(animation.currentTime).toBe(200);\n });\n });\n\n it('calls all selectedElement hoisted Animation methods when called and passed selected elements', () => {\n const selectedElementIds = ['a', 'b', 'c'];\n const allElementIds = [...selectedElementIds, 'd', 'e'];\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n selectedElementIds,\n }),\n });\n\n const animationsWithIds = allElementIds.map((elementId) => {\n const animation: MockAnimation = mockWAAPIAnimation({\n play: jest.fn(),\n pause: jest.fn(),\n cancel: jest.fn(),\n currentTime: 0,\n effect: {\n getTiming: () => ({\n duration: 300,\n delay: 0,\n }),\n },\n });\n const animationWithElementId = { animation, elementId };\n act(() => {\n result.current.actions.hoistWAAPIAnimation({ animation, elementId });\n });\n return animationWithElementId;\n });\n\n act(() => result.current.actions.WAAPIAnimationMethods.play());\n act(() => result.current.actions.WAAPIAnimationMethods.pause());\n act(() =>\n result.current.actions.WAAPIAnimationMethods.setCurrentTime(200)\n );\n\n animationsWithIds.forEach(({ animation, elementId }) => {\n expect(animation.currentTime).toStrictEqual(\n selectedElementIds.includes(elementId) ? 200 : 0\n );\n expect(animation.play).toHaveBeenCalledTimes(\n selectedElementIds.includes(elementId) ? 1 : 0\n );\n expect(animation.pause).toHaveBeenCalledTimes(\n selectedElementIds.includes(elementId) ? 1 : 0\n );\n });\n });\n\n it('excludes cleaned up animation methods when called', () => {\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n }),\n });\n\n const initialTime = 0;\n const newTime = 200;\n\n const numAnims = 10;\n const unhoistIndex = numAnims / 2;\n const animations = Array.from(\n { length: numAnims },\n (): MockAnimation =>\n mockWAAPIAnimation({\n play: jest.fn(),\n pause: jest.fn(),\n cancel: jest.fn(),\n currentTime: initialTime,\n effect: {\n getTiming: () => ({\n duration: 300,\n delay: 0,\n }),\n },\n })\n );\n\n const unhoists = animations.map((animation) => {\n let unhoist: () => void = () => undefined;\n act(() => {\n unhoist = result.current.actions.hoistWAAPIAnimation({\n animation,\n elementId: '',\n });\n });\n return unhoist;\n });\n act(() => {\n unhoists[unhoistIndex]();\n });\n\n act(() => result.current.actions.WAAPIAnimationMethods.play());\n act(() => result.current.actions.WAAPIAnimationMethods.pause());\n act(() =>\n result.current.actions.WAAPIAnimationMethods.setCurrentTime(newTime)\n );\n\n animations.forEach((animation, i) => {\n if (i === unhoistIndex) {\n expect(animation.play).toHaveBeenCalledTimes(0);\n expect(animation.pause).toHaveBeenCalledTimes(0);\n expect(animation.currentTime).toStrictEqual(initialTime);\n } else {\n expect(animation.play).toHaveBeenCalledTimes(1);\n expect(animation.pause).toHaveBeenCalledTimes(1);\n expect(animation.currentTime).toStrictEqual(newTime);\n }\n });\n });\n });\n\n describe('events', () => {\n describe('onWAAPIFinish', () => {\n it('fires once each time all animations complete', async () => {\n const onWAAPIFinish = jest.fn();\n const { result } = renderHook(() => useStoryAnimationContext(), {\n wrapper: createWrapperWithProps(AnimationProvider, {\n animations: [],\n onWAAPIFinish,\n }),\n });\n\n const animations = Array.from({ length: 10 }, () =>\n mockWAAPIAnimation()\n );\n animations.forEach((animation) => {\n act(() => {\n result.current.actions.hoistWAAPIAnimation({\n animation,\n elementId: '',\n });\n });\n });\n\n const completeAllAnimations = async () => {\n animations.forEach((animation) => {\n animation?.onfinish?.(new AnimationPlaybackEvent('finish'));\n });\n /**\n * Needed to flush all promises and\n * trigger dispatch from resolved promise\n */\n await act(async () => {\n await flushPromiseQueue();\n });\n };\n\n await completeAllAnimations();\n expect(onWAAPIFinish).toHaveBeenCalledTimes(1);\n await completeAllAnimations();\n expect(onWAAPIFinish).toHaveBeenCalledTimes(2);\n await completeAllAnimations();\n expect(onWAAPIFinish).toHaveBeenCalledTimes(3);\n });\n });\n });\n});\n" }, { "path": "packages/animation/src/components/test/generateKeyframesMap.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from '../../parts';\nimport type { ElementId, Keyframes } from '../../types';\nimport generateKeyframesMap from '../generateKeyframesMap';\n\ntype AnimationParts = Record;\n\nconst mockGetAnimationParts = (src: AnimationParts) => (target: ElementId) =>\n src[target];\n\nconst mockCreateAnimationPart = (\n id: string,\n keyframes: Keyframes\n): AnimationPart => ({\n id,\n keyframes,\n WAAPIAnimation: { keyframes, timings: {} },\n AMPAnimation: () => null,\n AMPTarget: () => null,\n generatedKeyframes: { [id]: keyframes },\n});\n\ndescribe('generateKeyframesMap', () => {\n it('should flatten keyframes into a single map', () => {\n const targets = ['target1', 'target2', 'target3'];\n const parts: AnimationParts = {\n [targets[0]]: [\n mockCreateAnimationPart('a', { transform: [1, 3, 4] }),\n mockCreateAnimationPart('b', { transform: [5, 7, 9] }),\n ],\n [targets[1]]: [mockCreateAnimationPart('c', { transform: [2, 5, 8] })],\n [targets[2]]: [mockCreateAnimationPart('d', { opacity: [0, 1, 0, 1] })],\n };\n\n const getAnimationParts = mockGetAnimationParts(parts);\n\n expect(generateKeyframesMap(targets, getAnimationParts)).toStrictEqual({\n a: { transform: [1, 3, 4] },\n b: { transform: [5, 7, 9] },\n c: { transform: [2, 5, 8] },\n d: { opacity: [0, 1, 0, 1] },\n });\n });\n\n it('should consolidate duplicate keyframes', () => {\n const targets = ['target1', 'target2', 'target3'];\n const parts = {\n [targets[0]]: [\n mockCreateAnimationPart('a', { transform: [1, 3, 4] }),\n mockCreateAnimationPart('b', { transform: [5, 7, 9] }),\n ],\n [targets[1]]: [mockCreateAnimationPart('a', { transform: [1, 3, 4] })],\n [targets[2]]: [\n mockCreateAnimationPart('a', { transform: [1, 3, 4] }),\n mockCreateAnimationPart('c', { opacity: [0, 1, 0, 1] }),\n ],\n };\n\n const getAnimationParts = mockGetAnimationParts(parts);\n\n expect(generateKeyframesMap(targets, getAnimationParts)).toStrictEqual({\n a: { transform: [1, 3, 4] },\n b: { transform: [5, 7, 9] },\n c: { opacity: [0, 1, 0, 1] },\n });\n });\n});\n" }, { "path": "packages/animation/src/components/types.ts", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { PropsWithChildren } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from '../parts';\nimport type {\n AMPEffectTiming,\n Element,\n ElementId,\n Keyframes,\n StoryAnimation,\n} from '../types';\n\n// We can't depend on the elements package, but we also don't actually need to.\n// The only thing we need concerning elements is the fact, that they're an object\n// with a string id, so this will suffice.\n\nexport type { ElementId };\n\nexport type ElementAnimationHoister = (\n elementAnimation: WAAPIElementAnimation\n) => () => void;\n\nexport type AnimationHoister = (animation: Animation) => () => void;\n\nexport interface AnimationProviderState {\n state: {\n providerId: string;\n animationTargets: ElementId[];\n };\n actions: {\n getAnimationParts: (target: ElementId) => AnimationPart[];\n hoistWAAPIAnimation: ElementAnimationHoister;\n WAAPIAnimationMethods: {\n play: () => void;\n pause: () => void;\n setCurrentTime: (time: number | 'end') => void;\n reset: () => void;\n };\n };\n}\n\nexport type AnimationProviderProps = PropsWithChildren<{\n animations?: StoryAnimation[];\n elements?: Element[];\n onWAAPIFinish?: () => void;\n selectedElementIds?: string[];\n}>;\n\nexport type StoryAnimationMap = Map;\nexport type ElementAnimationPartsMap = Map;\n\nexport interface WAAPIElementAnimation {\n animation: Animation;\n elementId: ElementId;\n}\nexport type WAAPIElementAnimationMap = Map;\nexport type ElementMap = Map;\n\nexport type WAAPIAnimationWrapperProps = PropsWithChildren<{\n keyframes: Keyframes;\n timings: AMPEffectTiming;\n hoistAnimation: AnimationHoister;\n targetLeafElement?: boolean;\n}>;\n\nexport type WrapperProps = PropsWithChildren<{\n target: ElementId;\n}>;\n\nexport enum AnimationMachineState {\n Idle = 'idle',\n Complete = 'complete',\n}\n\nexport enum AnimationMachineTransition {\n Complete = 'complete',\n Reset = 'reset',\n}\n" }, { "path": "packages/animation/src/components/useStoryAnimationContext.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { identity, useContextSelector } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport Context from './context';\nimport type { AnimationProviderState } from './types';\n\nfunction useStoryAnimationContext(): AnimationProviderState;\nfunction useStoryAnimationContext(\n selector: (state: AnimationProviderState) => T\n): T;\nfunction useStoryAnimationContext(\n selector: (\n state: AnimationProviderState\n ) => T | AnimationProviderState = identity\n) {\n return useContextSelector(Context, selector);\n}\n\nexport default useStoryAnimationContext;\n" }, { "path": "packages/animation/src/constants.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { _x } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AnimationType, ScaleDirection } from './types';\n\nexport const BEZIER = {\n linear: 'linear',\n in: 'ease-in',\n out: 'ease-out',\n inOut: 'ease-in-out',\n inQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n outQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n inOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',\n inCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n outCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n inQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)',\n outQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)',\n inOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)',\n inQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)',\n outQuint: 'cubic-bezier(0.23, 1, 0.32, 1)',\n inOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)',\n inSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)',\n outSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)',\n inOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)',\n inExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',\n outExpo: 'cubic-bezier(0.19, 1, 0.22, 1)',\n inOutExpo: 'cubic-bezier(1, 0, 0, 1)',\n inCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n outCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)',\n inOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',\n default: 'cubic-bezier(0.4, 0.4, 0.0, 1)',\n} as const;\n\nexport type BezierType = keyof typeof BEZIER;\n\nexport const ANIMATION_EFFECTS = {\n DROP: {\n value: AnimationType.EffectDrop,\n name: _x('Drop', 'animation effect', 'web-stories'),\n },\n FADE_IN: {\n value: AnimationType.EffectFadeIn,\n name: _x('Fade In', 'animation effect', 'web-stories'),\n },\n FLY_IN: {\n value: AnimationType.EffectFlyIn,\n name: _x('Fly In', 'animation effect', 'web-stories'),\n },\n PAN: {\n value: AnimationType.EffectPan,\n name: _x('Pan', 'animation effect', 'web-stories'),\n },\n PULSE: {\n value: AnimationType.EffectPulse,\n name: _x('Pulse', 'animation effect', 'web-stories'),\n },\n TWIRL_IN: {\n value: AnimationType.EffectTwirlIn,\n name: _x('Twirl In', 'animation effect', 'web-stories'),\n },\n WHOOSH_IN: {\n value: AnimationType.EffectWhooshIn,\n name: _x('Whoosh In', 'animation effect', 'web-stories'),\n },\n ZOOM: {\n value: AnimationType.EffectZoom,\n name: _x('Scale', 'animation effect', 'web-stories'),\n },\n ROTATE_IN: {\n value: AnimationType.EffectRotateIn,\n name: _x('Rotate In', 'animation effect', 'web-stories'),\n },\n};\n\nexport const BACKGROUND_ANIMATION_EFFECTS = {\n ZOOM: {\n value: AnimationType.EffectBackgroundZoom,\n name: _x('Zoom', 'animation effect', 'web-stories'),\n },\n PAN: {\n value: AnimationType.EffectBackgroundPan,\n name: ANIMATION_EFFECTS.PAN.name,\n },\n PAN_AND_ZOOM: {\n value: AnimationType.EffectBackgroundPanAndZoom,\n name: _x('Pan and Zoom', 'animation effect', 'web-stories'),\n },\n};\n\nexport const ANIMATION_PARTS = {\n BLINK_ON: {\n value: AnimationType.BlinkOn,\n name: _x('Blink On', 'animation effect', 'web-stories'),\n },\n BOUNCE: {\n value: AnimationType.Bounce,\n name: _x('Bounce', 'animation effect', 'web-stories'),\n },\n FADE: {\n value: AnimationType.Fade,\n name: _x('Fade', 'animation effect', 'web-stories'),\n },\n FLIP: {\n value: AnimationType.Flip,\n name: _x('Flip', 'animation effect', 'web-stories'),\n },\n FLOAT_ON: {\n value: AnimationType.FloatOn,\n name: _x('Float On', 'animation effect', 'web-stories'),\n },\n MOVE: {\n value: AnimationType.Move,\n name: _x('Move', 'animation effect', 'web-stories'),\n },\n PULSE: {\n value: AnimationType.Pulse,\n name: _x('Pulse', 'animation effect', 'web-stories'),\n },\n SPIN: {\n value: AnimationType.Spin,\n name: _x('Spin', 'animation effect', 'web-stories'),\n },\n ZOOM: {\n value: AnimationType.Zoom,\n name: _x('Zoom', 'animation effect', 'web-stories'),\n },\n};\n\nexport const SCALE_DIRECTIONS = {\n IN: [ScaleDirection.ScaleInTopLeft, ScaleDirection.ScaleInBottomRight],\n OUT: [ScaleDirection.ScaleOutTopRight, ScaleDirection.ScaleOutBottomLeft],\n} as const;\n\nexport const BG_MIN_SCALE = 100;\nexport const BG_MAX_SCALE = 400;\n" }, { "path": "packages/animation/src/index.ts", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './components';\nexport * from './constants';\nexport * from './parts';\nexport * from './outputs';\nexport * from './utils';\nexport * from './types';\n" }, { "path": "packages/animation/src/outputs/animationOutput.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AnimationOutputProps } from './types';\n\nfunction AnimationOutput({ config }: AnimationOutputProps) {\n const configs = Array.isArray(config) ? config : [config];\n\n return (\n \n ({\n selector,\n animation,\n keyframes,\n delay,\n direction,\n duration,\n easing,\n endDelay,\n fill,\n iterationStart,\n iterations,\n })\n )\n ),\n }}\n />\n \n );\n}\n\nexport default AnimationOutput;\n" }, { "path": "packages/animation/src/outputs/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as AnimationOutput } from './animationOutput';\nexport { default as KeyframesOutput } from './keyframesOutput';\nexport { default as WithAnimation } from './output';\nexport * from './types';\n" }, { "path": "packages/animation/src/outputs/keyframesOutput.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { KeyframesOutputProps } from './types';\n\nfunction KeyframesOutput({ id, keyframes, ...options }: KeyframesOutputProps) {\n return (\n \n \n \n );\n}\n\nexport default KeyframesOutput;\n" }, { "path": "packages/animation/src/outputs/output.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { WithAnimationProps } from './types';\n\nfunction WithAnimation({\n id,\n className,\n style,\n animationStyle,\n useClippingContainer,\n children,\n}: WithAnimationProps) {\n return useClippingContainer ? (\n \n \n {children}\n
\n
\n ) : (\n
\n {children}\n
\n );\n}\n\nexport default WithAnimation;\n" }, { "path": "packages/animation/src/outputs/types.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { CSSProperties, PropsWithChildren } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming, Keyframes } from '../types';\n\nexport interface AnimationConfig extends AMPEffectTiming {\n selector: string;\n animation?: string;\n keyframes?: Keyframes;\n}\n\nexport interface AnimationOutputProps {\n config: AnimationConfig | AnimationConfig[];\n}\n\nexport type WithAnimationProps = PropsWithChildren<{\n id?: string;\n className?: string;\n style?: CSSProperties;\n animationStyle?: CSSProperties;\n useClippingContainer?: boolean;\n}>;\n\nexport interface KeyframesOutputProps extends AMPEffectTiming {\n id: string;\n keyframes: Keyframes;\n}\n" }, { "path": "packages/animation/src/parts/createAnimation.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { VoidFunctionComponent } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Internal dependencies\n */\nimport { AnimationOutput, WithAnimation } from '../outputs';\nimport type { AMPEffectTiming, Keyframes } from '../types';\nimport getInitialStyleFromKeyframes from '../utils/getInitialStyleFromKeyframes';\nimport sanitizeTimings from '../utils/sanitizeTimings';\nimport type { AMPAnimationProps, WAAPIAnimation, AnimationPart } from './types';\n\nfunction createAnimation(\n keyframes: T,\n timings: AMPEffectTiming,\n withClippingContainer = false,\n targetLeafElement = false\n): AnimationPart {\n const id = `anim-${uuidv4()}`;\n\n const WAAPIAnimation: WAAPIAnimation = {\n timings: sanitizeTimings(timings),\n keyframes,\n targetLeafElement,\n useClippingContainer: withClippingContainer,\n };\n\n const animationStyle = targetLeafElement\n ? {}\n : getInitialStyleFromKeyframes(keyframes);\n\n const AMPTarget: VoidFunctionComponent = ({\n children,\n style = {},\n }) => (\n \n {children}\n \n );\n\n const selector = targetLeafElement\n ? `#${id} [data-leaf-element=\"true\"]`\n : `#${id}`;\n\n const AMPAnimation: VoidFunctionComponent = () => (\n \n );\n\n return {\n id,\n keyframes,\n generatedKeyframes: { [id]: keyframes },\n WAAPIAnimation,\n AMPTarget,\n AMPAnimation,\n };\n}\n\nexport default createAnimation;\n" }, { "path": "packages/animation/src/parts/createAnimationPart.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { BEZIER } from '../constants';\nimport {\n type AnimationInput,\n type AnimationInputWithPreset,\n AnimationType,\n type Element,\n} from '../types';\nimport { EffectDrop } from './effects/drop';\nimport { EffectFadeIn } from './effects/fadeIn';\nimport { EffectFlyIn } from './effects/flyIn';\nimport { EffectPan } from './effects/pan';\nimport { EffectPulse } from './effects/pulse';\nimport { EffectTwirlIn } from './effects/twirlIn';\nimport { EffectWhooshIn } from './effects/whooshIn';\nimport { EffectZoom } from './effects/zoom';\nimport { EffectRotateIn } from './effects/rotateIn';\nimport { EffectBackgroundZoom } from './effects/backgroundZoom';\nimport { EffectBackgroundPan } from './effects/backgroundPan';\nimport { EffectBackgroundPanAndZoom } from './effects/backgroundPanAndZoom';\n\nimport { AnimationBounce } from './simple/bounce';\nimport { AnimationBlinkOn } from './simple/blinkOn';\nimport { AnimationFade } from './simple/fade';\nimport { AnimationFlip } from './simple/flip';\nimport { AnimationFloatOn } from './simple/floatOn';\nimport { AnimationMove } from './simple/move';\nimport { AnimationPulse } from './simple/pulse';\nimport { AnimationSpin } from './simple/spin';\nimport { AnimationZoom } from './simple/zoom';\n\nimport type { AnimationPart } from './types';\nimport emptyAnimationPart from './emptyAnimationPart';\n\nfunction convertEasingPreset({\n easingPreset,\n easing,\n ...rest\n}: AnimationInputWithPreset): AnimationInput {\n return {\n ...rest,\n easing: easing ? easing : easingPreset ? BEZIER[easingPreset] : undefined,\n };\n}\n\n// eslint-disable-next-line complexity -- Just a large switch\nfunction createAnimationPart(\n animationWithPreset: AnimationInputWithPreset,\n element: Element\n): AnimationPart {\n const animation = convertEasingPreset(animationWithPreset);\n\n switch (animation.type) {\n case AnimationType.BlinkOn:\n return AnimationBlinkOn(animation);\n case AnimationType.Bounce:\n return AnimationBounce(animation);\n case AnimationType.Fade:\n return AnimationFade(animation);\n case AnimationType.Flip:\n return AnimationFlip(animation);\n case AnimationType.FloatOn:\n return AnimationFloatOn(animation);\n case AnimationType.Move:\n return AnimationMove(animation, element);\n case AnimationType.Pulse:\n return AnimationPulse(animation);\n case AnimationType.Spin:\n return AnimationSpin(animation, element);\n case AnimationType.Zoom:\n return AnimationZoom(animation);\n case AnimationType.EffectDrop:\n return EffectDrop(animation, element);\n case AnimationType.EffectFadeIn:\n return EffectFadeIn(animation);\n case AnimationType.EffectFlyIn:\n return EffectFlyIn(animation, element);\n case AnimationType.EffectPan:\n return EffectPan(animation, element);\n case AnimationType.EffectPulse:\n return EffectPulse(animation);\n case AnimationType.EffectRotateIn:\n return EffectRotateIn(animation, element);\n case AnimationType.EffectTwirlIn:\n return EffectTwirlIn(animation, element);\n case AnimationType.EffectWhooshIn:\n return EffectWhooshIn(animation, element);\n case AnimationType.EffectZoom:\n return EffectZoom(animation);\n case AnimationType.EffectBackgroundPan:\n return EffectBackgroundPan(animation, element);\n case AnimationType.EffectBackgroundPanAndZoom:\n return EffectBackgroundPanAndZoom(animation, element);\n case AnimationType.EffectBackgroundZoom:\n return EffectBackgroundZoom(animation, element);\n default:\n return emptyAnimationPart();\n }\n}\n\nexport default createAnimationPart;\n" }, { "path": "packages/animation/src/parts/defaultFields.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __, _x } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BEZIER } from '../constants';\nimport { FieldType, NonBackgroundAnimationType } from '../types';\n\nexport const basicAnimationFields = {\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 1000,\n },\n delay: {\n label: __('Delay', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 0,\n },\n};\n\nexport const allFields = {\n id: {\n type: FieldType.Hidden,\n },\n type: {\n label: __('Animation Type', 'web-stories'),\n type: FieldType.Dropdown,\n values: [NonBackgroundAnimationType],\n },\n ...basicAnimationFields,\n direction: {\n type: FieldType.Dropdown,\n values: ['normal', 'reverse', 'alternate', 'alternate-reverse'],\n defaultValue: 'normal',\n },\n easingPreset: {\n label: __('Easing Presets', 'web-stories'),\n type: FieldType.Dropdown,\n values: ['Use Default', ...Object.keys(BEZIER)],\n defaultValue: Object.keys(BEZIER)[0],\n },\n easing: {\n type: FieldType.Text,\n },\n fill: {\n type: FieldType.Dropdown,\n values: ['backwards', 'forwards', 'both', 'none'],\n defaultValue: 'forwards',\n },\n iterations: {\n tooltip: __(\n 'Valid values are numerical or the word \"infinity\"',\n 'web-stories'\n ),\n type: FieldType.Text,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/backgroundPan.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { sprintf, _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport createAnimation from '../createAnimation';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n type AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport { getElementOffsets } from '../../utils';\n\nexport interface PanBackgroundEffect extends AMPEffectTiming {\n panDir?: AnimationDirection;\n type: AnimationType.EffectBackgroundPan;\n}\n\nexport function EffectBackgroundPan(\n {\n panDir = AnimationDirection.RightToLeft,\n duration = 2000,\n easing = 'cubic-bezier(.3,0,.55,1)',\n type,\n ...args\n }: PanBackgroundEffect,\n element: Element\n) {\n const timings: AMPEffectTiming = {\n fill: 'both',\n duration,\n easing,\n ...args,\n };\n\n const translateToOriginX = 'translate3d(0%, 0, 0)';\n const translateToOriginY = 'translate3d(0, 0%, 0)';\n const offsets = element\n ? getElementOffsets(element)\n : { top: 0, right: 0, bottom: 0, left: 0 };\n const translate = {\n from: {\n [AnimationDirection.RightToLeft]: `translate3d(${offsets.left}%, 0, 0)`,\n [AnimationDirection.LeftToRight]: `translate3d(${offsets.right}%, 0, 0)`,\n [AnimationDirection.BottomToTop]: `translate3d(0, ${offsets.top}%, 0)`,\n [AnimationDirection.TopToBottom]: `translate3d(0, ${offsets.bottom}%, 0)`,\n },\n to: {\n [AnimationDirection.RightToLeft]: translateToOriginX,\n [AnimationDirection.LeftToRight]: translateToOriginX,\n [AnimationDirection.BottomToTop]: translateToOriginY,\n [AnimationDirection.TopToBottom]: translateToOriginY,\n },\n };\n\n const keyframes = {\n transform: [translate.from[panDir], translate.to[panDir]],\n };\n\n return createAnimation(keyframes, timings, false, true);\n}\n\nexport const fields = {\n panDir: {\n label: __('Direction', 'web-stories'),\n tooltip: sprintf(\n /* translators: 1: scaleIn. 2: scaleOut */\n __('Valid values are %1$s or %2$s', 'web-stories'),\n 'scaleIn',\n 'scaleOut'\n ),\n type: FieldType.DirectionPicker,\n values: [\n AnimationDirection.TopToBottom,\n AnimationDirection.BottomToTop,\n AnimationDirection.LeftToRight,\n AnimationDirection.RightToLeft,\n ],\n defaultValue: AnimationDirection.RightToLeft,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 2000,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/backgroundPanAndZoom.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport createAnimation from '../createAnimation';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n AnimationType,\n type Element,\n ScaleDirection,\n} from '../../types';\nimport { getElementOrigin, getElementOffsets } from '../../utils';\nimport { EffectBackgroundPan } from './backgroundPan';\nimport { EffectBackgroundZoom } from './backgroundZoom';\n\nconst defaults: AMPEffectTiming = {\n fill: 'forwards',\n duration: 2000,\n easing: 'cubic-bezier(.14,.34,.47,.9)',\n};\n\nexport interface PanAndZoomBackgroundEffect extends AMPEffectTiming {\n zoomDirection?: ScaleDirection;\n panDir?: AnimationDirection;\n type: AnimationType.EffectBackgroundPanAndZoom;\n}\n\nexport function EffectBackgroundPanAndZoom(\n {\n zoomDirection = ScaleDirection.ScaleIn,\n panDir = AnimationDirection.RightToLeft,\n type,\n ...args\n }: PanAndZoomBackgroundEffect,\n element: Element\n) {\n const timings: AMPEffectTiming = { ...defaults, ...args };\n\n // We have to move the origin with respect to the pan\n // direction and the current element position relative to\n // the frame. This prevents area from ever being shown\n // where the element does't fill the frame during scaling\n const origin = getElementOrigin(element && getElementOffsets(element));\n const transformOrigin =\n {\n [AnimationDirection.RightToLeft]: {\n horizontal: 0,\n vertical: origin.vertical,\n },\n [AnimationDirection.LeftToRight]: {\n horizontal: 100,\n vertical: origin.vertical,\n },\n [AnimationDirection.BottomToTop]: {\n horizontal: origin.horizontal,\n vertical: 0,\n },\n [AnimationDirection.TopToBottom]: {\n horizontal: origin.horizontal,\n vertical: 100,\n },\n }[panDir] || [];\n\n // Background animations aren't really composable through element nesting\n // because they all target the same dom node. To accommomdate for this we\n // manually compose the keyframes and use those to generate a new animation.\n const bgZoom = EffectBackgroundZoom(\n {\n zoomDirection,\n transformOrigin,\n type: AnimationType.EffectBackgroundZoom,\n ...args,\n },\n element\n );\n const bgPan = EffectBackgroundPan(\n {\n panDir,\n type: AnimationType.EffectBackgroundPan,\n ...args,\n },\n element\n );\n\n const startTransform = `${bgPan.keyframes.transform[0]} ${bgZoom.keyframes.transform[0]}`;\n const zoomLastTransformIndex = (bgZoom.keyframes.transform.length || 1) - 1;\n const panLastTransformIndex = (bgPan.keyframes.transform.length || 1) - 1;\n const endTransform = `${bgPan.keyframes.transform[zoomLastTransformIndex]} ${bgZoom.keyframes.transform[panLastTransformIndex]}`;\n\n const keyframes = { transform: [startTransform, endTransform] };\n\n return createAnimation(keyframes, timings, false, true);\n}\n\nexport { fields } from './backgroundPan';\n" }, { "path": "packages/animation/src/parts/effects/backgroundZoom.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { clamp, progress, lerp } from '@googleforcreators/units';\nimport { sprintf, _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { BG_MIN_SCALE, BG_MAX_SCALE } from '../../constants';\nimport { getElementOffsets, getElementOrigin } from '../../utils';\nimport { AnimationZoom } from '../simple/zoom';\nimport {\n type AMPEffectTiming,\n AnimationType,\n type Element,\n FieldType,\n isScaledElement,\n ScaleDirection,\n} from '../../types';\n\ntype TransformOrigin = {\n vertical: number;\n horizontal: number;\n};\n\nexport interface ZoomBackgroundEffect extends AMPEffectTiming {\n type: AnimationType.EffectBackgroundZoom;\n zoomDirection?: ScaleDirection;\n transformOrigin?: TransformOrigin;\n}\n\nexport function EffectBackgroundZoom(\n {\n zoomDirection = ScaleDirection.ScaleOut,\n transformOrigin,\n duration = 2000,\n delay = 0,\n easing = 'cubic-bezier(.3,0,.55,1)',\n }: ZoomBackgroundEffect,\n element: Element\n) {\n // Define the min/max range based off the element scale\n // at element scale 400, the range should be [1/4, 1]\n // at element scale 100, the range should be [1, 4]\n if (!isScaledElement(element)) {\n throw new Error('Should not happen');\n }\n\n const range = {\n MIN: BG_MIN_SCALE / (element.scale || 1),\n MAX: BG_MAX_SCALE / (element.scale || 1),\n };\n\n // Compute what a 50% difference is relative to [0%, 400%]\n const normalizedDelta = progress(50, { MIN: 0, MAX: BG_MAX_SCALE });\n // Interpret the normalized delta into the compounded scale coordinate space.\n const delta = lerp(normalizedDelta, { MIN: 0, MAX: range.MAX });\n // Apply the interpreted fixed delta to the elements scale\n const zoomFrom =\n 1 + (zoomDirection === ScaleDirection.ScaleOut ? 1 : -1) * delta;\n\n return AnimationZoom({\n type: AnimationType.Zoom,\n // make sure we stay within min/max range so image always fills canvas\n zoomFrom: clamp(zoomFrom, range),\n zoomTo: 1,\n duration,\n delay,\n easing,\n targetLeafElement: true,\n // Account for moving bg element relative to frame\n transformOrigin:\n transformOrigin ||\n getElementOrigin(element && getElementOffsets(element)),\n });\n}\n\nexport const fields = {\n zoomDirection: {\n label: __('Direction', 'web-stories'),\n tooltip: sprintf(\n /* translators: 1: scaleIn. 2: scaleOut */\n __('Valid values are %1$s or %2$s', 'web-stories'),\n 'scaleIn',\n 'scaleOut'\n ),\n type: FieldType.DirectionPicker,\n values: [ScaleDirection.ScaleIn, ScaleDirection.ScaleOut],\n defaultValue: ScaleDirection.ScaleOut,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 2000,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/drop.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { _x, __ } from '@googleforcreators/i18n';\nimport type { DimensionableElement } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport createAnimation from '../createAnimation';\nimport {\n type AMPEffectTiming,\n type AnimationType,\n type Element,\n FieldType,\n type Keyframes,\n} from '../../types';\nimport { getGlobalSpace, getOffPageOffset } from '../../utils';\n\nfunction getMinTopOffset(element: DimensionableElement) {\n return getOffPageOffset({ ...element, y: 160 }).offsetTop;\n}\n\nfunction getDropKeyframes(element: DimensionableElement): Keyframes {\n const minTop = getMinTopOffset(element);\n const { offsetTop } = getOffPageOffset(element);\n const global = getGlobalSpace(element);\n const maxBounceHeight = -Math.max(Math.abs(minTop), Math.abs(offsetTop));\n return [\n {\n offset: 0,\n transform: global`translate3d(0, ${maxBounceHeight}%, 0)`,\n easing: 'cubic-bezier(.5, 0, 1, 1)',\n },\n {\n offset: 0.29,\n transform: global`translate3d(0, 0%, 0)`,\n easing: 'cubic-bezier(0, 0, .5, 1)',\n },\n {\n offset: 0.45,\n transform: global`translate3d(0, ${0.2812 * maxBounceHeight}%, 0)`,\n easing: 'cubic-bezier(.5, 0, 1, 1)',\n },\n {\n offset: 0.61,\n transform: global`translate3d(0, 0%, 0)`,\n easing: 'cubic-bezier(0, 0, .5, 1)',\n },\n {\n offset: 0.71,\n transform: global`translate3d(0, ${0.0956 * maxBounceHeight}%, 0)`,\n easing: 'cubic-bezier(.5, 0, 1, 1)',\n },\n {\n offset: 0.8,\n transform: global`translate3d(0, 0%, 0)`,\n easing: 'cubic-bezier(0, 0, .5, 1)',\n },\n {\n offset: 0.85,\n transform: global`translate3d(0, ${0.0359 * maxBounceHeight}%, 0)`,\n easing: 'cubic-bezier(.5, 0, 1, 1)',\n },\n {\n offset: 0.92,\n transform: global`translate3d(0, 0%, 0)`,\n easing: 'cubic-bezier(0, 0, .5, 1)',\n },\n {\n offset: 0.96,\n transform: global`translate3d(0, ${0.0156 * maxBounceHeight}%, 0)`,\n easing: 'cubic-bezier(.5, 0, 1, 1)',\n },\n {\n offset: 1,\n transform: global`translate3d(0, 0%, 0)`,\n easing: 'cubic-bezier(0, 0, .5, 1)',\n },\n ];\n}\n\nexport interface DropEffect extends AMPEffectTiming {\n type: AnimationType.EffectDrop;\n}\n\nexport function EffectDrop(\n { fill = 'both', duration = 1600, delay = 0 }: DropEffect,\n element: Element\n) {\n const timings: AMPEffectTiming = { fill, duration, delay };\n const keyframes = getDropKeyframes(element);\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n duration: {\n tooltip: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 600,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/fadeIn.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AnimationFade } from '../simple/fade';\nimport { type AMPEffectTiming, AnimationType, FieldType } from '../../types';\n\nexport interface FadeInEffect extends AMPEffectTiming {\n type: AnimationType.EffectFadeIn;\n}\nexport function EffectFadeIn({\n duration = 600,\n delay = 0,\n easing = 'cubic-bezier(0.4, 0.4, 0.0, 1)',\n}: FadeInEffect) {\n return AnimationFade({\n fadeFrom: 0,\n fadeTo: 1,\n duration,\n delay,\n easing,\n type: AnimationType.Fade,\n });\n}\n\nexport const fields = {\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 600,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/flyIn.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { v4 as uuidv4 } from 'uuid';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AnimationMove } from '../simple/move';\nimport { AnimationFade } from '../simple/fade';\nimport { getOffPageOffset } from '../../utils';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport type { AnimationPart } from '../types';\n\nexport interface FlyInEffect extends AMPEffectTiming {\n flyInDir?: AnimationDirection;\n type: AnimationType.EffectFlyIn;\n}\n\nexport function EffectFlyIn(\n {\n flyInDir = AnimationDirection.TopToBottom,\n duration = 600,\n delay = 0,\n easing = 'cubic-bezier(0.2, 0.6, 0.0, 1)',\n }: FlyInEffect,\n element: Element\n): AnimationPart {\n const id = uuidv4();\n const { offsetTop, offsetLeft, offsetRight, offsetBottom } =\n getOffPageOffset(element);\n\n const offsetLookup = {\n [AnimationDirection.TopToBottom]: {\n offsetY: `${offsetTop}%`,\n },\n [AnimationDirection.BottomToTop]: {\n offsetY: `${offsetBottom}%`,\n },\n [AnimationDirection.LeftToRight]: {\n offsetX: `${offsetLeft}%`,\n },\n [AnimationDirection.RightToLeft]: {\n offsetX: `${offsetRight}%`,\n },\n };\n\n const fade = AnimationFade({\n fadeFrom: 0,\n fadeTo: 1,\n duration: duration,\n delay,\n easing,\n type: AnimationType.Fade,\n });\n\n const move = AnimationMove(\n {\n ...offsetLookup[flyInDir],\n duration,\n delay,\n easing,\n type: AnimationType.Move,\n },\n element\n );\n\n const keyframes = {\n ...move.keyframes,\n ...fade.keyframes,\n };\n\n return {\n id,\n keyframes,\n WAAPIAnimation: {\n ...move.WAAPIAnimation,\n keyframes,\n },\n AMPTarget: function AMPTarget({\n children,\n style,\n }: PropsWithChildren<{ style?: CSSProperties }>) {\n return (\n \n {children}\n \n );\n },\n AMPAnimation: function AMPAnimation() {\n return (\n <>\n \n \n \n );\n },\n generatedKeyframes: {\n ...fade.generatedKeyframes,\n ...move.generatedKeyframes,\n },\n };\n}\n\nexport const fields = {\n flyInDir: {\n label: __('Direction', 'web-stories'),\n type: FieldType.DirectionPicker,\n values: [\n AnimationDirection.TopToBottom,\n AnimationDirection.BottomToTop,\n AnimationDirection.LeftToRight,\n AnimationDirection.RightToLeft,\n ],\n defaultValue: AnimationDirection.BottomToTop,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 600,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/pan.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { __ } from '@googleforcreators/i18n';\nimport {\n PAGE_WIDTH,\n FULLBLEED_HEIGHT,\n DANGER_ZONE_HEIGHT,\n dataToEditorY,\n getBox,\n type ElementBox,\n} from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport createAnimation from '../createAnimation';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n type AnimationType,\n type Element,\n FieldType,\n} from '../../types';\n\nfunction getTargetScale({ width, height }: ElementBox) {\n if (width < PAGE_WIDTH || height < FULLBLEED_HEIGHT) {\n const scaleFactor = 1.25;\n\n const widthScale = width < PAGE_WIDTH ? PAGE_WIDTH / width : 1;\n const heightScale =\n height < FULLBLEED_HEIGHT ? FULLBLEED_HEIGHT / height : 1;\n\n return Math.max(widthScale, heightScale) * scaleFactor;\n }\n\n return 1;\n}\n\nexport interface PanEffect extends AMPEffectTiming {\n panDir?: AnimationDirection;\n type: AnimationType.EffectPan;\n}\n\nexport function EffectPan(\n {\n panDir = AnimationDirection.RightToLeft,\n duration = 1000,\n delay,\n easing,\n }: PanEffect,\n element: Element\n) {\n const timings: AMPEffectTiming = {\n fill: 'both',\n duration,\n delay,\n easing,\n };\n\n const scale = getTargetScale(element);\n const scaledElement: ElementBox = {\n x: element.x,\n y: element.y,\n width: element.width * scale,\n height: element.height * scale,\n rotationAngle: element.rotationAngle,\n };\n\n const { x, y, width, height } = getBox(scaledElement, 100, 100);\n const dangerZoneOffset = dataToEditorY(DANGER_ZONE_HEIGHT, 100);\n\n const alignTop = -((dangerZoneOffset + y) / height) * 100.0;\n const alignRight = ((100 - (x + width)) / width) * 100.0;\n const alignLeft = -(x / width) * 100.0;\n const alignBottom =\n ((100 - (y + height) + dangerZoneOffset) / height) * 100.0;\n\n let startX, startY, endX, endY;\n\n switch (panDir) {\n case AnimationDirection.TopToBottom:\n startX = (alignLeft + alignRight) / 2;\n startY = alignTop;\n endX = (alignLeft + alignRight) / 2;\n endY = alignBottom;\n break;\n case AnimationDirection.BottomToTop:\n startX = (alignLeft + alignRight) / 2;\n startY = alignBottom;\n endX = (alignLeft + alignRight) / 2;\n endY = alignTop;\n break;\n case AnimationDirection.LeftToRight:\n startX = alignLeft;\n startY = alignTop;\n endX = alignRight;\n endY = alignTop;\n break;\n case AnimationDirection.RightToLeft:\n default:\n startX = alignRight;\n startY = alignTop;\n endX = alignLeft;\n endY = alignTop;\n }\n\n const keyframes = {\n transform: [\n `translate(${startX}%, ${startY}%) scale(${scale})`,\n `translate(${endX}%, ${endY}%) scale(${scale})`,\n ],\n 'transform-origin': 'left top',\n };\n\n return createAnimation(keyframes, timings, false);\n}\n\nexport const fields = {\n panDir: {\n label: __('Direction', 'web-stories'),\n type: FieldType.DirectionPicker,\n values: [\n AnimationDirection.TopToBottom,\n AnimationDirection.BottomToTop,\n AnimationDirection.LeftToRight,\n AnimationDirection.RightToLeft,\n ],\n defaultValue: AnimationDirection.BottomToTop,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/pulse.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AnimationPulse } from '../simple/pulse';\nimport { type AMPEffectTiming, AnimationType, FieldType } from '../../types';\n\nexport interface PulseEffect extends AMPEffectTiming {\n scale?: number;\n type: AnimationType.EffectPulse;\n}\n\nexport function EffectPulse({\n iterations = 1,\n scale = 0.5,\n duration = 1450,\n delay,\n easing = 'ease-in-out',\n}: PulseEffect) {\n return AnimationPulse({\n scale,\n duration,\n delay,\n easing,\n iterations,\n type: AnimationType.Pulse,\n });\n}\n\nexport const fields = {\n scale: {\n label: __('Scale', 'web-stories'),\n tooltip: 'Valid values are greater than or equal to 0',\n type: FieldType.Float,\n defaultValue: 0.5,\n },\n iterations: {\n label: _x('Pulses', 'number of pulses', 'web-stories'),\n type: FieldType.Float,\n defaultValue: 1,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 1450,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/rotateIn.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __ } from '@googleforcreators/i18n';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from '../types';\nimport { AnimationMove } from '../simple/move';\nimport { AnimationSpin } from '../simple/spin';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport { getOffPageOffset } from '../../utils';\n\nconst numberOfRotations = 1;\nconst stopAngle = 0;\n\nexport interface RotateInEffect extends AMPEffectTiming {\n rotateInDir?: AnimationDirection;\n type: AnimationType.EffectRotateIn;\n}\n\nexport function EffectRotateIn(\n {\n rotateInDir = AnimationDirection.LeftToRight,\n duration = 1000,\n easing = 'cubic-bezier(.2, 0, .8, 1)',\n delay,\n }: RotateInEffect,\n element: Element\n): AnimationPart {\n const id = uuidv4();\n\n const { offsetLeft, offsetRight } = getOffPageOffset(element);\n\n const offsetX =\n rotateInDir === AnimationDirection.RightToLeft\n ? `${offsetRight}%`\n : `${offsetLeft}%`;\n\n const move = AnimationMove(\n {\n offsetX,\n duration,\n delay,\n easing,\n type: AnimationType.Move,\n },\n element\n );\n\n const spin = AnimationSpin(\n {\n rotation: `${\n (rotateInDir === AnimationDirection.LeftToRight ? -1 : 1) *\n 180 *\n numberOfRotations\n }`,\n stopAngle,\n duration,\n delay,\n easing: 'cubic-bezier(.2, 0, .5, 1)',\n type: AnimationType.Spin,\n },\n element\n );\n\n const [moveTransformStart, moveTransformEnd] = move.keyframes.transform;\n const [spinTransformStart, spinTransformEnd] = spin.keyframes.transform;\n const keyframes = {\n transform: [\n `${moveTransformStart} ${spinTransformStart}`,\n `${moveTransformEnd} ${spinTransformEnd}`,\n ],\n };\n\n return {\n id,\n keyframes,\n WAAPIAnimation: {\n ...spin.WAAPIAnimation,\n keyframes,\n },\n AMPTarget: function AMPTarget({\n children,\n style,\n }: PropsWithChildren<{ style?: CSSProperties }>) {\n return (\n \n {children}\n \n );\n },\n AMPAnimation: function AMPAnimation() {\n return (\n <>\n \n \n \n );\n },\n generatedKeyframes: {\n ...move.generatedKeyframes,\n ...spin.generatedKeyframes,\n },\n };\n}\n\nexport const fields = {\n rotateInDir: {\n label: __('Direction', 'web-stories'),\n type: FieldType.DirectionPicker,\n values: [AnimationDirection.LeftToRight, AnimationDirection.RightToLeft],\n defaultValue: AnimationDirection.LeftToRight,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/drop.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { PAGE_HEIGHT, PAGE_WIDTH, getBox } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport {\n AMPStoryWrapper,\n AMP_STORY_ASPECT_RATIO,\n} from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Drop',\n};\n\nconst elements = [\n {\n id: 'e1',\n color: 'red',\n x: (PAGE_WIDTH - 50) / 2,\n y: PAGE_HEIGHT - 50,\n width: 50,\n height: 50,\n },\n];\n\nconst animations = [\n { id: '1', targets: ['e1'], type: AnimationType.EffectDrop },\n];\n\nexport const _default = {\n render: function Render() {\n const elementBoxes = elements.map((element) => ({\n ...element,\n ...getBox(element, 100, 100),\n }));\n\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

\n {'AMP Drop Effect'}\n

\n \n \n \n \n \n \n \n

\n {'Custom Drop Effect'}\n

\n\n \n
\n
\n {elementBoxes.map((elem) => (\n \n \n \n \n
\n ))}\n
\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/fadeIn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Fade-In',\n};\n\nconst animations = [\n { id: '1', targets: ['e1'], type: AnimationType.EffectFade, duration: 1000 },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Fade,\n duration: 2500,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red' },\n { id: 'e2', color: 'orange' },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

{'AMP Fade In'}

\n\n \n \n \n \n \n \n \n \n

\n {'Custom Fade In Effect'}\n

\n\n \n {elements.map(({ id, color }) => (\n
\n \n \n \n
\n ))}\n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/flyIn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { getBox } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, AnimationDirection } from '../../../types';\nimport {\n AMPStoryWrapper,\n AMP_STORY_ASPECT_RATIO,\n} from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Fly-In',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectFlyIn,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.EffectFlyIn,\n delay: 500,\n flyInDir: AnimationDirection.LeftToRight,\n },\n {\n id: '3',\n targets: ['e3'],\n type: AnimationType.EffectFlyIn,\n delay: 1000,\n flyInDir: AnimationDirection.RightToLeft,\n },\n {\n id: '4',\n targets: ['e4'],\n type: AnimationType.EffectFlyIn,\n delay: 1500,\n flyInDir: AnimationDirection.BottomToTop,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', x: 50, y: 100, width: 50, height: 50 },\n { id: 'e2', color: 'orange', x: 50, y: 175, width: 50, height: 50 },\n { id: 'e3', color: 'blue', x: 50, y: 250, width: 50, height: 50 },\n { id: 'e4', color: 'yellow', x: 50, y: 325, width: 50, height: 50 },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n const elementBoxes = elements.map((element) => ({\n ...element,\n ...getBox(element, 100, 100),\n }));\n\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

{'AMP Fly In'}

\n\n \n \n \n \n \n \n \n \n \n \n

\n {'Custom Fly In Effect'}\n

\n\n \n
\n
\n {elementBoxes.map(({ id, color, x, y, width, height }) => (\n \n \n \n \n
\n ))}\n
\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/pan.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { getBox } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, AnimationDirection } from '../../../types';\nimport {\n AMPStoryWrapper,\n AMP_STORY_ASPECT_RATIO,\n} from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Pan',\n};\n\nconst SAMPLE_SRC_1 = 'https://picsum.photos/1120/746?image=1025';\n\nconst animations = [\n {\n id: '2',\n targets: ['e1'],\n type: AnimationType.EffectPan,\n panDir: AnimationDirection.TopToBottom,\n duration: 5000,\n },\n {\n id: '3',\n targets: ['e1'],\n type: AnimationType.EffectPan,\n panDir: AnimationDirection.BottomToTop,\n duration: 5000,\n },\n {\n id: '4',\n targets: ['e1'],\n type: AnimationType.EffectPan,\n panDir: AnimationDirection.LeftToRight,\n duration: 5000,\n },\n {\n id: '5',\n targets: ['e1'],\n type: AnimationType.EffectPan,\n panDir: AnimationDirection.RightToLeft,\n duration: 5000,\n },\n];\n\nconst elements = [{ id: 'e1', x: 50, y: 100, width: 296, height: 198 }];\n\nexport const _default = {\n render: function Render() {\n const elementBoxes = elements.map((element) => ({\n ...element,\n ...getBox(element, 100, 100),\n }));\n\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

{'AMP PAN'}

\n\n \n \n \n \n {animations.map((animation) => (\n \n \n \n

\n {'Custom Pan Effect'}\n

\n\n \n
\n
\n {elementBoxes.map(({ id, x, y, width, height }) => (\n \n \n \"\"\n \n
\n ))}\n
\n \n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/pulse.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Pulse',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectPulse,\n delay: 500,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.EffectPulse,\n iterations: 2,\n scale: 1,\n delay: 1000,\n },\n {\n id: '3',\n targets: ['e3'],\n type: AnimationType.EffectPulse,\n iterations: 3,\n scale: 1.5,\n delay: 2000,\n },\n {\n id: '4',\n targets: ['e4'],\n type: AnimationType.EffectPulse,\n iterations: 4,\n scale: 2,\n delay: 3500,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red' },\n { id: 'e2', color: 'orange' },\n { id: 'e3', color: 'blue' },\n { id: 'e4', color: 'yellow' },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

{'AMP Pulse'}

\n\n \n \n \n \n \n \n \n \n \n \n

\n {'Custom Pulse Effect'}\n

\n

\n {\n 'Only first element reflects amp-story preset, rest highlight greater configurability'\n }\n

\n\n \n {elements.map(({ id, color }) => (\n
\n \n \n \n
\n ))}\n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/rotateIn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { getBox } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, AnimationDirection } from '../../../types';\nimport {\n AMPStoryWrapper,\n AMP_STORY_ASPECT_RATIO,\n} from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Rotate-In',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectRotateIn,\n delay: 500,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.EffectRotateIn,\n delay: 1000,\n rotateInDir: AnimationDirection.RightToLeft,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', x: 315, y: 100, width: 50, height: 50 },\n { id: 'e2', color: 'orange', x: 50, y: 175, width: 50, height: 50 },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n const elementBoxes = elements.map((element) => ({\n ...element,\n ...getBox(element, 100, 100),\n }));\n\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

\n {'AMP Rotate-In'}\n

\n\n \n \n \n \n \n \n \n \n

\n {'Custom Rotate-In Effect'}\n

\n\n \n
\n
\n {elementBoxes.map(({ id, color, x, y, width, height }) => (\n \n \n \n \n
\n ))}\n
\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/twirlIn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Twirl-In',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectTwirlIn,\n },\n];\n\nconst element = {\n id: 'e1',\n color: 'red',\n width: 50,\n height: 50,\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

{'AMP Twirl In'}

\n\n \n \n \n \n \n \n \n

\n {'Custom Twirl In Effect'}\n

\n\n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/whooshIn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { getBox } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, AnimationDirection } from '../../../types';\nimport {\n AMPStoryWrapper,\n AMP_STORY_ASPECT_RATIO,\n} from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Whoosh-In',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectWhooshIn,\n delay: 500,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.EffectWhooshIn,\n delay: 1000,\n whooshInDir: AnimationDirection.RightToLeft,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', x: 315, y: 100, width: 50, height: 50 },\n { id: 'e2', color: 'orange', x: 50, y: 175, width: 50, height: 50 },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n const elementBoxes = elements.map((element) => ({\n ...element,\n ...getBox(element, 100, 100),\n }));\n\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

\n {'AMP Whoosh-In'}\n

\n\n \n \n \n \n \n \n \n \n

\n {'Custom Whoosh-In Effect'}\n

\n\n \n
\n
\n {elementBoxes.map(({ id, color, x, y, width, height }) => (\n \n \n \n \n
\n ))}\n
\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/stories/zoom.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, ScaleDirection } from '../../../types';\nimport { AMPStoryWrapper } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Effects/Zoom',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.EffectZoom,\n scaleDirection: ScaleDirection.ScaleIn,\n duration: 4000,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.EffectZoom,\n scaleDirection: ScaleDirection.ScaleOut,\n duration: 4000,\n },\n];\n\nconst elements = [\n {\n id: 'e1',\n },\n {\n id: 'e2',\n },\n];\n\nconst defaultStyles = {\n position: 'absolute',\n left: `0%`,\n top: `0%`,\n width: '720px',\n height: '320px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n \n

\n {'AMP Zoom In/Out'}\n

\n\n \n
\n \n
\n\n \n \n \n \n \n \n \n \n

\n {'Custom Zoom In/Out Effect'}\n

\n\n \n {elements.map(({ id }, index) => (\n \n \n \n \n \n ))}\n \n \n \n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/twirlIn.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport createAnimation from '../createAnimation';\nimport type { AMPEffectTiming, AnimationType, Element } from '../../types';\nimport { getGlobalSpace } from '../../utils';\n\nconst defaultTimings: AMPEffectTiming = {\n delay: 0,\n duration: 1000,\n fill: 'both',\n iterations: 1,\n easing: 'cubic-bezier(0.4, 0.4, 0.0, 1)',\n};\n\nexport interface TwirlInEffect extends AMPEffectTiming {\n type: AnimationType.EffectTwirlIn;\n}\n\nexport function EffectTwirlIn(\n { type, ...args }: TwirlInEffect,\n element: Element\n) {\n const global = getGlobalSpace(element);\n const keyframes = {\n transform: [global`rotate(-540deg) scale(0.1)`, 'none'],\n opacity: [0, 1],\n };\n const timings = { ...defaultTimings, ...args };\n return createAnimation(keyframes, timings);\n}\n" }, { "path": "packages/animation/src/parts/effects/whooshIn.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { _x, __ } from '@googleforcreators/i18n';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from '../types';\nimport { AnimationFade } from '../simple/fade';\nimport { AnimationMove } from '../simple/move';\nimport { AnimationZoom } from '../simple/zoom';\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport getOffPageOffset from '../../utils/getOffPageOffset';\n\nexport interface WhooshInEffect extends AMPEffectTiming {\n whooshInDir?: AnimationDirection;\n type: AnimationType.EffectWhooshIn;\n}\n\nexport function EffectWhooshIn(\n {\n whooshInDir = AnimationDirection.LeftToRight,\n duration = 600,\n easing = 'cubic-bezier(0.4, 0.4, 0.0, 1)',\n delay,\n }: WhooshInEffect,\n element: Element\n): AnimationPart {\n const id = uuidv4();\n\n const { offsetLeft, offsetRight } = getOffPageOffset(element);\n\n const offsetX =\n whooshInDir === AnimationDirection.RightToLeft\n ? `${offsetRight}%`\n : `${offsetLeft}%`;\n\n const move = AnimationMove(\n {\n offsetX,\n duration,\n delay,\n easing,\n type: AnimationType.Move,\n },\n element\n );\n\n const fade = AnimationFade({\n fadeFrom: 0,\n fadeTo: 1,\n duration,\n delay,\n easing,\n type: AnimationType.Fade,\n });\n\n const zoom = AnimationZoom({\n zoomFrom: 0.15,\n zoomTo: 1,\n duration,\n delay,\n easing,\n type: AnimationType.Zoom,\n });\n\n const [moveTransformStart, moveTransformEnd] = move.keyframes.transform;\n const [zoomTransformStart, zoomTransformEnd] = zoom.keyframes.transform;\n const keyframes = {\n transform: [\n `${moveTransformStart} ${zoomTransformStart}`,\n `${moveTransformEnd} ${zoomTransformEnd}`,\n ],\n opacity: fade.keyframes.opacity,\n };\n\n return {\n id,\n keyframes,\n WAAPIAnimation: {\n ...zoom.WAAPIAnimation,\n keyframes,\n },\n AMPTarget: function AMPTarget({\n children,\n style,\n }: PropsWithChildren<{ style?: CSSProperties }>) {\n return (\n \n \n {children}\n \n \n );\n },\n AMPAnimation: function AMPAnimation() {\n return (\n <>\n \n \n \n \n );\n },\n generatedKeyframes: {\n ...move.generatedKeyframes,\n ...fade.generatedKeyframes,\n ...zoom.generatedKeyframes,\n },\n };\n}\n\nexport const fields = {\n whooshInDir: {\n label: __('Direction', 'web-stories'),\n type: FieldType.DirectionPicker,\n values: [AnimationDirection.LeftToRight, AnimationDirection.RightToLeft],\n defaultValue: AnimationDirection.LeftToRight,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 600,\n },\n};\n" }, { "path": "packages/animation/src/parts/effects/zoom.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { v4 as uuidv4 } from 'uuid';\nimport type { CSSProperties, PropsWithChildren } from 'react';\nimport { sprintf, _x, __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { AnimationZoom } from '../simple/zoom';\nimport { AnimationFade } from '../simple/fade';\nimport {\n type AMPEffectTiming,\n AnimationType,\n FieldType,\n ScaleDirection,\n} from '../../types';\nimport type { AnimationPart } from '../types';\n\nexport interface ZoomEffect extends AMPEffectTiming {\n scaleDirection?: ScaleDirection;\n type: AnimationType.EffectZoom;\n}\n\nexport function EffectZoom({\n scaleDirection = ScaleDirection.ScaleIn,\n duration = 1000,\n delay = 0,\n easing = 'cubic-bezier(.3,0,.55,1)',\n}: ZoomEffect): AnimationPart {\n const id = uuidv4();\n\n const zoom = AnimationZoom({\n zoomFrom: scaleDirection === ScaleDirection.ScaleOut ? 3 : 1 / 3,\n zoomTo: 1,\n duration,\n delay,\n easing,\n type: AnimationType.Zoom,\n });\n\n const fade = AnimationFade({\n fadeFrom: scaleDirection === ScaleDirection.ScaleOut ? 1 : 0,\n fadeTo: 1,\n duration: duration,\n delay,\n easing,\n type: AnimationType.Fade,\n });\n\n const keyframes = {\n transform: zoom.keyframes.transform,\n opacity: fade.keyframes.opacity,\n };\n\n return {\n id,\n keyframes,\n WAAPIAnimation: {\n ...zoom.WAAPIAnimation,\n keyframes,\n },\n AMPTarget: function AMPTarget({\n children,\n style,\n }: PropsWithChildren<{ style?: CSSProperties }>) {\n return (\n \n {children}\n \n );\n },\n AMPAnimation: function AMPAnimation() {\n return (\n <>\n \n \n \n );\n },\n generatedKeyframes: {\n ...fade.generatedKeyframes,\n ...zoom.generatedKeyframes,\n },\n };\n}\n\nexport const fields = {\n scaleDirection: {\n label: __('Direction', 'web-stories'),\n tooltip: sprintf(\n /* translators: 1: scaleIn. 2: scaleOut */\n __('Valid values are %1$s or %2$s', 'web-stories'),\n 'scaleIn',\n 'scaleOut'\n ),\n type: FieldType.DirectionPicker,\n values: [ScaleDirection.ScaleIn, ScaleDirection.ScaleOut],\n defaultValue: ScaleDirection.ScaleIn,\n },\n duration: {\n label: __('Duration', 'web-stories'),\n type: FieldType.Number,\n unit: _x('ms', 'Time in milliseconds', 'web-stories'),\n defaultValue: 2000,\n },\n};\n" }, { "path": "packages/animation/src/parts/emptyAnimationPart.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { PropsWithChildren, HTMLAttributes } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { AnimationPart } from './types';\n\nfunction EmptyAMPTarget({\n children,\n ...rest\n}: PropsWithChildren>) {\n return
{children}
;\n}\n\nfunction emptyAnimationPart(): AnimationPart {\n return {\n id: '-1',\n keyframes: {},\n generatedKeyframes: {},\n WAAPIAnimation: { keyframes: {}, timings: {} },\n AMPTarget: EmptyAMPTarget,\n AMPAnimation: () => null,\n };\n}\n\nexport default emptyAnimationPart;\n" }, { "path": "packages/animation/src/parts/getAnimationEffectFields.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { AnimationType } from '../types';\nimport { orderByKeys } from '../utils';\nimport getDefaultFieldValue from '../utils/getDefaultFieldValue';\nimport { fields as dropFields } from './effects/drop';\nimport { fields as fadeFields } from './effects/fadeIn';\nimport { fields as flyInFields } from './effects/flyIn';\nimport { fields as panFields } from './effects/pan';\nimport { fields as pulseFields } from './effects/pulse';\nimport { fields as whooshInFields } from './effects/whooshIn';\nimport { fields as zoomFields } from './effects/zoom';\nimport { fields as rotateInFields } from './effects/rotateIn';\nimport { fields as bgZoomFields } from './effects/backgroundZoom';\nimport { fields as bgPanFields } from './effects/backgroundPan';\nimport { fields as bgPanZoomFields } from './effects/backgroundPanAndZoom';\n\nimport { basicAnimationFields } from './defaultFields';\n\nexport function getAnimationEffectFields(type?: AnimationType) {\n const customFieldsByType: Partial> = {\n [AnimationType.EffectFadeIn]: fadeFields,\n [AnimationType.EffectFlyIn]: flyInFields,\n [AnimationType.EffectPan]: panFields,\n [AnimationType.EffectPulse]: pulseFields,\n [AnimationType.EffectWhooshIn]: whooshInFields,\n [AnimationType.EffectZoom]: zoomFields,\n [AnimationType.EffectDrop]: dropFields,\n [AnimationType.EffectRotateIn]: rotateInFields,\n [AnimationType.EffectBackgroundZoom]: bgZoomFields,\n [AnimationType.EffectBackgroundPan]: bgPanFields,\n [AnimationType.EffectBackgroundPanAndZoom]: bgPanZoomFields,\n };\n\n const customFields = (type && customFieldsByType[type]) || {};\n const allFields = {\n ...basicAnimationFields,\n ...customFields,\n };\n const allFieldsOrder = {\n ...customFields,\n ...basicAnimationFields,\n };\n let fieldOrder = Object.keys(allFieldsOrder);\n\n // ZoomAndPand design deviates from the normal input order by putting\n // a custom field (zoom direction) at the end. This accommodates for that.\n const zoomField = 'zoomDirection';\n if (\n type === AnimationType.EffectBackgroundPanAndZoom &&\n fieldOrder.includes(zoomField)\n ) {\n fieldOrder = fieldOrder\n .filter((field) => field !== zoomField)\n .concat([zoomField]);\n }\n\n // This order is important.\n // We want custom fields to appear above default fields, but we\n // also want custom fields to override any same-named default fields\n const fields = orderByKeys(allFields, fieldOrder);\n return fields;\n}\n\nexport function getAnimationEffectDefaults(type: AnimationType) {\n const fields = getAnimationEffectFields(type);\n return Object.fromEntries(\n Object.entries(fields).map(([key, value]) => [\n key,\n value.defaultValue ?? getDefaultFieldValue(value.type),\n ])\n );\n}\n" }, { "path": "packages/animation/src/parts/index.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as createAnimationPart } from './createAnimationPart';\nexport * from './getAnimationEffectFields';\nexport * from './types';\n" }, { "path": "packages/animation/src/parts/simple/blinkOn.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport generateLookupMap from '../../utils/generateLookupMap';\nimport padArray from '../../utils/padArray';\nimport {\n type AMPEffectTiming,\n type AnimationType,\n FieldType,\n} from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst DEFAULT_BLINKS = 10;\nconst AVAILABLE_OPACITY = [0, 0.25, 0.75, 1];\n\nconst defaults: AMPEffectTiming = { fill: 'forwards' };\n\nfunction range(i: number) {\n return Array(i)\n .fill(0)\n .map((_v, k) => k);\n}\n\nfunction generateOpacityFrames(blinkCount: number = DEFAULT_BLINKS) {\n const lookup = generateLookupMap(AVAILABLE_OPACITY);\n\n let lastOpacity: number | null = null;\n const opacityFrames = range(blinkCount - 2).map(() => {\n const opacities: number[] =\n lastOpacity !== null ? lookup[lastOpacity] : AVAILABLE_OPACITY;\n const opacity = opacities[Math.floor(Math.random() * opacities.length)];\n lastOpacity = opacity;\n return opacity;\n });\n\n return padArray(opacityFrames, 3);\n}\n\nexport interface BlinkOnAnimation extends AMPEffectTiming {\n blinkCount?: number;\n type: AnimationType.BlinkOn;\n}\n\nexport function AnimationBlinkOn({\n blinkCount = DEFAULT_BLINKS,\n type,\n ...args\n}: BlinkOnAnimation) {\n const timings: AMPEffectTiming = { ...defaults, ...args };\n const keyframes = { opacity: [0, ...generateOpacityFrames(blinkCount), 1] };\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n blinkCount: { type: FieldType.Number, defaultValue: DEFAULT_BLINKS },\n};\n" }, { "path": "packages/animation/src/parts/simple/bounce.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming, AnimationType } from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst keyframes = [\n { transform: 'scale(0)', offset: 0.0 },\n { transform: 'scale(1.27)', offset: 0.18 },\n { transform: 'scale(0.84)', offset: 0.28 },\n { transform: 'scale(0.84)', offset: 0.29 },\n { transform: 'scale(1.1)', offset: 0.4 },\n { transform: 'scale(1.1)', offset: 0.41 },\n { transform: 'scale(0.95)', offset: 0.52 },\n { transform: 'scale(0.95)', offset: 0.53 },\n { transform: 'scale(1.03)', offset: 0.6 },\n { transform: 'scale(1.03)', offset: 0.61 },\n { transform: 'scale(0.98)', offset: 0.7 },\n { transform: 'scale(0.98)', offset: 0.71 },\n { transform: 'scale(1.02)', offset: 0.8 },\n { transform: 'scale(1.02)', offset: 0.81 },\n { transform: 'scale(0.99)', offset: 0.9 },\n { transform: 'scale(0.99)', offset: 0.91 },\n { transform: 'scale(1)', offset: 1 },\n];\n\nconst defaults: AMPEffectTiming = { fill: 'both', duration: 1500 };\n\nexport interface BounceAnimation extends AMPEffectTiming {\n type: AnimationType.Bounce;\n}\n\nexport function AnimationBounce({ type, ...args }: BounceAnimation) {\n const timings: AMPEffectTiming = { ...defaults, ...args };\n return createAnimation(keyframes, timings);\n}\n" }, { "path": "packages/animation/src/parts/simple/fade.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n type AnimationType,\n FieldType,\n} from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = {\n fill: 'both',\n duration: 1000,\n};\n\nexport interface FadeAnimation extends AMPEffectTiming {\n type: AnimationType.Fade;\n fadeFrom?: number;\n fadeTo?: number;\n}\n\nexport function AnimationFade({\n fadeFrom = 0,\n fadeTo = 1,\n type,\n ...args\n}: FadeAnimation) {\n const timings = { ...defaults, ...args };\n const keyframes = { opacity: [fadeFrom, fadeTo] };\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n fadeFrom: {\n tooltip: 'Valid values range from 0 to 1',\n type: FieldType.Float,\n defaultValue: 0,\n },\n fadeTo: {\n tooltip: 'Valid values range from 0 to 1',\n type: FieldType.Float,\n defaultValue: 1,\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/flip.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n type AnimationType,\n Axis,\n FieldType,\n Rotation,\n} from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = { fill: 'both', duration: 1000 };\n\nconst keyframesLookup = {\n [Rotation.Clockwise]: {\n [Axis.X]: {\n transform: ['rotateX(90deg)', 'rotateX(0deg)'],\n },\n [Axis.Y]: {\n transform: ['rotateY(90deg)', 'rotateY(0deg)'],\n },\n },\n [Rotation.CounterClockwise]: {\n [Axis.X]: {\n transform: ['rotateX(-90deg)', 'rotateX(0deg)'],\n },\n [Axis.Y]: {\n transform: ['rotateY(-90deg)', 'rotateY(0deg)'],\n },\n },\n [Rotation.PingPong]: {\n [Axis.X]: {\n transform: [],\n },\n [Axis.Y]: {\n transform: [],\n },\n },\n};\n\nexport interface FlipAnimation extends AMPEffectTiming {\n axis: Axis;\n rotation: Rotation;\n type: AnimationType.Flip;\n}\n\nexport function AnimationFlip({\n axis = Axis.Y,\n rotation = Rotation.Clockwise,\n type,\n ...args\n}: FlipAnimation) {\n const timings: AMPEffectTiming = { ...defaults, ...args };\n const keyframes = keyframesLookup[rotation][axis];\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n axis: {\n type: FieldType.Dropdown,\n values: [Axis.X, Axis.Y],\n defaultValue: Axis.Y,\n },\n rotation: {\n type: FieldType.Dropdown,\n values: [Rotation.Clockwise, Rotation.CounterClockwise],\n defaultValue: Rotation.Clockwise,\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/floatOn.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n AnimationDirection,\n type AnimationType,\n FieldType,\n} from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = { fill: 'both', duration: 1000 };\n\nconst keyframesLookup: Record<\n AnimationDirection,\n { transform: [string, string] }\n> = {\n [AnimationDirection.TopToBottom]: {\n transform: ['translateY(-100%)', 'translateY(0%)'],\n },\n [AnimationDirection.BottomToTop]: {\n transform: ['translateY(100%)', 'translateY(0%)'],\n },\n [AnimationDirection.LeftToRight]: {\n transform: ['translateX(-100%)', 'translateX(0%)'],\n },\n [AnimationDirection.RightToLeft]: {\n transform: ['translateX(100%)', 'translateX(0%)'],\n },\n};\n\nexport interface FloatOnAnimation extends AMPEffectTiming {\n floatOnDir?: AnimationDirection;\n type: AnimationType.FloatOn;\n}\n\nexport function AnimationFloatOn({\n floatOnDir = AnimationDirection.BottomToTop,\n type,\n ...args\n}: FloatOnAnimation) {\n const timings: AMPEffectTiming = { ...defaults, ...args };\n const keyframes = keyframesLookup[floatOnDir];\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n floatOnDir: {\n type: FieldType.Dropdown,\n values: [\n AnimationDirection.TopToBottom,\n AnimationDirection.BottomToTop,\n AnimationDirection.LeftToRight,\n AnimationDirection.RightToLeft,\n ],\n defaultValue: AnimationDirection.BottomToTop,\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/move.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n type AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport { defaultUnit, getGlobalSpace } from '../../utils';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = { fill: 'both', duration: 1000 };\n\nexport interface MoveAnimation extends AMPEffectTiming {\n type: AnimationType.Move;\n overflowHidden?: boolean;\n offsetX?: string | number;\n offsetY?: string | number;\n}\n\nexport function AnimationMove(\n {\n overflowHidden = false,\n offsetX = 0,\n offsetY = 0,\n type,\n ...args\n }: MoveAnimation,\n element: Element\n) {\n const global = getGlobalSpace(element);\n const timings: AMPEffectTiming = { ...defaults, ...args };\n const keyframes = {\n transform: [\n global`translate3d(${defaultUnit(offsetX, 'px')}, ${defaultUnit(\n offsetY,\n 'px'\n )}, 0)`,\n global`translate3d(${defaultUnit(0, 'px')}, ${defaultUnit(0, 'px')}, 0)`,\n ],\n };\n\n return createAnimation(keyframes, timings, overflowHidden);\n}\n\nexport const fields = {\n overflowHidden: { type: FieldType.Checkbox, defaultValue: false },\n offsetX: { type: FieldType.Text, defaultValue: 0 },\n offsetY: { type: FieldType.Text, defaultValue: 0 },\n};\n" }, { "path": "packages/animation/src/parts/simple/pulse.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming, AnimationType } from '../../types';\nimport createAnimation from '../createAnimation';\n\nexport function generatePulseKeyframes(scale: number) {\n const baseScale = 1.0;\n const intensity = scale;\n\n return {\n transform: [\n `scale(${baseScale})`,\n `scale(${baseScale + intensity})`,\n `scale(${baseScale - intensity / 10})`,\n `scale(${baseScale})`,\n ],\n offset: [0.0, 0.33, 0.66, 1.0],\n };\n}\n\nconst defaults: AMPEffectTiming = { fill: 'both', duration: 400 };\n\nexport interface PulseAnimation extends AMPEffectTiming {\n type: AnimationType.Pulse;\n scale?: number;\n}\n\nexport function AnimationPulse({\n iterations = 1,\n scale = 0.5,\n easing = 'cubic-bezier(0.3, 0.0, 0.0, 1)',\n type,\n ...args\n}: PulseAnimation) {\n const timings: AMPEffectTiming = {\n ...defaults,\n ...args,\n iterations,\n easing,\n };\n const keyframes = generatePulseKeyframes(scale);\n return createAnimation(keyframes, timings);\n}\n" }, { "path": "packages/animation/src/parts/simple/spin.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n type AnimationType,\n type Element,\n FieldType,\n} from '../../types';\nimport { defaultUnit, getGlobalSpace } from '../../utils';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = { fill: 'forwards', duration: 1000 };\n\nexport interface SpinAnimation extends AMPEffectTiming {\n rotation?: string | number;\n stopAngle?: number;\n type: AnimationType.Spin;\n}\n\nexport function AnimationSpin(\n { rotation = 0, stopAngle = 0, type, ...args }: SpinAnimation,\n element: Element\n) {\n const global = getGlobalSpace(element);\n const timings = { ...defaults, ...args };\n const keyframes = {\n transform: [\n global`rotateZ(${defaultUnit(rotation, 'deg')})`,\n global`rotateZ(${defaultUnit(stopAngle, 'deg')})`,\n ],\n };\n return createAnimation(keyframes, timings);\n}\n\nexport const fields = {\n rotation: { type: FieldType.Text, defaultValue: '0' },\n stopAngle: { type: FieldType.Text, defaultValue: '0' },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/blinkOn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/BlinkOn',\n};\n\nconst animations = [\n { id: '1', targets: ['e1'], type: AnimationType.BlinkOn, duration: 3000 },\n { id: '2', targets: ['e2'], type: AnimationType.BlinkOn, duration: 3000 },\n { id: '3', targets: ['e3'], type: AnimationType.BlinkOn, duration: 3000 },\n { id: '4', targets: ['e4'], type: AnimationType.BlinkOn, duration: 3000 },\n];\n\nconst elements = [\n { id: 'e1', color: 'red' },\n { id: 'e2', color: 'orange' },\n { id: 'e3', color: 'blue' },\n { id: 'e4', color: 'green' },\n];\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n \n {elements.map(({ id, color }) => (\n \n \n \n \n \n ))}\n \n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, color }) => (\n \n \n \n \n \n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/bounce.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Bounce',\n};\n\nconst animations = [\n { id: '1', targets: ['e1'], type: AnimationType.Bounce, duration: 1000 },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Bounce,\n duration: 1000,\n delay: 100,\n },\n {\n id: '3',\n targets: ['e3'],\n type: AnimationType.Bounce,\n duration: 1000,\n delay: 300,\n },\n {\n id: '4',\n targets: ['e4'],\n type: AnimationType.Bounce,\n duration: 1000,\n delay: 500,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', width: '50px' },\n { id: 'e2', color: 'orange', width: '100px' },\n { id: 'e3', color: 'blue', width: '200px' },\n { id: 'e4', color: 'green', width: '150px' },\n];\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, color, width }) => (\n
\n \n \n \n
\n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, color, width }) => (\n \n \n \n \n \n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/fade.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Fade',\n};\n\nconst animations = [\n { id: '1', targets: ['e1'], type: AnimationType.Fade, duration: 1000 },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Fade,\n duration: 1000,\n fadeFrom: 1,\n fadeTo: 0,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red' },\n { id: 'e2', color: 'orange' },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, color }) => (\n
\n \n \n \n
\n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, color }) => (\n
\n \n \n \n
\n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/flip.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, Axis, Rotation } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Flip',\n};\n\nconst duration = 600;\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.Flip,\n duration,\n axis: Axis.X,\n rotaton: Rotation.Clockwise,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Flip,\n duration,\n delay: duration,\n axis: Axis.X,\n rotaton: Rotation.CounterClockwise,\n },\n {\n id: '3',\n targets: ['e3'],\n type: AnimationType.Flip,\n duration,\n delay: duration * 2,\n axis: Axis.Y,\n rotaton: Rotation.Clockwise,\n },\n {\n id: '4',\n targets: ['e4'],\n type: AnimationType.Flip,\n duration,\n delay: duration * 3,\n axis: Axis.Y,\n rotaton: Rotation.CounterClockwise,\n },\n];\n\nconst elements = [\n { id: 'e1', text: 'CLOCKWISE-X' },\n { id: 'e2', text: 'COUNTER-CLOCKWISE-X' },\n { id: 'e3', text: 'CLOCKWISE-Y' },\n { id: 'e4', text: 'COUNTER-CLOCKWISE-Y' },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '200px',\n height: '20px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, text }) => (\n \n \n {text}\n \n \n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, text }) => (\n
\n \n {text}\n \n
\n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/floatOn.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType, AnimationDirection } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/FloatOn',\n};\n\nconst duration = 600;\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.FloatOn,\n duration,\n floatOnDir: AnimationDirection.TopToBottom,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.FloatOn,\n duration,\n delay: duration,\n floatOnDir: AnimationDirection.BottomToTop,\n },\n {\n id: '3',\n targets: ['e3'],\n type: AnimationType.FloatOn,\n duration,\n delay: duration * 2,\n floatOnDir: AnimationDirection.LeftToRight,\n },\n {\n id: '4',\n targets: ['e4'],\n type: AnimationType.FloatOn,\n duration,\n delay: duration * 3,\n floatOnDir: AnimationDirection.RightToLeft,\n },\n];\n\nconst elements = [\n { id: 'e1', text: 'TOP-TO-BOTTOM' },\n { id: 'e2', text: 'BOTTOM-TO-TOP' },\n { id: 'e3', text: 'LEFT-TO-RIGHT' },\n { id: 'e4', text: 'RIGHT-TO-LEFT' },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '200px',\n height: '100px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, text }) => (\n \n \n {text}\n \n \n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, text }) => (\n
\n \n {text}\n \n
\n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/move.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { PlayButton, AMPStoryWrapper } from '../../../storybookUtils';\nimport { AnimationType } from '../../../types';\n\nexport default {\n title: 'Animations/Parts/Move',\n};\n\nconst duration = 600;\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.Move,\n duration,\n offsetX: -200,\n offsetY: 500,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Move,\n duration,\n offsetX: 200,\n offsetY: 500,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', top: '20px', left: '250px' },\n { id: 'e2', color: 'green', top: '20px', left: '50px' },\n];\n\nconst defaultStyles = {\n position: 'absolute',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, color, ...styles }) => (\n \n \n \n \n \n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n {elements.map(({ id, color, ...styles }) => (\n \n \n \n \n \n ))}\n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/pulse.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Pulse',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.Pulse,\n iterations: 2,\n delay: 500,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Pulse,\n iterations: 4,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red', top: '40px', left: '150px' },\n { id: 'e2', color: 'green', top: '40px', left: '50px' },\n];\n\nconst defaultStyles = {\n position: 'absolute',\n width: '50px',\n height: '50px',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, color, ...styles }) => (\n \n \n \n \n \n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n {elements.map(({ id, color, ...styles }) => (\n \n \n \n \n \n ))}\n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/spin.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Spin',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.Spin,\n delay: 2000,\n duration: 8000,\n iterations: 'infinity',\n rotation: 360,\n },\n {\n id: '2',\n targets: ['e1'],\n type: AnimationType.Spin,\n duration: 2000,\n easing: 'cubic-bezier(0.02, 0.49, 0.46, 0.84)',\n rotation: 360,\n },\n {\n id: '3',\n targets: ['e2'],\n type: AnimationType.Spin,\n duration: 8000,\n iterations: 'infinity',\n rotation: 360,\n },\n {\n id: '4',\n targets: ['e3'],\n type: AnimationType.Spin,\n duration: 8000,\n iterations: 'infinity',\n rotation: -360,\n },\n {\n id: '5',\n targets: ['e4'],\n type: AnimationType.Spin,\n duration: 2000,\n iterations: 'infinity',\n direction: 'alternate',\n rotation: 90,\n },\n];\n\nconst elements = [\n { id: 'e1', color: 'red' },\n { id: 'e2', color: 'orange' },\n { id: 'e3', color: 'green' },\n { id: 'e4', color: 'blue' },\n];\n\nconst defaultStyles = {\n width: '50px',\n height: '50px',\n};\n\nconst SimpleStar = ({ color }) => {\n const rotations = [0, 45, 20, 70];\n return (\n
\n {rotations.map((rotation) => (\n \n ))}\n
\n );\n};\n\nSimpleStar.propTypes = {\n color: PropTypes.string.isRequired,\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, color }) => (\n \n \n \n \n \n ))}\n \n );\n },\n};\n\nexport const _AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n \n {elements.map(({ id, color }) => (\n \n \n \n \n \n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/stories/zoom.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport * as StoryAnimation from '../../../components';\nimport { AnimationType } from '../../../types';\nimport { AMPStoryWrapper, PlayButton } from '../../../storybookUtils';\n\nexport default {\n title: 'Animations/Parts/Zoom',\n};\n\nconst animations = [\n {\n id: '1',\n targets: ['e1'],\n type: AnimationType.Zoom,\n duration: 10000,\n zoomFrom: 1,\n zoomTo: 2,\n },\n {\n id: '2',\n targets: ['e2'],\n type: AnimationType.Zoom,\n duration: 10000,\n zoomFrom: 2,\n zoomTo: 1,\n },\n];\n\nconst elements = [\n {\n id: 'e1',\n src: 'https://i.picsum.photos/id/1025/4951/3301.jpg?hmac=_aGh5AtoOChip_iaMo8ZvvytfEojcgqbCH7dzaz-H8Y',\n transform: 'translate(0px, 100px) scale(2)',\n },\n {\n id: 'e2',\n src: 'https://i.picsum.photos/id/1062/5092/3395.jpg?hmac=o9m7qeU51uOLfXvepXcTrk2ZPiSBJEkiiOp-Qvxja-k',\n },\n];\n\nconst defaultStyles = {\n position: 'relative',\n width: '300px',\n height: '200px',\n overflow: 'hidden',\n};\n\nexport const _default = {\n render: function Render() {\n return (\n \n \n {elements.map(({ id, src, ...style }) => (\n \n \n \n \n \n ))}\n \n );\n },\n};\n\nexport const AMPStory = {\n render: function Render() {\n return (\n \n \n

\n {'Empty first page'}\n

\n \n {[1, 2].map((pageId) => (\n \n \n \n\n \n {elements.map(({ id, src, ...style }) => (\n
\n \n \n \n
\n ))}\n \n \n \n ))}\n \n );\n },\n};\n" }, { "path": "packages/animation/src/parts/simple/test/pulse.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { generatePulseKeyframes } from '../pulse';\n\ndescribe('Pulse Effect', () => {\n describe('generatePulseKeyframes', () => {\n it('should return correct keyframes based on scale', () => {\n // scale > 1\n let scale = 2;\n let expand = 1 + scale;\n let shrink = 1 - scale / 10;\n\n expect(generatePulseKeyframes(scale)).toStrictEqual({\n transform: [\n `scale(1)`,\n `scale(${expand})`,\n `scale(${shrink})`,\n `scale(1)`,\n ],\n offset: [0.0, 0.33, 0.66, 1.0],\n });\n\n // scale < 1\n scale = 0.5;\n expand = 1 + scale;\n shrink = 1 - scale / 10;\n\n expect(generatePulseKeyframes(scale)).toStrictEqual({\n transform: [\n `scale(1)`,\n `scale(${expand})`,\n `scale(${shrink})`,\n `scale(1)`,\n ],\n offset: [0.0, 0.33, 0.66, 1.0],\n });\n });\n });\n});\n" }, { "path": "packages/animation/src/parts/simple/zoom.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport {\n type AMPEffectTiming,\n type AnimationType,\n FieldType,\n} from '../../types';\nimport createAnimation from '../createAnimation';\n\nconst defaults: AMPEffectTiming = { fill: 'forwards', duration: 1000 };\n\nexport interface ZoomAnimation extends AMPEffectTiming {\n type: AnimationType.Zoom;\n zoomFrom?: number;\n zoomTo?: number;\n targetLeafElement?: boolean;\n transformOrigin?: {\n horizontal: number;\n vertical: number;\n };\n}\n\nexport function AnimationZoom({\n zoomFrom = 0,\n zoomTo = 1,\n targetLeafElement = false,\n transformOrigin,\n type,\n ...args\n}: ZoomAnimation) {\n const timings = { ...defaults, ...args };\n const keyframes = { transform: [`scale(${zoomFrom})`, `scale(${zoomTo})`] };\n\n // If supplied a transformOrigin, AMP doesn't allow us to set\n // the transformOrigin property from the keyframes since it is\n // an unanimatable property. To account for this we calculate a\n // counter translate based off the scale change that mimics the\n // element scaling from a particular origin.\n if (transformOrigin) {\n // transformOrigin default is `50% 50%` so we account for\n // that here in our calculations.\n const originRelativeToCenter = {\n x: 50 - transformOrigin.horizontal,\n y: 50 - transformOrigin.vertical,\n };\n const counterScaleTranslate = {\n x: (zoomFrom - 1) * originRelativeToCenter.x,\n y: (zoomFrom - 1) * originRelativeToCenter.y,\n };\n keyframes.transform = [\n `translate(${counterScaleTranslate.x}%, ${counterScaleTranslate.y}%) ${keyframes.transform[0]}`,\n `translate(0%, 0%) ${keyframes.transform[1]}`,\n ];\n }\n\n return createAnimation(keyframes, timings, false, targetLeafElement);\n}\n\nexport const fields = {\n zoomFrom: {\n tooltip: 'Valid values range from 0 to 1',\n type: FieldType.Float,\n defaultValue: 0,\n },\n zoomTo: {\n tooltip: 'Valid values range from 0 to 1',\n type: FieldType.Float,\n defaultValue: 1,\n },\n};\n" }, { "path": "packages/animation/src/parts/types.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type {\n CSSProperties,\n HTMLAttributes,\n PropsWithChildren,\n VoidFunctionComponent,\n} from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming, Keyframes } from '../types';\n\nexport type AMPAnimationProps = PropsWithChildren<{\n className?: string;\n style?: CSSProperties;\n prefixId?: string;\n}>;\n\nexport interface WAAPIAnimation {\n keyframes: Keyframes;\n timings: AMPEffectTiming;\n useClippingContainer?: boolean;\n targetLeafElement?: boolean;\n}\n\n// This generic seems weird, but is very important. It allows complex effects\n// to reach into the keyframes of their constituent animation parts and\n// recompose them into combined keyframes.\n// See how e.g. RotateIn is able to compose the move and spin keyframes.\n// This is only possible because the keyframes property of each part isn't\n// generically types as Keyframes but as a specific simple object.\nexport interface AnimationPart {\n id: string;\n keyframes: T;\n WAAPIAnimation: WAAPIAnimation;\n AMPTarget: VoidFunctionComponent>>;\n AMPAnimation: VoidFunctionComponent<{ prefixId?: string }>;\n generatedKeyframes: Record;\n}\n" }, { "path": "packages/animation/src/storybookUtils/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { PAGE_HEIGHT, PAGE_WIDTH } from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport { useStoryAnimationContext } from '../components';\nimport Boilerplate from './utils/ampBoilerplate';\n\nexport const AMP_STORY_ASPECT_RATIO = `${PAGE_WIDTH}:${PAGE_HEIGHT}`;\n\nexport function AMPStoryWrapper({ children }) {\n return (\n
\n \n \n {children}\n \n
\n );\n}\n\nAMPStoryWrapper.propTypes = {\n children: PropTypes.node,\n};\n\nexport const PlayButton = () => {\n const {\n actions: { WAAPIAnimationMethods },\n } = useStoryAnimationContext();\n\n const label = {\n play: 'play',\n pause: 'pause',\n reset: 'reset',\n };\n return (\n <>\n \n \n \n \n );\n};\n\nexport default PlayButton;\n" }, { "path": "packages/animation/src/storybookUtils/utils/ampBoilerplate.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Renders AMP boilerplate\n *\n * @see https://amp.dev/documentation/guides-and-tutorials/learn/spec/amp-boilerplate/\n * @see https://amp.dev/documentation/components/amp-story/#boilerplate\n * @return {Element} AMP boilerplate.\n */\nfunction Boilerplate() {\n return (\n <>\n \n \n \n );\n}\n\nexport default Boilerplate;\n" }, { "path": "packages/animation/src/types/animation.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/// \n\n/**\n * Internal dependencies\n */\nimport type { BezierType } from '../constants';\nimport type { PanBackgroundEffect } from '../parts/effects/backgroundPan';\nimport type { PanAndZoomBackgroundEffect } from '../parts/effects/backgroundPanAndZoom';\nimport type { ZoomBackgroundEffect } from '../parts/effects/backgroundZoom';\nimport type { DropEffect } from '../parts/effects/drop';\nimport type { FadeInEffect } from '../parts/effects/fadeIn';\nimport type { FlyInEffect } from '../parts/effects/flyIn';\nimport type { PanEffect } from '../parts/effects/pan';\nimport type { PulseEffect } from '../parts/effects/pulse';\nimport type { RotateInEffect } from '../parts/effects/rotateIn';\nimport type { TwirlInEffect } from '../parts/effects/twirlIn';\nimport type { WhooshInEffect } from '../parts/effects/whooshIn';\nimport type { ZoomEffect } from '../parts/effects/zoom';\nimport type { BlinkOnAnimation } from '../parts/simple/blinkOn';\nimport type { BounceAnimation } from '../parts/simple/bounce';\nimport type { FadeAnimation } from '../parts/simple/fade';\nimport type { FlipAnimation } from '../parts/simple/flip';\nimport type { FloatOnAnimation } from '../parts/simple/floatOn';\nimport type { MoveAnimation } from '../parts/simple/move';\nimport type { PulseAnimation } from '../parts/simple/pulse';\nimport type { SpinAnimation } from '../parts/simple/spin';\nimport type { ZoomAnimation } from '../parts/simple/zoom';\nimport type { ElementId } from './element';\n\nexport enum AnimationType {\n BlinkOn = 'blinkOn',\n Bounce = 'bounce',\n Fade = 'fade',\n Flip = 'flip',\n FloatOn = 'floatOn',\n Move = 'move',\n Pulse = 'pulse',\n Spin = 'spin',\n Zoom = 'zoom',\n\n EffectDrop = 'effect-drop',\n EffectFadeIn = 'effect-fade-in',\n EffectFlyIn = 'effect-fly-in',\n EffectPan = 'effect-pan',\n EffectPulse = 'effect-pulse',\n EffectRotateIn = 'effect-rotate-in',\n EffectTwirlIn = 'effect-twirl-in',\n EffectWhooshIn = 'effect-whoosh-in',\n EffectZoom = 'effect-zoom',\n\n EffectBackgroundPan = 'effect-background-pan',\n EffectBackgroundPanAndZoom = 'effect-background-pan-and-zoom',\n EffectBackgroundZoom = 'effect-background-zoom',\n}\n\nconst {\n EffectBackgroundPan,\n EffectBackgroundPanAndZoom,\n EffectBackgroundZoom,\n ...NonBackgroundAnimationType\n} = { ...AnimationType };\nexport { NonBackgroundAnimationType };\n\nexport type ZoomDirection =\n | 'dynamicPropertyValue'\n | 'scaleIn'\n | 'scaleInBottomRight'\n | 'scaleInTopLeft'\n | 'scaleOut'\n | 'scaleOutTopRight'\n | 'scaleOutBottomLeft';\n\nexport enum AnimationDirection {\n LeftToRight = 'leftToRight',\n TopToBottom = 'topToBottom',\n RightToLeft = 'rightToLeft',\n BottomToTop = 'bottomToTop',\n}\n\nexport type AnimationInput =\n | PanAndZoomBackgroundEffect\n | PanBackgroundEffect\n | ZoomBackgroundEffect\n | DropEffect\n | FadeInEffect\n | FlyInEffect\n | PanEffect\n | PulseEffect\n | RotateInEffect\n | TwirlInEffect\n | WhooshInEffect\n | ZoomEffect\n | BlinkOnAnimation\n | BounceAnimation\n | FadeAnimation\n | FlipAnimation\n | FloatOnAnimation\n | MoveAnimation\n | PulseAnimation\n | SpinAnimation\n | ZoomAnimation;\n\nexport type AnimationInputWithPreset = AnimationInput & {\n easingPreset?: BezierType;\n};\n\n// Renamed this from just Animation to StoryAnimation to avoid a clash with the\n// imported Animation interface from `@types/web-animations-js` that we cannot\n// rename due to how we have to import it at the top of this file.\nexport type StoryAnimation = AnimationInputWithPreset & {\n id: string;\n targets: ElementId[];\n};\n" }, { "path": "packages/animation/src/types/effects.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport enum ScaleDirection {\n DynamicPropertyValue = 'dynamicPropertyValue',\n ScaleIn = 'scaleIn',\n ScaleOut = 'scaleOut',\n ScaleOutTopRight = 'scaleOutTopRight',\n ScaleOutBottomLeft = 'scaleOutBottomLeft',\n ScaleInTopLeft = 'scaleInTopLeft',\n ScaleInBottomRight = 'scaleInBottomRight',\n}\n\nexport enum Rotation {\n Clockwise = 'clockwise',\n CounterClockwise = 'counterClockwise',\n PingPong = 'pingPong',\n}\n\nexport enum Axis {\n X = 'x',\n Y = 'y',\n}\n\nexport enum FieldType {\n Dropdown = 'dropdown',\n Hidden = 'hidden',\n RotationPicker = 'rotation_picker',\n DirectionPicker = 'direction_picker',\n Number = 'number',\n Float = 'float',\n Text = 'text',\n Checkbox = 'checkbox',\n Range = 'range',\n}\n\nexport interface AMPEffectTiming extends Omit<\n EffectTiming,\n 'iterations' | 'duration'\n> {\n iterations?: number | 'infinity';\n duration?: number;\n}\n" }, { "path": "packages/animation/src/types/element.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { DimensionableElement } from '@googleforcreators/units';\n\nexport type ElementId = string;\n\nexport interface Element extends DimensionableElement {\n id: ElementId;\n isHidden?: boolean;\n}\n\nexport interface ScaledElement extends Element {\n scale?: number;\n}\n\nexport function isScaledElement(e: Element): e is ScaledElement {\n return 'scale' in e;\n}\n" }, { "path": "packages/animation/src/types/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './animation';\nexport * from './storyAnimationState';\nexport * from './effects';\nexport * from './element';\nexport * from './keyframes';\nexport * from './propTypes';\n" }, { "path": "packages/animation/src/types/keyframes.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport type Keyframes = Keyframe[] | PropertyIndexedKeyframes;\n" }, { "path": "packages/animation/src/types/propTypes.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\n/* eslint-disable no-restricted-imports -- Still used by other packages. */\nimport * as PropTypes from 'prop-types';\n/* eslint-enable no-restricted-imports -- Still used by other packages. */\n\n/**\n * Internal dependencies\n */\nimport { AnimationType } from './animation';\n\n// This one did once include all the specs for the different possible fields\n// in the animation panel, but we don't want to create those anymore.\nexport const AnimationFormPropTypes = PropTypes.object;\n\nexport const GeneralAnimationPropTypes = {\n delay: PropTypes.number,\n direction: PropTypes.oneOf([\n 'normal',\n 'reverse',\n 'alternate',\n 'alternate-reverse',\n ]),\n duration: PropTypes.number,\n easing: PropTypes.string,\n easingPreset: PropTypes.string,\n endDelay: PropTypes.number,\n fill: PropTypes.oneOf(['backwards', 'forwards', 'both', 'none']),\n iterationStart: PropTypes.number,\n iterations: PropTypes.oneOfType([\n PropTypes.number,\n PropTypes.oneOf(['infinity', '']),\n ]),\n};\n\nexport const AnimationProps = {\n id: PropTypes.string.isRequired,\n type: PropTypes.oneOf(Object.values(AnimationType)),\n targets: PropTypes.arrayOf(PropTypes.string),\n ...GeneralAnimationPropTypes,\n};\n" }, { "path": "packages/animation/src/types/storyAnimationState.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport enum StoryAnimationState {\n Reset = 'reset',\n Paused = 'paused',\n Scrubbing = 'scrubbing',\n Playing = 'playing',\n PlayingSelected = 'playing-selected',\n}\n" }, { "path": "packages/animation/src/typings/global.d.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { PropsWithChildren } from 'react';\n\ndeclare global {\n namespace JSX {\n interface IntrinsicElements {\n 'amp-story-animation': PropsWithChildren<{\n layout: string;\n trigger: string;\n }>;\n 'amp-animation': PropsWithChildren<{\n id: string;\n layout: string;\n }>;\n }\n }\n}\n" }, { "path": "packages/animation/src/utils/createKeyframeEffect.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { Keyframes, AMPEffectTiming } from '../types';\n\nfunction createKeyframeEffect(\n target: Element,\n keyframes: Keyframes,\n timings: AMPEffectTiming\n) {\n // Translate AMP timings to Web API timings\n const convertedTimings: EffectTiming = {\n ...timings,\n iterations:\n timings.iterations === 'infinity'\n ? Number.POSITIVE_INFINITY\n : timings.iterations,\n };\n\n return new KeyframeEffect(target, keyframes, convertedTimings);\n}\n\nexport default createKeyframeEffect;\n" }, { "path": "packages/animation/src/utils/defaultUnit.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport const defaultUnit = (input: string | number, unit: string) =>\n /\\d$/.test(String(input)) ? `${input}${unit}` : input;\n" }, { "path": "packages/animation/src/utils/generateLookupMap.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nfunction generateLookupMap(values: number[]) {\n return values.reduce>(\n (acc, currentValue) => ({\n ...acc,\n [currentValue]: values.filter((opacity) => opacity !== currentValue),\n }),\n {}\n );\n}\n\nexport default generateLookupMap;\n" }, { "path": "packages/animation/src/utils/getDefaultFieldValue.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { FieldType } from '../types';\n\nconst getDefaultFieldValue = (fieldType: FieldType) => {\n switch (fieldType) {\n case FieldType.Checkbox:\n return false;\n case FieldType.Number:\n case FieldType.Float:\n case FieldType.Range:\n return 0;\n default:\n return '';\n }\n};\n\nexport default getDefaultFieldValue;\n" }, { "path": "packages/animation/src/utils/getElementOffsets.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n getMediaSizePositionProps,\n type Resource,\n} from '@googleforcreators/media';\nimport {\n getBox,\n FULLBLEED_HEIGHT,\n PAGE_HEIGHT,\n PAGE_WIDTH,\n type DimensionableElement,\n} from '@googleforcreators/units';\n\n/**\n * Internal dependencies\n */\nimport type { ScaledElement } from '../types';\n\n// This type also exists in the elements package, but it doesn't\n// really make sense to reuse this one there. This is only for internal\n// use in this file.\ninterface MediaElement extends ScaledElement {\n resource: Resource;\n focalX?: number;\n focalY?: number;\n}\n\nconst PRECISION = 1;\n\nfunction isMediaElement(e: DimensionableElement): e is MediaElement {\n return 'resource' in e;\n}\n\nexport function getElementOffsets(element: DimensionableElement) {\n if (!isMediaElement(element)) {\n return { top: 0, bottom: 0, left: 0, right: 0 };\n }\n\n // Get elements box based on a given page size with proper ratio.\n const box = getBox(element, PAGE_WIDTH, PAGE_HEIGHT);\n // Calculate media offsets based off given box, focal point\n const media = getMediaSizePositionProps(\n element.resource,\n box.width,\n box.height,\n element.scale ?? 1,\n element.focalX ?? 50,\n element.focalY ?? 50\n );\n\n return {\n top: (media.offsetY / media.height) * 100,\n right:\n -1 * ((media.width - (media.offsetX + PAGE_WIDTH)) / media.width) * 100,\n left: (media.offsetX / media.width) * 100,\n bottom:\n -1 *\n ((media.height - (media.offsetY + FULLBLEED_HEIGHT)) / media.height) *\n 100,\n };\n}\n\nexport const DEFAULT_HAS_OFFSETS = {\n top: false,\n bottom: false,\n left: false,\n right: false,\n};\n\nexport function getHasElementOffsets(element: DimensionableElement) {\n const offsets = getElementOffsets(element);\n return Object.fromEntries(\n Object.entries(offsets).map(([key, offset]) => [\n key,\n Math.abs(offset) > PRECISION,\n ])\n );\n}\n\n/**\n * Given a media element, calculates where the origin is on the media\n * relative to it's frame, such that scaling the media up or down\n * (with the given transform-origin) most optimistically tries to\n * fill the frame\n *\n * @param offsets Media element offsets\n * @return object containing horizontal and vertical transform origin percentages\n */\nexport function getElementOrigin(\n offsets = {\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n }\n) {\n // If both offsets are 0, we want the origin to be in the middle.\n // Otherwise we want the percentage of one offset relative to the\n // other\n const progress = {\n vertical: 50,\n horizontal: 50,\n };\n const absOffsets = Object.fromEntries(\n Object.entries(offsets).map(([key, val]) => [key, Math.abs(val)])\n );\n const isSignificant = (val: number) => val >= 0.01;\n if ([absOffsets.top, absOffsets.bottom].some(isSignificant)) {\n progress.vertical =\n (100 * absOffsets.top) / (absOffsets.top + absOffsets.bottom);\n }\n if ([absOffsets.left, absOffsets.right].some(isSignificant)) {\n progress.horizontal =\n (100 * absOffsets.left) / (absOffsets.left + absOffsets.right);\n }\n\n return progress;\n}\n" }, { "path": "packages/animation/src/utils/getGlobalSpace.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { Element } from '../types';\n\ntype Stringable = string | number | boolean | null | undefined;\ntype ElementWithRotation = Partial>;\n\n/**\n * Just the functional equivalent of your baseline template literal.\n *\n * ```js\n * const args = ['am', 'dog'];\n * literal(['I ', ' a '], ...args) === `I ${args[0]} a ${args[1]}`; // true\n * ```\n *\n * @param strings strings in template tag\n * @param args arguments in template tag\n * @return string result\n */\nexport function literal(\n strings: ReadonlyArray,\n ...args: Stringable[]\n): string {\n return strings\n .reduce((accum, str, i) => accum.concat([str, args[i]]), [])\n .join('');\n}\n\n/**\n * Given an element, this function returns a template tag\n * that wraps any given string in a counter transform to reset the\n * global coordinate space, then reapplies the original element\n * transform to retain visual consistency.\n *\n * ```js\n * const glabal = getGlobalSpace(element);\n * const keyframes = [\n * transform: global`translate3d(0, ${pageHeightInElementPercent}%, 0)`,\n * transform: 'none'\n * ];\n * ```\n *\n * @param element story element to derive counter transforms off of.\n * @return template string tag that resets transform space.\n */\nexport function getGlobalSpace(element: ElementWithRotation = {}) {\n const angle = element?.rotationAngle || 0;\n function global(strings: TemplateStringsArray, ...args: Stringable[]) {\n return `rotate(${-1 * angle}deg) ${literal(\n strings,\n ...args\n )} rotate(${angle}deg)`;\n }\n return angle !== 0 ? global : literal;\n}\n" }, { "path": "packages/animation/src/utils/getInitialStyleFromKeyframes.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { Keyframes } from '../types';\n\nconst ALLOWLIST = ['opacity', 'transform'];\n\ntype CSSProperty = string | number | null | undefined;\ninterface CSSVariables {\n [key: `--${string}`]: CSSProperty;\n}\n\n/**\n * Get a key-value pair of custom CSS properties based on keyframes.\n *\n * The styles are used in the output's style[amp-custom].\n *\n * @param keyframes Keyframes.\n * @return Key value pair of initial styles.\n */\nfunction getInitialStyleFromKeyframes(keyframes: Keyframes) {\n const initialStyle: CSSVariables = {};\n let frame: Keyframe | null = null;\n\n if (Array.isArray(keyframes)) {\n frame = keyframes[0];\n } else if (typeof keyframes === 'object') {\n frame = keyframes as Keyframe;\n }\n\n if (!frame) {\n return initialStyle;\n }\n\n // Set initial opacity and transforms so that\n // unspecified opacity & transforms aren't inherited\n initialStyle['--initial-opacity'] = 1;\n initialStyle[`--initial-transform`] = 'none';\n\n Object.entries(frame).forEach(([key, value]) => {\n if (ALLOWLIST.includes(key.toLowerCase())) {\n if (Array.isArray(value)) {\n initialStyle[`--initial-${key}`] = value[0] as CSSProperty;\n } else {\n initialStyle[`--initial-${key}`] = value as CSSProperty;\n }\n }\n });\n\n return initialStyle;\n}\n\nexport default getInitialStyleFromKeyframes;\n" }, { "path": "packages/animation/src/utils/getOffPageOffset.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport {\n dataToEditorY,\n getBox,\n DANGER_ZONE_HEIGHT,\n type ElementBox,\n type DimensionableElement,\n} from '@googleforcreators/units';\n\nfunction calcTopOffset(box: ElementBox, dangerZoneOffset: number): number {\n const { y, height } = box;\n const toTop = dangerZoneOffset + y;\n return -Number(Number((toTop / height) * 100.0 + 100.0).toFixed(5));\n}\n\nfunction calcBottomOffset(box: ElementBox, dangerZoneOffset: number): number {\n const { y, height } = box;\n const toBottom = 100 - y + dangerZoneOffset;\n return Number(Number((toBottom / height) * 100.0).toFixed(5));\n}\n\nfunction calcLeftOffset(box: ElementBox): number {\n const { x, width } = box;\n return -Number(Number((x / width) * 100.0 + 100.0).toFixed(5));\n}\n\nfunction calcRightOffset(box: ElementBox): number {\n const { x, width } = box;\n const toRight = 100 - x;\n return Number(Number((toRight / width) * 100.0).toFixed(5));\n}\n\nfunction getOffPageOffset(element: DimensionableElement) {\n const box = getBox(element, 100, 100);\n const dangerZoneOffset = dataToEditorY(DANGER_ZONE_HEIGHT, 100);\n\n return {\n offsetTop: calcTopOffset(box, dangerZoneOffset),\n offsetBottom: calcBottomOffset(box, dangerZoneOffset),\n offsetLeft: calcLeftOffset(box),\n offsetRight: calcRightOffset(box),\n };\n}\n\nexport default getOffPageOffset;\n" }, { "path": "packages/animation/src/utils/getTotalDuration.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { StoryAnimation } from '../types';\n\nexport function getTotalDuration(animations: StoryAnimation[] = []) {\n return animations.reduce(\n (total, { duration = 0, delay = 0 }) => Math.max(total, duration + delay),\n 0\n );\n}\n" }, { "path": "packages/animation/src/utils/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport { defaultUnit } from './defaultUnit';\nexport { getGlobalSpace, literal } from './getGlobalSpace';\nexport { default as getOffPageOffset } from './getOffPageOffset';\nexport { getTotalDuration } from './getTotalDuration';\nexport { orderByKeys } from './orderByKeys';\nexport * from './getElementOffsets';\n" }, { "path": "packages/animation/src/utils/orderByKeys.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Takes an object and an array of keys that specify how to order\n * properties.\n *\n * If the keys don't appear in the input object, they\n * won't appear in the resulting object.\n *\n * Any properties absent from the keys input will appear in same order\n * as original object properties, but after specified order keys.\n *\n * @param obj Object with keys to be sorted\n * @param keys Keys to prioritize in order\n * @return Input object with ordered keys\n */\nexport function orderByKeys(\n obj: Record = {},\n keys: string[] = []\n) {\n const entries = Object.entries(obj);\n const pos = (s: string) =>\n keys.includes(s) ? keys.indexOf(s) : Number.MAX_SAFE_INTEGER;\n entries.sort(([a], [b]) => pos(a) - pos(b));\n return Object.fromEntries(entries);\n}\n" }, { "path": "packages/animation/src/utils/padArray.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nfunction padArray(values: number[], padCount: number) {\n return values.flatMap((val) => Array(padCount).fill(val));\n}\n\nexport default padArray;\n" }, { "path": "packages/animation/src/utils/sanitizeTimings.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming } from '../types';\n\nfunction sanitizeTimings({\n easing,\n duration,\n delay,\n ...rest\n}: AMPEffectTiming): AMPEffectTiming {\n return {\n easing: easing || 'linear',\n duration: typeof duration === 'number' ? Math.max(duration, 0) : 0,\n delay: typeof delay === 'number' ? Math.max(delay, 0) : 0,\n ...rest,\n };\n}\n\nexport default sanitizeTimings;\n" }, { "path": "packages/animation/src/utils/test/createKeyframeEffect.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport type { AMPEffectTiming } from '../../types';\nimport createKeyframeEffect from '../createKeyframeEffect';\n\ndescribe('createKeyframeEffect', () => {\n const element = document.createElement('div');\n const keyframes: Keyframe[] = [];\n describe('iteration property', () => {\n it('should swap \"infinity\" with Infinity', () => {\n const timings: AMPEffectTiming = {\n iterations: 'infinity',\n };\n\n const mockKeyframeEffect = jest.fn();\n window.KeyframeEffect = mockKeyframeEffect;\n\n createKeyframeEffect(element, keyframes, timings);\n expect(mockKeyframeEffect).toHaveBeenCalledWith(element, keyframes, {\n iterations: Number.POSITIVE_INFINITY,\n });\n });\n\n it('should pass through numbers', () => {\n const timings = {\n iterations: 3,\n };\n\n const mockKeyframeEffect = jest.fn();\n window.KeyframeEffect = mockKeyframeEffect;\n\n createKeyframeEffect(element, keyframes, timings);\n expect(mockKeyframeEffect).toHaveBeenCalledWith(\n element,\n keyframes,\n timings\n );\n });\n\n it('should pass through other properties', () => {\n const timings: AMPEffectTiming = {\n duration: 1000,\n delay: 500,\n iterations: 3,\n easing: 'ease-out',\n direction: 'normal',\n };\n\n const mockKeyframeEffect = jest.fn();\n window.KeyframeEffect = mockKeyframeEffect;\n\n createKeyframeEffect(element, keyframes, timings);\n expect(mockKeyframeEffect).toHaveBeenCalledWith(\n element,\n keyframes,\n timings\n );\n });\n });\n});\n" }, { "path": "packages/animation/src/utils/test/defaultUnit.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { defaultUnit } from '../defaultUnit';\n\ndescribe('defaultUnit(input, unit)', () => {\n it('appends the default unit if the input value ends in a digit', () => {\n const input = 123456;\n const unit = 'px';\n expect(defaultUnit(input, unit)).toBe(`${input}${unit}`);\n });\n\n it('doesnt append the default unit if the input value ends in a non-digit', () => {\n const input = '123456%';\n const unit = 'px';\n expect(defaultUnit(input, unit)).toStrictEqual(input);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/generateLookupMap.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport generateLookupMap from '../generateLookupMap';\n\ndescribe('generateLookupMap', () => {\n it('should generate a correct mapping from array', () => {\n const values = [3, 45, 6, 89, 90];\n const result = generateLookupMap(values);\n\n expect(result).toStrictEqual({\n 3: [45, 6, 89, 90],\n 45: [3, 6, 89, 90],\n 6: [3, 45, 89, 90],\n 89: [3, 45, 6, 90],\n 90: [3, 45, 6, 89],\n });\n });\n});\n" }, { "path": "packages/animation/src/utils/test/getElementOffsets.ts", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { getElementOrigin } from '../getElementOffsets';\n\ndescribe('getElementOrigin', () => {\n it.each([\n [\n { top: 1, right: 0, bottom: -1, left: -1 },\n { horizontal: 100, vertical: 50 },\n ],\n [\n { top: 1, right: 1, bottom: -1, left: 0 },\n { horizontal: 0, vertical: 50 },\n ],\n [\n { top: 1, right: 1, bottom: 0, left: -1 },\n { horizontal: 50, vertical: 100 },\n ],\n [\n { top: 0, right: 1, bottom: -1, left: -1 },\n { horizontal: 50, vertical: 0 },\n ],\n [\n { top: 1, right: 1, bottom: -1, left: -1 },\n { horizontal: 50, vertical: 50 },\n ],\n [\n { top: 0, right: 0, bottom: 0, left: 0 },\n { horizontal: 50, vertical: 50 },\n ],\n ])('given %p returns %p', (offset, origin) => {\n expect(getElementOrigin(offset)).toStrictEqual(origin);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/getGlobalSpace.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { getGlobalSpace, literal } from '..';\n\ndescribe('literal', () => {\n it('interpolates the same as a template literal given an empty string', () => {\n expect(literal([''])).toBe(``);\n });\n\n it('interpolates the same as a template literal given some args', () => {\n const args = ['am', 'dog'];\n expect(literal(['I ', ' a '], ...args)).toBe(`I ${args[0]} a ${args[1]}`);\n });\n});\n\ndescribe('getGlobalSpace', () => {\n it('returns original transform if no element rotation present', () => {\n const global = getGlobalSpace({});\n expect(global`translate(3px)`).toBe('translate(3px)');\n });\n\n it('wraps the transform in a counter/original transform if rotation present on element', () => {\n const rotationAngle = 34;\n const global = getGlobalSpace({\n rotationAngle,\n });\n expect(global`translate(3px)`).toBe(\n 'rotate(-34deg) translate(3px) rotate(34deg)'\n );\n });\n});\n" }, { "path": "packages/animation/src/utils/test/getInitialStyleFromKeyframes.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport getInitialStyleFromKeyframes from '../getInitialStyleFromKeyframes';\n\ndescribe('getInitialStyleFromKeyframes', () => {\n it('should generate initial styles from keyframes array', () => {\n const keyframes = [\n { opacity: 1 },\n { opacity: 0.1, offset: 0.7 },\n { opacity: 0 },\n ];\n\n expect(getInitialStyleFromKeyframes(keyframes)).toStrictEqual({\n '--initial-opacity': 1,\n '--initial-transform': 'none',\n });\n });\n\n it('should generate initial styles from keyframes object', () => {\n const keyframes = {\n opacity: [0, 1],\n color: ['#fff', '#000'],\n };\n\n expect(getInitialStyleFromKeyframes(keyframes)).toStrictEqual({\n '--initial-opacity': 0,\n '--initial-transform': 'none',\n });\n });\n\n it('should ignore special attributes', () => {\n // easing\n const easingSample = [\n { transform: 'scale(0)', easing: 'linear' },\n { transform: 'scale(0.5)', offset: 0.7 },\n { transform: 'scale(1)' },\n ];\n\n expect(getInitialStyleFromKeyframes(easingSample)).toStrictEqual({\n '--initial-transform': 'scale(0)',\n '--initial-opacity': 1,\n });\n\n // offset\n const offsetSample = {\n opacity: [0, 0.5, 1],\n transform: ['scale(0.25)', 'scale(3)', 'scale(1)'],\n offset: [0, 0.25, 1],\n };\n\n expect(getInitialStyleFromKeyframes(offsetSample)).toStrictEqual({\n '--initial-opacity': 0,\n '--initial-transform': 'scale(0.25)',\n });\n });\n});\n" }, { "path": "packages/animation/src/utils/test/getOffPageOffset.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n PAGE_HEIGHT,\n PAGE_WIDTH,\n DANGER_ZONE_HEIGHT,\n} from '@googleforcreators/units';\n/**\n * Internal dependencies\n */\nimport getOffPageOffset from '../getOffPageOffset';\n\ndescribe('getOffPageOffset', () => {\n const element = {\n x: 20,\n y: 100,\n width: 75,\n height: 50,\n rotationAngle: 0,\n };\n\n it('returns the correct offset to place element on top of page', () => {\n const { offsetTop } = getOffPageOffset(element);\n const offset = element.y + element.height + DANGER_ZONE_HEIGHT;\n\n expect((offsetTop / 100.0) * element.height).toBeCloseTo(-offset);\n });\n\n it('returns the correct offset to place element below page', () => {\n const { offsetBottom } = getOffPageOffset(element);\n const offset = PAGE_HEIGHT - element.y + DANGER_ZONE_HEIGHT;\n\n expect((Number(offsetBottom) / 100) * element.height).toBeCloseTo(offset);\n });\n\n it('returns the correct offset to place element to the left of the page', () => {\n const { offsetLeft } = getOffPageOffset(element);\n const offset = element.x + element.width;\n\n expect((Number(offsetLeft) / 100.0) * element.width).toBeCloseTo(-offset);\n });\n\n it('returns the correct offset to place element to the right of the page', () => {\n const { offsetRight } = getOffPageOffset(element);\n const offset = PAGE_WIDTH - element.x;\n\n expect((Number(offsetRight) / 100.0) * element.width).toBeCloseTo(offset);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/getTotalDuration.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { AnimationType } from '../../types';\nimport { getTotalDuration } from '..';\n\nconst BASE_ANIMATION = {\n id: '1',\n targets: [],\n};\nconst type = AnimationType.BlinkOn;\n\ndescribe('getTotalDuration', () => {\n it('returns 0 if no animations supplied', () => {\n expect(getTotalDuration()).toBe(0);\n });\n\n it('calculates the longest duration properly', () => {\n expect(\n getTotalDuration([\n { ...BASE_ANIMATION, type, duration: 20, delay: 10 },\n { ...BASE_ANIMATION, type, duration: 90, delay: 110 },\n { ...BASE_ANIMATION, type, duration: 50, delay: 5 },\n ])\n ).toBe(200);\n });\n\n it('calculates properly if missing duration or delay on animation', () => {\n expect(\n getTotalDuration([\n { ...BASE_ANIMATION, type, duration: 50, delay: 10 },\n { ...BASE_ANIMATION, type },\n { ...BASE_ANIMATION, type, duration: 40 },\n ])\n ).toBe(60);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/orderByKeys.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { orderByKeys } from '..';\n\ndescribe('orderByKeys', () => {\n it('reorders properties by keys', () => {\n const propertyOrder = ['a', 'c', 'b'];\n const input = {\n b: 0,\n a: '',\n c: false,\n };\n const result = orderByKeys(input, propertyOrder);\n\n expect(result).toStrictEqual(input);\n expect(Object.keys(result)).toStrictEqual(propertyOrder);\n });\n\n it('maintains object equality if keys include property outside of object', () => {\n const propertyOrder = ['a', 'b', 'c', 'd', 'e'];\n const input = {\n b: 0,\n a: '',\n c: false,\n };\n const result = orderByKeys(input, propertyOrder);\n\n expect(result).toStrictEqual(input);\n });\n\n it('maintains object equality if keys exclude property inside of object', () => {\n const propertyOrder = ['a'];\n const input = {\n b: 0,\n a: '',\n c: false,\n };\n const result = orderByKeys(input, propertyOrder);\n\n expect(result).toStrictEqual(input);\n });\n\n it('retains order of unspecified keys and orders them after specified keys', () => {\n const propertyOrder = ['a'];\n const input = {\n b: 0,\n a: '',\n c: false,\n };\n const result = orderByKeys(input, propertyOrder);\n\n expect(Object.keys(result)).toStrictEqual(['a', 'b', 'c']);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/padArray.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport padArray from '../padArray';\n\ndescribe('padArray', () => {\n it('should return array with additional padded items', () => {\n const values = [0, 4, 67, 89.5, 23, 5];\n\n expect(padArray(values, 2)).toStrictEqual([\n 0, 0, 4, 4, 67, 67, 89.5, 89.5, 23, 23, 5, 5,\n ]);\n\n expect(padArray(values, 3)).toStrictEqual([\n 0, 0, 0, 4, 4, 4, 67, 67, 67, 89.5, 89.5, 89.5, 23, 23, 23, 5, 5, 5,\n ]);\n });\n});\n" }, { "path": "packages/animation/src/utils/test/sanitizeTimings.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport sanitizeTimings from '../sanitizeTimings';\n\ndescribe('sanitizeTimings', () => {\n it.each([\n [-1, 0],\n [-0, 0],\n [0, 0],\n [1, 1],\n [12, 12],\n [51, 51],\n [500, 500],\n [2000, 2000],\n ])(\n 'should sanitize values of `duration` and `delay` animation properties',\n (value, output) => {\n const { duration, delay } = sanitizeTimings({\n duration: value,\n delay: value,\n });\n expect(duration).toBe(output);\n expect(delay).toBe(output);\n }\n );\n});\n" }, { "path": "packages/animation/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.shared.json\",\n \"compilerOptions\": {\n \"rootDir\": \"src\",\n \"declarationDir\": \"dist-types\"\n },\n \"references\": [\n { \"path\": \"../i18n\" },\n { \"path\": \"../media\" },\n { \"path\": \"../react\" },\n { \"path\": \"../units\" }\n ],\n \"include\": [\"src/**/*\"]\n}\n" }, { "path": "packages/commander/README.md", "content": "# Commander\n\nBuild/Release Tool for the Web Stories for WordPress plugin.\n" }, { "path": "packages/commander/package.json", "content": "{\n \"name\": \"@web-stories-wp/commander\",\n \"description\": \"CLI tool for building the Web Stories WordPress plugin\",\n \"private\": true,\n \"author\": {\n \"name\": \"Google\",\n \"url\": \"https://creators.google/\"\n },\n \"license\": \"Apache-2.0\",\n \"keywords\": [\n \"web stories\",\n \"cli\",\n \"commander\"\n ],\n \"homepage\": \"https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/commander/README.md\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GoogleForCreators/web-stories-wp.git\",\n \"directory\": \"packages/commander\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/googleforcreators/web-stories-wp/issues\"\n },\n \"engines\": {\n \"node\": \">= 20 || >= 22 || >= 24\",\n \"npm\": \">= 7.3\"\n },\n \"type\": \"module\",\n \"dependencies\": {\n \"commander\": \"^14.0.1\",\n \"semver\": \"^7.7.3\"\n },\n \"devDependencies\": {\n \"@types/node\": \"^24.7.1\",\n \"@types/semver\": \"^7.7.1\"\n },\n \"bin\": {\n \"commander\": \"./src/index.ts\"\n }\n}\n" }, { "path": "packages/commander/src/index.ts", "content": "#!/usr/bin/env bun\n/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { mkdirSync, rmSync, existsSync } from 'node:fs';\nimport { relative } from 'node:path';\nimport { Command } from 'commander';\nimport { inc as semverInc, type ReleaseType } from 'semver';\n\n/**\n * Internal dependencies\n */\nimport {\n bundlePlugin,\n createBuild,\n getCurrentVersionNumber,\n updateVersionNumbers,\n updateCdnUrl,\n resizeSvgPath,\n} from './utils';\n\nconst PLUGIN_DIR = process.cwd();\nconst PLUGIN_FILE = 'web-stories.php';\nconst BUILD_DIR = 'build/web-stories';\n\nconst program = new Command();\n\nprogram\n .command('version')\n .description('Bump the version of the plugin')\n .argument('[version]', 'The desired version number.')\n .option(\n '--nightly',\n 'Whether this is a nightly build and thus should append the current revision to the version number.'\n )\n .option(\n '--increment ',\n `Increment a version by the specified level. Level can\nbe one of: major, minor, patch, premajor, preminor,\nprepatch, or prerelease. Only one version may be specified.`\n )\n .option(\n '--preid ',\n `Identifier to be used to prefix premajor, preminor, prepatch or prerelease version increments.`,\n 'alpha'\n )\n .on('--help', () => {\n console.log('');\n console.log('Examples:');\n console.log(' # Prepare stable release');\n console.log(' $ index.js version 1.2.3');\n console.log('');\n console.log(' # Nightly build');\n console.log(' $ index.js version --nightly');\n })\n .action(\n (\n version: string,\n {\n nightly,\n increment,\n preid,\n }: { nightly: boolean; increment: ReleaseType; preid: string }\n ) => {\n const pluginFilePath = `${PLUGIN_DIR}/${PLUGIN_FILE}`;\n\n const currentVersion = getCurrentVersionNumber(pluginFilePath);\n let newVersion: string | null = version || currentVersion;\n\n if (increment) {\n newVersion = semverInc(\n currentVersion,\n increment,\n undefined,\n preid\n ) as string;\n }\n\n updateVersionNumbers(pluginFilePath, newVersion, nightly);\n const constantVersion = getCurrentVersionNumber(pluginFilePath, true);\n\n console.log(\n `Version number successfully updated! New version: ${constantVersion}`\n );\n }\n );\n\nprogram\n .command('build-plugin')\n .option(\n '--composer',\n 'Create Composer-ready build. Does not contain PHP autoloader.'\n )\n .option(\n '--zip [filename]',\n 'Generate a ready-to-use ZIP file. Optionally specify a file name.'\n )\n .option(\n '--clean',\n 'Delete existing ZIP files in the build/ folder prior to bundling.'\n )\n .description('Build Web Stories plugin')\n .on('--help', () => {\n console.log('');\n console.log('Examples:');\n console.log(' # Create a ZIP-file ready to install in WordPress');\n console.log(' $ index.js build-plugin --zip');\n console.log('');\n console.log(' # Remove existing ZIP files before creating one');\n console.log(' $ index.js build-plugin --zip --clean');\n console.log('');\n console.log(\n ' # Create a custom-named ZIP-file ready to use with Composer'\n );\n console.log(' $ index.js build-plugin --composer --zip web-stories.zip');\n })\n .action(\n ({\n composer,\n zip,\n clean,\n }: {\n composer: boolean;\n zip: string | boolean;\n clean: boolean;\n }) => {\n const buildDirPath = `${PLUGIN_DIR}/${BUILD_DIR}`;\n\n // Make sure build directory exists and is empty.\n if (existsSync(BUILD_DIR)) {\n rmSync(BUILD_DIR, { recursive: true, force: true });\n }\n mkdirSync(BUILD_DIR, { recursive: true });\n\n createBuild(PLUGIN_DIR, buildDirPath, composer);\n\n let build = BUILD_DIR;\n\n if (zip) {\n build = bundlePlugin(buildDirPath, composer, zip, clean);\n }\n\n console.log(\n `Plugin successfully built! Location: ${relative(process.cwd(), build)}`\n );\n }\n );\n\nprogram\n .command('assets-version')\n .description('Change the CDN assets version used by the plugin')\n .argument('', 'Assets version. Either `main` or an integer.')\n .on('--help', () => {\n console.log('');\n console.log('Examples:');\n console.log(\n ' # Change assets version to `main` (default, for development builds)'\n );\n console.log(' $ commander.js assets-version main');\n console.log('');\n console.log(' # Change assets version for stable release');\n console.log(' $ commander.js assets-version 7');\n })\n .action((version: string) => {\n const pluginFilePath = `${PLUGIN_DIR}/${PLUGIN_FILE}`;\n updateCdnUrl(\n pluginFilePath,\n version === 'main' ? version : Number.parseInt(version)\n );\n\n console.log(`Assets CDN URL successfully updated!`);\n });\n\nprogram\n .command('normalize-path')\n .description('Normalize SVG paths for shapes')\n .argument('', 'Viewbox width')\n .argument('', 'Viewbox height')\n .argument('', 'Path to normalize')\n .on('--help', () => {\n console.log('');\n console.log('Example:');\n console.log(' $ commander.js normalize-path 392 392 \"M10 10\"');\n })\n .action((width: string, height: string, path: string) => {\n console.log(resizeSvgPath(Number(width), Number(height), path));\n });\n\nprogram.parse(process.argv);\n" }, { "path": "packages/commander/src/utils/appendRevisionToVersion.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { execSync } from 'node:child_process';\n\n/**\n * Appends the current revision to the version number for nightly builds.\n *\n * Follows semantic versioning guidelines to denote build metadata by\n * appending a plus sign.\n *\n * @see https://semver.org/\n * @param version Version number.\n * @return Modified version.\n */\nfunction appendRevisionToVersion(version: string): string {\n // Get the current commit hash. Used for pre-releases.\n // GITHUB_SHA is available during the GitHub Actions workflow.\n const currentCommitHash = process.env.GITHUB_SHA\n ? process.env.GITHUB_SHA.slice(0, 7)\n : execSync('git rev-parse --short=7 HEAD').toString().trim();\n\n return `${version}+${currentCommitHash}`;\n}\n\nexport default appendRevisionToVersion;\n" }, { "path": "packages/commander/src/utils/bundlePlugin.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { dirname } from 'node:path';\n\n/**\n * Internal dependencies\n */\nimport generateZipFile from './generateZipFile';\nimport deleteExistingZipFiles from './deleteExistingZipFiles';\nimport getCurrentVersionNumber from './getCurrentVersionNumber';\n\n/**\n * Main function to bundle the plugin.\n *\n * @param source Path to the source directory.\n * @param [composer] Create Composer-ready ZIP file without PHP autoloader.\n * @param zip Whether a ZIP file should be generated. Pass a string to set a custom file name.\n * @param [clean] Whether to delete existing ZIP file.\n * @return Path to the build directory or ZIP file.\n */\nfunction bundlePlugin(\n source: string,\n composer = false,\n zip: boolean | string = true,\n clean = false\n): string {\n const pluginFile = `${source}/web-stories.php`;\n\n if (clean) {\n deleteExistingZipFiles(dirname(source));\n }\n\n const currentVersion = getCurrentVersionNumber(pluginFile, true);\n const defaultZipName = !composer\n ? `web-stories-${currentVersion}.zip`\n : `web-stories-${currentVersion}-composer.zip`;\n const zipName = typeof zip === 'string' ? zip : defaultZipName;\n generateZipFile(source, zipName);\n return `${dirname(source)}/${zipName}`;\n}\n\nexport default bundlePlugin;\n" }, { "path": "packages/commander/src/utils/copyFiles.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { execFileSync } from 'node:child_process';\n\n/**\n * Copies all files minuses ignored ones from source to target directory.\n *\n * @param source Path to source directory.\n * @param target Path to target directory.\n * @param ignoredFiles List of ignored files.\n */\nfunction copyFiles(source: string, target: string, ignoredFiles: string[]) {\n const excludeList = ignoredFiles.reduce((acc: string[], file) => {\n acc.push('--exclude');\n acc.push(file);\n return acc;\n }, []);\n\n // Copy plugin folder to temporary location.\n const args = ['-a', ...excludeList, `${source}/`, `${target}/`];\n execFileSync('rsync', args, {\n stdio: ['pipe', 'pipe', 'ignore'],\n });\n}\n\nexport default copyFiles;\n" }, { "path": "packages/commander/src/utils/createBuild.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport copyFiles from './copyFiles';\nimport getIgnoredFiles from './getIgnoredFiles';\n\n/**\n * Main function to bundle the plugin.\n *\n * @param source Path to the source directory.\n * @param target Path to target directory.\n * @param [composer] Create Composer-ready ZIP file without PHP autoloader.\n */\nfunction createBuild(source: string, target: string, composer = false) {\n const ignoredFiles = getIgnoredFiles(source);\n\n if (composer) {\n ignoredFiles.push('includes/vendor/');\n } else {\n ignoredFiles.push('composer.json');\n }\n\n copyFiles(source, target, ignoredFiles);\n}\n\nexport default createBuild;\n" }, { "path": "packages/commander/src/utils/deleteExistingZipFiles.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { readdirSync, unlinkSync } from 'node:fs';\n\n/**\n * Removes all existing ZIP files in the build folder.\n *\n * @param buildDir Path to the build directory.\n */\nfunction deleteExistingZipFiles(buildDir: string) {\n const fileNamePattern = /^.*\\.zip$/;\n const zipFiles = readdirSync(buildDir).filter((file) =>\n fileNamePattern.test(file)\n );\n\n for (const file of zipFiles) {\n unlinkSync(`${buildDir}/${file}`);\n }\n}\n\nexport default deleteExistingZipFiles;\n" }, { "path": "packages/commander/src/utils/generateZipFile.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { dirname, basename, join } from 'node:path';\nimport { execFileSync } from 'node:child_process';\nimport { existsSync, unlinkSync } from 'node:fs';\n\n/**\n * Generates a ZIP file.\n *\n * Ensures the folder in the final ZIP file is always named \"web-stories\".\n *\n * @param source Full path to the directory that should be zipped.\n * @param zipName Desired file name.\n */\nfunction generateZipFile(source: string, zipName: string) {\n const cwd = dirname(source); // /full/path/to/build\n const fullPath = join(source, zipName);\n\n if (existsSync(fullPath)) {\n unlinkSync(fullPath);\n }\n\n const args = ['-rT', zipName, basename(source)];\n execFileSync('zip', args, {\n cwd,\n stdio: ['pipe', 'pipe', 'ignore'],\n });\n}\n\nexport default generateZipFile;\n" }, { "path": "packages/commander/src/utils/getCurrentVersionNumber.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { readFileSync } from 'node:fs';\n\nconst VERSION_REGEX = /\\* Version:(.+)/;\nconst VERSION_CONSTANT_REGEX =\n /define\\(\\s*'WEBSTORIES_VERSION',\\s*'([^']*)'\\s*\\);/;\n\n/**\n * Returns the current version number as found in the main plugin file's header.\n *\n * @param pluginFile Path to the main plugin file.\n * @param constant Whether to extract the version from the WEBSTORIES_VERSION constant instead.\n * @return Version number\n */\nfunction getCurrentVersionNumber(pluginFile: string, constant = false): string {\n const pluginFileContent = readFileSync(pluginFile, 'utf8');\n\n if (!constant) {\n return pluginFileContent.match(VERSION_REGEX)?.[1]?.trim() as string;\n }\n\n return pluginFileContent.match(VERSION_CONSTANT_REGEX)?.[1]?.trim() as string;\n}\n\nexport default getCurrentVersionNumber;\n" }, { "path": "packages/commander/src/utils/getIgnoredFiles.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { existsSync, lstatSync, readFileSync } from 'node:fs';\n\n/**\n * Returns a list of files that should be ignored based on the .distignore file.\n *\n * @param source Path to the plugin root folder where the .distignore file is expected.\n * @return List of files.\n */\nfunction getIgnoredFiles(source: string): string[] {\n const distignore = source + '/.distignore';\n\n if (!existsSync(distignore)) {\n return [];\n }\n\n const maybeIgnoredFiles = readFileSync(distignore, 'utf8').split('\\n');\n const ignoredFiles: string[] = [];\n\n for (const line of maybeIgnoredFiles) {\n const file = line.trim();\n\n if (file === '') {\n continue;\n }\n\n if (file.startsWith('#')) {\n continue;\n }\n\n const fileFromRoot = `${source}/${file}`;\n\n if (!existsSync(fileFromRoot)) {\n continue;\n }\n\n if (lstatSync(fileFromRoot).isDirectory()) {\n ignoredFiles.push(`${file}/`);\n } else {\n ignoredFiles.push(file);\n }\n }\n\n return ignoredFiles;\n}\n\nexport default getIgnoredFiles;\n" }, { "path": "packages/commander/src/utils/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as bundlePlugin } from './bundlePlugin';\nexport { default as createBuild } from './createBuild';\nexport { default as getCurrentVersionNumber } from './getCurrentVersionNumber';\nexport { default as updateVersionNumbers } from './updateVersionNumbers';\nexport { default as updateCdnUrl } from './updateCdnUrl';\nexport { default as resizeSvgPath } from './resizeSvgPath';\n" }, { "path": "packages/commander/src/utils/resizeSvgPath.ts", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport default function resizeSvgPath(x: number, y: number, path: string) {\n const coords = path\n .replace(/\\s*(-)/g, ' $1')\n .replace(/\\s*([A-Za-z,])\\s*/g, ' $1 ')\n .split(' ');\n let coordIndex = 0;\n return coords.reduce((acc, value) => {\n const parsed = Number.parseFloat(value);\n if (!isNaN(parsed)) {\n const scaled = coordIndex % 2 === 0 ? parsed / x : parsed / y;\n return `${acc} ${scaled.toFixed(6)}`;\n }\n coordIndex = 0;\n return `${acc} ${value}`;\n }, '');\n}\n" }, { "path": "packages/commander/src/utils/test/appendRevisionToVersion.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport appendRevisionToVersion from '../appendRevisionToVersion';\n\njest.mock('node:child_process', () => {\n return {\n execSync: () => '1234567',\n };\n});\n\ndescribe('appendRevisionToVersion', () => {\n it('should get the current git commit hash', () => {\n const orig = process.env.GITHUB_SHA;\n delete process.env.GITHUB_SHA;\n const result = appendRevisionToVersion('1.2.3');\n expect(result).toBe('1.2.3+1234567');\n process.env.GITHUB_SHA = orig;\n });\n\n it('should use the provided git commit hash', () => {\n process.env.GITHUB_SHA = 'abc1234';\n const result = appendRevisionToVersion('1.2.3');\n expect(result).toBe('1.2.3+abc1234');\n delete process.env.GITHUB_SHA;\n });\n});\n" }, { "path": "packages/commander/src/utils/test/bundlePlugin.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport bundlePlugin from '../bundlePlugin';\nimport generateZipFile from '../generateZipFile';\nimport getCurrentVersionNumber from '../getCurrentVersionNumber';\nimport deleteExistingZipFiles from '../deleteExistingZipFiles';\n\njest.mock('node:fs');\njest.mock('node:child_process');\n\njest.mock('../generateZipFile');\njest.mock('../getCurrentVersionNumber');\njest.mock('../deleteExistingZipFiles');\n\ndescribe('bundlePlugin', () => {\n const MOCK_FILE_INFO = {\n '/foo/web-stories/plugin.php': '',\n '/foo/web-stories/readme.txt': '',\n '/foo/web-stories/.distignore': 'example.txt',\n };\n\n beforeEach(() => {\n getCurrentVersionNumber.mockImplementation(() => 'foobar');\n\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n it('should create ZIP file with automatically determined file name', () => {\n const result = bundlePlugin('/foo/web-stories', false, true);\n expect(result).toBe('/foo/web-stories-foobar.zip');\n expect(generateZipFile).toHaveBeenCalledWith(\n '/foo/web-stories',\n 'web-stories-foobar.zip'\n );\n });\n\n it('should create ZIP file with automatically determined file name for composer build', () => {\n const result = bundlePlugin('/foo/web-stories', true, true);\n expect(result).toBe('/foo/web-stories-foobar-composer.zip');\n expect(generateZipFile).toHaveBeenCalledWith(\n '/foo/web-stories',\n 'web-stories-foobar-composer.zip'\n );\n });\n\n it('should create ZIP file with custom file name', () => {\n const result = bundlePlugin('/foo/web-stories', false, 'my-plugin.zip');\n expect(result).toBe('/foo/my-plugin.zip');\n expect(generateZipFile).toHaveBeenCalledWith(\n '/foo/web-stories',\n 'my-plugin.zip'\n );\n expect(deleteExistingZipFiles).toHaveBeenCalledTimes(0);\n });\n\n it('should delete existing ZIP files if asked', () => {\n bundlePlugin('/foo', false, true, true);\n expect(deleteExistingZipFiles).toHaveBeenCalledOnce();\n });\n});\n" }, { "path": "packages/commander/src/utils/test/copyFiles.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { execFileSync } from 'node:child_process';\n\n/**\n * Internal dependencies\n */\nimport copyFiles from '../copyFiles';\n\njest.mock('node:child_process');\n\ndescribe('copyFiles', () => {\n it('should sync source files to target', () => {\n copyFiles('foo', 'foo/target', ['bar.txt', 'baz/']);\n expect(execFileSync).toHaveBeenLastCalledWith(\n 'rsync',\n [\n '-a',\n '--exclude',\n 'bar.txt',\n '--exclude',\n 'baz/',\n 'foo/',\n 'foo/target/',\n ],\n expect.anything()\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/test/createBuild.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport createBuild from '../createBuild';\nimport copyFiles from '../copyFiles';\n\njest.mock('node:fs');\n\njest.mock('../getIgnoredFiles', () => jest.fn(() => ['bar.txt', 'baz/']));\njest.mock('../copyFiles');\n\ndescribe('createBuild', () => {\n const MOCK_FILE_INFO = {\n '/foo/plugin.php': '',\n '/foo/readme.txt': '',\n '/foo/.distignore': 'example.txt',\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n afterEach(() => {\n jest.clearAllMocks();\n });\n\n it('should copy files to build directory', () => {\n createBuild('/foo', '/foo/build/web-stories');\n expect(copyFiles).toHaveBeenCalledWith('/foo', '/foo/build/web-stories', [\n 'bar.txt',\n 'baz/',\n 'composer.json',\n ]);\n });\n\n it('should ignore third-party folder for composer builds', () => {\n createBuild('/foo', '/foo/build/web-stories', true);\n expect(copyFiles).toHaveBeenCalledWith('/foo', '/foo/build/web-stories', [\n 'bar.txt',\n 'baz/',\n 'includes/vendor/',\n ]);\n });\n});\n" }, { "path": "packages/commander/src/utils/test/deleteExistingZipFiles.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles, readdirSync } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport deleteExistingZipFiles from '../deleteExistingZipFiles';\n\njest.mock('node:fs');\n\ndescribe('deleteExistingZipFiles', () => {\n const MOCK_FILE_INFO = {\n '/build/web-stories.zip': '',\n '/build/web-stories-1.0.0.zip': '',\n '/build/web-stories-1.0.0+1234567.zip': '',\n '/build/unrelated.zip': '',\n '/build/notazipfile.txt': '',\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n it('should delete all existing ZIP files', () => {\n const filesBefore = readdirSync('/build');\n deleteExistingZipFiles('/build');\n const filesAfter = readdirSync('/build');\n\n expect(filesBefore).toIncludeAllMembers([\n 'web-stories.zip',\n 'web-stories-1.0.0.zip',\n 'web-stories-1.0.0+1234567.zip',\n 'notazipfile.txt',\n 'unrelated.zip',\n ]);\n\n expect(filesAfter).toIncludeAllMembers(['notazipfile.txt']);\n });\n});\n" }, { "path": "packages/commander/src/utils/test/generateZipFile.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { execFileSync } from 'node:child_process';\n\n/**\n * Internal dependencies\n */\nimport generateZipFile from '../generateZipFile';\n\njest.mock('node:child_process');\n\ndescribe('generateZipFile', () => {\n it('should ZIP the web-stories directory', () => {\n generateZipFile(\n '/full/path/to/build/web-stories',\n 'web-stories-stable.zip'\n );\n expect(execFileSync).toHaveBeenLastCalledWith(\n 'zip',\n ['-rT', 'web-stories-stable.zip', 'web-stories'],\n expect.objectContaining({\n cwd: '/full/path/to/build',\n })\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/test/getCurrentVersionNumber.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport getCurrentVersionNumber from '../getCurrentVersionNumber';\n\njest.mock('node:fs');\n\nconst PLUGIN_FILE_CONTENT = `\n {\n const MOCK_FILE_INFO = {\n '/foo/plugin.php': PLUGIN_FILE_CONTENT,\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n it('should read the plugin version from the file header', () => {\n expect(getCurrentVersionNumber('/foo/plugin.php')).toBe('1.0.0-alpha');\n });\n\n it('should read the plugin version from the WEBSTORIES_VERSION constant', () => {\n expect(getCurrentVersionNumber('/foo/plugin.php', true)).toBe(\n '1.0.0-alpha+1234567'\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/test/getIgnoredFiles.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport getIgnoredFiles from '../getIgnoredFiles';\n\njest.mock('node:fs');\n\ndescribe('getIgnoredFiles', () => {\n const MOCK_FILE_INFO = {\n '/foo/.distignore': `\n example.txt\n\n # somefile.php\n\n doesnotexist.txt\n\n sub\n `,\n '/foo/example.txt': '',\n '/foo/somefile.php': '',\n '/foo/someotherfile.js': '',\n '/foo/baz/example.txt': '',\n '/foo/sub/folder.txt': '',\n '/bar/example.txt': '',\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n it('should return empty array if there is no .distignore file', () => {\n expect(getIgnoredFiles('/bar')).toStrictEqual([]);\n });\n\n it('should ignore commented out lines', () => {\n expect(getIgnoredFiles('/foo')).not.toContain('somefile.php');\n });\n\n it('should ignore non-existent files', () => {\n expect(getIgnoredFiles('/foo')).not.toContain('doesnotexist.txt');\n });\n\n it('should add trailing slashes to directories', () => {\n expect(getIgnoredFiles('/foo')).toContain('sub/');\n });\n\n it('should return all ignored files', () => {\n expect(getIgnoredFiles('/foo')).toIncludeSameMembers([\n 'example.txt',\n 'sub/',\n ]);\n });\n});\n" }, { "path": "packages/commander/src/utils/test/resizeSvgPaths.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport resizeSvgPath from '../resizeSvgPath';\n\ndescribe('resizeSvgPaths', () => {\n it('should resize paths', () => {\n const actual = resizeSvgPath(\n // viewbox width\n 392,\n // viewbox height\n 392,\n // path to normalize\n `M392,196c0,108.25-87.75,196-196,196S0,304.25,0,196S87.75,0,196,0S392,87.75,392,196z M196,30\n\tc-44.34,0-86.03,17.27-117.38,48.62C47.27,109.97,30,151.66,30,196s17.27,86.03,48.62,117.38C109.97,344.73,151.66,362,196,362\n\ts86.03-17.27,117.38-48.62C344.73,282.03,362,240.34,362,196s-17.27-86.03-48.62-117.38C282.03,47.27,240.34,30,196,30 M196,0\n\tc108.25,0,196,87.75,196,196s-87.75,196-196,196S0,304.25,0,196S87.75,0,196,0L196,0z`\n );\n\n expect(actual).toBe(\n ' M 1.000000 , 0.500000 c 0.000000 , 0.276148 -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 S 1.000000 , 0.223852 , 1.000000 , 0.500000 z M 0.500000 , 0.076531 c -0.113112 , 0.000000 -0.219464 , 0.044056 -0.299439 , 0.124031 C 0.120587 , 0.280536 , 0.076531 , 0.386888 , 0.076531 , 0.500000 s 0.044056 , 0.219464 , 0.124031 , 0.299439 C 0.280536 , 0.879413 , 0.386888 , 0.923469 , 0.500000 , 0.923469 s 0.219464 -0.044056 , 0.299439 -0.124031 C 0.879413 , 0.719464 , 0.923469 , 0.613112 , 0.923469 , 0.500000 s -0.044056 -0.219464 -0.124031 -0.299439 C 0.719464 , 0.120587 , 0.613112 , 0.076531 , 0.500000 , 0.076531 M 0.500000 , 0.000000 c 0.276148 , 0.000000 , 0.500000 , 0.223852 , 0.500000 , 0.500000 s -0.223852 , 0.500000 -0.500000 , 0.500000 S 0.000000 , 0.776148 , 0.000000 , 0.500000 S 0.223852 , 0.000000 , 0.500000 , 0.000000 L 0.500000 , 0.000000 z '\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/test/updateCdnUrl.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles, readFileSync } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport updateCdnUrl from '../updateCdnUrl';\n\njest.mock('node:fs');\n\nconst PLUGIN_FILE_CONTENT = `\n {\n const MOCK_FILE_INFO = {\n '/foo/plugin.php': PLUGIN_FILE_CONTENT,\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n it('should update CDN URL', () => {\n updateCdnUrl('/foo/plugin.php', '7.8.9');\n const pluginFile = readFileSync('/foo/plugin.php');\n\n expect(pluginFile).toContain(\n `define( 'WEBSTORIES_CDN_URL', 'https://wp.stories.google/static/7.8.9' );`\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/test/updateVersionNumbers.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __setMockFiles, readFileSync } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport updateVersionNumbers from '../updateVersionNumbers';\n\njest.mock('node:fs');\njest.mock('../appendRevisionToVersion', () =>\n jest.fn(() => '1.0.0-alpha+1234567')\n);\n\nconst PLUGIN_FILE_CONTENT = `\n {\n const MOCK_FILE_INFO = {\n '/foo/plugin.php': PLUGIN_FILE_CONTENT,\n };\n\n beforeEach(() => {\n __setMockFiles(MOCK_FILE_INFO);\n });\n\n it('should use provided version number', () => {\n updateVersionNumbers('/foo/plugin.php', '7.8.9');\n const pluginFile = readFileSync('/foo/plugin.php');\n\n expect(pluginFile).toContain('* Version: 7.8.9');\n expect(pluginFile).toContain(`define( 'WEBSTORIES_VERSION', '7.8.9' );`);\n });\n\n it('should update plugin header for pre-release', () => {\n updateVersionNumbers('/foo/plugin.php', '7.8.9-alpha');\n const pluginFile = readFileSync('/foo/plugin.php');\n\n expect(pluginFile).toContain('* Version: 7.8.9-alpha');\n expect(pluginFile).toContain(\n `define( 'WEBSTORIES_VERSION', '7.8.9-alpha' );`\n );\n });\n\n it('should not update plugin header for nightly build', () => {\n updateVersionNumbers('/foo/plugin.php', '1.0.0-alpha', true);\n const pluginFile = readFileSync('/foo/plugin.php');\n\n expect(pluginFile).toContain('* Version: 1.0.0');\n expect(pluginFile).not.toContain('* Version: 7.8.9-alpha');\n expect(pluginFile).toContain(\n `define( 'WEBSTORIES_VERSION', '1.0.0-alpha+1234567' );`\n );\n });\n});\n" }, { "path": "packages/commander/src/utils/updateCdnUrl.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { readFileSync, writeFileSync } from 'node:fs';\n\nconst CDN_BASE_URL = 'https://wp.stories.google/static/';\nconst CDN_URL_CONSTANT_REGEX =\n /define\\(\\s*'WEBSTORIES_CDN_URL',\\s*'([^']*)'\\s*\\);/;\n\n/**\n * Updates CDN URL in the main plugin file.\n *\n * Namely, this updates the `WEBSTORIES_CDN_URL` constant in the main plugin file.\n *\n * @param pluginFile Path to the plugin file.\n * @param version Desired version number. Either 'main' or an integer.\n */\nfunction updateCdnURL(pluginFile: string, version: string | number) {\n let pluginFileContent = readFileSync(pluginFile, 'utf8');\n\n pluginFileContent = pluginFileContent.replace(CDN_URL_CONSTANT_REGEX, () => {\n return `define( 'WEBSTORIES_CDN_URL', '${CDN_BASE_URL}${version}' );`;\n });\n\n writeFileSync(pluginFile, pluginFileContent);\n}\n\nexport default updateCdnURL;\n" }, { "path": "packages/commander/src/utils/updateVersionNumbers.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { readFileSync, writeFileSync } from 'node:fs';\n\n/**\n * Internal dependencies\n */\nimport appendRevisionToVersion from './appendRevisionToVersion';\n\nconst VERSION_REGEX = /\\* Version:(.+)/;\nconst VERSION_CONSTANT_REGEX =\n /define\\(\\s*'WEBSTORIES_VERSION',\\s*'([^']*)'\\s*\\);/;\n\n/**\n * Updates version numbers in plugin files.\n *\n * Namely, this updates the 'Version' header in the main plugin file\n * and the `WEBSTORIES_VERSION` constant in the same file\n *\n * If a specific version is provided, uses that version to update the constant.\n *\n * @param pluginFile Path to the plugin file.\n * @param version Desired version number.\n * @param [nightly] Whether this is a nightly build or not.\n */\nfunction updateVersionNumbers(\n pluginFile: string,\n version: string,\n nightly = false\n) {\n let pluginFileContent = readFileSync(pluginFile, 'utf8');\n\n if (!nightly) {\n // 'Version' plugin header must not include anything else beyond the version number,\n // i.e. no suffixes or similar.\n pluginFileContent = pluginFileContent.replace(\n VERSION_REGEX,\n `* Version: ${version}`\n );\n }\n\n const newVersion = nightly ? appendRevisionToVersion(version) : version;\n\n pluginFileContent = pluginFileContent.replace(VERSION_CONSTANT_REGEX, () => {\n return `define( 'WEBSTORIES_VERSION', '${newVersion}' );`;\n });\n\n writeFileSync(pluginFile, pluginFileContent);\n}\n\nexport default updateVersionNumbers;\n" }, { "path": "packages/commander/tsconfig.json", "content": "{\n \"extends\": \"../../tsconfig.shared.json\",\n \"compilerOptions\": {\n \"rootDir\": \"src\",\n \"declarationDir\": \"dist-types\"\n },\n \"include\": [\"src/**/*\"]\n}\n" }, { "path": "packages/dashboard/.npmignore", "content": "src\n" }, { "path": "packages/dashboard/README.md", "content": "# Dashboard\n\nWeb stories core dashboard.\n" }, { "path": "packages/dashboard/package.json", "content": "{\n \"name\": \"@googleforcreators/dashboard\",\n \"description\": \"The core Web Stories dashboard web application, which is platform-agnostic.\",\n \"private\": false,\n \"version\": \"0.1.202410011217\",\n \"author\": {\n \"name\": \"Google\",\n \"url\": \"https://creators.google/\"\n },\n \"license\": \"Apache-2.0\",\n \"keywords\": [\n \"web stories\"\n ],\n \"homepage\": \"https://github.com/GoogleForCreators/web-stories-wp/blob/main/packages/dashboard/README.md\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GoogleForCreators/web-stories-wp.git\",\n \"directory\": \"packages/dashboard\"\n },\n \"bugs\": {\n \"url\": \"https://github.com/googleforcreators/web-stories-wp/issues\"\n },\n \"engines\": {\n \"node\": \">= 20 || >= 22 || >= 24\",\n \"npm\": \">= 7.3\"\n },\n \"customExports\": {\n \".\": {\n \"default\": \"./src/index.js\"\n }\n },\n \"main\": \"dist/index.js\",\n \"module\": \"dist-module/index.js\",\n \"types\": \"dist-types/index.d.ts\",\n \"source\": \"src/index.js\",\n \"publishConfig\": {\n \"access\": \"public\"\n },\n \"dependencies\": {\n \"@googleforcreators/animation\": \"*\",\n \"@googleforcreators/date\": \"*\",\n \"@googleforcreators/design-system\": \"*\",\n \"@googleforcreators/element-library\": \"*\",\n \"@googleforcreators/i18n\": \"*\",\n \"@googleforcreators/media\": \"*\",\n \"@googleforcreators/migration\": \"*\",\n \"@googleforcreators/patterns\": \"*\",\n \"@googleforcreators/react\": \"*\",\n \"@googleforcreators/templates\": \"*\",\n \"@googleforcreators/tracking\": \"*\",\n \"@googleforcreators/units\": \"*\",\n \"flagged\": \"^2.0.10\",\n \"history\": \"^5.3.0\",\n \"prop-types\": \"^15.8.1\",\n \"styled-components\": \"^5.3.11\",\n \"stylis-plugin-rtl\": \"^1.0.0\"\n },\n \"devDependencies\": {\n \"@googleforcreators/karma-fixture\": \"*\",\n \"@testing-library/react\": \"^12.1.5\",\n \"@testing-library/react-hooks\": \"^8.0.1\",\n \"@testing-library/user-event\": \"^14.6.1\",\n \"jest\": \"^29.6.1\",\n \"react\": \"^17.0.2\"\n }\n}\n" }, { "path": "packages/dashboard/src/app/api/apiProvider.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport useStoryApi from './useStoryApi';\nimport useTemplateApi from './useTemplateApi';\nimport useUsersApi from './useUsersApi';\nimport useTaxonomyApi from './useTaxonomyApi';\nimport ApiContext from './context';\n\nexport default function ApiProvider({ children }) {\n const { api: usersApi } = useUsersApi();\n const { api: taxonomyApi } = useTaxonomyApi();\n const { templates, api: templateApi } = useTemplateApi();\n const { stories, api: storyApi } = useStoryApi();\n\n const value = {\n state: {\n stories,\n templates,\n },\n actions: {\n storyApi,\n templateApi,\n usersApi,\n taxonomyApi,\n },\n };\n\n return {children};\n}\n\nApiProvider.propTypes = {\n children: PropTypes.node,\n};\n" }, { "path": "packages/dashboard/src/app/api/context.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createContext } from '@googleforcreators/react';\n\nconst ApiContext = createContext({ state: {}, actions: {} });\n\nexport default ApiContext;\n" }, { "path": "packages/dashboard/src/app/api/index.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport { default as ApiProvider } from './apiProvider';\n" }, { "path": "packages/dashboard/src/app/api/test/apiProvider.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { renderHook, act } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport ApiProvider from '../apiProvider';\nimport { ConfigProvider } from '../../config';\nimport useApi from '../useApi';\n\nconst fetchStories = () => {\n return Promise.resolve({\n stories: {\n 123: {\n id: 123,\n status: 'publish',\n title: 'Carlos',\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n locked: false,\n lockUser: {\n id: 0,\n name: '',\n avatar: null,\n },\n bottomTargetAction:\n 'https://www.story-link.com/wp-admin/post.php?id=123',\n featuredMediaUrl: 'https://www.featured-media-123',\n editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',\n previewLink: 'https://www.story-link.com/?preview=true',\n link: 'https://www.story-link.com',\n capabilities: {\n hasEditAction: false,\n hasDeleteAction: false,\n },\n },\n },\n fetchedStoryIds: [5],\n totalPages: 1,\n totalStoriesByStatus: {\n all: 1,\n publish: 1,\n draft: 0,\n },\n });\n};\n\nconst storyResponse = (story) => {\n let title = '';\n let id = story.id || 456;\n if (story?.original_id) {\n id = 456;\n title = 'Carlos (Copy)';\n } else {\n title = typeof story.title === 'string' ? story.title : story.title.raw;\n }\n\n return Promise.resolve({\n id,\n status: 'publish',\n title,\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n locked: false,\n lockUser: {\n id: 0,\n name: '',\n avatar: null,\n },\n bottomTargetAction: `https://www.story-link.com/wp-admin/post.php?id=${id}`,\n featuredMediaUrl: `https://www.featured-media-${id}`,\n editStoryLink: `https://www.story-link.com/wp-admin/post.php?id=${id}`,\n previewLink: 'https://www.story-link.com/?preview=true',\n link: 'https://www.story-link.com',\n capabilities: {\n hasEditAction: false,\n hasDeleteAction: false,\n },\n });\n};\n\nconst updateStory = (story) => {\n return storyResponse(story);\n};\n\nconst duplicateStory = (story) => {\n story.original_id = story.id;\n\n return storyResponse(story);\n};\n\nconst trashStory = ({ id }) => {\n return Promise.resolve({\n id,\n status: 'publish',\n title: { raw: 'Carlos', rendered: 'Carlos' },\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000',\n date: '1970-01-01T00:00:00.000',\n dateGmt: '1970-01-01T00:00:00.000',\n link: 'https://www.story-link.com',\n editLink: 'https://www.story-link.com/wp-admin/post.php?id=' + id,\n });\n};\n\ndescribe('ApiProvider', () => {\n it('should return a story in state data when the API request is fired', async () => {\n const { result } = renderHook(() => useApi(), {\n wrapper: (props) => (\n \n \n \n ),\n });\n\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n expect(result.current.state.stories.stories).toStrictEqual({\n 123: {\n bottomTargetAction:\n 'https://www.story-link.com/wp-admin/post.php?id=123',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',\n id: 123,\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n featuredMediaUrl: 'https://www.featured-media-123',\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n link: 'https://www.story-link.com',\n lockUser: {\n avatar: null,\n id: 0,\n name: '',\n },\n locked: false,\n previewLink: 'https://www.story-link.com/?preview=true',\n status: 'publish',\n title: 'Carlos',\n },\n });\n });\n\n it('should return an updated story in state data when the API request is fired', async () => {\n const { result } = renderHook(() => useApi(), {\n wrapper: (props) => (\n \n \n \n ),\n });\n\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n await act(async () => {\n await result.current.actions.storyApi.updateStory({\n id: 123,\n modified: undefined,\n status: 'publish',\n title: { raw: 'New Title' },\n link: 'https://www.story-link.com',\n editLink: 'https://www.story-link.com/wp-admin/post.php?id=123',\n });\n });\n\n expect(result.current.state.stories.stories).toStrictEqual({\n 123: {\n bottomTargetAction:\n 'https://www.story-link.com/wp-admin/post.php?id=123',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n featuredMediaUrl: 'https://www.featured-media-123',\n editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',\n id: 123,\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n link: 'https://www.story-link.com',\n lockUser: {\n avatar: null,\n id: 0,\n name: '',\n },\n locked: false,\n previewLink: 'https://www.story-link.com/?preview=true',\n status: 'publish',\n title: 'New Title',\n },\n });\n });\n\n it('should return a duplicated story in state data when the duplicate method is called.', async () => {\n const { result } = renderHook(() => useApi(), {\n wrapper: (props) => (\n \n \n \n ),\n });\n\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n await act(async () => {\n await result.current.actions.storyApi.duplicateStory({\n id: 123,\n });\n });\n\n expect(result.current.state.stories.stories).toStrictEqual({\n 123: {\n bottomTargetAction:\n 'https://www.story-link.com/wp-admin/post.php?id=123',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n featuredMediaUrl: 'https://www.featured-media-123',\n editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=123',\n id: 123,\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n link: 'https://www.story-link.com',\n lockUser: {\n avatar: null,\n id: 0,\n name: '',\n },\n locked: false,\n previewLink: 'https://www.story-link.com/?preview=true',\n status: 'publish',\n title: 'Carlos',\n },\n 456: {\n bottomTargetAction:\n 'https://www.story-link.com/wp-admin/post.php?id=456',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n editStoryLink: 'https://www.story-link.com/wp-admin/post.php?id=456',\n featuredMediaUrl: 'https://www.featured-media-456',\n id: 456,\n modified: '1970-01-01T00:00:00.000',\n modifiedGmt: '1970-01-01T00:00:00.000Z',\n created: '1970-01-01T00:00:00.000',\n createdGmt: '1970-01-01T00:00:00.000Z',\n author: {\n name: 'admin',\n id: 1,\n },\n link: 'https://www.story-link.com',\n lockUser: {\n avatar: null,\n id: 0,\n name: '',\n },\n locked: false,\n previewLink: 'https://www.story-link.com/?preview=true',\n status: 'publish',\n title: 'Carlos (Copy)',\n },\n });\n });\n\n it('should delete a story when the trash story method is called.', async () => {\n const { result } = renderHook(() => useApi(), {\n wrapper: (props) => (\n \n \n \n ),\n });\n\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n await act(async () => {\n await result.current.actions.storyApi.trashStory({\n id: 123,\n });\n });\n\n expect(result.current.state.stories.stories).toStrictEqual({});\n });\n\n it('should call initialFetch listeners once when first storystatuses returned', async () => {\n const listenerMock = jest.fn();\n const { result } = renderHook(() => useApi(), {\n wrapper: (props) => (\n \n \n \n ),\n });\n\n act(() => {\n result.current.actions.storyApi.addInitialFetchListener(listenerMock);\n });\n\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n expect(listenerMock).toHaveBeenCalledOnce();\n expect(listenerMock).toHaveBeenCalledWith({ all: 1, draft: 0, publish: 1 });\n\n // Run again just to make sure it doesn't call the listeners more than once\n await act(async () => {\n await result.current.actions.storyApi.fetchStories({});\n });\n\n expect(listenerMock).toHaveBeenCalledOnce();\n });\n});\n" }, { "path": "packages/dashboard/src/app/api/useApi.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { identity, useContextSelector } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport ApiContext from './context';\n\nexport default function useApi(selector = identity) {\n return useContextSelector(ApiContext, selector);\n}\n" }, { "path": "packages/dashboard/src/app/api/useApiAlerts.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useEffect, useDebouncedCallback } from '@googleforcreators/react';\nimport { useSnackbar } from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport useApi from './useApi';\n\nfunction useApiAlerts() {\n const { storyError, templateError } = useApi(\n ({\n state: {\n stories: { error: storyError },\n templates: { error: templateError },\n },\n }) => ({\n storyError,\n templateError,\n })\n );\n const { showSnackbar } = useSnackbar();\n\n const debouncedShowSnackbar = useDebouncedCallback((message) => {\n return showSnackbar({ message, dismissible: true });\n }, 200);\n // if there is an API error, display a snackbar\n useEffect(() => {\n if (storyError?.id) {\n debouncedShowSnackbar(storyError.message);\n }\n }, [storyError, debouncedShowSnackbar]);\n\n useEffect(() => {\n if (templateError?.id) {\n debouncedShowSnackbar(templateError.message);\n }\n }, [templateError, debouncedShowSnackbar]);\n}\nexport default useApiAlerts;\n" }, { "path": "packages/dashboard/src/app/api/useStoryApi.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n} from '@googleforcreators/react';\nimport { getTimeTracker } from '@googleforcreators/tracking';\nimport {\n SESSION_STORAGE_PREFIX,\n sessionStore,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport {\n storyReducer,\n defaultStoriesState,\n ACTION_TYPES as STORY_ACTION_TYPES,\n} from '../reducer/story';\nimport { ERRORS } from '../textContent';\nimport { useConfig } from '../config';\n\n// The format here is taken from the `getSessionStorageKey` util.\n// See https://github.com/GoogleForCreators/web-stories-wp/blob/d62ed358d069b3cd8586bc5f6949f50cdc0a39e6/packages/story-editor/src/utils/getSessionStorageKey.js\nconst DRAFT_STORAGE_KEY = `${SESSION_STORAGE_PREFIX.LOCAL_AUTOSAVE_PREFIX}_auto-draft`;\n\nconst useStoryApi = () => {\n const isInitialFetch = useRef(true);\n const initialFetchListeners = useMemo(() => new Map(), []);\n const [state, dispatch] = useReducer(storyReducer, defaultStoriesState);\n const { apiCallbacks } = useConfig();\n\n const isMountedRef = useRef(false);\n\n useEffect(() => {\n isMountedRef.current = true;\n\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n\n const fetchStories = useCallback(\n async (queryParams) => {\n dispatch({\n type: STORY_ACTION_TYPES.LOADING_STORIES,\n payload: true,\n });\n\n // eslint-disable-next-line @wordpress/no-unused-vars-before-return -- False positive because of the finally().\n const trackTiming = getTimeTracker('load_stories');\n\n try {\n // Maybe not making a lot of sense to expect fetchedStoryIds from the api callbacks response.\n // However the order of ids get changed if we try to create that array here\n // which may ( or may not ) cause some regression. @todo Reflect on fetchedStoryIds again in next phase.\n const { stories, fetchedStoryIds, totalPages, totalStoriesByStatus } =\n await apiCallbacks.fetchStories(queryParams);\n\n if (!isMountedRef.current) {\n return;\n }\n\n // Hook into first fetch of story statuses.\n if (isInitialFetch.current) {\n initialFetchListeners.forEach((listener) => {\n listener(totalStoriesByStatus);\n });\n }\n\n isInitialFetch.current = false;\n\n dispatch({\n type: STORY_ACTION_TYPES.FETCH_STORIES_SUCCESS,\n payload: {\n stories,\n totalPages,\n totalStoriesByStatus,\n fetchedStoryIds,\n page: queryParams.page,\n },\n });\n } catch (err) {\n dispatch({\n type: STORY_ACTION_TYPES.FETCH_STORIES_FAILURE,\n payload: {\n message: ERRORS.LOAD_STORIES.MESSAGE,\n code: err.code,\n },\n });\n } finally {\n dispatch({\n type: STORY_ACTION_TYPES.LOADING_STORIES,\n payload: false,\n });\n trackTiming();\n }\n },\n [apiCallbacks, initialFetchListeners]\n );\n\n const updateStory = useCallback(\n async (story) => {\n const trackTiming = getTimeTracker('load_update_story');\n\n try {\n const response = await apiCallbacks.updateStory(story);\n\n dispatch({\n type: STORY_ACTION_TYPES.UPDATE_STORY,\n payload: response,\n });\n } catch (err) {\n dispatch({\n type: STORY_ACTION_TYPES.UPDATE_STORY_FAILURE,\n payload: {\n message: ERRORS.UPDATE_STORY.MESSAGE,\n code: err.code,\n },\n });\n } finally {\n trackTiming();\n }\n },\n [apiCallbacks]\n );\n\n const trashStory = useCallback(\n async (story) => {\n const trackTiming = getTimeTracker('load_trash_story');\n\n try {\n await apiCallbacks.trashStory(story.id);\n dispatch({\n type: STORY_ACTION_TYPES.TRASH_STORY,\n payload: { id: story.id, storyStatus: story.status },\n });\n } catch (err) {\n dispatch({\n type: STORY_ACTION_TYPES.TRASH_STORY_FAILURE,\n payload: {\n message: ERRORS.DELETE_STORY.MESSAGE,\n code: err.code,\n },\n });\n } finally {\n trackTiming();\n }\n },\n [apiCallbacks]\n );\n\n const createStoryFromTemplate = useCallback(\n async (template) => {\n dispatch({\n type: STORY_ACTION_TYPES.CREATING_STORY_FROM_TEMPLATE,\n payload: true,\n });\n\n try {\n const response = await apiCallbacks.createStoryFromTemplate(template);\n sessionStore.deleteItemByKey(DRAFT_STORAGE_KEY);\n dispatch({\n type: STORY_ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_SUCCESS,\n });\n\n window.location = response.editLink;\n } catch (err) {\n dispatch({\n type: STORY_ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_FAILURE,\n payload: {\n message: ERRORS.CREATE_STORY_FROM_TEMPLATE.MESSAGE,\n code: err.code,\n },\n });\n } finally {\n dispatch({\n type: STORY_ACTION_TYPES.CREATING_STORY_FROM_TEMPLATE,\n payload: false,\n });\n }\n },\n [apiCallbacks]\n );\n\n const duplicateStory = useCallback(\n async (story) => {\n const trackTiming = getTimeTracker('load_duplicate_story');\n\n try {\n const response = await apiCallbacks.duplicateStory(story);\n\n dispatch({\n type: STORY_ACTION_TYPES.DUPLICATE_STORY,\n payload: response,\n });\n } catch (err) {\n dispatch({\n type: STORY_ACTION_TYPES.DUPLICATE_STORY_FAILURE,\n payload: {\n message: ERRORS.DUPLICATE_STORY.MESSAGE,\n code: err.code,\n },\n });\n } finally {\n trackTiming();\n }\n },\n [apiCallbacks]\n );\n\n const addInitialFetchListener = useCallback(\n (listener) => {\n const key = Symbol();\n initialFetchListeners.set(key, listener);\n return () => {\n initialFetchListeners.delete(key);\n };\n },\n [initialFetchListeners]\n );\n\n return {\n stories: state,\n api: {\n duplicateStory,\n fetchStories,\n createStoryFromTemplate,\n trashStory,\n updateStory,\n addInitialFetchListener,\n },\n };\n};\n\nexport default useStoryApi;\n" }, { "path": "packages/dashboard/src/app/api/useTaxonomyApi.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\nfunction useTaxonomyApi() {\n const {\n apiCallbacks: { getTaxonomies, getTaxonomyTerms },\n } = useConfig();\n\n return {\n api: {\n getTaxonomies,\n getTaxonomyTerms,\n },\n };\n}\n\nexport default useTaxonomyApi;\n" }, { "path": "packages/dashboard/src/app/api/useTemplateApi.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useCallback, useReducer } from '@googleforcreators/react';\nimport { compareDesc } from '@googleforcreators/date';\n\n/**\n * Internal dependencies\n */\nimport {\n templateReducer,\n defaultTemplatesState,\n ACTION_TYPES as TEMPLATE_ACTION_TYPES,\n} from '../reducer/templates';\nimport { reshapeTemplateObject } from '../serializers';\nimport { useConfig } from '../config';\n\nconst useTemplateApi = () => {\n const [state, dispatch] = useReducer(templateReducer, defaultTemplatesState);\n const { cdnURL } = useConfig();\n\n const fetchExternalTemplates = useCallback(async () => {\n dispatch({\n type: TEMPLATE_ACTION_TYPES.LOADING_TEMPLATES,\n payload: true,\n });\n\n const templatesByTag = {};\n\n const { getAllTemplates } = await import(\n /* webpackChunkName: \"chunk-web-stories-templates\" */ '@googleforcreators/templates'\n );\n\n const reshapedTemplates = (await getAllTemplates({ cdnURL }))\n .map((template) => {\n const reshapedTemplate = reshapeTemplateObject(template);\n\n reshapedTemplate.tags.forEach((tag) => {\n if (templatesByTag[tag]) {\n templatesByTag[tag].push(reshapedTemplate.id);\n } else {\n templatesByTag[tag] = [reshapedTemplate.id];\n }\n });\n\n return reshapedTemplate;\n })\n .sort((a, b) => compareDesc(a.creationDate, b.creationDate));\n dispatch({\n type: TEMPLATE_ACTION_TYPES.FETCH_TEMPLATES_SUCCESS,\n payload: {\n page: 1,\n templates: reshapedTemplates,\n totalPages: 1,\n totalTemplates: reshapedTemplates.length,\n templatesByTag,\n },\n });\n }, [cdnURL]);\n\n const fetchExternalTemplateById = useCallback(\n (templateId) => {\n if (state.templates[templateId]) {\n return Promise.resolve(state.templates[templateId]);\n }\n return Promise.reject(new Error());\n },\n [state]\n );\n\n return {\n templates: state,\n api: {\n fetchExternalTemplates,\n fetchExternalTemplateById,\n },\n };\n};\n\nexport default useTemplateApi;\n" }, { "path": "packages/dashboard/src/app/api/useUsersApi.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../config';\n\nfunction useUsersApi() {\n const {\n apiCallbacks: { getAuthors },\n } = useConfig();\n\n return {\n api: {\n getAuthors,\n },\n };\n}\n\nexport default useUsersApi;\n" }, { "path": "packages/dashboard/src/app/config/configProvider.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DashboardConfig } from '../../types/configProvider';\nimport Context from './context';\n\nexport interface ConfigProviderProps {\n children: ReactNode;\n config: DashboardConfig;\n}\nfunction ConfigProvider({ config, children }: ConfigProviderProps) {\n return {children};\n}\n\nexport default ConfigProvider;\n" }, { "path": "packages/dashboard/src/app/config/context.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createContext } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport type { Navigation } from '../../types/configProvider';\n\nexport default createContext({\n isRTL: false,\n userId: 0,\n locale: {},\n newStoryURL: '',\n cdnURL: '',\n version: '',\n capabilities: {},\n canViewDefaultTemplates: false,\n flags: {},\n apiCallbacks: {},\n leftRailSecondaryNavigation: [] as Navigation[],\n styleConstants: {\n topOffset: 0,\n leftOffset: 0,\n },\n containerId: '',\n});\n" }, { "path": "packages/dashboard/src/app/config/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as ConfigProvider } from './configProvider';\nexport { default as useConfig } from './useConfig';\n" }, { "path": "packages/dashboard/src/app/config/useConfig.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { identity, useContextSelector } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport type { DashboardConfig } from '../../types/configProvider';\nimport Context from './context';\n\nfunction useConfig(): DashboardConfig;\nfunction useConfig(\n selector: (state: DashboardConfig) => T | DashboardConfig = identity\n) {\n return useContextSelector(Context, selector);\n}\n\nexport default useConfig;\n" }, { "path": "packages/dashboard/src/app/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './api';\nexport * from './config';\n" }, { "path": "packages/dashboard/src/app/reducer/story/constants.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport const ACTION_TYPES = {\n CREATING_STORY_FROM_TEMPLATE: 'creating_story_from_template',\n CREATE_STORY_FROM_TEMPLATE_SUCCESS: 'create_story_from_template_success',\n CREATE_STORY_FROM_TEMPLATE_FAILURE: 'create_story_from_template_failure',\n LOADING_STORIES: 'loading_stories',\n FETCH_STORIES_SUCCESS: 'fetch_stories_success',\n FETCH_STORIES_FAILURE: 'fetch_stories_failure',\n UPDATE_STORY: 'update_story',\n UPDATE_STORY_FAILURE: 'update_story_failure',\n TRASH_STORY: 'trash_story',\n TRASH_STORY_FAILURE: 'trash_story_failure',\n DUPLICATE_STORY: 'duplicate_story',\n DUPLICATE_STORY_FAILURE: 'duplicate_story_failure',\n};\n\nexport const defaultStoriesState = {\n error: {},\n isLoading: false,\n stories: {},\n storiesOrderById: [],\n totalStoriesByStatus: {},\n totalPages: null,\n};\n" }, { "path": "packages/dashboard/src/app/reducer/story/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './constants';\nexport { default as storyReducer } from './storyReducer';\n" }, { "path": "packages/dashboard/src/app/reducer/story/storyReducer.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { STORY_STATUS } from '../../../constants';\nimport { ACTION_TYPES } from './constants';\n\nfunction storyReducer(state, action) {\n switch (action.type) {\n case ACTION_TYPES.LOADING_STORIES:\n case ACTION_TYPES.CREATING_STORY_FROM_TEMPLATE: {\n return {\n ...state,\n isLoading: action.payload,\n };\n }\n\n case ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_FAILURE:\n case ACTION_TYPES.FETCH_STORIES_FAILURE:\n case ACTION_TYPES.UPDATE_STORY_FAILURE:\n case ACTION_TYPES.TRASH_STORY_FAILURE:\n case ACTION_TYPES.DUPLICATE_STORY_FAILURE: {\n return {\n ...state,\n error: { ...action.payload, id: Date.now() },\n };\n }\n\n case ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_SUCCESS: {\n return {\n ...state,\n error: {},\n };\n }\n\n case ACTION_TYPES.UPDATE_STORY:\n return {\n ...state,\n error: {},\n stories: {\n ...state.stories,\n [action.payload.id]: action.payload,\n },\n };\n\n case ACTION_TYPES.TRASH_STORY: {\n const storyGroupStatus =\n action.payload.storyStatus === STORY_STATUS.DRAFT\n ? STORY_STATUS.DRAFT\n : STORY_STATUS.PUBLISH;\n\n return {\n ...state,\n error: {},\n storiesOrderById: state.storiesOrderById.filter(\n (id) => id !== action.payload.id\n ),\n totalStoriesByStatus: {\n ...state.totalStoriesByStatus,\n all: state.totalStoriesByStatus.all - 1,\n [storyGroupStatus]: state.totalStoriesByStatus[storyGroupStatus] - 1,\n },\n stories: Object.keys(state.stories).reduce((memo, storyId) => {\n if (Number.parseInt(storyId) !== action.payload.id) {\n memo[storyId] = state.stories[storyId];\n }\n return memo;\n }, {}),\n };\n }\n\n case ACTION_TYPES.DUPLICATE_STORY:\n return {\n ...state,\n error: {},\n storiesOrderById: [action.payload.id, ...state.storiesOrderById],\n totalStoriesByStatus: {\n ...state.totalStoriesByStatus,\n all: state.totalStoriesByStatus.all + 1,\n [action.payload.status]:\n state.totalStoriesByStatus[action.payload.status] + 1,\n },\n stories: {\n ...state.stories,\n [action.payload.id]: action.payload,\n },\n };\n\n case ACTION_TYPES.FETCH_STORIES_SUCCESS: {\n const {\n fetchedStoryIds,\n totalStoriesByStatus,\n totalPages,\n page,\n stories: payloadStories,\n } = action.payload;\n const { storiesOrderById, stories } = state;\n\n const combinedStoryIds =\n page === 1\n ? fetchedStoryIds\n : [...storiesOrderById, ...fetchedStoryIds];\n\n const uniqueStoryIds = [...new Set(combinedStoryIds)];\n\n return {\n ...state,\n error: {},\n storiesOrderById: uniqueStoryIds,\n stories: {\n ...stories,\n ...payloadStories,\n },\n totalPages: totalPages || 1,\n totalStoriesByStatus: totalStoriesByStatus,\n allPagesFetched: page >= totalPages,\n };\n }\n\n default:\n return state;\n }\n}\n\nexport default storyReducer;\n" }, { "path": "packages/dashboard/src/app/reducer/templates/constants.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport const ACTION_TYPES = {\n LOADING_TEMPLATES: 'loading_templates',\n FETCH_TEMPLATES_SUCCESS: 'fetch_templates_success',\n FETCH_TEMPLATES_FAILURE: 'fetch_templates_failure',\n PLACEHOLDER: 'placeholder',\n};\n\nexport const defaultTemplatesState = {\n allPagesFetched: false,\n error: {},\n isLoading: false,\n templates: {},\n templatesByTag: {},\n templatesOrderById: [],\n totalTemplates: null,\n totalPages: null,\n};\n" }, { "path": "packages/dashboard/src/app/reducer/templates/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport * from './constants';\nexport { default as templateReducer } from './templateReducer';\n" }, { "path": "packages/dashboard/src/app/reducer/templates/templateReducer.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport groupBy from '../../../utils/groupBy';\nimport { ACTION_TYPES, defaultTemplatesState } from './constants';\n\nfunction templateReducer(state, action) {\n switch (action.type) {\n case ACTION_TYPES.LOADING_TEMPLATES: {\n return {\n ...state,\n isLoading: action.payload,\n };\n }\n\n case ACTION_TYPES.FETCH_TEMPLATES_FAILURE:\n return {\n ...state,\n error: { ...action.payload, id: Date.now() },\n };\n\n case ACTION_TYPES.FETCH_TEMPLATES_SUCCESS: {\n const fetchedTemplatesById = action.payload.templates.map(({ id }) => id);\n\n const combinedTemplateIds =\n action.payload.page === 1\n ? fetchedTemplatesById\n : [...state.templatesOrderById, ...fetchedTemplatesById];\n\n const uniqueTemplateIds = [...new Set(combinedTemplateIds)];\n\n return {\n ...state,\n error: {},\n templatesOrderById: uniqueTemplateIds,\n templates: {\n ...state.templates,\n ...groupBy(action.payload.templates, 'id'),\n },\n isLoading: false,\n totalPages: action.payload.totalPages,\n totalTemplates: action.payload.totalTemplates,\n allPagesFetched: action.payload.page >= action.payload.totalPages,\n templatesByTag: action.payload.templatesByTag,\n };\n }\n case ACTION_TYPES.PLACEHOLDER:\n return defaultTemplatesState;\n\n default:\n return state;\n }\n}\n\nexport default templateReducer;\n" }, { "path": "packages/dashboard/src/app/reducer/test/story.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { storyReducer, ACTION_TYPES } from '../story';\nimport { STORY_STATUS } from '../../../constants';\nimport { ERRORS } from '../../textContent';\n\ndescribe('storyReducer', () => {\n const initialState = {\n error: {},\n isLoading: false,\n stories: {},\n storiesOrderById: [],\n totalStoriesByStatus: {},\n totalPages: null,\n };\n\n const MOCK_ERROR_ID = Date.now();\n\n beforeAll(() => {\n jest.spyOn(Date, 'now').mockImplementation(() => MOCK_ERROR_ID);\n });\n\n it(`should update stories state when ${ACTION_TYPES.TRASH_STORY} is called`, () => {\n const result = storyReducer(\n {\n ...initialState,\n storiesOrderById: [94, 65, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 44,\n [STORY_STATUS.DRAFT]: 40,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 4,\n },\n {\n type: ACTION_TYPES.TRASH_STORY,\n payload: {\n id: 65,\n storyStatus: 'publish',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {},\n storiesOrderById: [94, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 43,\n [STORY_STATUS.DRAFT]: 40,\n [STORY_STATUS.PUBLISH]: 3,\n },\n totalPages: 4,\n });\n });\n\n it(`should update error when ${ACTION_TYPES.TRASH_STORY_FAILURE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.TRASH_STORY_FAILURE,\n payload: {\n message: ERRORS.DELETE_STORY.MESSAGE,\n code: 'my_error_code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.DELETE_STORY.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'my_error_code',\n },\n });\n });\n\n it(`should update stories state when ${ACTION_TYPES.DUPLICATE_STORY} is called`, () => {\n const result = storyReducer(\n {\n ...initialState,\n storiesOrderById: [94, 65, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 44,\n [STORY_STATUS.DRAFT]: 40,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 4,\n },\n {\n type: ACTION_TYPES.DUPLICATE_STORY,\n payload: { id: 95, status: 'draft', title: 'my test story 1 - copy' },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {},\n storiesOrderById: [95, 94, 65, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 95: { id: 95, status: 'draft', title: 'my test story 1 - copy' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 45,\n [STORY_STATUS.DRAFT]: 41,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 4,\n });\n });\n\n it(`should update error when ${ACTION_TYPES.DUPLICATE_STORY_FAILURE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.DUPLICATE_STORY_FAILURE,\n payload: {\n message: ERRORS.DUPLICATE_STORY.MESSAGE,\n code: 'my_error_code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.DUPLICATE_STORY.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'my_error_code',\n },\n });\n });\n\n it(`should update stories state when ${ACTION_TYPES.FETCH_STORIES_SUCCESS} is called`, () => {\n const result = storyReducer(initialState, {\n type: ACTION_TYPES.FETCH_STORIES_SUCCESS,\n payload: {\n page: 1,\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 44,\n [STORY_STATUS.DRAFT]: 40,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 4,\n fetchedStoryIds: [94, 65, 78, 12],\n },\n });\n\n expect(result).toMatchObject({\n ...initialState,\n error: {},\n storiesOrderById: [94, 65, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 44,\n [STORY_STATUS.DRAFT]: 40,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 4,\n allPagesFetched: false,\n });\n });\n\n it(`should update stories state when ${ACTION_TYPES.FETCH_STORIES_SUCCESS} is called and maintain order from existing state`, () => {\n const result = storyReducer(\n { ...initialState, storiesOrderById: [55, 99, 10, 3] },\n {\n type: ACTION_TYPES.FETCH_STORIES_SUCCESS,\n payload: {\n page: 2,\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 18,\n [STORY_STATUS.DRAFT]: 14,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 2,\n fetchedStoryIds: [94, 65, 78, 12],\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n storiesOrderById: [55, 99, 10, 3, 94, 65, 78, 12],\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n totalStoriesByStatus: {\n all: 18,\n [STORY_STATUS.DRAFT]: 14,\n [STORY_STATUS.PUBLISH]: 4,\n },\n totalPages: 2,\n allPagesFetched: true,\n });\n });\n\n it(`should update stories state when ${ACTION_TYPES.FETCH_STORIES_SUCCESS} is called and set totalPages to at least one`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.FETCH_STORIES_SUCCESS,\n payload: {\n page: 1,\n stories: {},\n totalStoriesByStatus: {\n all: 0,\n [STORY_STATUS.DRAFT]: 0,\n [STORY_STATUS.PUBLISH]: 0,\n [STORY_STATUS.FUTURE]: 0,\n [STORY_STATUS.PENDING]: 0,\n [STORY_STATUS.PRIVATE]: 0,\n [STORY_STATUS.PUBLISH]: 0,\n },\n totalPages: 0,\n fetchedStoryIds: [],\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n storiesOrderById: [],\n stories: {},\n totalStoriesByStatus: {\n all: 0,\n [STORY_STATUS.DRAFT]: 0,\n [STORY_STATUS.PUBLISH]: 0,\n [STORY_STATUS.FUTURE]: 0,\n [STORY_STATUS.PENDING]: 0,\n [STORY_STATUS.PRIVATE]: 0,\n [STORY_STATUS.PUBLISH]: 0,\n },\n totalPages: 1,\n allPagesFetched: true,\n });\n });\n\n it(`should update isLoading when ${ACTION_TYPES.LOADING_STORIES} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.LOADING_STORIES,\n payload: true,\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n isLoading: true,\n });\n });\n\n it(`should update isLoading when ${ACTION_TYPES.CREATING_STORY_FROM_TEMPLATE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.CREATING_STORY_FROM_TEMPLATE,\n payload: true,\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n isLoading: true,\n });\n });\n\n it(`should update error to empty object when ${ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_SUCCESS} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_SUCCESS,\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {},\n });\n });\n\n it(`should update error when ${ACTION_TYPES.FETCH_STORIES_FAILURE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.FETCH_STORIES_FAILURE,\n payload: {\n message: ERRORS.LOAD_STORIES.MESSAGE,\n code: 'my_error_code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.LOAD_STORIES.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'my_error_code',\n },\n });\n });\n\n it(`should update error when ${ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_FAILURE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.CREATE_STORY_FROM_TEMPLATE_FAILURE,\n payload: {\n message: ERRORS.CREATE_STORY_FROM_TEMPLATE.MESSAGE,\n code: 'my_error_code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.CREATE_STORY_FROM_TEMPLATE.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'my_error_code',\n },\n });\n });\n\n it(`should update stories state when ${ACTION_TYPES.UPDATE_STORY} is called`, () => {\n const result = storyReducer(\n {\n ...initialState,\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'my test story 2' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n },\n {\n type: ACTION_TYPES.UPDATE_STORY,\n payload: { id: 65, status: 'publish', title: 'new title for story' },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n stories: {\n 94: { id: 94, status: 'draft', title: 'my test story 1' },\n 65: { id: 65, status: 'publish', title: 'new title for story' },\n 78: { id: 78, status: 'draft', title: 'my test story 3' },\n 12: { id: 12, status: 'draft', title: 'my test story 4' },\n },\n });\n });\n\n it(`should update error when ${ACTION_TYPES.UPDATE_STORY_FAILURE} is called`, () => {\n const result = storyReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.UPDATE_STORY_FAILURE,\n payload: {\n message: ERRORS.UPDATE_STORY.MESSAGE,\n code: 'my_error_code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.UPDATE_STORY.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'my_error_code',\n },\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/reducer/test/templates.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { ERRORS } from '../../textContent';\nimport {\n templateReducer,\n ACTION_TYPES,\n defaultTemplatesState as initialState,\n} from '../templates';\n\ndescribe('templateReducer', () => {\n const MOCK_ERROR_ID = Date.now();\n\n beforeAll(() => {\n jest.spyOn(Date, 'now').mockImplementation(() => MOCK_ERROR_ID);\n });\n\n it(`should update templates state when ${ACTION_TYPES.FETCH_TEMPLATES_SUCCESS} is called`, () => {\n const result = templateReducer(initialState, {\n type: ACTION_TYPES.FETCH_TEMPLATES_SUCCESS,\n payload: {\n page: 1,\n templates: [\n {\n id: 1,\n title: 'Beauty',\n },\n {\n id: 2,\n title: 'Cooking',\n },\n {\n id: 3,\n title: 'DIY',\n },\n {\n id: 4,\n title: 'Cooking',\n },\n {\n id: 5,\n title: 'Entertainment',\n },\n ],\n totalTemplates: 33,\n totalPages: 4,\n },\n });\n\n expect(result).toMatchObject({\n ...initialState,\n error: {},\n templatesOrderById: [1, 2, 3, 4, 5],\n templates: {\n 1: {\n id: 1,\n title: 'Beauty',\n },\n 2: {\n id: 2,\n title: 'Cooking',\n },\n 3: {\n id: 3,\n title: 'DIY',\n },\n 4: {\n id: 4,\n title: 'Cooking',\n },\n 5: {\n id: 5,\n title: 'Entertainment',\n },\n },\n totalTemplates: 33,\n totalPages: 4,\n allPagesFetched: false,\n });\n });\n\n it(`should update templates state when ${ACTION_TYPES.FETCH_TEMPLATES_SUCCESS} is called and maintain order from existing state`, () => {\n const result = templateReducer(\n { ...initialState, templatesOrderById: [1, 2, 3, 8, 9] },\n {\n type: ACTION_TYPES.FETCH_TEMPLATES_SUCCESS,\n payload: {\n page: 2,\n templates: [\n {\n id: 7,\n title: 'Beauty',\n },\n {\n id: 2,\n title: 'Cooking',\n },\n {\n id: 3,\n title: 'DIY',\n },\n {\n id: 4,\n title: 'Cooking',\n },\n {\n id: 5,\n title: 'Entertainment',\n },\n ],\n totalTemplates: 8,\n totalPages: 2,\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n templatesOrderById: [1, 2, 3, 8, 9, 7, 4, 5],\n templates: {\n 7: {\n id: 7,\n title: 'Beauty',\n },\n 2: {\n id: 2,\n title: 'Cooking',\n },\n 3: {\n id: 3,\n title: 'DIY',\n },\n 4: {\n id: 4,\n title: 'Cooking',\n },\n 5: {\n id: 5,\n title: 'Entertainment',\n },\n },\n totalTemplates: 8,\n totalPages: 2,\n allPagesFetched: true,\n });\n });\n\n it(`should update isLoading when ${ACTION_TYPES.LOADING_TEMPLATES} is called`, () => {\n const result = templateReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.LOADING_TEMPLATES,\n payload: true,\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n isLoading: true,\n });\n });\n\n it(`should update error when ${ACTION_TYPES.FETCH_TEMPLATES_FAILURE} is called`, () => {\n const result = templateReducer(\n { ...initialState },\n {\n type: ACTION_TYPES.FETCH_TEMPLATES_FAILURE,\n payload: {\n message: ERRORS.LOAD_TEMPLATES.MESSAGE,\n code: 'test-error-code',\n },\n }\n );\n\n expect(result).toMatchObject({\n ...initialState,\n error: {\n message: ERRORS.LOAD_TEMPLATES.MESSAGE,\n id: MOCK_ERROR_ID,\n code: 'test-error-code',\n },\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/router/context.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createContext } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport type { RouterProviderState } from '../../types';\n\nexport default createContext({\n state: {\n activeRoute: '',\n currentPath: '',\n queryParams: {},\n availableRoutes: [],\n defaultRoute: '',\n },\n actions: {\n push: () => undefined,\n replace: () => undefined,\n setAvailableRoutes: () => [],\n },\n});\n" }, { "path": "packages/dashboard/src/app/router/index.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\n\nexport { default as RouterProvider } from './routerProvider';\nexport { default as useRouteHistory } from './useRouteHistory';\nexport { default as Route, matchPath, resolveRoute } from './route';\n" }, { "path": "packages/dashboard/src/app/router/route.ts", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport useRouteHistory from './useRouteHistory';\n\nexport function parentRoute() {\n const potentialParent = window.location.hash\n .split('/')\n .slice(0, -1)\n .join('/');\n if (potentialParent.startsWith('#')) {\n return potentialParent;\n } else {\n return '#/';\n }\n}\n\nexport function resolveRoute(route: string) {\n if (\n route.toLowerCase().startsWith('http://') ||\n route.toLowerCase().startsWith('https://')\n ) {\n /**\n * If the url starts with a protocol assume it's a full path and\n * visit it normally.\n */\n return route;\n } else if (route.startsWith('/')) {\n /**\n * If the url starts with a backslash visit it as a root view\n * within the context of the dashboard app.\n */\n return `#${route}`;\n } else if (route === '') {\n /**\n * If the url is empty visit it as a root view\n * within the context of the dashboard app.\n */\n return '#/';\n } else {\n /**\n * If the url has no root append it to the current route and create\n * a nested root within the context of the dashboard app.\n */\n return `${window.location.hash}/${route}`;\n }\n}\n\ninterface MatchPathProps {\n currentPath: string;\n path: string;\n availableRoutes: string[];\n defaultRoute: string;\n isDefault?: boolean;\n exact?: boolean;\n}\nexport function matchPath({\n currentPath,\n path,\n availableRoutes,\n defaultRoute,\n isDefault = false,\n exact = false,\n}: MatchPathProps) {\n const match = new RegExp(`^${path}`).exec(currentPath);\n\n // allow paths through that don't match if they are default, not narrowed out yet.\n if (!match && !isDefault) {\n return null;\n }\n\n // Find all available url matches\n const matchUrl = match?.[0];\n\n // Check if there is a default before looking for more exact matches\n // If there is and the current path fits 1 or less\n // of the available routes then render it as default\n if (isDefault) {\n const isValidDefaultRoute =\n availableRoutes.filter((route) => currentPath.startsWith(route)).length <=\n 1;\n\n if (isValidDefaultRoute) {\n return defaultRoute;\n }\n }\n\n const isExactMatch = currentPath === matchUrl;\n if (exact && !isExactMatch) {\n return null;\n }\n return matchUrl;\n}\n\ninterface RouteProps {\n component: React.Component;\n path: string;\n exact?: boolean;\n isDefault?: boolean;\n}\nfunction Route({\n component,\n path,\n exact = false,\n isDefault = false,\n}: RouteProps) {\n const { availableRoutes, currentPath, defaultRoute } = useRouteHistory(\n ({ state }) => state\n );\n\n const match = matchPath({\n currentPath,\n availableRoutes,\n defaultRoute,\n path,\n exact,\n isDefault,\n });\n\n if (!match) {\n return null;\n }\n return component;\n}\n\nexport default Route;\n" }, { "path": "packages/dashboard/src/app/router/routerProvider.tsx", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useRef, useMemo, useEffect, useState } from '@googleforcreators/react';\nimport { createHashHistory } from 'history';\nimport type { History } from 'history';\nimport type { PropsWithChildren } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { APP_ROUTES } from '../../constants';\nimport Context from './context';\n\ninterface ActiveRouteProps {\n availableRoutes: string[];\n currentPath: string;\n defaultRoute: string;\n}\nexport const getActiveRoute = ({\n availableRoutes,\n currentPath,\n defaultRoute,\n}: ActiveRouteProps) => {\n const matchingRoutes = availableRoutes.filter((route) =>\n currentPath.startsWith(route)\n );\n // this assumes that we have a route that's just the root path (/)\n return matchingRoutes.length <= 1 ? defaultRoute : currentPath;\n};\n\nfunction RouterProvider({\n children,\n ...props\n}: PropsWithChildren<{ history: History }>) {\n const history = useRef(props.history || createHashHistory());\n const [currentPath, setCurrentPath] = useState(\n history.current.location.pathname\n );\n const [availableRoutes, setAvailableRoutes] = useState([]);\n const defaultRoute = APP_ROUTES.DASHBOARD;\n\n const activeRoute = useMemo(\n () => getActiveRoute({ availableRoutes, currentPath, defaultRoute }),\n [availableRoutes, currentPath, defaultRoute]\n );\n\n const parse = (search: string) => {\n const params = new URLSearchParams(search);\n return Object.fromEntries(params);\n };\n\n const [queryParams, setQueryParams] = useState(\n parse(history.current.location.search)\n );\n\n useEffect(() => {\n return history.current.listen(({ location }) => {\n setQueryParams(parse(location.search));\n setCurrentPath(location.pathname);\n });\n }, []);\n\n const value = useMemo(\n () => ({\n state: {\n activeRoute,\n currentPath,\n queryParams,\n availableRoutes,\n defaultRoute,\n },\n actions: {\n push: (path: string) => history.current.push(path),\n replace: (path: string) => history.current.replace(path),\n setAvailableRoutes,\n },\n }),\n [activeRoute, availableRoutes, currentPath, defaultRoute, queryParams]\n );\n\n return {children};\n}\n\nexport default RouterProvider;\n" }, { "path": "packages/dashboard/src/app/router/test/route.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { parentRoute, resolveRoute } from '../route';\n\ndescribe('Route', () => {\n afterEach(() => {\n window.location.hash = '';\n });\n\n it('should return the parent route from the path.', () => {\n window.location.hash = '#/parent/child';\n expect(parentRoute()).toBe('#/parent');\n });\n\n it('should return the root hash if the hash only has one level.', () => {\n window.location.hash = 'parent';\n expect(parentRoute()).toBe('#/');\n });\n\n it('should the full URL if it has a http or https protocol.', () => {\n expect(resolveRoute('http://www.google.com')).toBe('http://www.google.com');\n expect(resolveRoute('https://www.google.com')).toBe(\n 'https://www.google.com'\n );\n });\n\n it('should append a nested route to the current hash when the path is relative', () => {\n window.location.hash = '#/templates-gallery';\n expect(resolveRoute('template-detail')).toBe(\n '#/templates-gallery/template-detail'\n );\n });\n\n it('should create a route hash when the path is a backslash', () => {\n expect(resolveRoute('/')).toBe('#/');\n });\n\n it('should create a route hash when the path is empty', () => {\n expect(resolveRoute('')).toBe('#/');\n });\n});\n" }, { "path": "packages/dashboard/src/app/router/test/router.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { render, fireEvent, screen } from '@testing-library/react';\nimport { createBrowserHistory } from 'history';\n\n/**\n * Internal dependencies\n */\nimport { RouterProvider, Route, useRouteHistory } from '..';\nimport Context from '../context';\n\ndescribe('RouterProvider', () => {\n it('should render the first route by default', () => {\n render(\n \n {'Home'}} />\n {'Second Route'}} />\n \n );\n\n expect(screen.getByText('Home')).toBeInTheDocument();\n expect(screen.queryByText('Second Route')).not.toBeInTheDocument();\n });\n\n it('should render the default route if currentPath has no matching route of its own', () => {\n render(\n \n {'Home'}} />\n {'Second Route'}} />\n \n );\n\n expect(screen.getByText('Home')).toBeInTheDocument();\n expect(screen.queryByText('Second Route')).not.toBeInTheDocument();\n });\n\n it('should render secondary route on a partial match', () => {\n render(\n \n {'Home'}} />\n {'Second Route'}} />\n \n );\n\n expect(screen.queryByText('Home')).not.toBeInTheDocument();\n expect(screen.getByText('Second Route')).toBeInTheDocument();\n });\n\n it('should render the second route when navigated to', async () => {\n const history = createBrowserHistory();\n const listeners = [];\n\n jest.spyOn(history, 'listen').mockImplementation((callback) => {\n listeners.push(callback);\n return () => {};\n });\n\n jest.spyOn(history, 'push').mockImplementation((sender) => {\n listeners.forEach((l) => {\n l({ location: { search: '', pathname: sender } });\n });\n });\n\n const Button = () => {\n const { actions } = useRouteHistory();\n return (\n \n );\n };\n\n render(\n \n \n );\n };\n\n render(\n \n \n
\n {\n setTemplateErrorIndexToAdd(templateErrorIndexToAdd + 1);\n setTemplateError({\n ...templateErrors[templateErrorIndexToAdd],\n id: Date.now(),\n });\n }}\n isDisabled={templateErrorIndexToAdd > templateErrors.length - 1}\n >\n {templateErrorIndexToAdd > templateErrors.length - 1\n ? 'No more practice template alerts'\n : 'Add practice template alert'}\n \n \n \n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/constants.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport const TEMPLATE_META_DATA_TYPES = {\n VERTICAL: 'VERTICAL',\n COLOR: 'COLOR',\n TAG: 'TAG',\n TITLE: 'TITLE',\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n/**\n * Internal dependencies\n */\nimport { Gradient, Scrim, Poster } from '../../shared/grid/components';\n\n// Allows grid item contents to overlay in a set space\nexport const CardWrapper = styled.div`\n position: absolute;\n height: 100%;\n width: 100%;\n\n transition: opacity ease-in-out 300ms;\n\n &:hover {\n ${Gradient}, ${Scrim} {\n opacity: 1;\n }\n }\n\n ${Gradient}, ${Scrim} {\n opacity: ${({ $isSelected }) => ($isSelected ? 1 : 0)};\n }\n`;\n\nexport const TemplateDisplayContent = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n height: 100%;\n padding-bottom: 16px;\n\n a,\n button {\n margin: auto auto 0;\n }\n`;\n\nexport const PicturePoster = styled(Poster).attrs({ as: 'picture' })`\n display: block;\n & > img {\n height: 100%;\n width: 100%;\n object-fit: fill;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n }\n`;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useMemo } from '@googleforcreators/react';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport {\n ButtonAsLink,\n ButtonSize,\n ButtonType,\n Headline,\n LoadingSpinner,\n TextSize,\n InfiniteScroller,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../../../config';\nimport {\n Layout,\n StandardViewContentGutter,\n LoadingContainer,\n} from '../../../../components';\nimport {\n ViewPropTypes,\n PagePropTypes,\n} from '../../../../utils/useTemplateView';\nimport {\n TemplatesPropType,\n TemplateActionsPropType,\n} from '../../../../propTypes';\nimport { EmptyContentMessage } from '../../shared';\nimport TemplateGridView from './templateGridView';\n\nfunction Content({\n allPagesFetched,\n isLoading,\n page,\n templates,\n view,\n totalTemplates,\n search,\n templateActions,\n}) {\n const { newStoryURL } = useConfig();\n\n const pageContent = useMemo(() => {\n if (isLoading) {\n return (\n \n \n \n );\n }\n return totalTemplates > 0 ? (\n <>\n \n \n \n ) : (\n \n \n {search\n ? sprintf(\n /* translators: %s: search term. */\n __(\n 'Sorry, we couldn\\'t find any results matching \"%s\"',\n 'web-stories'\n ),\n search\n )\n : __('No templates currently available.', 'web-stories')}\n \n {!search && (\n \n {__('Create New Story', 'web-stories')}\n \n )}\n \n );\n }, [\n allPagesFetched,\n isLoading,\n newStoryURL,\n page.requestNextPage,\n templateActions,\n search,\n templates,\n totalTemplates,\n view.pageSize,\n ]);\n\n return (\n \n {pageContent}\n \n );\n}\n\nContent.propTypes = {\n allPagesFetched: PropTypes.bool,\n isLoading: PropTypes.bool,\n page: PagePropTypes,\n templates: TemplatesPropType,\n totalTemplates: PropTypes.number,\n search: PropTypes.string,\n templateActions: TemplateActionsPropType,\n view: ViewPropTypes,\n};\nexport default Content;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { Layout } from '../../../../../components';\nimport { VIEW_STYLE } from '../../../../../constants';\nimport { formattedTemplatesArray } from '../../../../../storybookUtils';\nimport { usePagePreviewSize } from '../../../../../utils';\nimport Content from '..';\n\nconst StorybookLayoutContainer = styled.div`\n margin-top: 40px;\n height: 100vh;\n`;\n\nexport default {\n title: 'Dashboard/Views/ExploreTemplates/Content',\n component: Content,\n args: {\n allPagesFetched: false,\n isLoading: false,\n pageValue: 1,\n searchKeyword: '',\n templates: formattedTemplatesArray,\n viewStyle: VIEW_STYLE.GRID,\n totalTemplates: 3,\n },\n argTypes: {\n handleDetailsToggle: { action: 'modal was toggled' },\n switchToTemplateByOffset: { action: 'switched to prev/next template' },\n set: { action: 'set page number' },\n requestNextPage: { action: 'request next page clicked' },\n setKeyword: { action: 'set search' },\n viewStyle: { options: VIEW_STYLE, control: 'radio' },\n },\n parameters: {\n controls: {\n exclude: [\n 'pageValue',\n 'templates',\n 'page',\n 'search',\n 'view',\n 'templateActions',\n ],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n const { pageSize } = usePagePreviewSize({\n isGrid: true,\n });\n const templateActions = {\n handleDetailsToggle: args.handleDetailsToggle,\n switchToTemplateByOffset: args.switchToTemplateByOffset,\n };\n const page = {\n set: args.set,\n requestNextPage: args.requestNextPage,\n value: args.pageValue,\n };\n const search = {\n setKeyword: args.setKeyword,\n keyword: args.searchKeyword,\n };\n const view = {\n pageSize,\n style: args.viewStyle,\n };\n\n const defaultNestedProps = {\n templateActions,\n page,\n search,\n view,\n };\n\n return (\n \n \n \n \n \n );\n },\n};\n\nexport const NoSearchResults = {\n render: _default,\n\n args: {\n allPagesFetched: true,\n totalTemplates: 0,\n searchKeyword: 'polar bears',\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/templateGridItem.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport {\n Button,\n ButtonSize,\n ButtonType,\n noop,\n} from '@googleforcreators/design-system';\nimport { forwardRef } from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport {\n DEFAULT_GRID_IMG_HEIGHT,\n DEFAULT_GRID_IMG_WIDTH,\n TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS,\n} from '../../../../constants';\nimport { CardGridItem } from '../../../../components';\nimport { Container, Gradient, Scrim } from '../../shared/grid/components';\nimport {\n TemplateDisplayContent,\n CardWrapper,\n PicturePoster,\n} from './components';\n\nexport const FOCUS_TEMPLATE_CLASS = 'focus_template';\n\nconst SeeDetailsButton = styled(Button).attrs({\n type: ButtonType.Tertiary,\n size: ButtonSize.Small,\n})`\n background-color: ${({ theme }) => theme.colors.standard.white};\n`;\n\nconst TemplateGridItem = forwardRef(\n (\n {\n onCreateStory,\n onFocus,\n height,\n id,\n isActive,\n posterSrc,\n slug,\n title,\n status,\n onSeeDetailsClick = noop,\n },\n ref\n ) => {\n const tabIndex = isActive ? 0 : -1;\n const posterAltText = sprintf(\n /* translators: %s: Template title. */\n __('First page of %s template', 'web-stories'),\n title\n );\n\n return (\n \n \n \n \n \n \n \n \n \n \n \n onSeeDetailsClick(id, title)}\n className={FOCUS_TEMPLATE_CLASS}\n tabIndex={tabIndex}\n >\n {TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS[status]}\n \n\n {onCreateStory && (\n \n {__('Use template', 'web-stories')}\n \n )}\n \n \n \n \n \n );\n }\n);\n\nTemplateGridItem.displayName = 'TemplateGridItem';\n\nTemplateGridItem.propTypes = {\n detailLink: PropTypes.string,\n onCreateStory: PropTypes.func,\n onFocus: PropTypes.func.isRequired,\n onSeeDetailsClick: PropTypes.func,\n height: PropTypes.number.isRequired,\n id: PropTypes.number.isRequired,\n isActive: PropTypes.bool,\n posterSrc: PropTypes.shape({\n webp: PropTypes.string.isRequired,\n png: PropTypes.string.isRequired,\n }),\n slug: PropTypes.string.isRequired,\n status: PropTypes.string.isRequired,\n title: PropTypes.string.isRequired,\n};\nexport default TemplateGridItem;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/templateGridView.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useEffect,\n useRef,\n useFocusOut,\n useMemo,\n useState,\n} from '@googleforcreators/react';\nimport { __ } from '@googleforcreators/i18n';\nimport { useGridViewKeys } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { CardGrid } from '../../../../components';\nimport {\n PageSizePropType,\n TemplatesPropType,\n TemplateActionsPropType,\n} from '../../../../propTypes';\nimport { useConfig } from '../../../config';\nimport { noop } from '../../../../utils';\nimport TemplateGridItem, { FOCUS_TEMPLATE_CLASS } from './templateGridItem';\n\nfunction TemplateGridView({\n pageSize,\n templates: filteredTemplates,\n templateActions,\n}) {\n const { isRTL, apiCallbacks } = useConfig();\n const containerRef = useRef();\n const gridRef = useRef();\n const itemsRef = useRef({});\n const [activeGridItemId, setActiveGridItemId] = useState(null);\n const { handleDetailsToggle, createStoryFromTemplate } =\n templateActions || {};\n\n const canCreateStory = Boolean(apiCallbacks?.createStoryFromTemplate);\n\n useGridViewKeys({\n containerRef,\n gridRef,\n itemRefs: itemsRef,\n isRTL,\n currentItemId: activeGridItemId,\n items: filteredTemplates,\n });\n\n // when keyboard focus changes and updated activeGridItemId\n // immediately focus the first interactive element in the grid item\n // for legibility, it's based on the FOCUS_TEMPLATE_CLASS\n useEffect(() => {\n if (activeGridItemId) {\n itemsRef.current?.[activeGridItemId]\n ?.querySelector(`.${FOCUS_TEMPLATE_CLASS}`)\n ?.focus();\n }\n }, [activeGridItemId]);\n\n useFocusOut(containerRef, () => setActiveGridItemId(null), []);\n\n const memoizedTemplateItems = useMemo(\n () =>\n filteredTemplates.map(({ id, slug, status, title, postersByPage }) => {\n const isActive = activeGridItemId === id;\n const posterSrc = postersByPage?.[0];\n return (\n createStoryFromTemplate(id) : noop\n }\n onFocus={() => {\n setActiveGridItemId(id);\n }}\n onSeeDetailsClick={handleDetailsToggle}\n height={pageSize.height}\n id={id}\n isActive={isActive}\n key={slug}\n posterSrc={posterSrc}\n ref={(el) => {\n itemsRef.current[id] = el;\n }}\n slug={slug}\n status={status}\n title={title}\n />\n );\n }),\n [\n filteredTemplates,\n activeGridItemId,\n canCreateStory,\n handleDetailsToggle,\n pageSize.height,\n createStoryFromTemplate,\n ]\n );\n\n return (\n
\n \n {memoizedTemplateItems}\n \n
\n );\n}\n\nTemplateGridView.propTypes = {\n pageSize: PageSizePropType,\n templates: TemplatesPropType,\n templateActions: TemplateActionsPropType,\n};\nexport default TemplateGridView;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/content/test/content.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport {\n TEMPLATES_GALLERY_SORT_OPTIONS,\n TEMPLATES_GALLERY_STATUS,\n VIEW_STYLE,\n} from '../../../../../constants';\nimport { renderWithProviders } from '../../../../../testUtils';\nimport LayoutProvider from '../../../../../components/layout/provider';\nimport Content from '..';\nimport { ConfigProvider } from '../../../../config';\nimport useTemplateFilters from '../../filters/useTemplateFilters';\n\nconst fakeTemplates = [\n {\n id: 1,\n slug: 'beauty',\n title: 'Beauty',\n createdBy: 'Google',\n description:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mauris sodales magna elementum maximus.',\n status: 'template',\n bottomTargetAction: () => {},\n },\n {\n id: 2,\n slug: 'cooking',\n title: 'Cooking',\n createdBy: 'Google',\n description:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mauris sodales magna elementum maximus.',\n status: 'template',\n bottomTargetAction: () => {},\n },\n {\n id: 3,\n slug: 'fitness',\n title: 'Fitness',\n createdBy: 'Google',\n description:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus consectetur mauris sodales magna elementum maximus.',\n status: 'template',\n bottomTargetAction: () => {},\n },\n];\n\njest.mock('../../filters/useTemplateFilters', () => ({\n ...jest.requireActual('../../filters/useTemplateFilters'),\n __esModule: true,\n default: jest.fn(),\n}));\n\nconst mockUseTemplateFilters = useTemplateFilters;\n\nconst updateSort = jest.fn();\nconst updateFilter = jest.fn();\n\nconst mockFilterState = {\n filters: [\n {\n key: 'search',\n filterId: null,\n },\n {\n key: 'status',\n filterId: TEMPLATES_GALLERY_STATUS.ALL,\n },\n ],\n filtersObject: {\n status: TEMPLATES_GALLERY_STATUS.ALL,\n },\n sortObject: {\n orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,\n },\n registerFilters: () => {},\n updateFilter,\n updateSort,\n};\n\ndescribe('Explore Templates ', () => {\n beforeEach(() => {\n mockUseTemplateFilters.mockImplementation(() => mockFilterState);\n });\n\n it('should render the content grid with the correct template count.', () => {\n renderWithProviders(\n \n \n \n \n \n );\n\n const useButtons = screen.getAllByTestId(/^template-grid-item/);\n\n expect(useButtons).toHaveLength(fakeTemplates.length);\n });\n\n it('should show \"No templates currently available.\" if no templates are present.', () => {\n renderWithProviders(\n \n \n \n );\n expect(\n screen.getByText('No templates currently available.')\n ).toBeInTheDocument();\n });\n\n it('should show \"Sorry, we couldn\\'t find any results matching \"scooby dooby doo\" if no templates are found for a search query are present.', () => {\n renderWithProviders(\n \n \n \n );\n\n expect(\n screen.getByText(\n 'Sorry, we couldn\\'t find any results matching \"scooby dooby doo\"'\n )\n ).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/filters/TemplateFiltersProvider/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n createContext,\n useReducer,\n useCallback,\n useMemo,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_TEMPLATE_FILTERS } from '../../../../../constants/templates';\nimport reducer from '../../../filters/reducer';\nimport * as types from '../../../filters/types';\n\nexport const filterContext = createContext({\n state: {},\n actions: {},\n});\n\nconst { filters: defaultTemplateFilters, sort: defaultTemplateSort } =\n DEFAULT_TEMPLATE_FILTERS;\n\nexport default function TemplateFiltersProvider({ children }) {\n const [state, dispatch] = useReducer(reducer, {\n filters: [],\n filtersObject: defaultTemplateFilters,\n sortObject: defaultTemplateSort,\n });\n\n /**\n * Dispatch UPDATE_FILTER with new data for a given filter\n *\n * @param {string} key key property on one of the filter objects\n * @param {Object} value the properties with updated values\n * @return {void}\n */\n const updateFilter = useCallback((key, value) => {\n dispatch({ type: types.UPDATE_FILTER, payload: { key, value } });\n }, []);\n\n /**\n * Dispatch UPDATE_SORT with new data to update sort\n *\n * @param {string} key key property on one of the sort objects\n * @param {Object} value the properties with updated values\n * @return {void}\n */\n const updateSort = useCallback((values) => {\n dispatch({\n type: types.UPDATE_SORT,\n payload: { type: 'template', values },\n });\n }, []);\n\n /**\n * Dispatch REGISTER_FILTERS with all the filters data\n *\n * @param {Array} payload array of filters data\n * @return {void}\n */\n const registerFilters = useCallback((value) => {\n dispatch({ type: types.REGISTER_FILTERS, payload: { value } });\n }, []);\n\n const contextValue = useMemo(() => {\n return { state, actions: { updateSort, updateFilter, registerFilters } };\n }, [state, updateSort, updateFilter, registerFilters]);\n\n return (\n \n {children}\n \n );\n}\n\nTemplateFiltersProvider.propTypes = {\n children: PropTypes.node,\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/filters/test/templateFiltersProvider.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { renderHook, act } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport TemplateFiltersProvider from '../TemplateFiltersProvider';\nimport { TEMPLATE_SORT_KEYS } from '../../../../../constants/templates';\nimport useTemplateFilters from '../useTemplateFilters';\n\ndescribe('provider', () => {\n it('should register filters and update filters', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useTemplateFilters(), { wrapper });\n const filterKey = 'color';\n\n // register filter\n act(() => {\n result.current.actions.registerFilters([\n { key: filterKey, filterId: null },\n ]);\n });\n\n // shouldn't be able to register filters with the same key\n act(() => {\n result.current.actions.registerFilters([{ key: filterKey, filterId: 1 }]);\n });\n expect(result.current.state.filters).toHaveLength(1);\n\n let filter = result.current.state.filters.find((f) => f.key === filterKey);\n let filterObj = result.current.state.filtersObject;\n\n expect(filter).toBeDefined();\n expect(filter.filterId).toBeNull();\n\n // filters with falsy filterId's should not be in the filters object\n expect(filterObj).toMatchObject({});\n\n // update the filter\n act(() => {\n result.current.actions.updateFilter(filterKey, {\n filterId: 1,\n });\n });\n\n filter = result.current.state.filters.find((f) => f.key === filterKey);\n filterObj = result.current.state.filtersObject;\n\n expect(filter).toMatchObject({\n filterId: 1,\n });\n expect(filterObj).toMatchObject({\n [filterKey]: 1,\n });\n\n // should unset filterId if the current filterId is given\n act(() => {\n result.current.actions.updateFilter(filterKey, {\n filterId: 1,\n });\n });\n filter = result.current.state.filters.find((f) => f.key === filterKey);\n filterObj = result.current.state.filtersObject;\n expect(filter).toMatchObject({\n filterId: null,\n });\n expect(filterObj[filterKey]).toBeUndefined();\n });\n\n it('should not unset \"search\" and \"status\" if the same filterId is given', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useTemplateFilters(), { wrapper });\n\n // register search and status filter\n act(() => {\n result.current.actions.registerFilters([\n { key: 'search' },\n { key: 'status' },\n ]);\n });\n let searchFilter = result.current.state.filters.find(\n ({ key }) => key === 'search'\n );\n let statusFilter = result.current.state.filters.find(\n ({ key }) => key === 'status'\n );\n expect(searchFilter).toBeDefined();\n expect(statusFilter).toBeDefined();\n\n // update the 'search' filter\n act(() => {\n result.current.actions.updateFilter('search', { filterId: 'Blue' });\n });\n\n // update the 'search' filter with the same current 'filterId'\n act(() => {\n result.current.actions.updateFilter('search', { filterId: 'Blue' });\n });\n\n searchFilter = result.current.state.filters.find(\n ({ key }) => key === 'search'\n );\n expect(searchFilter.filterId).toBe('Blue');\n\n // update the 'status' filter\n act(() => {\n result.current.actions.updateFilter('status', { filterId: 'New' });\n });\n\n // update the 'status' filter with the same current 'filterId'\n act(() => {\n result.current.actions.updateFilter('status', { filterId: 'New' });\n });\n\n statusFilter = result.current.state.filters.find(\n ({ key }) => key === 'status'\n );\n expect(statusFilter.filterId).toBe('New');\n });\n\n it('should be able to update the sortObject if the acceptable keys are used', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useTemplateFilters(), { wrapper });\n\n for (const key of Object.keys(TEMPLATE_SORT_KEYS)) {\n for (const value of Object.values(TEMPLATE_SORT_KEYS[key])) {\n act(() => {\n result.current.actions.updateSort({ [key]: value });\n });\n expect(result.current.state.sortObject).toMatchObject({ [key]: value });\n }\n }\n });\n\n it('should not be able to update the sortObject with arbitrary key value pairs', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useTemplateFilters(), { wrapper });\n\n const unacceptableSortValues = {\n orderby: 'valueNotInSortKeyOrderby',\n order: 'up',\n };\n\n const unacceptableSortKeys = {\n sortby: 'popular',\n sortorder: 'asc',\n };\n\n act(() => {\n result.current.actions.updateSort(unacceptableSortValues);\n });\n expect(result.current.state.sortObject).toMatchObject({});\n\n act(() => {\n result.current.actions.updateSort(unacceptableSortKeys);\n });\n expect(result.current.state.sortObject).toMatchObject({});\n });\n\n it('should not return sortObject if nothing changes', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useTemplateFilters(), { wrapper });\n\n const acceptableSortObject = {\n orderby: 'popular',\n order: 'asc',\n };\n\n const unacceptableSortKeys = {\n sortby: 'popular',\n sortorder: 'asc',\n };\n\n act(() => {\n // set the sortObject to an acceptable sortObject\n result.current.actions.updateSort(acceptableSortObject);\n // try to set the sortObject to an unacceptable sortObject\n result.current.actions.updateSort(unacceptableSortKeys);\n });\n // the state shouldn't be updated if given an unacceptable sortObject\n expect(result.current.state.sortObject).toMatchObject(acceptableSortObject);\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/filters/useTemplateFilters.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { identity, useContextSelector } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport { filterContext } from './TemplateFiltersProvider';\n\nexport default function useTemplateFilters(selector = identity) {\n return useContextSelector(filterContext, selector);\n}\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/header/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __ } from '@googleforcreators/i18n';\n\n/**\n * External dependencies\n */\nimport {\n useDebouncedCallback,\n useCallback,\n useMemo,\n useEffect,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport { useFeature } from 'flagged';\n\n/**\n * Internal dependencies\n */\nimport {\n DASHBOARD_VIEWS,\n DEFAULT_TEMPLATE_FILTERS,\n TEMPLATES_GALLERY_SORT_MENU_ITEMS,\n TEMPLATES_GALLERY_SORT_OPTIONS,\n TEXT_INPUT_DEBOUNCE,\n} from '../../../../constants';\nimport { ViewPropTypes } from '../../../../utils/useTemplateView';\nimport useTemplateFilters from '../filters/useTemplateFilters';\nimport { useDashboardResultsLabel } from '../../../../utils';\nimport { PageHeading, BodyViewOptions } from '../../shared';\n\nfunction Header({ isLoading, totalTemplates, view, searchOptions = [] }) {\n const enableInProgressTemplateActions = useFeature(\n 'enableInProgressTemplateActions'\n );\n\n const { filters, sortObject, updateFilter, updateSort, registerFilters } =\n useTemplateFilters(\n ({\n state: { filters, sortObject },\n actions: { updateFilter, updateSort, registerFilters },\n }) => ({\n filters,\n sortObject,\n updateFilter,\n updateSort,\n registerFilters,\n })\n );\n\n const [statusFilterValue, searchFilterValue] = useMemo(() => {\n const status = filters.find(({ key }) => key === 'status');\n const search = filters.find(({ key }) => key === 'search');\n return [status?.filterId, search?.filterId];\n }, [filters]);\n\n const debouncedSearchChange = useDebouncedCallback((value) => {\n updateFilter('search', { filterId: value });\n }, TEXT_INPUT_DEBOUNCE);\n\n useEffect(() => {\n registerFilters([{ key: 'search' }]);\n registerFilters([\n { key: 'status', filterId: DEFAULT_TEMPLATE_FILTERS.filters.status },\n ]);\n }, [registerFilters]);\n\n const clearSearch = useCallback(\n () => updateFilter('search', { filterId: null }),\n [updateFilter]\n );\n\n const resultsLabel = useDashboardResultsLabel({\n totalResults: totalTemplates,\n currentFilter: statusFilterValue,\n view: DASHBOARD_VIEWS.TEMPLATES_GALLERY,\n });\n\n return (\n <>\n \n \n \n );\n}\n\nHeader.propTypes = {\n isLoading: PropTypes.bool,\n totalTemplates: PropTypes.number,\n view: ViewPropTypes.isRequired,\n searchOptions: PropTypes.arrayOf(PropTypes.object),\n};\n\nexport default Header;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/header/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { FlagsProvider } from 'flagged';\n\n/**\n * Internal dependencies\n */\nimport { Layout } from '../../../../../components';\nimport {\n TEMPLATES_GALLERY_SORT_OPTIONS,\n VIEW_STYLE,\n TEMPLATES_GALLERY_STATUS,\n} from '../../../../../constants';\nimport Header from '..';\nimport formattedTemplatesArray from '../../../../../dataUtils/formattedTemplatesArray';\n\nexport default {\n title: 'Dashboard/Views/ExploreTemplates/Header',\n component: Header,\n args: {\n style: VIEW_STYLE.GRID,\n sortValue: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,\n filterValue: TEMPLATES_GALLERY_STATUS.ALL,\n keyword: '',\n enableInProgressTemplateActions: true,\n },\n argTypes: {\n style: { options: VIEW_STYLE, control: 'radio' },\n sortValue: { options: TEMPLATES_GALLERY_SORT_OPTIONS, control: 'radio' },\n filterValue: { options: TEMPLATES_GALLERY_STATUS, control: 'radio' },\n setSort: { action: 'set Sort' },\n setKeyword: { action: 'set keyword' },\n setPage: { action: 'set page' },\n requestNextPage: { action: 'request next page clicked' },\n },\n parameters: {\n controls: {\n include: ['setKeyword'],\n hideNoControlsWarning: true,\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n const filter = {\n value: args.filterValue,\n };\n const sort = {\n value: args.sortValue,\n set: args.setSort,\n };\n const search = {\n keyword: args.keyword,\n setKeyword: args.setKeyword,\n };\n const view = {\n style: args.style,\n pageSize: { width: 210, height: 316 },\n };\n const page = {\n value: 1,\n set: args.setPage,\n requestNextPage: args.requestNextPage,\n };\n\n const defaultProps = {\n allPagesFetched: false,\n isLoading: false,\n page: page,\n search: search,\n templates: formattedTemplatesArray,\n sort: sort,\n filter: filter,\n view: view,\n totalTemplates: 3,\n };\n return (\n \n \n
\n \n \n );\n },\n};\n\nexport const ActiveSearch = {\n render: _default,\n\n args: {\n keyword: 'demo search',\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/header/test/header.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { fireEvent, screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport {\n TEMPLATES_GALLERY_STATUS,\n VIEW_STYLE,\n TEMPLATES_GALLERY_SORT_OPTIONS,\n} from '../../../../../constants';\nimport { renderWithProviders } from '../../../../../testUtils';\nimport LayoutProvider from '../../../../../components/layout/provider';\nimport useTemplateFilters from '../../filters/useTemplateFilters';\nimport Header from '..';\n\njest.mock('../../filters/useTemplateFilters', () => ({\n ...jest.requireActual('../../filters/useTemplateFilters'),\n __esModule: true,\n default: jest.fn(),\n}));\n\nconst mockUseTemplateFilters = useTemplateFilters;\n\nconst updateSort = jest.fn();\nconst updateFilter = jest.fn();\n\nconst mockFilterState = {\n filters: [\n {\n key: 'search',\n filterId: null,\n },\n {\n key: 'status',\n filterId: TEMPLATES_GALLERY_STATUS.ALL,\n },\n ],\n filtersObject: {\n status: TEMPLATES_GALLERY_STATUS.ALL,\n },\n sortObject: {\n orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,\n },\n registerFilters: () => {},\n updateFilter,\n updateSort,\n};\n\ndescribe('Explore Templates
', () => {\n beforeEach(() => {\n mockUseTemplateFilters.mockImplementation(() => mockFilterState);\n });\n\n it('should have results label that says \"Viewing all templates\" on initial page view', () => {\n renderWithProviders(\n \n \n ,\n { features: { enableInProgressTemplateActions: false } }\n );\n\n expect(screen.getByText('Viewing all templates')).toBeInTheDocument();\n });\n\n it('should call the set sort function when a new sort is selected', () => {\n renderWithProviders(\n \n \n ,\n { features: { enableInProgressTemplateActions: true } }\n );\n fireEvent.click(screen.getByLabelText('Choose sort option for display'));\n fireEvent.click(screen.getByText('Recent'));\n\n expect(updateSort).toHaveBeenCalledWith({ orderby: 'recent' });\n });\n\n it('should not render with search when features:{enableInProgressTemplateActions is false}', () => {\n renderWithProviders(\n \n \n ,\n { features: { enableInProgressTemplateActions: false } }\n );\n expect(screen.queryByRole('textbox')).not.toBeInTheDocument();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { sprintf, __ } from '@googleforcreators/i18n';\nimport {\n useMemo,\n useEffect,\n useCallback,\n useState,\n useRef,\n} from '@googleforcreators/react';\nimport { trackEvent, trackScreenView } from '@googleforcreators/tracking';\nimport {\n uniqueEntriesByKey,\n useLiveRegion,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { Layout, ScrollToTop } from '../../../components';\nimport { useTemplateView } from '../../../utils';\n\nimport useApi from '../../api/useApi';\nimport useRouteHistory from '../../router/useRouteHistory';\nimport { getTemplateFilters, composeTemplateFilter } from '../utils';\nimport useTemplateFilters from './filters/useTemplateFilters';\nimport Content from './content';\nimport Header from './header';\nimport TemplateDetailsModal from './modal';\nimport TemplateFiltersProvider from './filters/TemplateFiltersProvider';\n\nfunction ExploreTemplatesView() {\n const speak = useLiveRegion();\n const [isDetailsViewOpen, setIsDetailsViewOpen] = useState(false);\n const [activeTemplate, setActiveTemplate] = useState(null);\n const [activeTemplateIndex, setActiveTemplateIndex] = useState(0);\n\n const { templateIdParam, replace } = useRouteHistory(\n ({ actions, state }) => ({\n templateIdParam: state.queryParams.id,\n replace: actions.replace,\n })\n );\n\n const idRef = useRef(templateIdParam);\n\n const {\n allPagesFetched,\n isLoading,\n templates,\n templatesOrderById,\n totalPages,\n totalTemplates,\n createStoryFromTemplate,\n fetchExternalTemplates,\n } = useApi(\n ({\n state: {\n templates: {\n allPagesFetched,\n isLoading,\n templates,\n templatesOrderById,\n totalPages,\n totalTemplates,\n },\n },\n actions: {\n storyApi: { createStoryFromTemplate },\n templateApi: { fetchExternalTemplates },\n },\n }) => ({\n allPagesFetched,\n isLoading,\n templates,\n templatesOrderById,\n totalPages,\n totalTemplates,\n createStoryFromTemplate,\n fetchExternalTemplates,\n })\n );\n\n const { filters, sortObject, filtersObject } = useTemplateFilters(\n ({ state: { filters, sortObject, filtersObject } }) => ({\n filters,\n sortObject,\n filtersObject,\n })\n );\n\n const { page, view } = useTemplateView({\n filtersObject,\n sortObject,\n totalPages,\n });\n\n const [searchFilterValue] = useMemo(() => {\n const search = filters.find(({ key }) => key === 'search');\n return [search?.filterId];\n }, [filters]);\n\n // extract templateFilters from template meta data\n const templateFilters = useMemo(\n () => getTemplateFilters(templates),\n [templates]\n );\n\n // refine templateFilters by search term\n const selectFilters = useMemo(\n () =>\n searchFilterValue\n ? templateFilters.filter((opt) =>\n opt.label.toLowerCase().includes(searchFilterValue.toLowerCase())\n )\n : templateFilters,\n [templateFilters, searchFilterValue]\n );\n\n // filter templates by the refined templateFilters\n const orderedTemplates = useMemo(() => {\n return templatesOrderById\n .map((templateId) => templates[templateId])\n .filter(composeTemplateFilter(selectFilters));\n }, [templatesOrderById, templates, selectFilters]);\n\n const totalVisibleTemplates = useMemo(\n () =>\n totalTemplates !== orderedTemplates.length\n ? orderedTemplates.length\n : totalTemplates,\n [orderedTemplates, totalTemplates]\n );\n\n // Although we may want to filter templates based on\n // repeat meta data of differing types, we only want\n // the auto-complete to show unique labels\n const searchOptions = useMemo(\n () => uniqueEntriesByKey(selectFilters, 'label'),\n [selectFilters]\n );\n\n const handleCreateStoryFromTemplate = useCallback(\n (templateId) => {\n const template = templates[templateId];\n trackEvent('use_template', {\n name: template.title,\n template_id: template.id,\n });\n\n createStoryFromTemplate(template);\n },\n [createStoryFromTemplate, templates]\n );\n\n const updateTemplateView = useCallback(\n (id) => {\n const currentTemplate = orderedTemplates.find(\n (templateItem) => templateItem.id === id\n );\n setActiveTemplate(currentTemplate);\n setActiveTemplateIndex(\n orderedTemplates.findIndex((template) => template.id === id)\n );\n if (idRef.current) {\n idRef.current = undefined;\n }\n\n replace(`?id=${currentTemplate.id}&isLocal=${currentTemplate.isLocal}`);\n },\n [replace, orderedTemplates]\n );\n\n const handleDetailsToggle = useCallback(\n (id, title) => {\n setIsDetailsViewOpen((prevIsOpen) => {\n const newIsOpen = !prevIsOpen;\n title && trackScreenView(title);\n\n if (newIsOpen && id) {\n updateTemplateView(id);\n }\n\n if (!newIsOpen) {\n replace('');\n speak(__('Exit detail templates view', 'web-stories'));\n }\n\n return newIsOpen;\n });\n },\n [replace, speak, updateTemplateView]\n );\n\n const switchToTemplateByOffset = useCallback(\n (offset) => {\n const newTemplate = orderedTemplates[offset];\n setActiveTemplate(newTemplate);\n setActiveTemplateIndex(offset);\n replace(`?id=${newTemplate.id}&isLocal=${newTemplate.isLocal}`);\n speak(\n sprintf(\n /* translators: %s: template title */\n __('Viewing %s', 'web-stories'),\n newTemplate.title\n )\n );\n },\n [orderedTemplates, replace, speak]\n );\n\n const templateActions = useMemo(\n () => ({\n createStoryFromTemplate: handleCreateStoryFromTemplate,\n handleDetailsToggle,\n switchToTemplateByOffset,\n }),\n [\n handleCreateStoryFromTemplate,\n handleDetailsToggle,\n switchToTemplateByOffset,\n ]\n );\n\n useEffect(() => {\n fetchExternalTemplates();\n }, [fetchExternalTemplates]);\n\n useEffect(() => {\n if (idRef.current && orderedTemplates.length) {\n const isValidId = orderedTemplates.some(\n (template) => template.id === Number.parseInt(idRef.current)\n );\n if (!isValidId) {\n replace('');\n return;\n }\n\n setIsDetailsViewOpen(true);\n updateTemplateView(Number.parseInt(idRef.current));\n }\n }, [orderedTemplates, replace, updateTemplateView]);\n\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport default function ExploreTemplates() {\n return (\n \n \n \n );\n}\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/karma/exploreTemplates.karma.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { within } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport Fixture from '../../../../karma/fixture';\nimport { TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS } from '../../../../constants';\nimport useApi from '../../../api/useApi';\n\ndescribe('Grid view', () => {\n let fixture;\n\n beforeEach(async () => {\n fixture = new Fixture();\n await fixture.render();\n\n await navigateToExploreTemplates();\n });\n\n afterEach(() => {\n fixture.restore();\n });\n\n function navigateToExploreTemplates() {\n const navigation = fixture.screen.queryByRole('navigation');\n const utils = within(navigation);\n\n const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/);\n\n return fixture.events.click(exploreTemplatesMenuItem);\n }\n\n function getTemplateElementById(id) {\n const template = fixture.screen.getByTestId(`template-grid-item-${id}`);\n\n return template;\n }\n\n async function getTemplatesState() {\n const {\n state: { templates },\n } = await fixture.renderHook(() => useApi());\n return templates;\n }\n\n async function focusOnGridByKeyboard() {\n let limit = 0;\n const gridContainer = fixture.screen.getByTestId('dashboard-grid-list');\n\n while (!gridContainer.contains(document.activeElement) && limit < 8) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n limit++;\n }\n\n return gridContainer.contains(document.activeElement)\n ? Promise.resolve()\n : Promise.reject(new Error('could not focus on grid'));\n }\n\n it('should pass accessibility tests', async () => {\n const viewTemplates = fixture.screen.queryByText('Viewing all templates');\n expect(viewTemplates).toBeTruthy();\n await expectAsync(viewTemplates).toHaveNoViolations();\n });\n\n it('should navigate to Dashboard', async () => {\n const DashboardMenuItem = fixture.screen.queryByRole('link', {\n name: /^Dashboard$/,\n });\n\n await fixture.events.click(DashboardMenuItem);\n\n const viewStories = fixture.screen.queryByText('Viewing all stories');\n\n expect(viewStories).toBeTruthy();\n });\n\n describe('CUJ: Creator can browse templates in grid view: Browse all templates', () => {\n it('should display \"See Details\" and \"Use Template\" controls when hovering over a template', async () => {\n const { templatesOrderById } = await getTemplatesState();\n const firstTemplate = getTemplateElementById(templatesOrderById[0]);\n\n const utils = within(firstTemplate);\n\n await fixture.events.hover(firstTemplate);\n\n const seeDetailsButton = utils.getByText(\n new RegExp(`^${TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS.template}$`)\n );\n\n expect(seeDetailsButton).toBeTruthy();\n\n const useTemplate = utils.getByText(/^Use template$/);\n\n expect(useTemplate).toBeTruthy();\n });\n\n it('should change focus as the user presses tab', async () => {\n const { templatesOrderById } = await getTemplatesState();\n // focus on first template\n await focusOnGridByKeyboard();\n\n await fixture.events.keyboard.press('right');\n\n const firstTemplate = getTemplateElementById(templatesOrderById[0]);\n expect(firstTemplate.contains(document.activeElement)).toBeTrue();\n\n await fixture.events.keyboard.press('right');\n\n const secondTemplate = getTemplateElementById(templatesOrderById[1]);\n expect(secondTemplate.contains(document.activeElement)).toBeTrue();\n\n await fixture.events.keyboard.press('right');\n\n await fixture.events.keyboard.press('right');\n\n const fourthTemplate = getTemplateElementById(templatesOrderById[3]);\n expect(fourthTemplate.contains(document.activeElement)).toBeTrue();\n\n await fixture.events.keyboard.press('left');\n\n const thirdTemplate = getTemplateElementById(templatesOrderById[2]);\n expect(thirdTemplate.contains(document.activeElement)).toBeTrue();\n });\n });\n\n describe('CUJ: Creator can browse templates in grid view: See template details modal', () => {\n it('should open modal to view individual template details', async () => {\n const { templatesOrderById } = await getTemplatesState();\n const firstTemplate = getTemplateElementById(templatesOrderById[0]);\n\n const utils = within(firstTemplate);\n\n await fixture.events.hover(firstTemplate);\n\n const seeDetailsButton = utils.getByText(\n new RegExp(`^${TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS.template}$`)\n );\n\n await fixture.events.click(seeDetailsButton);\n\n const closeBtn = fixture.screen.getByRole('button', {\n name: /^Close$/,\n });\n\n expect(closeBtn).toBeTruthy();\n });\n });\n\n describe('Creator can search explore templates by meta data', () => {\n async function getTemplateIdByTitle(title) {\n const { templates } = await getTemplatesState();\n return Object.values(templates).find(\n (template) => template.title === title\n )?.id;\n }\n\n it('should filter templates using the search input', async () => {\n // Get original 8 templates\n const originalTemplates =\n fixture.screen.getAllByTestId(/^template-grid-item-/);\n expect(originalTemplates.length).toBe(8);\n\n // Get the template Search component\n const searchInput =\n fixture.screen.getByPlaceholderText('Search Templates');\n expect(searchInput).toBeTruthy();\n\n // Template Data formatted to have meta data:\n // {\n // [metaDataType]: `Test ${metaDataType}`\n // title: `Filterable By ${metaDataType}`\n // ...\n // }\n\n // Filter by Tag\n await fixture.events.focus(searchInput);\n await fixture.events.keyboard.type('Test Tag');\n // Wait for the debounce\n await fixture.events.sleep(500);\n // See that grid updates\n const testTagGridItems =\n fixture.screen.getAllByTestId(/^template-grid-item-/);\n expect(testTagGridItems.length).toBe(1);\n // See that we have the right grid item\n const filterableTagTemplateId =\n await getTemplateIdByTitle('Filterable By Tag');\n const filterableTagTemplate = fixture.screen.getByTestId(\n new RegExp(`^template-grid-item-${filterableTagTemplateId}$`)\n );\n expect(filterableTagTemplate).toBeDefined();\n\n // As per PR#13301, it is required to edit search-input to get clearInput to be active\n await fixture.events.focus(searchInput);\n await fixture.events.keyboard.type('Test Tag...');\n\n // Clear input\n const clearInput = fixture.screen.getByLabelText('Clear Search');\n await fixture.events.click(clearInput);\n\n // Filter by Color\n await fixture.events.focus(searchInput);\n await fixture.events.keyboard.type('Test Color');\n // Wait for the debounce\n await fixture.events.sleep(500);\n // See that grid updates\n const testColorGridItems =\n fixture.screen.getAllByTestId(/^template-grid-item-/);\n expect(testColorGridItems.length).toBe(1);\n // See that we have the right grid item\n const filterableColorTemplateId = await getTemplateIdByTitle(\n 'Filterable By Color'\n );\n const filterableColorTemplate = fixture.screen.getByTestId(\n new RegExp(`^template-grid-item-${filterableColorTemplateId}$`)\n );\n expect(filterableColorTemplate).toBeDefined();\n\n // Clear input\n await fixture.events.click(clearInput);\n\n // Filter by Vertical\n await fixture.events.focus(searchInput);\n await fixture.events.keyboard.type('Test Vertical');\n // Wait for the debounce\n await fixture.events.sleep(500);\n // See that grid updates\n const testVerticalGridItems =\n fixture.screen.getAllByTestId(/^template-grid-item-/);\n expect(testVerticalGridItems.length).toBe(1);\n // See that we have the right grid item\n const filterableVerticalTemplateId = await getTemplateIdByTitle(\n 'Filterable By Vertical'\n );\n const filterableVerticalTemplate = fixture.screen.getByTestId(\n new RegExp(`^template-grid-item-${filterableVerticalTemplateId}$`)\n );\n expect(filterableVerticalTemplate).toBeDefined();\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/index.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport { Modal, theme } from '@googleforcreators/design-system';\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport { useConfig } from '../../../config';\nimport {\n TemplatePropType,\n TemplateActionsPropType,\n} from '../../../../propTypes';\nimport Header from './templateDetails/header';\nimport DetailsContent from './templateDetails/content';\n\nfunction TemplateDetailsModal({\n activeTemplateIndex,\n activeTemplate,\n filteredTemplatesLength,\n isDetailsViewOpen,\n templateActions,\n}) {\n const { isRTL, apiCallbacks } = useConfig();\n const canCreateStory = Boolean(apiCallbacks?.createStoryFromTemplate);\n\n const { handleDetailsToggle, switchToTemplateByOffset } =\n templateActions || {};\n\n return (\n \n \n \n \n );\n}\nTemplateDetailsModal.propTypes = {\n activeTemplateIndex: PropTypes.number,\n activeTemplate: TemplatePropType,\n filteredTemplatesLength: PropTypes.number,\n isDetailsViewOpen: PropTypes.bool,\n templateActions: TemplateActionsPropType,\n};\nexport default TemplateDetailsModal;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { __ } from '@googleforcreators/i18n';\n\nexport const Panel = styled.section`\n padding: 16vh 0 14vh 0;\n`;\n\nexport const Container = styled.div`\n position: relative;\n width: 76%;\n max-width: ${0.76 * 1920}px;\n margin: 0 auto;\n`;\n\nexport const Inner = styled.div`\n display: flex;\n align-items: start;\n`;\n\nexport const DetailContainer = styled.section.attrs({\n 'aria-label': __('Template Details', 'web-stories'),\n})`\n padding: 0 0 0 60px;\n margin-right: auto;\n`;\n\nexport const TemplateDetails = styled.div`\n position: relative;\n display: flex;\n width: 500px;\n`;\n\nexport const RowContainer = styled.section.attrs({\n 'aria-label': __('Related Templates', 'web-stories'),\n})`\n display: flex;\n flex-wrap: wrap;\n padding-bottom: 40px;\n margin: 0 80px 0;\n & > h3 {\n padding-bottom: 32px;\n }\n & > div {\n width: 100%;\n }\n`;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useEffect, useMemo, useState } from '@googleforcreators/react';\nimport { sprintf, __ } from '@googleforcreators/i18n';\nimport styled from 'styled-components';\nimport {\n Button,\n ButtonSize,\n ButtonType,\n ButtonVariant,\n Chip,\n Display,\n Icons,\n Text,\n TextSize,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { CardGallery, ColorList } from '../../../../../../components';\nimport { TemplatePropType } from '../../../../../../propTypes';\nimport {\n Container,\n Panel,\n DetailContainer,\n TemplateDetails,\n Inner,\n} from '../components';\n\nconst StyledPanel = styled(Panel)`\n padding: 0 0 48px 0;\n`;\n\nconst ByLineText = styled(Text.Paragraph)`\n color: ${({ theme }) => theme.colors.fg.tertiary};\n margin: 8px 0 24px;\n`;\n\nconst DescriptionText = styled(Text.Paragraph)`\n margin-bottom: 24px;\n`;\n\nconst PaginationContainer = styled.div`\n position: absolute;\n top: ${470 / 2}px;\n ${({ alignLeft }) =>\n alignLeft\n ? `\n left: 0;\n transform: translate(-187.5%, -50%);\n `\n : `\n right: 0;\n transform: translate(187.5%, -50%);\n `}\n`;\n\nconst TemplateTag = styled(Chip).attrs({ forwardedAs: 'li' })`\n margin-right: 12px;\n margin-bottom: 12px;\n > span {\n color: ${({ theme }) => theme.colors.fg.primary} !important;\n }\n`;\n\nconst MetadataContainer = styled.div`\n margin-bottom: 24px;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n`;\n\nfunction DetailsContent({\n activeTemplateIndex,\n isRTL,\n filteredTemplatesLength,\n switchToTemplateByOffset,\n template,\n}) {\n const { postersByPage, title, description, tags, colors } = template || {};\n const [galleryPosters, setGalleryPosters] = useState([]);\n\n useEffect(() => {\n if (postersByPage) {\n setGalleryPosters(\n Object.values(postersByPage).map((poster, index) => ({\n id: index,\n ...poster,\n }))\n );\n }\n return undefined;\n }, [postersByPage]);\n\n const { NextButton, PrevButton } = useMemo(() => {\n const nextIndex = isRTL ? activeTemplateIndex - 1 : activeTemplateIndex + 1;\n const previousIndex = isRTL\n ? activeTemplateIndex + 1\n : activeTemplateIndex - 1;\n\n const disablePrevious = isRTL\n ? !filteredTemplatesLength ||\n activeTemplateIndex === filteredTemplatesLength - 1\n : !filteredTemplatesLength || activeTemplateIndex === 0;\n\n const disableNext = isRTL\n ? !filteredTemplatesLength || activeTemplateIndex === 0\n : !filteredTemplatesLength ||\n activeTemplateIndex === filteredTemplatesLength - 1;\n\n const Previous = (\n {\n switchToTemplateByOffset(previousIndex);\n setGalleryPosters([]);\n }}\n disabled={disablePrevious}\n >\n \n \n );\n\n const Next = (\n {\n switchToTemplateByOffset(nextIndex);\n setGalleryPosters([]);\n }}\n disabled={disableNext}\n >\n \n \n );\n\n return isRTL\n ? {\n NextButton: Previous,\n PrevButton: Next,\n }\n : {\n NextButton: Next,\n PrevButton: Previous,\n };\n }, [\n filteredTemplatesLength,\n activeTemplateIndex,\n isRTL,\n switchToTemplateByOffset,\n ]);\n\n const byLine = template\n ? sprintf(\n /* translators: byline. %s: author name. */\n __('By %s', 'web-stories'),\n template.createdBy\n )\n : null;\n\n return (\n \n \n {PrevButton}\n \n \n \n \n \n {title}\n \n {byLine}\n \n {description}\n \n\n \n {tags.map((tag) => (\n \n {tag}\n \n ))}\n \n \n \n \n \n \n \n {NextButton}\n \n \n );\n}\n\nDetailsContent.propTypes = {\n activeTemplateIndex: PropTypes.number,\n isRTL: PropTypes.bool,\n filteredTemplatesLength: PropTypes.number,\n switchToTemplateByOffset: PropTypes.func,\n template: TemplatePropType,\n};\n\nexport default DetailsContent;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/content/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { formattedTemplatesArray } from '../../../../../../../storybookUtils';\nimport DetailsContent from '..';\n\nexport default {\n title: 'Dashboard/Views/TemplateDetails/Content/DetailsContent',\n argTypes: {\n switchToTemplateByOffset: {\n action: 'switch to template by offset clicked',\n },\n },\n parameters: {\n controls: {\n include: ['switchToTemplateByOffset'],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport styled from 'styled-components';\nimport {\n Button,\n ButtonType,\n ButtonSize,\n ButtonVariant,\n Icons,\n} from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport { TemplateActionsPropType } from '../../../../../../propTypes';\n\nconst Nav = styled.nav`\n justify-content: space-between;\n align-items: center;\n display: flex;\n margin: 48px auto;\n /* line the close and cta buttons up with navigation arrow*/\n width: calc(76% + 121px);\n`;\n\nconst CTAButton = styled(Button).attrs({\n type: ButtonType.Primary,\n size: ButtonSize.Small,\n})`\n /* Use Template button should be same height as Close button.*/\n padding: 10px 16px;\n`;\nfunction Header({\n templateTitle,\n templateId,\n templateActions,\n canCreateStory,\n}) {\n const { createStoryFromTemplate, handleDetailsToggle } =\n templateActions || {};\n return (\n \n );\n}\n\nHeader.propTypes = {\n canCreateStory: PropTypes.bool,\n templateActions: TemplateActionsPropType,\n templateId: PropTypes.number,\n templateTitle: PropTypes.string,\n};\n\nexport default Header;\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport Header from '..';\nimport { Layout } from '../../../../../../../components';\n\nexport default {\n title: 'Dashboard/Views/TemplateDetails/Header',\n component: Header,\n argTypes: {\n createStoryFromTemplate: { action: 'create story from template clicked' },\n handleDetailsToggle: { action: 'modal was toggled' },\n },\n};\n\nconst StorybookLayoutContainer = styled.div`\n margin-top: 40px;\n height: 100vh;\n`;\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n
\n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/header/test/header.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { fireEvent, screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport Header from '..';\nimport { renderWithProviders } from '../../../../../../../testUtils';\nimport LayoutProvider from '../../../../../../../components/layout/provider';\n\ndescribe('Template Details
', () => {\n const mockHandleCtaClick = jest.fn();\n\n it('should render nav bar for detail template view', () => {\n renderWithProviders(\n \n \n \n );\n const nav = screen.getByRole('navigation');\n\n expect(nav).toBeInTheDocument();\n });\n\n it('should trigger mockHandleCtaClick when cta is clicked', () => {\n renderWithProviders(\n \n \n \n );\n const cta = screen.getByText('Use template');\n\n expect(cta).toBeInTheDocument();\n\n fireEvent.click(cta);\n\n expect(mockHandleCtaClick).toHaveBeenCalledOnce();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/modal/templateDetails/karma/templateDetails.karma.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { within, waitFor } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport Fixture from '../../../../../../karma/fixture';\nimport { TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS } from '../../../../../../constants';\nimport useApi from '../../../../../api/useApi';\n\ndescribe('See template details modal', () => {\n let fixture;\n\n beforeEach(async () => {\n fixture = new Fixture();\n\n await fixture.render();\n\n await navigateToFirstTemplate();\n });\n\n afterEach(() => {\n fixture.restore();\n });\n\n async function navigateToFirstTemplate() {\n const navigation = fixture.screen.queryByRole('navigation');\n let utils = within(navigation);\n\n const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/);\n\n await fixture.events.click(exploreTemplatesMenuItem);\n\n const { templatesOrderById } = await getTemplatesState();\n\n const firstTemplate = getTemplateElementById(templatesOrderById[0]);\n\n utils = within(firstTemplate);\n\n await fixture.events.hover(firstTemplate);\n\n const seeDetailsButton = utils.getByText(\n new RegExp(`^${TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS.template}$`)\n );\n\n await fixture.events.click(seeDetailsButton);\n }\n\n function getTemplateElementById(id) {\n return fixture.screen.getByTestId(`template-grid-item-${id}`);\n }\n\n async function focusOnCardGallery() {\n let limit = 0;\n const cardGallery = fixture.screen.getByTestId('mini-cards-container');\n\n while (!cardGallery.contains(document.activeElement) && limit < 5) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n limit++;\n }\n\n return cardGallery.contains(document.activeElement)\n ? Promise.resolve()\n : Promise.reject(new Error('could not focus on page list'));\n }\n\n async function getTemplatesState() {\n const {\n state: { templates },\n } = await fixture.renderHook(() => useApi());\n return templates;\n }\n\n async function getTemplateTitle(index) {\n const { templates, templatesOrderById } = await getTemplatesState();\n return templates[templatesOrderById[index]].title;\n }\n\n async function expectModalClose() {\n const { templatesOrderById } = await getTemplatesState();\n const firstTemplate = getTemplateElementById(templatesOrderById[0]);\n const utils = within(firstTemplate);\n\n const seeDetailsButton = await utils.findByText(\n new RegExp(`^${TEMPLATES_GALLERY_ITEM_CENTER_ACTION_LABELS.template}$`)\n );\n await expect(seeDetailsButton).toEqual(document.activeElement);\n }\n\n describe('Action: Navigate template details modal', () => {\n it('should pass accessibility tests', async () => {\n const templateDetails = fixture.screen.queryByRole('dialog');\n expect(templateDetails).toBeTruthy();\n await expectAsync(templateDetails).toHaveNoViolations();\n });\n\n it('should update current template', async () => {\n const firstTemplateTitle = await getTemplateTitle(0);\n const templateTitle = fixture.screen.getByTestId(\n `template-details-title`\n );\n\n await expect(templateTitle).toHaveTextContent(firstTemplateTitle);\n\n const previousArrow = fixture.screen.getByRole('button', {\n name: /View previous template/,\n });\n const nextArrow = fixture.screen.getByRole('button', {\n name: /View next template/,\n });\n\n await nextArrow.click();\n await expect(templateTitle).toHaveTextContent(await getTemplateTitle(1));\n await expect(templateTitle).not.toHaveTextContent(firstTemplateTitle);\n\n await previousArrow.click();\n await expect(templateTitle).toHaveTextContent(firstTemplateTitle);\n await expect(templateTitle).not.toHaveTextContent(\n await getTemplateTitle(1)\n );\n });\n\n it('should update url param for template id', async () => {\n const { templatesOrderById } = await getTemplatesState();\n\n const firstTemplateId = templatesOrderById[0];\n // Parse the current template id from the id query param\n let urlHashParams = window.location.hash;\n expect(urlHashParams).toBe(\n `#/templates-gallery?id=${firstTemplateId}&isLocal=false`\n );\n\n // Click the view next button to cycle to the next template\n const viewNextBtn = fixture.screen.getByRole('button', {\n name: /View next template/,\n });\n await fixture.events.click(viewNextBtn);\n\n const nextTemplateId = templatesOrderById[1];\n // Re-parse the current template id from the id query param and assert it's different\n urlHashParams = window.location.hash;\n await expect(urlHashParams).toBe(\n `#/templates-gallery?id=${nextTemplateId}&isLocal=false`\n );\n });\n\n it('should update current template via keyboard', async () => {\n //close button should be in focus\n await fixture.events.keyboard.press('tab');\n const closeBtn = fixture.screen.getByRole('button', {\n name: /^Close$/,\n });\n expect(closeBtn).toEqual(document.activeElement);\n\n // enter should close modal\n await waitFor(async () => {\n await fixture.events.keyboard.press('Enter');\n // let modal close\n await fixture.events.sleep(500);\n await expectModalClose();\n });\n\n // open first template in modal\n await fixture.events.keyboard.press('Enter');\n\n // escape should close modal\n await waitFor(async () => {\n await fixture.events.keyboard.press('Escape');\n // let modal close\n await fixture.events.sleep(500);\n await expectModalClose();\n });\n\n // open first template in modal\n await fixture.events.keyboard.press('Enter');\n // navigate to 'Use Template' button\n await fixture.events.keyboard.press('tab');\n await fixture.events.keyboard.press('tab');\n const useTemplateBtn = fixture.screen.getByRole('button', {\n name: /to create new story/,\n });\n expect(useTemplateBtn).toEqual(document.activeElement);\n\n // navigate to gallery thumbnail\n await fixture.events.keyboard.press('tab');\n const page1 = fixture.screen.getByRole('button', { name: /Page 1/ });\n expect(page1).toEqual(document.activeElement);\n\n // Check current template\n const firstTemplateTitle = await getTemplateTitle(0);\n await expect(\n fixture.screen.getByTestId(`template-details-title`)\n ).toHaveTextContent(firstTemplateTitle);\n\n //navigate to next template arrow\n await fixture.events.keyboard.press('tab');\n const nextArrow = fixture.screen.getByRole('button', {\n name: /View next template/,\n });\n expect(nextArrow).toEqual(document.activeElement);\n\n // navigate to next template\n await fixture.events.keyboard.press('Enter');\n await expect(\n fixture.screen.getByTestId(`template-details-title`)\n ).not.toHaveTextContent(firstTemplateTitle);\n await expect(\n fixture.screen.getByTestId(`template-details-title`)\n ).toHaveTextContent(await getTemplateTitle(1));\n\n //navigate back to previous template\n await fixture.events.keyboard.shortcut('shift+tab');\n await fixture.events.keyboard.shortcut('shift+tab');\n const previousArrow = fixture.screen.getByRole('button', {\n name: /View previous template/,\n });\n expect(previousArrow).toEqual(document.activeElement);\n await fixture.events.keyboard.press('Enter');\n await expect(\n fixture.screen.getByTestId(`template-details-title`)\n ).toHaveTextContent(firstTemplateTitle);\n await expect(\n fixture.screen.getByTestId(`template-details-title`)\n ).not.toHaveTextContent(await getTemplateTitle(1));\n });\n });\n\n describe('Action: See template details modal', () => {\n it('should update the \"Active Preview Page\" when clicking on a \"Thumbnail Preview Page\"', async () => {\n const firstPage = fixture.screen.getByRole('button', { name: /Page 1/ });\n\n expect(firstPage).toBeTruthy();\n\n const activePage = fixture.screen.getByRole('img', {\n name: 'Active Page Preview - Page 1',\n });\n\n expect(activePage).toBeTruthy();\n\n const secondPage = fixture.screen.getByRole('button', { name: /Page 2/ });\n\n expect(secondPage).toBeTruthy();\n\n await fixture.events.click(secondPage);\n\n fixture.screen.getByRole('img', {\n name: 'Active Page Preview - Page 2',\n });\n\n expect(activePage).toBeTruthy();\n });\n\n it('should update the \"Active Preview Page\" when using keyboard to navigate gallery', async () => {\n await focusOnCardGallery();\n const page1 = fixture.screen.getByRole('button', { name: /Page 1/ });\n expect(page1).toEqual(document.activeElement);\n\n // go right by 1\n await fixture.events.keyboard.press('right');\n const page2 = fixture.screen.getByRole('button', { name: /Page 2/ });\n expect(page2).toEqual(document.activeElement);\n\n // go left 1\n await fixture.events.keyboard.press('left');\n expect(page1).toEqual(document.activeElement);\n\n // go left 1 (focus should remain on page 1)\n await fixture.events.keyboard.press('left');\n expect(page1).toEqual(document.activeElement);\n\n const page4 = fixture.screen.getByRole('button', { name: /Page 4/ });\n await fixture.events.keyboard.seq(({ press }) => [\n press('right'),\n press('right'),\n press('right'),\n ]);\n\n expect(page4).toEqual(document.activeElement);\n\n await fixture.events.keyboard.press('Enter');\n\n const activePreviewPage = fixture.screen.getByRole('img', {\n name: 'Active Page Preview - Page 4',\n });\n\n expect(activePreviewPage).toBeTruthy();\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/templateFilters.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { useMemo, useState } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport {\n TEMPLATE_CATEGORY_ITEMS,\n TEMPLATE_COLOR_ITEMS,\n} from '../../../constants';\n\nexport function updateSelectedItems(items, setter) {\n return (sender) => {\n const newSelectedItems = items.map((item) => {\n if (item.value === sender) {\n return { ...item, selected: !item.selected };\n }\n return item;\n });\n\n setter(newSelectedItems);\n };\n}\n\nexport function clearAllSelectedItems(items, setter) {\n return () => {\n const newSelectedItems = items.map((item) => {\n return { ...item, selected: false };\n });\n\n setter(newSelectedItems);\n };\n}\n\nexport default function useTemplateFilters() {\n const [selectedCategories, setSelectedCategories] = useState(\n TEMPLATE_CATEGORY_ITEMS\n );\n\n const [selectedColors, setSelectedColors] = useState(TEMPLATE_COLOR_ITEMS);\n\n return useMemo(\n () => ({\n selectedCategories,\n selectedColors,\n onNewCategorySelected: updateSelectedItems(\n selectedCategories,\n setSelectedCategories\n ),\n onNewColorSelected: updateSelectedItems(\n selectedColors,\n setSelectedColors\n ),\n clearAllCategories: clearAllSelectedItems(\n selectedCategories,\n setSelectedCategories\n ),\n clearAllColors: clearAllSelectedItems(selectedColors, setSelectedColors),\n }),\n [selectedColors, selectedCategories]\n );\n}\n" }, { "path": "packages/dashboard/src/app/views/exploreTemplates/test/templateFilters.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { act, renderHook } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport useTemplateFilters from '../templateFilters';\nimport { TEMPLATE_CATEGORIES, TEMPLATE_COLORS } from '../../../../constants';\n\ndescribe('templateFilters', () => {\n it('should select a color when the value is passed to the color selected method', () => {\n const { result } = renderHook(() => useTemplateFilters());\n\n act(() => {\n result.current.onNewColorSelected(TEMPLATE_COLORS.YELLOW);\n });\n\n const yellow = result.current.selectedColors.find(\n (color) => color.value === TEMPLATE_COLORS.YELLOW\n );\n\n expect(yellow.selected).toBeTrue();\n });\n\n it('should select a category when the value is passed to the category selected method', () => {\n const { result } = renderHook(() => useTemplateFilters());\n\n act(() => {\n result.current.onNewCategorySelected(TEMPLATE_CATEGORIES.SPORTS);\n });\n\n const sports = result.current.selectedCategories.find(\n (category) => category.value === TEMPLATE_CATEGORIES.SPORTS\n );\n\n expect(sports.selected).toBeTrue();\n });\n\n it('should clear the category selection when the clear method is called', () => {\n const { result } = renderHook(() => useTemplateFilters());\n\n act(() => {\n result.current.onNewCategorySelected(TEMPLATE_CATEGORIES.SPORTS);\n });\n\n expect(\n result.current.selectedCategories.find(\n (category) => category.value === TEMPLATE_CATEGORIES.SPORTS\n ).selected\n ).toBeTrue();\n\n act(() => {\n result.current.clearAllCategories();\n });\n\n expect(\n result.current.selectedCategories.find(\n (category) => category.value === TEMPLATE_CATEGORIES.SPORTS\n ).selected\n ).toBeFalse();\n });\n\n it('should clear the color selection when the clear method is called', () => {\n const { result } = renderHook(() => useTemplateFilters());\n\n act(() => {\n result.current.onNewColorSelected(TEMPLATE_COLORS.BLUE);\n });\n\n expect(\n result.current.selectedColors.find(\n (color) => color.value === TEMPLATE_COLORS.BLUE\n ).selected\n ).toBeTrue();\n\n act(() => {\n result.current.clearAllColors();\n });\n\n expect(\n result.current.selectedColors.find(\n (color) => color.value === TEMPLATE_COLORS.BLUE\n ).selected\n ).toBeFalse();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/filters/reducer.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { STORY_SORT_KEYS } from '../../../constants/stories';\nimport { TEMPLATE_SORT_KEYS } from '../../../constants/templates';\nimport * as types from './types';\n\n/**\n * @typedef {Object} Payload\n * @property {string} key Key for associated filter.\n * @property {Object} value Value to set on the filter.\n */\n\n/**\n * Update the filters state\n *\n * TODO: May need updating to handle all filter types within the dashboard.\n *\n * @param {Object} state Current state\n * @param {Object} args Arguments\n * @param {Object} args.type type Action type.\n * @param {Payload} args.payload Action payload\n * @return {Object} New state\n */\nconst reducer = (state, { type, payload = {} }) => {\n switch (type) {\n case types.UPDATE_FILTER: {\n const ALLOW_SAME_FILTERID = ['search', 'status'];\n const { key, value } = payload;\n const _filter = state.filters.find((filter) => filter.key === key);\n\n if (!_filter) {\n return state;\n }\n\n // remove 'filter-by' value\n if (value.filterId && _filter?.filterId === value.filterId) {\n if (ALLOW_SAME_FILTERID.includes(key)) {\n return state;\n }\n value.filterId = null;\n }\n\n // replace old filter\n const idx = state.filters.indexOf(_filter);\n const filters = [...state.filters];\n filters[idx] = { ..._filter, ...value };\n\n // update filtersObject\n const filtersObject = {};\n for (const filter of filters) {\n if (filter.filterId) {\n filtersObject[filter.key] = filter.filterId;\n }\n }\n\n return {\n ...state,\n filters,\n filtersObject,\n };\n }\n\n case types.UPDATE_SORT: {\n const { type: sortType, values } = payload;\n\n const sortObject = {};\n\n const ACCEPTABLE_KEYS =\n sortType === 'story' ? STORY_SORT_KEYS : TEMPLATE_SORT_KEYS;\n\n // only use acceptable key value pairs\n for (const key in values) {\n if (\n key in ACCEPTABLE_KEYS &&\n Object.values(ACCEPTABLE_KEYS[key]).includes(values[key]) &&\n state.sortObject[key] !== values[key]\n ) {\n sortObject[key] = values[key];\n }\n }\n\n // nothing changed no need for an update\n if (Object.entries(sortObject).length === 0) {\n return state;\n }\n\n return {\n ...state,\n sortObject: { ...state.sortObject, ...sortObject },\n };\n }\n\n case types.REGISTER_FILTERS: {\n const { value } = payload;\n const currentFilters = state.filters.map((filter) => filter.key);\n const newFilters = value.filter(\n (filter) => !currentFilters.includes(filter.key)\n );\n if (!newFilters.length) {\n return state;\n }\n return {\n ...state,\n filters: [...newFilters, ...state.filters],\n };\n }\n default:\n return state;\n }\n};\n\nexport default reducer;\n" }, { "path": "packages/dashboard/src/app/views/filters/test/reducer.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport reducer from '../reducer';\nimport * as types from '../types';\nimport { TEMPLATES_GALLERY_SORT_OPTIONS } from '../../../../constants/templates';\n\ndescribe('reducer', () => {\n it('should update the state', () => {\n const initial_state = {\n filters: [\n {\n key: 'officers',\n filterId: 117,\n name: 'John',\n },\n ],\n };\n\n const args = {\n type: types.UPDATE_FILTER,\n payload: {\n key: 'officers',\n value: { filterId: 112 },\n },\n };\n\n const state = reducer(initial_state, args);\n const filter = state.filters.find((f) => f.key === 'officers');\n expect(filter.filterId).toBe(112);\n });\n\n it('should update set the filterId to null if the same filterId is given', () => {\n const initial_state = {\n filters: [\n {\n key: 'officers',\n filterId: 117,\n name: 'John',\n },\n ],\n };\n\n const args = {\n type: types.UPDATE_FILTER,\n payload: {\n key: 'officers',\n value: { filterId: 117 },\n },\n };\n\n const state = reducer(initial_state, args);\n const filter = state.filters.find((f) => f.key === 'officers');\n expect(filter.filterId).toBeNull();\n });\n\n it('should not reset the filterId for \"search\" if the same filterId is given', () => {\n const initial_state = {\n filters: [{ key: 'search', filterId: 'John' }],\n };\n // search\n const args = {\n type: types.UPDATE_FILTER,\n payload: {\n key: 'search',\n value: 'John',\n },\n };\n\n const state = reducer(initial_state, args);\n const filter = state.filters.find((f) => f.key === 'search');\n expect(filter.filterId).toBe('John');\n });\n\n it('should not reset the filterId for \"status\" if the same filterId is given', () => {\n const initial_state = {\n filters: [{ key: 'status', filterId: 'New' }],\n };\n const args = {\n type: types.UPDATE_FILTER,\n payload: {\n key: 'status',\n value: 'New',\n },\n };\n\n const state = reducer(initial_state, args);\n const filter = state.filters.find((f) => f.key === 'status');\n expect(filter.filterId).toBe('New');\n });\n\n it('should register filters in state', () => {\n const initial_state = {\n filters: [],\n };\n\n const args = {\n type: types.REGISTER_FILTERS,\n payload: {\n value: [\n {\n key: 'officers',\n filterId: null,\n },\n {\n key: 'teams',\n filterId: null,\n },\n ],\n },\n };\n\n const state = reducer(initial_state, args);\n expect(state.filters).toHaveLength(2);\n });\n\n it('should return the state if dispatching an action thats not supported', () => {\n const initial_state = {\n filters: [\n {\n key: 'teams',\n filterId: 6,\n name: 'Noble',\n },\n ],\n };\n\n const args = {\n type: 'RENAME_TEAM',\n payload: {\n key: 'teams',\n name: 'Banished',\n },\n };\n\n const state = reducer(initial_state, args);\n const filter = state.filters.find((f) => f.key === 'teams');\n expect(filter).toMatchObject({\n filterId: 6,\n name: 'Noble',\n });\n });\n\n it('should return the state if no filter is found with the key', () => {\n const initial_state = {\n filters: [\n {\n key: 'teams',\n filterId: 6,\n name: 'Noble',\n },\n ],\n };\n\n const args = {\n type: 'UPDATE_FILTER',\n payload: {\n key: 'officers',\n name: 'Banished',\n },\n };\n\n const state = reducer(initial_state, args);\n expect(state).toMatchObject(initial_state);\n });\n\n it('should update sort based on \"type\" and acceptable keys', () => {\n const initial_state = {\n sortObject: {},\n };\n\n let args = {\n type: 'UPDATE_SORT',\n payload: {\n type: 'template',\n values: { orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR },\n },\n };\n\n let state = reducer(initial_state, args);\n expect(state.sortObject).toMatchObject({\n orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,\n });\n\n args = {\n type: 'UPDATE_SORT',\n payload: { type: 'template', values: { orderby: 'non-popular' } },\n };\n\n state = reducer(state, args);\n // state shouldn't change because 'non-popular' is not an acceptable value\n // for 'template' sort 'orderby'\n expect(state.sortObject).toMatchObject({\n orderby: TEMPLATES_GALLERY_SORT_OPTIONS.POPULAR,\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/filters/types.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport const UPDATE_FILTER = 'UPDATE_FILTER';\nexport const UPDATE_SORT = 'UPDATE_SORT';\nexport const REGISTER_FILTERS = 'REGISTER_FILTERS';\n" }, { "path": "packages/dashboard/src/app/views/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nexport { default as MyStoriesView } from './myStories';\nexport { default as ExploreTemplatesView } from './exploreTemplates';\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { sprintf, __ } from '@googleforcreators/i18n';\nimport {\n ButtonSize,\n ButtonType,\n Headline,\n TextSize,\n InfiniteScroller,\n ButtonAsLink,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { resolveRoute } from '../../../router';\nimport { APP_ROUTES } from '../../../../constants';\nimport { Layout, StandardViewContentGutter } from '../../../../components';\nimport { StoriesPropType, StoryActionsPropType } from '../../../../propTypes';\nimport {\n ViewPropTypes,\n PagePropTypes,\n ShowStoriesWhileLoadingPropType,\n} from '../../../../utils/useStoryView';\nimport { EmptyContentMessage } from '../../shared';\nimport StoriesView from './storiesView';\n\nfunction NoAvailableContent({ filtersObject }) {\n const { search } = filtersObject;\n if (search) {\n return sprintf(\n /* translators: %s: search term. */\n __('Sorry, we couldn\\'t find any results matching \"%s\"', 'web-stories'),\n search\n );\n } else if (Object.keys(filtersObject).length !== 0) {\n return __(\"Sorry, we couldn't find any results\", 'web-stories');\n } else {\n return __('Start telling Stories.', 'web-stories');\n }\n}\nNoAvailableContent.propTypes = {\n filtersObject: PropTypes.object,\n};\n\nfunction Content({\n allPagesFetched,\n canViewDefaultTemplates,\n filtersObject = {},\n loading,\n page,\n stories,\n storyActions,\n view,\n}) {\n return (\n \n \n {stories.length > 0 ? (\n <>\n \n \n \n ) : (\n !loading?.isLoading && (\n \n \n \n \n {Object.keys(filtersObject).length === 0 &&\n canViewDefaultTemplates && (\n \n {__('Explore Templates', 'web-stories')}\n \n )}\n \n )\n )}\n \n \n );\n}\nContent.propTypes = {\n allPagesFetched: PropTypes.bool,\n canViewDefaultTemplates: PropTypes.bool,\n filtersObject: PropTypes.object,\n loading: PropTypes.shape({\n isLoading: PropTypes.bool,\n showStoriesWhileLoading: ShowStoriesWhileLoadingPropType,\n }),\n page: PagePropTypes,\n stories: StoriesPropType,\n storyActions: StoryActionsPropType,\n view: ViewPropTypes,\n};\n\nexport default Content;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/listView/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport styled, { css } from 'styled-components';\nimport { Text, themeHelpers } from '@googleforcreators/design-system';\n\nconst { focusableOutlineCSS } = themeHelpers;\n\nexport const ListView = styled.div`\n width: 100%;\n`;\n\nexport const ArrowIcon = styled.div`\n width: 32px;\n height: 100%;\n display: inline-grid;\n color: ${({ theme }) => theme.colors.fg.primary};\n vertical-align: middle;\n\n svg {\n visibility: ${({ active }) => (active ? 'visible' : 'hidden')};\n transition: transform 0.15s;\n\n ${({ asc }) =>\n asc &&\n css`\n transform: rotate(180deg);\n `};\n }\n`;\n\nexport const EmptyIconSpace = styled.div`\n height: 32px;\n width: 32px;\n`;\n\nexport const ArrowIconWithTitle = styled(ArrowIcon)`\n ${({ active }) => !active && 'display: none;'}\n position: absolute;\n top: 16px;\n\n @media ${({ theme }) => theme.breakpoint.mobile} {\n margin-left: 4px;\n }\n`;\n\nexport const SelectableTitle = styled(Text.Span).attrs({\n tabIndex: 0,\n isBold: true,\n})`\n color: ${({ theme }) => theme.colors.blue[70]};\n cursor: pointer;\n\n ${({ theme }) =>\n focusableOutlineCSS(theme.colors.border.focus, theme.colors.bg.secondary)};\n`;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/listView/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useCallback, useMemo } from '@googleforcreators/react';\nimport { __ } from '@googleforcreators/i18n';\nimport { Icons, Text, TextSize } from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport {\n StoriesPropType,\n RenameStoryPropType,\n StoryMenuPropType,\n} from '../../../../../propTypes';\nimport {\n Table,\n TableAuthorHeaderCell,\n TableBody,\n TableDateHeaderCell,\n StickyTableHeader,\n TablePreviewHeaderCell,\n TableRow,\n TableStatusHeaderCell,\n TableTitleHeaderCell,\n} from '../../../../../components';\nimport {\n ORDER_BY_SORT,\n SORT_DIRECTION,\n STORY_SORT_OPTIONS,\n STORY_STATUS,\n} from '../../../../../constants';\nimport { useConfig } from '../../../../config';\nimport useStoryFilters from '../../filters/useStoryFilters';\nimport { StoryListItem } from '../storyListItem';\nimport {\n ArrowIcon,\n ArrowIconWithTitle,\n EmptyIconSpace,\n ListView,\n SelectableTitle,\n} from './components';\n\nconst toggleSortLookup = {\n [SORT_DIRECTION.DESC]: SORT_DIRECTION.ASC,\n [SORT_DIRECTION.ASC]: SORT_DIRECTION.DESC,\n};\n\nexport default function StoryListView({\n hideStoryList,\n renameStory,\n stories,\n storyMenu,\n}) {\n const {\n userId,\n styleConstants: { topOffset },\n } = useConfig();\n\n const { filters, sortObject, updateSort } = useStoryFilters(\n ({ state: { filters, sortObject }, actions: { updateSort } }) => ({\n filters,\n sortObject,\n updateSort,\n })\n );\n\n const [storySort, sortDirection] = useMemo(() => {\n return [sortObject?.orderby, sortObject?.order];\n }, [sortObject]);\n\n const statusFilterValue = useMemo(() => {\n const statusFilter = filters.filter(({ key }) => key === 'status');\n return statusFilter.filterId;\n }, [filters]);\n\n const onSortTitleSelected = useCallback(\n (orderby) => {\n if (orderby !== storySort) {\n updateSort({ orderby, order: ORDER_BY_SORT[orderby] });\n } else {\n updateSort({ order: toggleSortLookup[sortDirection] });\n }\n },\n [updateSort, storySort, sortDirection]\n );\n\n const onKeyDownSort = useCallback(\n ({ key }, sortBy) => {\n if (key === 'Enter') {\n onSortTitleSelected(sortBy);\n }\n },\n [onSortTitleSelected]\n );\n\n const tableContents = useMemo(() => {\n return (\n !hideStoryList &&\n stories.map((story) => (\n \n ))\n );\n }, [\n hideStoryList,\n renameStory,\n stories,\n statusFilterValue,\n storyMenu,\n userId,\n ]);\n\n return (\n \n \n \n \n onSortTitleSelected(STORY_SORT_OPTIONS.NAME)}\n onKeyDown={(e) => onKeyDownSort(e, STORY_SORT_OPTIONS.NAME)}\n >\n \n {__('Title', 'web-stories')}\n \n \n onSortTitleSelected(STORY_SORT_OPTIONS.NAME)}\n onKeyDown={(e) => onKeyDownSort(e, STORY_SORT_OPTIONS.NAME)}\n >\n \n {__('Title', 'web-stories')}\n \n \n {}\n \n \n \n \n onSortTitleSelected(STORY_SORT_OPTIONS.CREATED_BY)\n }\n onKeyDown={(e) =>\n onKeyDownSort(e, STORY_SORT_OPTIONS.CREATED_BY)\n }\n active={storySort === STORY_SORT_OPTIONS.CREATED_BY}\n size={TextSize.Small}\n isBold\n >\n {__('Author', 'web-stories')}\n \n \n {storySort === STORY_SORT_OPTIONS.CREATED_BY ? (\n \n ) : (\n \n )}\n \n \n \n \n onSortTitleSelected(STORY_SORT_OPTIONS.DATE_CREATED)\n }\n onKeyDown={(e) =>\n onKeyDownSort(e, STORY_SORT_OPTIONS.DATE_CREATED)\n }\n active={storySort === STORY_SORT_OPTIONS.DATE_CREATED}\n size={TextSize.Small}\n isBold\n >\n {__('Date Created', 'web-stories')}\n \n \n \n \n \n \n \n onSortTitleSelected(STORY_SORT_OPTIONS.LAST_MODIFIED)\n }\n onKeyDown={(e) =>\n onKeyDownSort(e, STORY_SORT_OPTIONS.LAST_MODIFIED)\n }\n active={storySort === STORY_SORT_OPTIONS.LAST_MODIFIED}\n size={TextSize.Small}\n isBold\n >\n {__('Last Modified', 'web-stories')}\n \n \n \n \n \n {statusFilterValue !== STORY_STATUS.DRAFT && (\n \n \n {__('Publish State', 'web-stories')}\n \n \n )}\n \n \n {tableContents}\n
\n \n );\n}\n\nStoryListView.propTypes = {\n hideStoryList: PropTypes.bool,\n renameStory: RenameStoryPropType,\n storyMenu: StoryMenuPropType.isRequired,\n stories: StoriesPropType,\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { SnackbarProvider } from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport { Layout } from '../../../../../components';\nimport {\n STORY_SORT_OPTIONS,\n SORT_DIRECTION,\n VIEW_STYLE,\n STORY_STATUS,\n} from '../../../../../constants';\nimport { formattedStoriesArray } from '../../../../../storybookUtils';\nimport { usePagePreviewSize } from '../../../../../utils';\nimport Content from '..';\n\n// Prevents storybook from shouting a bunch of console warnings about duplicate ids\nfunction forceUniqueIds(stories) {\n return stories.map((story, index) => {\n const id = Math.floor(Math.random() * 500 * index);\n return { ...story, id };\n });\n}\nconst longerListOfStories = forceUniqueIds(\n formattedStoriesArray\n .concat(formattedStoriesArray)\n .concat(formattedStoriesArray)\n);\n\nexport default {\n title: 'Dashboard/Views/MyStories/Content',\n component: Content,\n args: {\n filterStatus: 'all',\n statusValue: STORY_STATUS.ALL,\n sortValue: STORY_SORT_OPTIONS.NAME,\n direction: SORT_DIRECTION.ASC,\n keyword: '',\n style: VIEW_STYLE.GRID,\n stories: longerListOfStories,\n allPagesFetched: false,\n thumbnailMode: false,\n isGrid: true,\n isLoading: false,\n canViewDefaultTemplates: true,\n },\n argTypes: {\n setFilter: { action: 'set filter' },\n setSort: { action: 'set sort' },\n setDirection: { action: 'set sort direction' },\n setKeyword: { action: 'set search' },\n toggleStyle: { action: 'toggle view style' },\n statusValue: { options: STORY_STATUS, control: 'select' },\n sortValue: {\n options: STORY_SORT_OPTIONS,\n control: 'radio',\n name: 'Story sort options',\n },\n direction: { options: SORT_DIRECTION, control: 'radio' },\n style: { options: VIEW_STYLE, control: 'radio' },\n setPage: { action: 'set page number' },\n requestNextPage: { action: 'request next page clicked' },\n duplicateStory: { action: 'duplicate story clicked' },\n trashStory: { action: 'trash story clicked' },\n updateStory: { action: 'update story clicked' },\n },\n parameters: {\n controls: {\n include: [\n 'style',\n 'requestNextPage',\n 'duplicateStory',\n 'updateStory',\n 'trashStory',\n 'isGrid',\n 'isThumbnailMode',\n 'isLoading',\n 'Story sort options',\n 'direction',\n 'allPagesFetched',\n 'statusValue',\n 'canViewDefaultTemplates',\n ],\n },\n },\n};\n\nconst StorybookLayoutContainer = styled.div`\n margin-top: 40px;\n height: 100vh;\n`;\n\nexport const _default = {\n render: function Render(args) {\n const { pageSize } = usePagePreviewSize({\n isGrid: args.isGrid,\n thumbnailMode: args.thumbnailMode,\n });\n const filter = {\n status: args.filterStatus,\n value: args.statusValue,\n set: args.setFilter,\n };\n const sort = {\n value: args.sortValue,\n direction: args.direction,\n set: args.setSort,\n setDirection: args.setDirection,\n };\n const search = {\n keyword: args.keyword,\n setKeyword: args.setKeyword,\n };\n const view = {\n style: args.style,\n toggleStyle: args.toggleStyle,\n pageSize,\n };\n const page = {\n value: 1,\n set: args.setPage,\n requestNextPage: args.requestNextPage,\n };\n const storyActions = {\n duplicateStory: args.duplicateStory,\n trashStory: args.trashStory,\n updateStory: args.updateStory,\n };\n\n const defaultProps = {\n allPagesFetched: args.allPagesFetched,\n filter: filter,\n isLoading: args.isLoading,\n page: page,\n search: search,\n sort: sort,\n stories: args.stories,\n storyActions: storyActions,\n view: view,\n };\n return (\n \n \n \n \n \n \n \n );\n },\n};\n\nexport const NoStories = {\n render: _default,\n\n args: {\n stories: [],\n },\n};\n\nexport const NoSearchResult = {\n render: _default,\n\n args: {\n stories: [],\n keyword: 'koalas',\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storiesView/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport {\n useState,\n useCallback,\n useMemo,\n useEffect,\n} from '@googleforcreators/react';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport { trackEvent } from '@googleforcreators/tracking';\nimport {\n LoadingSpinner,\n useSnackbar,\n Text,\n TextSize,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport {\n StoriesPropType,\n StoryActionsPropType,\n} from '../../../../../propTypes';\nimport { titleFormatted } from '../../../../../utils';\nimport {\n ViewPropTypes,\n ShowStoriesWhileLoadingPropType,\n} from '../../../../../utils/useStoryView';\nimport { Dialog, LoadingContainer } from '../../../../../components';\nimport {\n VIEW_STYLE,\n STORY_CONTEXT_MENU_ACTIONS,\n STORY_CONTEXT_MENU_ITEMS,\n} from '../../../../../constants';\nimport ListView from '../listView';\nimport StoryGridView from '../storyGridView';\n\nconst ACTIVE_DIALOG_DELETE_STORY = 'DELETE_STORY';\nfunction StoriesView({ loading, storyActions, stories, view }) {\n const [contextMenuId, setContextMenuId] = useState(-1);\n const [titleRenameId, setTitleRenameId] = useState(-1);\n\n const [activeDialog, setActiveDialog] = useState('');\n const [activeStory, setActiveStory] = useState(null);\n const [focusedStory, setFocusedStory] = useState({});\n const [returnStoryFocusId, setReturnStoryFocusId] = useState(null);\n\n const { showSnackbar } = useSnackbar();\n\n const isActiveDeleteStoryDialog =\n activeDialog === ACTIVE_DIALOG_DELETE_STORY && activeStory;\n\n const storiesById = useMemo(() => stories.map(({ id }) => id), [stories]);\n\n useEffect(() => {\n // if a dialog is opened and the keyboard used we need to return the focus of the proper grid item to ease keyboard usage\n // focusedStory is set when activeDialog is removed\n // then we use storiesById to find the proper index of the interacted with item and use that to decide where to move focus\n if (focusedStory.id && !returnStoryFocusId) {\n const storyArrayIndex = storiesById.indexOf(focusedStory.id);\n const isDeletedAdjustmentDirection = storyArrayIndex > 0 ? -1 : +1;\n const adjustedIndex = focusedStory.isDeleted\n ? isDeletedAdjustmentDirection\n : 0;\n const focusIndex = storyArrayIndex + adjustedIndex;\n const storyIdToFocus = storiesById[focusIndex];\n storyIdToFocus && setReturnStoryFocusId(storyIdToFocus);\n }\n }, [focusedStory, returnStoryFocusId, storiesById]);\n\n useEffect(() => {\n if (!activeDialog) {\n setActiveStory(null);\n }\n }, [activeDialog, setActiveStory]);\n\n useEffect(() => {\n // every time the activeDialog is truthy we want to reset our state that helps determine where to send focus back to when the dialog is closed\n if (activeDialog) {\n setFocusedStory({});\n setReturnStoryFocusId(null);\n }\n }, [activeDialog]);\n\n const handleOnRenameStory = useCallback(\n (story, newTitle) => {\n setTitleRenameId(-1);\n trackEvent('rename_story');\n storyActions.updateStory({ ...story, title: { raw: newTitle } });\n },\n [storyActions]\n );\n\n const handleOnDeleteStory = useCallback(() => {\n trackEvent('delete_story');\n storyActions.trashStory(activeStory);\n setFocusedStory({ id: activeStory?.id, isDeleted: true });\n setActiveDialog('');\n }, [storyActions, activeStory]);\n\n // menu item actions\n const handleOpenStoryInEditor = useCallback(() => {\n setContextMenuId(-1);\n trackEvent('open_in_editor');\n }, []);\n\n const handleRenameStory = useCallback((story) => {\n setContextMenuId(-1);\n setTitleRenameId(story.id);\n }, []);\n\n const handleDuplicateStory = useCallback(\n (story) => {\n setContextMenuId(-1);\n trackEvent('duplicate_story');\n storyActions.duplicateStory(story);\n setFocusedStory({ id: story.id });\n },\n [storyActions]\n );\n\n const handleDeleteStory = useCallback((story) => {\n setContextMenuId(-1);\n setActiveStory(story);\n setActiveDialog(ACTIVE_DIALOG_DELETE_STORY);\n }, []);\n\n const handleCopyStoryLink = useCallback(\n (story) => {\n setContextMenuId(-1);\n window.navigator.clipboard.writeText(story.link);\n\n showSnackbar({\n message: sprintf(\n /* translators: %s: story title. */\n __('%s has been copied to your clipboard.', 'web-stories'),\n titleFormatted(story.title)\n ),\n dismissible: true,\n });\n setFocusedStory({ id: story.id });\n },\n [showSnackbar]\n );\n\n const handleCloseConfirmDialog = useCallback(() => {\n setFocusedStory({ id: activeStory?.id });\n setActiveDialog('');\n }, [activeStory]);\n\n const menuItems = STORY_CONTEXT_MENU_ITEMS.map((item) => {\n switch (item?.value) {\n case STORY_CONTEXT_MENU_ACTIONS.COPY_STORY_LINK:\n item.action = handleCopyStoryLink;\n break;\n case STORY_CONTEXT_MENU_ACTIONS.DELETE:\n item.action = handleDeleteStory;\n break;\n case STORY_CONTEXT_MENU_ACTIONS.DUPLICATE:\n item.action = handleDuplicateStory;\n break;\n case STORY_CONTEXT_MENU_ACTIONS.OPEN_STORY_LINK:\n item.action = handleOpenStoryInEditor;\n break;\n case STORY_CONTEXT_MENU_ACTIONS.RENAME:\n item.action = handleRenameStory;\n break;\n default:\n item.action = () => setContextMenuId(-1);\n break;\n }\n return item;\n });\n\n const storyMenu = useMemo(() => {\n return {\n handleMenuToggle: setContextMenuId,\n contextMenuId,\n menuItems,\n };\n }, [contextMenuId, menuItems, setContextMenuId]);\n\n const renameStory = useMemo(() => {\n return {\n id: titleRenameId,\n handleOnRenameStory,\n handleCancelRename: () => setTitleRenameId(-1),\n };\n }, [handleOnRenameStory, setTitleRenameId, titleRenameId]);\n\n const ActiveView = useMemo(() => {\n // Stories should be shown when we trigger a fetch from `InfiniteScroll`.\n // Stories should be hidden when a filter is changed.\n if (view.style === VIEW_STYLE.LIST) {\n // StoryListView needs to show the table header when loading stories\n // when filtering.\n return (\n \n );\n }\n\n if (\n !loading?.isLoading ||\n (loading?.isLoading && loading?.showStoriesWhileLoading.current)\n ) {\n return (\n \n );\n }\n\n // Hide all stories when filter is triggered.\n return null;\n }, [loading, renameStory, returnStoryFocusId, stories, storyMenu, view]);\n\n return (\n <>\n {ActiveView}\n {loading?.isLoading && !loading?.showStoriesWhileLoading.current && (\n \n \n \n )}\n {isActiveDeleteStoryDialog && (\n \n \n {sprintf(\n /* translators: %s: story title. */\n __('Are you sure you want to delete \"%s\"?', 'web-stories'),\n titleFormatted(activeStory.title)\n )}\n \n \n )}\n \n );\n}\n\nStoriesView.propTypes = {\n loading: PropTypes.shape({\n isLoading: PropTypes.bool,\n showStoriesWhileLoading: ShowStoriesWhileLoadingPropType,\n }),\n storyActions: StoryActionsPropType,\n stories: StoriesPropType,\n view: ViewPropTypes,\n};\nexport default StoriesView;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyGridItem/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n Headline,\n Icons,\n TextSize,\n Text,\n} from '@googleforcreators/design-system';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n/**\n * Internal dependencies\n */\nimport { CardGridItem } from '../../../../../components';\n\nexport const CustomCardGridItem = styled(CardGridItem)`\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: ${({ $posterHeight }) => `${$posterHeight}px auto`};\n`;\nCustomCardGridItem.propTypes = {\n $posterHeight: PropTypes.number,\n};\n\n// Allows grid item contents to overlay in a set space\nexport const CardWrapper = styled.div`\n position: absolute;\n height: 100%;\n width: 100%;\n`;\n\nexport const ScrimAnchor = styled.a`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n\n &:hover,\n &:focus {\n box-shadow: none;\n border: ${({ theme }) => `4px solid ${theme.colors.interactiveBg.active}`};\n }\n`;\n// Components that create the content to display on top of a poster\n// Set guidance for how content should display on top of a poster\nexport const StyledStoryDisplayContent = styled.div`\n padding: 20px 12px 8px 12px;\n display: flex;\n flex-direction: column;\n width: 100%;\n`;\n\n// Generic row to vertically center grid item contents\nexport const Row = styled.div`\n width: 100%;\n display: flex;\n align-items: flex-end;\n flex-wrap: wrap;\n`;\nexport const LockedRow = styled(Row)`\n position: absolute;\n top: 8px;\n right: 8px;\n justify-content: flex-end;\n align-items: center;\n`;\n\n// Interior grid for details to allow context menu space without jostling copy\nexport const CardDetailsGrid = styled.div`\n display: grid;\n grid-template-columns: 80% auto;\n margin-top: 4px;\n`;\nexport const CardDetailsColumn = styled.div`\n display: flex;\n flex-direction: column;\n align-self: flex-end;\n`;\n\n// Story Title\n// Overriding stylelint for the sake of line clamping the title to be 3 lines.\n// This is supported by all major browsers except IE 11.\n// If it fails, max-height will catch so that really long titles\n// don't leave their designated space, just no ellipsis.\nexport const Title = styled(Headline).attrs({\n as: 'h3',\n size: TextSize.XSmall,\n})`\n overflow: hidden;\n text-overflow: ellipsis;\n color: ${({ theme }) => theme.colors.inverted.fg.primary};\n margin: 0;\n max-height: calc(1.2em * 3);\n /* stylelint-disable-next-line */\n display: -webkit-box;\n -webkit-line-clamp: 3;\n /* stylelint-disable-next-line */\n -webkit-box-orient: vertical;\n`;\n\n// All body text\nexport const DetailCopy = styled(Text.Span).attrs({\n size: TextSize.XSmall,\n})`\n color: ${({ theme }) => theme.colors.inverted.fg.primary};\n margin: 0;\n`;\n\n// specifications for exposing a locked story\nexport const LockAvatar = styled.img`\n height: 40px;\n width: 40px;\n border: ${({ theme }) =>\n `2px solid ${theme.colors.interactiveBg.brandNormal}`};\n border-radius: ${({ theme }) => theme.borders.radius.small};\n z-index: 3;\n`;\n\nexport const LockIcon = styled(Icons.LockClosed)`\n color: ${({ theme }) => theme.colors.inverted.fg.primary};\n display: inline;\n height: 36px;\n width: 36px;\n margin: -4px -4px -4px -10px;\n`;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyGridItem/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { VisuallyHidden } from '@googleforcreators/design-system';\nimport { getRelativeDisplayDate } from '@googleforcreators/date';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport PropTypes from 'prop-types';\nimport { useMemo, forwardRef } from '@googleforcreators/react';\nimport { css } from 'styled-components';\n/**\n * Internal dependencies\n */\nimport { StoryMenu } from '../../../../../components';\nimport { generateStoryMenu } from '../../../../../components/popoverMenu/story-menu-generator';\nimport {\n DEFAULT_GRID_IMG_HEIGHT,\n DEFAULT_GRID_IMG_WIDTH,\n STORY_STATUS,\n} from '../../../../../constants';\nimport {\n PageSizePropType,\n RenameStoryPropType,\n StoryMenuPropType,\n StoryPropType,\n} from '../../../../../propTypes';\nimport { titleFormatted } from '../../../../../utils';\nimport { useConfig } from '../../../../config';\nimport {\n Container,\n Poster,\n Gradient,\n Scrim,\n} from '../../../shared/grid/components';\nimport { CardWrapper, CustomCardGridItem, ScrimAnchor } from './components';\nimport StoryDisplayContent from './storyDisplayContent';\n\nconst StoryGridItem = forwardRef(\n ({ onFocus, isActive, pageSize, renameStory, story, storyMenu }, ref) => {\n const { userId } = useConfig();\n const tabIndex = isActive ? 0 : -1;\n const titleRenameProps = renameStory\n ? {\n editMode: renameStory?.id === story?.id,\n onEditComplete: (newTitle) =>\n renameStory?.handleOnRenameStory(story, newTitle),\n onEditCancel: renameStory?.handleCancelRename,\n }\n : {};\n\n const isLocked = useMemo(\n () => story?.locked && userId !== story?.lockUser.id,\n [story, userId]\n );\n\n const generatedMenuItems = useMemo(\n () =>\n generateStoryMenu({\n menuItems: storyMenu.menuItems,\n story,\n isLocked,\n }),\n [storyMenu, story, isLocked]\n );\n\n const storyDate = getRelativeDisplayDate(\n story?.status === STORY_STATUS.DRAFT\n ? story?.modifiedGmt\n : story?.createdGmt\n );\n\n const formattedTitle = titleFormatted(story.title);\n\n const memoizedStoryMenu = useMemo(\n () =>\n generatedMenuItems.length ? (\n \n ) : null,\n [\n isLocked,\n formattedTitle,\n story?.lockUser?.name,\n story.id,\n isActive,\n tabIndex,\n storyMenu,\n generatedMenuItems,\n ]\n );\n\n return (\n \n \n \n \n \n \n {story?.capabilities?.hasEditAction && (\n \n \n {sprintf(\n /* translators: %s: Story title. */\n __('Open %s in Editor', 'web-stories'),\n formattedTitle\n )}\n \n \n )}\n \n \n \n \n \n );\n }\n);\n\nStoryGridItem.displayName = 'StoryGridItem';\n\nStoryGridItem.propTypes = {\n onFocus: PropTypes.func,\n isActive: PropTypes.bool,\n pageSize: PageSizePropType,\n renameStory: RenameStoryPropType,\n storyMenu: StoryMenuPropType,\n story: StoryPropType,\n};\n\nexport default StoryGridItem;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyGridItem/storyDisplayContent.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useMemo } from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport { Placement } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { STORY_STATUS } from '../../../../../constants';\nimport { InlineInputForm, Tooltip } from '../../../../../components';\nimport { DashboardStatusesPropType } from '../../../../../propTypes';\nimport {\n StyledStoryDisplayContent,\n CardDetailsGrid,\n CardDetailsColumn,\n Row,\n Title,\n DetailCopy,\n LockAvatar,\n LockedRow,\n LockIcon,\n} from './components';\n\nconst StoryDisplayContent = ({\n author,\n contextMenu,\n displayDate,\n editMode,\n formattedTitle,\n id,\n isLocked,\n lockUser = {},\n onEditComplete,\n onEditCancel,\n status,\n title,\n}) => {\n const displayDateText = useMemo(() => {\n if (!displayDate) {\n return null;\n }\n\n switch (status) {\n case STORY_STATUS.PUBLISH:\n return sprintf(\n /* translators: %s: published date */\n __('Published %s', 'web-stories'),\n displayDate\n );\n case STORY_STATUS.FUTURE:\n return sprintf(\n /* translators: %s: future publish date */\n __('Scheduled %s', 'web-stories'),\n displayDate\n );\n\n default:\n return sprintf(\n /* translators: %s: last modified date */\n __('Modified %s', 'web-stories'),\n displayDate\n );\n }\n }, [status, displayDate]);\n\n const { name, avatar } = lockUser;\n\n const storyLockedTitle = isLocked && avatar && (\n \n \n \n \n \n );\n return (\n \n {storyLockedTitle}\n {editMode ? (\n \n ) : (\n \n {isLocked && }\n {formattedTitle}\n \n )}\n \n \n {status === STORY_STATUS.DRAFT && (\n {__('Draft', 'web-stories')}\n )}\n {status === STORY_STATUS.PENDING && (\n {__('Pending', 'web-stories')}\n )}\n {author?.name && {author?.name}}\n \n {displayDateText}\n \n \n {contextMenu}\n \n \n );\n};\n\nStoryDisplayContent.propTypes = {\n author: PropTypes.object,\n contextMenu: PropTypes.node,\n displayDate: PropTypes.string,\n editMode: PropTypes.bool,\n formattedTitle: PropTypes.string.isRequired,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n isLocked: PropTypes.bool,\n lockUser: PropTypes.object,\n onEditComplete: PropTypes.func,\n onEditCancel: PropTypes.func,\n title: PropTypes.string.isRequired,\n status: DashboardStatusesPropType,\n};\n\nexport default StoryDisplayContent;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyGridView/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { __ } from '@googleforcreators/i18n';\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport {\n useRef,\n useEffect,\n useState,\n useMemo,\n useCallback,\n useFocusOut,\n} from '@googleforcreators/react';\nimport { useGridViewKeys } from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport { CardGrid } from '../../../../../components';\nimport {\n StoriesPropType,\n StoryMenuPropType,\n PageSizePropType,\n RenameStoryPropType,\n} from '../../../../../propTypes';\nimport {\n PAGE_WRAPPER,\n STORY_CONTEXT_MENU_ACTIONS,\n} from '../../../../../constants';\nimport { useConfig } from '../../../../config';\nimport StoryGridItem from '../storyGridItem';\n\nconst StoryGrid = styled(CardGrid)`\n width: calc(100% - ${PAGE_WRAPPER.GUTTER}px);\n`;\n\nconst StoryGridView = ({\n stories,\n pageSize,\n storyMenu,\n renameStory,\n returnStoryFocusId,\n}) => {\n const { isRTL } = useConfig();\n const containerRef = useRef();\n const gridRef = useRef();\n const itemsRef = useRef({});\n const [activeGridItemId, setActiveGridItemId] = useState();\n const activeGridItemIdRef = useRef();\n const gridItemIds = useMemo(() => stories.map(({ id }) => id), [stories]);\n\n useGridViewKeys({\n containerRef,\n gridRef,\n itemRefs: itemsRef,\n isRTL,\n currentItemId: activeGridItemId,\n items: stories,\n });\n\n // We only want to force focus when returning to the grid from a dialog\n // By checking to see if the active grid item no longer exists\n // in tandem with the returnStoryFocusId being present from the parent\n // AND that the activeGridItemIdRef.current is null we know that\n // the user is coming from a dialog not just moving grid items\n useEffect(() => {\n if (\n !activeGridItemId &&\n returnStoryFocusId?.value &&\n !activeGridItemIdRef.current\n ) {\n const newFocusId = returnStoryFocusId?.value;\n setActiveGridItemId(newFocusId);\n // grab the menu button and refocus\n const firstFocusableElement = itemsRef.current?.[\n newFocusId\n ]?.querySelectorAll(['button', 'a'])?.[0];\n\n firstFocusableElement?.focus();\n }\n }, [activeGridItemId, returnStoryFocusId]);\n\n // when keyboard focus changes through FocusableGridItem\n // immediately focus the edit preview layer on top of preview\n useEffect(() => {\n if (activeGridItemId) {\n activeGridItemIdRef.current = activeGridItemId;\n }\n }, [activeGridItemId]);\n\n // Additional functionality needed when closing context menus to maintain grid item focus\n const handleMenuToggle = useCallback(\n (evt, id) => {\n storyMenu.handleMenuToggle(id);\n // Conditionally return the focus to the grid when menu is closed using `tab`\n if (id < 0 && evt?.keyCode === 9) {\n // Menu is closing.\n const isNext = !evt?.shiftKey;\n const idToFocus = isNext\n ? gridItemIds[gridItemIds.indexOf(activeGridItemId) + 1]\n : activeGridItemId;\n returnStoryFocusId.set(idToFocus);\n activeGridItemIdRef.current = null;\n setActiveGridItemId(null);\n }\n },\n [activeGridItemId, gridItemIds, returnStoryFocusId, storyMenu]\n );\n\n // if keyboard is used instead of mouse the useFocusOut doesn't get triggered\n // that is where we are setting active grid item ID to null\n // by doing this here as well we are ensuring consistent functionality\n const manuallySetFocusOut = useCallback(() => {\n activeGridItemIdRef.current = null;\n setActiveGridItemId(null);\n returnStoryFocusId.set(null);\n }, [returnStoryFocusId]);\n\n useFocusOut(containerRef, () => setActiveGridItemId(null), []);\n\n const modifiedStoryMenu = useMemo(() => {\n const actions = [\n STORY_CONTEXT_MENU_ACTIONS.DELETE,\n STORY_CONTEXT_MENU_ACTIONS.RENAME,\n STORY_CONTEXT_MENU_ACTIONS.DUPLICATE,\n ];\n\n const menuItems = storyMenu.menuItems.map((item) => {\n const _item = { ...item };\n\n if (actions.includes(item?.value)) {\n _item.action = (story) => {\n manuallySetFocusOut();\n item.action(story);\n };\n }\n\n return _item;\n });\n\n return {\n ...storyMenu,\n handleMenuToggle,\n menuItems,\n };\n }, [handleMenuToggle, storyMenu, manuallySetFocusOut]);\n\n const memoizedStoryGrid = useMemo(\n () =>\n stories.map((story) => {\n return (\n setActiveGridItemId(story.id)}\n isActive={activeGridItemId === story.id}\n ref={(el) => {\n itemsRef.current[story.id] = el;\n }}\n key={story.id}\n pageSize={pageSize}\n renameStory={renameStory}\n story={story}\n storyMenu={modifiedStoryMenu}\n />\n );\n }),\n [activeGridItemId, modifiedStoryMenu, pageSize, renameStory, stories]\n );\n\n return (\n
\n \n {memoizedStoryGrid}\n \n
\n );\n};\n\nStoryGridView.propTypes = {\n stories: StoriesPropType,\n pageSize: PageSizePropType.isRequired,\n storyMenu: StoryMenuPropType,\n renameStory: RenameStoryPropType,\n returnStoryFocusId: PropTypes.shape({\n value: PropTypes.number,\n set: PropTypes.func,\n }),\n};\n\nexport default StoryGridView;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyGridView/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\n\nimport {\n formattedStoriesArray,\n STORYBOOK_PAGE_SIZE,\n} from '../../../../../../storybookUtils';\nimport { STORY_CONTEXT_MENU_ITEMS } from '../../../../../../constants';\nimport StoryGridView from '..';\n\nexport default {\n title: 'Dashboard/Views/MyStories/Content/GridView',\n component: StoryGridView,\n args: {\n bottomActionLabel: 'MY CTA',\n },\n argTypes: {\n handleMenuToggle: {\n action: 'handleMenuToggle',\n },\n handleMenuItemSelected: {\n action: 'handleMenuItemSelected',\n },\n },\n parameters: {\n controls: {\n include: [\n 'bottomActionLabel',\n 'handleMenuToggle',\n 'handleMenuItemSelected',\n ],\n },\n },\n};\nexport const _default = {\n render: function Render(args) {\n return (\n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyListItem/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { Icons } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport {\n STORY_PREVIEW_WIDTH,\n VIEWPORT_BREAKPOINT,\n} from '../../../../../constants';\nimport { TableRow, MoreVerticalButton } from '../../../../../components';\n\nexport const PreviewImage = styled.div`\n display: inline-block;\n background: ${({ theme }) => theme.colors.gradient.placeholder};\n width: ${STORY_PREVIEW_WIDTH[VIEWPORT_BREAKPOINT.THUMBNAIL]}px;\n height: ${STORY_PREVIEW_WIDTH[VIEWPORT_BREAKPOINT.THUMBNAIL] / (3 / 4)}px;\n object-fit: contain;\n border-radius: ${({ theme }) => theme.borders.radius.small};\n`;\nexport const PreviewWrapper = styled.div`\n position: relative;\n`;\n\nexport const LockIcon = styled(Icons.LockClosed)`\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 24px;\n display: block;\n margin: auto;\n background-color: ${({ theme }) => theme.colors.interactiveBg.brandNormal};\n color: ${({ theme }) => theme.colors.standard.white};\n border-radius: ${({ theme }) => theme.borders.radius.round};\n`;\n\nexport const StyledTableRow = styled(TableRow)`\n &:hover ${MoreVerticalButton}, &:focus-within ${MoreVerticalButton} {\n opacity: 1;\n }\n`;\n\nexport const TitleTableCellContainer = styled.div`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n\n ${MoreVerticalButton} {\n margin: 10px auto;\n }\n\n &:hover ${MoreVerticalButton}, &:active ${MoreVerticalButton} {\n opacity: 1;\n }\n`;\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/storyListItem/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useMemo } from '@googleforcreators/react';\nimport { getRelativeDisplayDate } from '@googleforcreators/date';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport { Headline, Text, TextSize } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport {\n InlineInputForm,\n StoryMenu,\n TableCell,\n TablePreviewCell,\n TableStatusCell,\n Tooltip,\n} from '../../../../../components';\nimport { generateStoryMenu } from '../../../../../components/popoverMenu/story-menu-generator';\nimport { DISPLAY_STATUS, STORY_STATUS } from '../../../../../constants';\nimport {\n RenameStoryPropType,\n StoryMenuPropType,\n StoryPropType,\n} from '../../../../../propTypes';\nimport { titleFormatted } from '../../../../../utils';\n\nimport {\n LockIcon,\n PreviewWrapper,\n PreviewImage,\n StyledTableRow,\n TitleTableCellContainer,\n} from './components';\n\nfunction onFocusSelectAll(e) {\n window.getSelection().selectAllChildren(e.target);\n}\n\nfunction onBlurDeselectAll() {\n window.getSelection().removeAllRanges();\n}\n\nexport const StoryListItem = ({\n story,\n renameStory,\n userId,\n storyMenu,\n storyStatus,\n}) => {\n const isLocked = useMemo(\n () => story?.locked && userId !== story?.lockUser.id,\n [story, userId]\n );\n\n const formattedTitle = titleFormatted(story.title);\n\n const generatedMenuItems = useMemo(\n () =>\n generateStoryMenu({\n menuItems: storyMenu.menuItems,\n story,\n isLocked,\n }),\n [storyMenu, story, isLocked]\n );\n\n const memoizedStoryMenu = useMemo(\n () =>\n generatedMenuItems.length ? (\n storyMenu.handleMenuToggle(id)}\n contextMenuId={storyMenu.contextMenuId}\n storyId={story.id}\n menuItems={generatedMenuItems}\n verticalAlign=\"center\"\n />\n ) : null,\n [generatedMenuItems, formattedTitle, storyMenu, story]\n );\n\n return (\n \n \n \n \n \n {isLocked && }\n \n \n \n \n \n {renameStory.id === story.id ? (\n \n renameStory.handleOnRenameStory(story, newTitle)\n }\n onEditCancel={renameStory.handleCancelRename}\n value={story.title}\n id={story.id}\n label={__('Rename story', 'web-stories')}\n />\n ) : (\n <>\n \n {formattedTitle}\n \n {memoizedStoryMenu}\n \n )}\n \n \n \n {story.author?.name || '—'}\n \n \n \n {getRelativeDisplayDate(story.createdGmt)}\n \n \n \n \n {getRelativeDisplayDate(story.modifiedGmt)}\n \n \n {storyStatus !== STORY_STATUS.DRAFT && (\n \n \n {DISPLAY_STATUS[story?.status]}\n \n \n )}\n \n );\n};\n\nStoryListItem.propTypes = {\n story: StoryPropType.isRequired,\n renameStory: RenameStoryPropType,\n userId: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),\n storyMenu: StoryMenuPropType.isRequired,\n storyStatus: PropTypes.string,\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/test/content.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\nimport { SnackbarProvider } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../../../testUtils';\nimport { VIEW_STYLE, STORY_STATUSES } from '../../../../../constants';\nimport LayoutProvider from '../../../../../components/layout/provider';\nimport Content from '..';\n\nconst fakeStories = [\n {\n id: 1,\n status: 'publish',\n title: 'Story A',\n pages: [{ id: '10', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n },\n {\n id: 2,\n status: 'draft',\n title: 'Story B',\n pages: [{ id: '20', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n },\n {\n id: 3,\n status: 'publish',\n title: 'Story C',\n pages: [{ id: '30', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n capabilities: {\n hasDeleteAction: false,\n hasEditAction: false,\n },\n },\n];\nconst pageSize = {\n width: 200,\n height: 300,\n};\n\ndescribe('Dashboard ', () => {\n afterEach(() => {\n jest.resetAllMocks();\n });\n\n it('should render the content grid with the correct story count.', () => {\n renderWithProviders(\n \n \n \n \n \n );\n\n expect(screen.getAllByTestId(/^story-grid-item/)).toHaveLength(\n fakeStories.length\n );\n });\n\n it('should show \"Start telling Stories.\" if no stories are present.', () => {\n renderWithProviders(\n \n \n \n \n \n );\n\n expect(screen.getByText('Start telling Stories.')).toBeInTheDocument();\n });\n\n it('should show \"Sorry, we couldn\\'t find any results matching \"scooby dooby doo\" if no stories are found for a search query are present.', () => {\n renderWithProviders(\n \n \n \n \n \n );\n\n expect(\n screen.getByText(\n 'Sorry, we couldn\\'t find any results matching \"scooby dooby doo\"'\n )\n ).toBeInTheDocument();\n });\n\n it('should show \"Sorry, we couldn\\'t find any results if no stories are found for a filter query are present.', () => {\n renderWithProviders(\n \n \n \n \n \n );\n\n expect(\n screen.getByText(\"Sorry, we couldn't find any results\")\n ).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/content/test/storiesView.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../../../testUtils';\nimport {\n STORY_SORT_OPTIONS,\n SORT_DIRECTION,\n VIEW_STYLE,\n STORY_STATUS,\n} from '../../../../../constants';\nimport StoriesView from '../storiesView';\nimport useStoryFilters from '../../filters/useStoryFilters';\n\nconst fakeStories = [\n {\n id: 1,\n status: 'publish',\n title: 'Story A',\n pages: [{ id: '10', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n featuredMediaUrl: 'http://localhost:9876/__static__/featured-media-1.png',\n capabilities: {\n hasEditAction: true,\n hasDeleteAction: true,\n },\n },\n {\n id: 2,\n status: 'draft',\n title: 'Story B',\n pages: [{ id: '20', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n featuredMediaUrl: 'http://localhost:9876/__static__/featured-media-2.png',\n capabilities: {\n hasEditAction: true,\n hasDeleteAction: true,\n },\n },\n {\n id: 3,\n status: 'publish',\n title: 'Story C',\n pages: [{ id: '30', elements: [] }],\n bottomTargetAction: 'https://example.com',\n link: 'https://example.com',\n editStoryLink: 'https://example.com',\n previewLink: 'https://example.com',\n featuredMediaUrl: 'http://localhost:9876/__static__/featured-media-3.png',\n locked: true,\n lockUser: {\n name: 'Batgirl',\n id: 898978979879,\n },\n capabilities: {\n hasEditAction: true,\n hasDeleteAction: true,\n },\n },\n];\n\njest.mock('../../filters/useStoryFilters', () => ({\n ...jest.requireActual('../../filters/useStoryFilters'),\n __esModule: true,\n default: jest.fn(),\n}));\n\nconst mockUseStoryFilters = useStoryFilters;\n\nconst updateSort = jest.fn();\n\nconst mockFilterState = {\n filters: [\n {\n key: 'status',\n filterId: STORY_STATUS.ALL,\n },\n ],\n filtersObject: {},\n sortObject: {\n orderby: STORY_SORT_OPTIONS.NAME,\n order: SORT_DIRECTION.ASC,\n },\n updateSort,\n};\n\ndescribe('Dashboard ', () => {\n beforeEach(() => {\n mockUseStoryFilters.mockImplementation(() => mockFilterState);\n });\n\n it(`should render stories as a grid when view is ${VIEW_STYLE.GRID}`, () => {\n renderWithProviders(\n ,\n {}\n );\n\n expect(screen.getAllByTestId(/^story-grid-item/)).toHaveLength(\n fakeStories.length\n );\n });\n\n describe('Loading stories', () => {\n beforeEach(() => {\n mockUseStoryFilters.mockImplementation(() => mockFilterState);\n });\n it('should be able to hide the grid while the stories are loading', () => {\n renderWithProviders(\n ,\n {}\n );\n\n expect(screen.queryByTestId(/^story-grid-item/)).not.toBeInTheDocument();\n });\n\n it('should be able to show the grid while stories are loading', () => {\n renderWithProviders(\n ,\n {}\n );\n\n expect(screen.queryAllByTestId(/^story-grid-item/)).toHaveLength(\n fakeStories.length\n );\n });\n\n it('should hide stories in the list view when stories are loading', () => {\n renderWithProviders(\n ,\n {}\n );\n\n expect(screen.queryByTestId(/^story-list-item/)).not.toBeInTheDocument();\n });\n\n it('should be able to show the list while stories are loading', () => {\n renderWithProviders(\n ,\n {}\n );\n\n expect(screen.queryAllByTestId(/^story-list-item/)).toHaveLength(\n fakeStories.length\n );\n });\n });\n\n describe('Locked story', () => {\n beforeEach(() => {\n mockUseStoryFilters.mockImplementation(() => mockFilterState);\n });\n it('should show a lock icon and helpful tooltip and aria text in list view when a story is being edited by another user', () => {\n renderWithProviders(\n ,\n {\n features: {},\n },\n {}\n );\n\n expect(screen.getAllByTestId(/^story-list-item/)).toHaveLength(\n fakeStories.length\n );\n\n const lockedStoryTitle = screen.getByText('Story C');\n expect(lockedStoryTitle).toContainHTML(\n `${fakeStories[2].title} (locked by ${fakeStories[2].lockUser.name})`\n );\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/author/useAuthorFilter.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useCallback } from '@googleforcreators/react';\nimport { __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport useApi from '../../../../../api/useApi';\n\nlet cachedPrimaryOptions = null;\n\n/**\n * Hook used for Author filter logic.\n * Initializes the author filters data.\n *\n * @return {Function} initializeAuthorFilter function to shape the author filter data.\n */\n\nfunction useAuthorFilter() {\n const { getAuthors } = useApi(\n ({\n actions: {\n usersApi: { getAuthors },\n },\n }) => ({\n getAuthors,\n })\n );\n\n /**\n * Query all the authors.\n * Initializes the primaryOptions and used to search and set queriedOptions.\n *\n * @param {string} search Search term for author names.\n * @return {Array} author data\n */\n const queryAuthors = useCallback(\n async (search) => {\n const data = await getAuthors(search);\n return data.map(({ id, name }) => ({\n id,\n name,\n }));\n },\n [getAuthors]\n );\n\n /**\n * Get author filters primaryOptions. Cache for later use.\n * This is needed to initialize the primaryOptions.\n * See design-system/src/component/datalist\n *\n * @see queryAuthors\n * @return {Promise} cached authors terms\n */\n const getPrimaryOptions = useCallback(async () => {\n if (!cachedPrimaryOptions) {\n cachedPrimaryOptions = await queryAuthors();\n }\n return cachedPrimaryOptions;\n }, [queryAuthors]);\n\n /**\n * Sets up the shape of the author filter data.\n *\n * @return {Object} author filter data\n */\n const initializeAuthorFilter = useCallback(() => {\n return {\n key: 'author',\n ariaLabel: __('Filter stories by author', 'web-stories'),\n placeholder: __('All Authors', 'web-stories'),\n searchPlaceholder: __('Search Authors', 'web-stories'),\n noMatchesFoundLabel: __('No authors found', 'web-stories'),\n query: queryAuthors,\n getPrimaryOptions,\n };\n }, [queryAuthors, getPrimaryOptions]);\n\n return initializeAuthorFilter;\n}\n\nexport default useAuthorFilter;\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n createContext,\n useReducer,\n useEffect,\n useCallback,\n useMemo,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\n\n/** @typedef {import('react')} Node */\n\n/**\n * Internal dependencies\n */\nimport reducer from '../../../filters/reducer';\nimport * as types from '../../../filters/types';\nimport useTaxonomyFilters from './taxonomy/useTaxonomyFilters';\nimport useAuthorFilter from './author/useAuthorFilter';\n\nexport const filterContext = createContext({\n state: {},\n actions: {},\n});\n\n/**\n * Keeps track of the current filters state.\n *\n * Each filter will have its own logic associated with\n * initialization and how to query terms.\n *\n * state.filters should be used for UI.\n * state.filtersObject should hold the key value pairs associated with filtering query params\n * eg {author: 44} where 'author' is whats being filtered on and '44' is the authors ID\n * thats being filtered for.\n *\n * @param {Object} root0 props for the provider\n * @param {Node} root0.children the children to be rendered\n * @return {Node} React node\n */\n\nexport default function StoryFiltersProvider({ children }) {\n // each filter type will have its own logic for initializing and querying\n const initializeTaxonomyFilters = useTaxonomyFilters();\n const initializeAuthorFilter = useAuthorFilter();\n\n const [state, dispatch] = useReducer(reducer, {\n filters: [],\n filtersObject: {},\n sortObject: {},\n });\n\n /**\n * Dispatch UPDATE_SORT with new data to update sort\n *\n * @param {string} key key property on one of the sort objects\n * @param {Object} value the properties with updated values\n * @return {void}\n */\n const updateSort = useCallback((values) => {\n dispatch({ type: types.UPDATE_SORT, payload: { type: 'story', values } });\n }, []);\n\n /**\n * Dispatch UPDATE_FILTER with new data for a given filter\n *\n * @param {string} key key property on one of the filter objects\n * @param {Object} value the properties with updated values\n * @return {void}\n */\n const updateFilter = useCallback((key, value) => {\n dispatch({ type: types.UPDATE_FILTER, payload: { key, value } });\n }, []);\n\n /**\n * Dispatch REGISTER_FILTERS with all the filters data\n *\n * @param {Array} payload array of filters data\n * @return {void}\n */\n const registerFilters = useCallback((value) => {\n dispatch({ type: types.REGISTER_FILTERS, payload: { value } });\n }, []);\n\n /**\n * Sets up the shape of the filters data\n * and calls registerFilters with all filters.\n *\n * @return {void}\n */\n const initializeStoryFilters = useCallback(async () => {\n const taxonomies = await initializeTaxonomyFilters();\n const author = initializeAuthorFilter();\n\n const filters = [...taxonomies, author].filter((filter) => Boolean(filter));\n\n if (filters.length) {\n registerFilters(filters);\n }\n }, [registerFilters, initializeAuthorFilter, initializeTaxonomyFilters]);\n\n const contextValue = useMemo(() => {\n return {\n state,\n actions: { updateFilter, updateSort, registerFilters },\n };\n }, [state, updateFilter, updateSort, registerFilters]);\n\n useEffect(() => {\n initializeStoryFilters();\n }, [initializeStoryFilters]);\n\n return (\n \n {children}\n \n );\n}\n\nStoryFiltersProvider.propTypes = {\n children: PropTypes.node,\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/StoryFiltersProvider/taxonomy/useTaxonomyFilters.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useCallback } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport useApi from '../../../../../api/useApi';\n\nconst cachedPrimaryOptions = {};\n\n/**\n * Hook used for taxonomy filters logic.\n * Initializes the taxonomy filters data.\n *\n * @return {Object} initializeTaxonomyFilters taxonomies and a function to shape the taxonoimes filter data.\n */\n\nfunction useTaxonomyFilters() {\n const { getTaxonomies, getTaxonomyTerms } = useApi(\n ({\n actions: {\n taxonomyApi: { getTaxonomies, getTaxonomyTerms },\n },\n }) => ({\n getTaxonomies,\n getTaxonomyTerms,\n })\n );\n\n /**\n * Query individual taxonomy data.\n * This is needed to initialize the primaryOptions and needed to search and set queriedOptions.\n *\n * @param {Object} taxonomy object holding taxonomy data,\n * including restBase and restPath used to fetch individual taxonomy terms\n * @param {string} search string use to query taxonomy by name\n * @return {Array} taxonomy terms\n */\n const queryTaxonomyTerms = useCallback(\n async (taxonomy, search) => {\n const { restBase, restPath } = taxonomy;\n const terms = await getTaxonomyTerms(restPath, { search, per_page: -1 });\n return terms.map((t) => ({\n ...t,\n restBase,\n restPath,\n }));\n },\n [getTaxonomyTerms]\n );\n\n /**\n * Get taxonomy terms for a given taxonomy. Cache for later use.\n * This is needed to initialize the primaryOptions.\n * See design-system/src/component/datalist\n *\n * @see queryTaxonomyTerms\n * @param {Object} taxonomy object holding taxonomy data,\n * including restBase and restPath used to fetch individual taxonomy terms\n * @return {Promise} cached taxonomy terms\n */\n const getPrimaryOptions = useCallback(\n async (taxonomy) => {\n const { restBase } = taxonomy;\n if (!cachedPrimaryOptions[restBase]) {\n cachedPrimaryOptions[restBase] = await queryTaxonomyTerms(taxonomy);\n }\n return cachedPrimaryOptions[restBase];\n },\n [queryTaxonomyTerms]\n );\n\n /**\n * Query all the taxonomies.\n * Sets up the shape of the taxonomy filters data\n *\n * @return {Promise} taxonomies filter data\n */\n const initializeTaxonomyFilters = useCallback(async () => {\n const taxonomies = await getTaxonomies({\n hierarchical: true,\n show_ui: true,\n });\n return taxonomies.map((taxonomy) => ({\n key: taxonomy.restBase,\n restPath: taxonomy.restPath,\n placeholder: taxonomy.labels.allItems,\n ariaLabel: taxonomy.labels.filterByItem,\n noMatchesFoundLabel: taxonomy.labels.notFound,\n searchPlaceholder: taxonomy.labels.searchItems,\n query: (search) => queryTaxonomyTerms(taxonomy, search),\n getPrimaryOptions: () => getPrimaryOptions(taxonomy),\n }));\n }, [queryTaxonomyTerms, getPrimaryOptions, getTaxonomies]);\n\n return initializeTaxonomyFilters;\n}\n\nexport default useTaxonomyFilters;\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/test/storyFiltersProvider.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { renderHook, act } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport StoryFiltersProvider from '../StoryFiltersProvider';\nimport useStoryFilters from '../useStoryFilters';\nimport { STORY_SORT_KEYS } from '../../../../../constants/stories';\n\njest.mock('../StoryFiltersProvider/taxonomy/useTaxonomyFilters', () => {\n const initializeTaxonomyFilters = () => Promise.resolve([]);\n return {\n __esModule: true,\n default: function useTaxonomyFilter() {\n return initializeTaxonomyFilters;\n },\n };\n});\n\njest.mock('../StoryFiltersProvider/author/useAuthorFilter', () => {\n const initializeAuthorFilter = () => null;\n return {\n __esModule: true,\n default: function useAuthorFilter() {\n return initializeAuthorFilter;\n },\n };\n});\n\ndescribe('provider', () => {\n it('should register filters and update filters', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useStoryFilters(), { wrapper });\n const filterKey = 'web_story_category';\n\n // register filter\n act(() => {\n result.current.actions.registerFilters([\n { key: filterKey, filterId: null },\n ]);\n });\n\n // shouldn't be able to register filters with the same key\n act(() => {\n result.current.actions.registerFilters([{ key: filterKey, filterId: 1 }]);\n });\n\n expect(result.current.state.filters).toHaveLength(1);\n let filter = result.current.state.filters.find((f) => f.key === filterKey);\n expect(filter).toBeDefined();\n expect(filter.filterId).toBeNull();\n\n // filters with falsy filterId's should not be in the filters object\n let filterObj = result.current.state.filtersObject;\n expect(filterObj).toMatchObject({});\n\n // update the filter\n act(() => {\n result.current.actions.updateFilter(filterKey, {\n filterId: 1,\n });\n });\n\n filter = result.current.state.filters.find((f) => f.key === filterKey);\n expect(filter).toMatchObject({\n filterId: 1,\n });\n\n filterObj = result.current.state.filtersObject;\n expect(filterObj).toMatchObject({\n [filterKey]: 1,\n });\n });\n\n it('should be able to update the sortObject if the acceptable keys are use', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useStoryFilters(), { wrapper });\n\n for (const key of Object.keys(STORY_SORT_KEYS)) {\n for (const value of Object.values(STORY_SORT_KEYS[key])) {\n act(() => {\n result.current.actions.updateSort({ [key]: value });\n });\n expect(result.current.state.sortObject).toMatchObject({ [key]: value });\n }\n }\n });\n\n it('should not be able to update the sortObject with arbitrary key value pairs', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useStoryFilters(), { wrapper });\n\n const unacceptableSortValues = {\n orderby: 'valueNotInSortKeyOrderby',\n order: 'up',\n };\n\n const unacceptableSortKeys = {\n sortby: 'title',\n sortorder: 'asc',\n };\n\n act(() => {\n result.current.actions.updateSort(unacceptableSortValues);\n });\n expect(result.current.state.sortObject).toMatchObject({});\n\n act(() => {\n result.current.actions.updateSort(unacceptableSortKeys);\n });\n expect(result.current.state.sortObject).toMatchObject({});\n });\n\n it('should not return sortObject if nothing changes', () => {\n const wrapper = ({ children }) => (\n {children}\n );\n\n const { result } = renderHook(() => useStoryFilters(), { wrapper });\n\n const acceptableSortObject = {\n orderby: 'title',\n order: 'asc',\n };\n\n const unacceptableSortKeys = {\n sortby: 'title',\n sortorder: 'asc',\n };\n\n act(() => {\n // set the sortObject to an acceptable sortObject\n result.current.actions.updateSort(acceptableSortObject);\n // try to set the sortObject to an unacceptable sortObject\n result.current.actions.updateSort(unacceptableSortKeys);\n });\n // the state shouldn't be updated if given an unacceptable sortObject\n expect(result.current.state.sortObject).toMatchObject(acceptableSortObject);\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/test/useAuthorFilter.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { renderHook, act } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport useAuthorFilter from '../StoryFiltersProvider/author/useAuthorFilter';\n\njest.mock('../../../../api/useApi', () => {\n const getAuthors = () => {\n return Promise.resolve([\n {\n id: 1,\n name: 'admin',\n },\n ]);\n };\n return {\n __esModule: true,\n default: function useApi() {\n return {\n getAuthors,\n };\n },\n };\n});\n\ndescribe('useAuthorFilter', () => {\n it('should set authors to return value of getAuthors', async () => {\n const {\n result: { current: initializeAuthorFilter },\n } = renderHook(() => useAuthorFilter());\n // flush promise queue\n await act(() => Promise.resolve());\n const filter = initializeAuthorFilter();\n const authors = await filter.getPrimaryOptions();\n expect(authors).toHaveLength(1);\n expect(authors.at(0)).toMatchObject({\n id: 1,\n name: 'admin',\n });\n });\n\n describe('initializeAuthorFilter', () => {\n it('should initialize author filter data', async () => {\n const {\n result: { current: initializeAuthorFilter },\n } = renderHook(() => useAuthorFilter());\n // flush promise queue\n await act(() => Promise.resolve());\n\n // initialize filter\n act(() => {\n const filter = initializeAuthorFilter();\n expect(filter.placeholder).toBe('All Authors');\n expect(filter.ariaLabel).toBe(`Filter stories by author`);\n expect(filter.noMatchesFoundLabel).toBe('No authors found');\n expect(filter.searchPlaceholder).toBe('Search Authors');\n });\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/test/useTaxonomyFilter.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { renderHook, act } from '@testing-library/react-hooks';\n\n/**\n * Internal dependencies\n */\nimport useTaxonomyFilters from '../StoryFiltersProvider/taxonomy/useTaxonomyFilters';\n\njest.mock('../../../../api/useApi', () => {\n const getTaxonomies = (args) => {\n const taxonomies = [\n {\n slug: 'tax1',\n hierarchical: true,\n restBase: 'tax1_Base',\n restPath: 'tax1/path',\n labels: {\n filterByItem: 'Filter by tax1',\n allItems: 'All Tax1',\n searchItems: 'Search Tax1',\n notFound: 'No tax1s found',\n },\n },\n {\n slug: 'tax2',\n hierarchical: false,\n restBase: 'tax2_Base',\n restPath: 'tax2/path',\n },\n {\n slug: 'tax3',\n hierarchical: true,\n restBase: 'tax3_Base',\n restPath: 'tax3/path',\n labels: {\n filterByItem: 'Filter by tax3',\n allItems: 'All Tax3',\n searchItems: 'Search Tax3',\n notFound: 'No tax3s found',\n },\n },\n ];\n return Promise.resolve(\n args.hierarchical\n ? taxonomies.filter((taxonomy) => taxonomy.hierarchical)\n : taxonomies\n );\n };\n const getTaxonomyTerms = (restPath, args) => {\n const fakeAPI = {\n 'tax1/path': [{ id: 1, name: 'tax1_term1' }],\n 'tax3/path': [\n { id: 3, name: 'tax3_term1' },\n { id: 4, name: 'tax3_term2' },\n ],\n };\n let terms = fakeAPI[restPath];\n if (args.search) {\n terms = terms.filter((term) => term.name.includes(args.search));\n }\n\n return Promise.resolve(terms);\n };\n return {\n __esModule: true,\n default: function useApi() {\n return {\n getTaxonomies,\n getTaxonomyTerms,\n };\n },\n };\n});\n\ndescribe('useTaxonomyFilters', () => {\n it('should initialize the hierarchial taxonomy filters data only', async () => {\n const {\n result: { current: initializeTaxonomyFilters },\n } = renderHook(() => useTaxonomyFilters());\n // flush promise queue\n await act(() => Promise.resolve());\n\n // taxonomy filters should only be hierarchical\n const filters = await initializeTaxonomyFilters();\n expect(filters).toHaveLength(2);\n\n // should correctly set restPath\n const filter3 = filters.find((f) => f.key === 'tax3_Base');\n expect(filter3).toMatchObject({\n restPath: 'tax3/path',\n });\n\n const filter1 = filters.find((f) => f.key === 'tax1_Base');\n expect(filter1).toMatchObject({\n restPath: 'tax1/path',\n });\n });\n\n describe('initializeTaxonomyFilters', () => {\n let initialize;\n beforeEach(async () => {\n const {\n result: { current: initializeTaxonomyFilters },\n } = renderHook(() => useTaxonomyFilters());\n\n initialize = initializeTaxonomyFilters;\n\n // flush promise queue\n await act(() => Promise.resolve());\n });\n\n it('should initialize taxonomy filters data', async () => {\n // initialize filters\n const filters = await initialize();\n expect(filters).toHaveLength(2);\n\n const filter1 = filters.at(0);\n expect(filter1.placeholder).toBe('All Tax1');\n expect(filter1.ariaLabel).toBe(`Filter by tax1`);\n expect(filter1.noMatchesFoundLabel).toBe('No tax1s found');\n expect(filter1.searchPlaceholder).toBe('Search Tax1');\n });\n\n it('should use the correct taxonomy for getPrimaryOptions and query', async () => {\n const filters = await initialize();\n const filter1 = filters.at(0);\n const filter2 = filters.at(1);\n\n // should call getPrimaryOptions with tax1 taxonomy\n const primaryOptions1 = await filter1.getPrimaryOptions.call();\n expect(primaryOptions1).toStrictEqual([\n {\n id: 1,\n name: 'tax1_term1',\n restBase: 'tax1_Base',\n restPath: 'tax1/path',\n },\n ]);\n // should call query with tax1 taxonomy and search term\n const query1 = await filter1.query('m1');\n expect(query1).toStrictEqual([\n {\n id: 1,\n name: 'tax1_term1',\n restBase: 'tax1_Base',\n restPath: 'tax1/path',\n },\n ]);\n\n // should call getPrimaryOptions with tax3 taxonomy\n const primaryOptions2 = await filter2.getPrimaryOptions.call();\n expect(primaryOptions2).toStrictEqual([\n {\n id: 3,\n name: 'tax3_term1',\n restBase: 'tax3_Base',\n restPath: 'tax3/path',\n },\n {\n id: 4,\n name: 'tax3_term2',\n restBase: 'tax3_Base',\n restPath: 'tax3/path',\n },\n ]);\n\n // should call query with tax3 taxonomy and search term\n const query2 = await filter2.query('m1');\n expect(query2).toStrictEqual([\n {\n id: 3,\n name: 'tax3_term1',\n restBase: 'tax3_Base',\n restPath: 'tax3/path',\n },\n ]);\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/filters/useStoryFilters.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { identity, useContextSelector } from '@googleforcreators/react';\n/**\n * Internal dependencies\n */\nimport { filterContext } from './StoryFiltersProvider';\n\nexport default function useStoryFilters(selector = identity) {\n return useContextSelector(filterContext, selector);\n}\n" }, { "path": "packages/dashboard/src/app/views/myStories/header/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useMemo,\n memo,\n useCallback,\n useDebouncedCallback,\n useEffect,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport { __ } from '@googleforcreators/i18n';\nimport { trackEvent } from '@googleforcreators/tracking';\n/**\n * Internal dependencies\n */\nimport {\n DASHBOARD_VIEWS,\n STORY_SORT_MENU_ITEMS,\n STORY_SORT_OPTIONS,\n TEXT_INPUT_DEBOUNCE,\n} from '../../../../constants';\nimport {\n StoriesPropType,\n TotalStoriesByStatusPropType,\n} from '../../../../propTypes';\nimport { ViewPropTypes } from '../../../../utils/useStoryView';\nimport { useDashboardResultsLabel } from '../../../../utils';\nimport { BodyViewOptions, PageHeading } from '../../shared';\nimport { getSearchOptions } from '../../utils';\nimport useStoryFilters from '../filters/useStoryFilters';\nimport StoryStatusToggle from './storyStatusToggle';\n\nfunction Header({ initialPageReady, stories, totalStoriesByStatus, view }) {\n const searchOptions = useMemo(() => getSearchOptions(stories), [stories]);\n\n const { filters, sortObject, updateFilter, updateSort, registerFilters } =\n useStoryFilters(\n ({\n state: { filters, sortObject },\n actions: { updateFilter, updateSort, registerFilters },\n }) => ({\n filters,\n updateFilter,\n sortObject,\n updateSort,\n registerFilters,\n })\n );\n const [dropDownFilters, statusFilterValue, searchFilterValue] =\n useMemo(() => {\n const status = filters.find(({ key }) => key === 'status');\n const search = filters.find(({ key }) => key === 'search');\n const rest = filters.filter(\n ({ key }) => !['status', 'search'].includes(key)\n );\n\n return [rest, status?.filterId, search?.filterId];\n }, [filters]);\n\n const totalResults = useMemo(\n () =>\n (statusFilterValue?.split(',') || []).reduce(\n (total, filterKey) => (total += totalStoriesByStatus[filterKey] || 0),\n 0\n ),\n [statusFilterValue, totalStoriesByStatus]\n );\n\n const resultsLabel = useDashboardResultsLabel({\n currentFilter: statusFilterValue,\n isActiveSearch: Boolean(searchFilterValue),\n totalResults,\n view: DASHBOARD_VIEWS.DASHBOARD,\n });\n\n const debouncedSearchChange = useDebouncedCallback(async (value) => {\n await trackEvent('search', {\n search_type: 'dashboard',\n search_term: value,\n });\n updateFilter('search', { filterId: value });\n }, TEXT_INPUT_DEBOUNCE);\n\n useEffect(() => {\n registerFilters([{ key: 'search' }]);\n }, [registerFilters]);\n\n const clearSearch = useCallback(\n () => updateFilter('search', { filterId: null }),\n [updateFilter]\n );\n\n return (\n <>\n \n \n \n\n \n \n );\n}\n\nHeader.propTypes = {\n initialPageReady: PropTypes.bool,\n stories: StoriesPropType,\n totalStoriesByStatus: TotalStoriesByStatusPropType,\n view: ViewPropTypes.isRequired,\n};\n\nexport default memo(Header);\n" }, { "path": "packages/dashboard/src/app/views/myStories/header/stories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport Header from '..';\nimport {\n STORY_SORT_OPTIONS,\n SORT_DIRECTION,\n VIEW_STYLE,\n STORY_STATUS,\n} from '../../../../../constants';\nimport formattedStoriesArray from '../../../../../dataUtils/formattedStoriesArray';\nimport { Layout } from '../../../../../components';\n\nexport default {\n title: 'Dashboard/Views/MyStories/Header',\n component: Header,\n args: {\n status: 'all',\n statusValue: STORY_STATUS.ALL,\n value: STORY_SORT_OPTIONS.NAME,\n direction: SORT_DIRECTION.ASC,\n keyword: '',\n style: VIEW_STYLE.GRID,\n all: 32,\n draft: 19,\n publish: 13,\n },\n argTypes: {\n setFilter: { action: 'set filter' },\n setSort: { action: 'set sort' },\n setDirection: { action: 'set sort direction' },\n setKeyword: { action: 'set search' },\n toggleStyle: { action: 'toggle view style' },\n statusValue: { options: STORY_STATUS, control: 'select' },\n value: {\n options: STORY_SORT_OPTIONS,\n control: 'radio',\n name: 'Story sort options',\n },\n direction: { options: SORT_DIRECTION, control: 'radio' },\n style: { options: VIEW_STYLE, control: 'radio' },\n },\n parameters: {\n controls: {\n include: [\n 'statusValue',\n 'Story sort options',\n 'direction',\n 'style',\n 'draft',\n 'publish',\n 'setSort',\n 'toggleStyle',\n 'keyword',\n ],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n const filter = {\n status: args.status,\n value: args.statusValue,\n set: args.setFilter,\n };\n const sort = {\n value: args.value,\n direction: args.direction,\n set: args.setSort,\n setDirection: args.setDirection,\n };\n const search = {\n keyword: args.keyword,\n setKeyword: args.setKeyword,\n };\n const view = {\n style: args.style,\n toggleStyle: args.toggleStyle,\n pageSize: { width: 309, height: 206 },\n };\n const totalStoriesByStatus = {\n all: args.all,\n draft: args.draft,\n publish: args.publish,\n };\n\n const defaultProps = {\n filter,\n view,\n search,\n stories: formattedStoriesArray,\n sort,\n totalStoriesByStatus,\n };\n return (\n \n
\n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/myStories/header/storyStatusToggle.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useCallback, useEffect, useMemo } from '@googleforcreators/react';\nimport { Pill } from '@googleforcreators/design-system';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport useStoryFilters from '../filters/useStoryFilters';\nimport { DEFAULT_FILTERS, STORY_STATUSES } from '../../../../constants';\nimport { TotalStoriesByStatusPropType } from '../../../../propTypes';\n\nconst StyledPill = styled(Pill)`\n margin: 0 2px;\n white-space: nowrap;\n\n & > span {\n padding-left: 8px;\n color: ${({ theme, isActive }) =>\n isActive ? theme.colors.gray[20] : theme.colors.fg.tertiary};\n }\n`;\n\nfunction StoryStatusToggle({\n initialPageReady,\n totalStoriesByStatus,\n currentStatus,\n}) {\n const { updateFilter, registerFilters } = useStoryFilters(\n ({ actions: { updateFilter, registerFilters } }) => ({\n updateFilter,\n registerFilters,\n })\n );\n\n const handleStatusChange = useCallback(\n (value) => {\n updateFilter('status', { filterId: value });\n },\n [updateFilter]\n );\n\n useEffect(() => {\n registerFilters([\n {\n key: 'status',\n filterId: DEFAULT_FILTERS.filters.status,\n },\n ]);\n }, [registerFilters]);\n\n /**\n * The total stories based on the given filters\n */\n const totalStories = useMemo(\n () =>\n Object.keys(totalStoriesByStatus).reduce(\n (prev, cur) => prev + totalStoriesByStatus[cur],\n 0\n ),\n [totalStoriesByStatus]\n );\n\n /**\n * Set up the status data for the UI.\n * Only show statuses that correlate to the filtered stories, and the current status.\n */\n const statuses = useMemo(() => {\n return STORY_STATUSES.filter(({ status }) => {\n return (\n (Boolean(status in totalStoriesByStatus) &&\n totalStoriesByStatus[status] > 0) ||\n status === currentStatus\n );\n }).map(({ label, status, value }) => {\n const count = totalStoriesByStatus[status];\n const disabled = Boolean(!count);\n const ariaLabel = sprintf(\n /* translators: %s is story status */\n __('Filter stories by %s', 'web-stories'),\n label\n );\n const isActive = currentStatus === value;\n return { ariaLabel, disabled, isActive, value, label, count };\n });\n }, [totalStoriesByStatus, currentStatus]);\n\n if (\n !initialPageReady ||\n !totalStories ||\n (totalStoriesByStatus && Object.keys(totalStoriesByStatus).length === 0)\n ) {\n return null;\n }\n\n return (\n <>\n {statuses.map(\n ({ ariaLabel, disabled, isActive, value, label, count }) => {\n return (\n handleStatusChange(value)}\n isActive={isActive}\n disabled={disabled}\n aria-label={ariaLabel}\n >\n {label}\n {count}\n \n );\n }\n )}\n \n );\n}\n\nStoryStatusToggle.propTypes = {\n initialPageReady: PropTypes.bool,\n totalStoriesByStatus: TotalStoriesByStatusPropType,\n currentStatus: PropTypes.string,\n};\n\nexport default StoryStatusToggle;\n" }, { "path": "packages/dashboard/src/app/views/myStories/header/test/header.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { fireEvent, waitFor, screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport {\n STORY_SORT_OPTIONS,\n VIEW_STYLE,\n STORY_STATUS,\n} from '../../../../../constants';\nimport LayoutProvider from '../../../../../components/layout/provider';\nimport { renderWithProviders } from '../../../../../testUtils';\nimport Header from '..';\nimport useStoryFilters from '../../filters/useStoryFilters';\n\njest.mock('../../filters/useStoryFilters', () => ({\n ...jest.requireActual('../../filters/useStoryFilters'),\n __esModule: true,\n default: jest.fn(),\n}));\n\nconst mockUseStoryFilters = useStoryFilters;\n\nconst fakeStories = [\n {\n id: 1,\n status: 'publish',\n title: 'Story A',\n pages: [{ id: '10' }],\n bottomTargetAction: 'https://example.com',\n editStoryLink: () => {},\n },\n {\n id: 2,\n status: 'draft',\n title: 'Story B',\n pages: [{ id: '20' }],\n bottomTargetAction: 'https://example.com',\n editStoryLink: () => {},\n },\n {\n id: 3,\n status: 'publish',\n title: 'Story C',\n pages: [{ id: '30' }],\n bottomTargetAction: 'https://example.com',\n editStoryLink: () => {},\n },\n];\n\njest.mock('../../../../api/useApi', () => {\n const getTaxonomies = () => {\n return Promise.resolve([]);\n };\n const getTaxonomyTerms = () => {\n return Promise.resolve([]);\n };\n return {\n __esModule: true,\n default: function useApi() {\n return {\n getTaxonomies,\n getTaxonomyTerms,\n };\n },\n };\n});\n\nconst updateSort = jest.fn();\nconst updateFilter = jest.fn();\n\nconst mockFilterState = {\n filters: [\n {\n key: 'status',\n filterId: STORY_STATUS.ALL,\n },\n ],\n filtersObject: {},\n sortObject: {\n orderby: STORY_SORT_OPTIONS.DATE_CREATED,\n },\n registerFilters: () => {},\n updateFilter,\n updateSort,\n};\n\ndescribe('Dashboard
', () => {\n beforeEach(() => {\n mockUseStoryFilters.mockImplementation(() => mockFilterState);\n });\n\n it('should have results label that says \"Viewing all stories\" on initial page view', () => {\n renderWithProviders(\n \n \n \n );\n expect(screen.getByText('Viewing all stories')).toBeInTheDocument();\n });\n\n it('should have results label that says \"Viewing drafts\" when filter is set to drafts', () => {\n mockUseStoryFilters.mockImplementation(() => ({\n ...mockFilterState,\n filters: [{ key: 'status', filterId: STORY_STATUS.DRAFT }],\n }));\n renderWithProviders(\n \n \n \n );\n expect(screen.getByText('Viewing drafts')).toBeInTheDocument();\n });\n\n it('should have 3 toggle buttons, one for each status that say how many items belong to that status', () => {\n renderWithProviders(\n \n \n \n );\n\n const allStoriesButton = screen.getByRole('button', {\n name: /Filter stories by All Stories/,\n });\n\n const draftsButton = screen.getByRole('button', {\n name: /Filter stories by Drafts/,\n });\n const publishedButton = screen.getByRole('button', {\n name: /Filter stories by Published/,\n });\n\n const scheduledButton = screen.getByRole('button', {\n name: /Filter stories by Scheduled/,\n });\n\n expect(allStoriesButton).toHaveTextContent('All Stories19');\n expect(draftsButton).toHaveTextContent('Drafts9');\n expect(publishedButton).toHaveTextContent('Published10');\n expect(scheduledButton).toHaveTextContent('Scheduled10');\n\n expect(screen.queryByText('Private')).not.toBeInTheDocument();\n });\n\n it('should show the private tab only when there are private stories.', () => {\n renderWithProviders(\n \n \n \n );\n\n const allStoriesButton = screen.getByRole('button', {\n name: /Filter stories by All Stories/,\n });\n\n const draftsButton = screen.getByRole('button', {\n name: /Filter stories by Drafts/,\n });\n const publishedButton = screen.getByRole('button', {\n name: /Filter stories by Published/,\n });\n const privateButton = screen.getByRole('button', {\n name: /Filter stories by Private/,\n });\n\n expect(allStoriesButton).toHaveTextContent('All Stories19');\n expect(draftsButton).toHaveTextContent('Drafts9');\n expect(publishedButton).toHaveTextContent('Published10');\n expect(privateButton).toHaveTextContent('Private2');\n });\n\n it('should not show the private tab even if there are private stories when the user does not have permission.', () => {\n renderWithProviders(\n \n \n \n );\n const allStoriesButton = screen.getByRole('button', {\n name: /Filter stories by All Stories/,\n });\n\n const draftsButton = screen.getByRole('button', {\n name: /Filter stories by Drafts/,\n });\n const publishedButton = screen.getByRole('button', {\n name: /Filter stories by Published/,\n });\n expect(allStoriesButton).toHaveTextContent('All Stories19');\n expect(draftsButton).toHaveTextContent('Drafts9');\n expect(publishedButton).toHaveTextContent('Published10');\n expect(screen.queryByText('Private')).not.toBeInTheDocument();\n });\n\n it('should call the set keyword function when new text is searched', async () => {\n renderWithProviders(\n \n \n \n );\n fireEvent.change(screen.getByPlaceholderText('Search Stories'), {\n target: { value: 'Hermione Granger' },\n });\n await waitFor(() => {\n expect(updateFilter).toHaveBeenCalledWith('search', {\n filterId: 'Hermione Granger',\n });\n });\n });\n\n it('should call the set sort function when a new sort is selected', async () => {\n renderWithProviders(\n \n \n \n );\n fireEvent.click(screen.getByLabelText('Choose sort option for display'));\n fireEvent.click(screen.getByText('Last Modified'));\n\n await waitFor(() => {\n expect(updateSort).toHaveBeenCalledWith({ orderby: 'modified' });\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { useEffect, useMemo, useRef } from '@googleforcreators/react';\n\n/**\n * Internal dependencies\n */\nimport { ScrollToTop, Layout } from '../../../components';\nimport { useStoryView } from '../../../utils';\nimport { useConfig } from '../../config';\nimport useApi from '../../api/useApi';\nimport useStoryFilters from './filters/useStoryFilters';\nimport Content from './content';\nimport Header from './header';\nimport StoryFiltersProvider from './filters/StoryFiltersProvider';\n\nfunction MyStoriesView() {\n const {\n duplicateStory,\n fetchStories,\n trashStory,\n updateStory,\n allPagesFetched,\n isLoading,\n stories,\n storiesOrderById,\n totalPages,\n totalStoriesByStatus,\n } = useApi(\n ({\n actions: {\n storyApi: { duplicateStory, fetchStories, trashStory, updateStory },\n },\n state: {\n stories: {\n allPagesFetched,\n isLoading,\n stories,\n storiesOrderById,\n totalPages,\n totalStoriesByStatus,\n },\n },\n }) => ({\n duplicateStory,\n fetchStories,\n trashStory,\n updateStory,\n allPagesFetched,\n isLoading,\n stories,\n storiesOrderById,\n totalPages,\n totalStoriesByStatus,\n })\n );\n const { filtersObject, sortObject } = useStoryFilters(\n ({ state: { filtersObject, sortObject } }) => ({\n filtersObject,\n sortObject,\n })\n );\n\n const { apiCallbacks, canViewDefaultTemplates } = useConfig();\n const isMountedRef = useRef(false);\n\n useEffect(() => {\n isMountedRef.current = true;\n\n return () => {\n isMountedRef.current = false;\n };\n }, []);\n\n const { page, view, showStoriesWhileLoading, initialPageReady } =\n useStoryView({\n filtersObject,\n sortObject,\n isLoading,\n totalPages,\n });\n\n useEffect(() => {\n fetchStories({\n page: page.value,\n filters: filtersObject,\n sort: sortObject,\n });\n }, [fetchStories, filtersObject, sortObject, page.value, apiCallbacks]);\n\n const orderedStories = useMemo(() => {\n return storiesOrderById.map((storyId) => {\n return stories[storyId];\n });\n }, [stories, storiesOrderById]);\n\n return (\n \n \n\n \n\n \n \n \n \n );\n}\n\nexport default function MyStories() {\n return (\n \n \n \n );\n}\n" }, { "path": "packages/dashboard/src/app/views/myStories/karma/myStories.karma.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { within } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport Fixture from '../../../../karma/fixture';\nimport {\n STORY_STATUS,\n STORY_STATUSES,\n STORY_VIEWING_LABELS,\n STORY_SORT_MENU_ITEMS,\n} from '../../../../constants';\nimport useApi from '../../../api/useApi';\n\ndescribe('CUJ: Creator can view their stories in grid view', () => {\n let fixture;\n let dashboardGridItems = [];\n\n beforeEach(async () => {\n fixture = new Fixture();\n await fixture.render();\n dashboardGridItems = fixture.screen.getAllByTestId(/^story-grid-item/);\n });\n\n afterEach(() => {\n fixture.restore();\n });\n\n async function getStoriesState() {\n const {\n state: { stories },\n } = await fixture.renderHook(() => useApi());\n\n return stories;\n }\n\n async function focusOnGridByKeyboard() {\n let limit = 0;\n const gridContainer = fixture.screen.getByTestId('dashboard-grid-list');\n\n while (!gridContainer.contains(document.activeElement) && limit < 20) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n limit++;\n }\n\n if (!gridContainer.contains(document.activeElement)) {\n throw new Error('could not focus on grid');\n }\n }\n\n async function getContextMenuItem(contextMenuText, storyIndex = 0) {\n const storyButtons = fixture.screen.getAllByTestId(/story-context-button-/);\n const selectedStory = storyButtons[storyIndex];\n await focusOnGridByKeyboard();\n\n for (let i = 0; i <= storyIndex; i++) {\n const expectedStory = storyButtons[i];\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('right');\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n expect(expectedStory).toEqual(document.activeElement);\n }\n\n // we should have focused the indicated story in the grid\n expect(selectedStory).toEqual(document.activeElement);\n\n await fixture.events.keyboard.press('Enter');\n\n // now the focused item should be the first context menu item\n const contextMenuLists = fixture.screen.getAllByTestId(/context-menu-list/);\n const contextMenuList = contextMenuLists[storyIndex];\n\n // it is focused on the link within the list\n const contextMenuItem = within(contextMenuList).getByRole('menuitem', {\n name: contextMenuText,\n });\n\n let limit = 0;\n while (\n document.activeElement.textContent !== contextMenuText &&\n limit < 8\n ) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('down');\n limit++;\n }\n\n expect(contextMenuItem).toEqual(document.activeElement);\n return contextMenuItem;\n }\n\n describe('Creator should see dashboard and be able to navigate', () => {\n it('should render without aXe violations', async () => {\n const { storiesOrderById } = await getStoriesState();\n\n expect(dashboardGridItems.length).toEqual(storiesOrderById.length);\n });\n\n it('should navigate to Explore Templates', async () => {\n const navigation = fixture.screen.queryByRole('navigation');\n const utils = within(navigation);\n\n const exploreTemplatesMenuItem = utils.getByText(/^Explore Templates/);\n\n expect(exploreTemplatesMenuItem).toBeTruthy();\n\n await fixture.events.click(exploreTemplatesMenuItem);\n const templatesGridEl = await fixture.screen.findByText(\n 'Viewing all templates'\n );\n expect(templatesGridEl).toBeTruthy();\n });\n });\n\n describe('Creator should be prevented from performing basic updates on locked stories from dashboard', () => {\n let utils;\n let moreOptionsButton;\n\n beforeEach(async () => {\n const lockedStory = dashboardGridItems[1];\n await fixture.events.hover(lockedStory);\n\n utils = within(lockedStory);\n moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n });\n\n it('should not Rename a locked story', () => {\n const rename = utils.getByText(/^Rename/);\n expect(rename.hasAttribute('disabled')).toBe(true);\n });\n\n it('should not delete a locked story', () => {\n const deleteStory = utils.getByText(/^Delete/);\n expect(deleteStory.hasAttribute('disabled')).toBe(true);\n });\n });\n\n describe('Creator should be able to perform basic updates to stories from dashboard', () => {\n let utils;\n let moreOptionsButton;\n\n beforeEach(async () => {\n const firstStory = dashboardGridItems[0];\n await fixture.events.hover(firstStory);\n\n utils = within(firstStory);\n moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n });\n\n it('should Rename a story', async () => {\n const rename = utils.getByText(/^Rename/);\n await fixture.events.click(rename);\n\n const input = fixture.screen.getByRole('textbox');\n const inputLength = input.value.length;\n\n for (let iter = 0; iter < inputLength; iter++) {\n // disable eslint to prevent overlapping .act calls\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('Backspace');\n }\n\n await fixture.events.keyboard.type('A New Title');\n\n await fixture.events.keyboard.press('Enter');\n\n expect(\n utils.getByRole('heading', { level: 3, name: 'A New Title' })\n ).toBeTruthy();\n });\n\n it('should Duplicate a story', async () => {\n const duplicate = utils.getByText(/^Duplicate/);\n await fixture.events.click(duplicate);\n\n const updatedStories = fixture.screen.getAllByTestId(/^story-grid-item/);\n const copiedStory = within(updatedStories[0]).getByRole('heading', {\n level: 3,\n });\n expect(copiedStory.innerText).toContain('(Copy)');\n });\n\n it('should Delete a story', async () => {\n const deleteStory = utils.getByText(/^Delete/);\n await fixture.events.click(deleteStory);\n\n const confirmDeleteButton = fixture.screen.getByRole('button', {\n name: /^Confirm deleting story/,\n });\n\n await fixture.events.click(confirmDeleteButton);\n\n expect(fixture.screen.getAllByTestId(/^story-grid-item/).length).toEqual(\n dashboardGridItems.length - 1\n );\n });\n\n it('should not Delete a story if Cancel is clicked in the confirmation modal', async () => {\n const deleteStory = utils.getByText(/^Delete/);\n await fixture.events.click(deleteStory);\n\n const cancel = fixture.screen.getByRole('button', {\n name: /^Cancel deleting story/,\n });\n\n await fixture.events.click(cancel);\n\n expect(fixture.screen.getAllByTestId(/^story-grid-item/).length).toEqual(\n dashboardGridItems.length\n );\n });\n });\n\n describe('Creator can filter their stories by status', () => {\n it('should switch to the Drafts Tab', async () => {\n const { stories } = await getStoriesState();\n const numDrafts = Object.values(stories).filter(\n ({ status }) => status === STORY_STATUS.DRAFT\n ).length;\n\n expect(numDrafts).toBeGreaterThan(0);\n\n const draftsTabButton = fixture.screen.getByRole('button', {\n name: new RegExp('^Filter stories by ' + STORY_STATUSES[1].label),\n });\n\n await fixture.events.click(draftsTabButton);\n\n const viewDraftsText = fixture.screen.getByText(\n (_, node) =>\n node.innerHTML === STORY_VIEWING_LABELS[STORY_STATUS.DRAFT](numDrafts)\n );\n\n expect(viewDraftsText).toBeTruthy();\n\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n expect(storyElements.length).toEqual(numDrafts);\n });\n\n it('should switch to the Published Tab', async () => {\n const { stories } = await getStoriesState();\n const numPublished = Object.values(stories).filter(\n ({ status }) => status === STORY_STATUS.PUBLISH\n ).length;\n\n expect(numPublished).toBeGreaterThan(0);\n\n const publishedTabButton = fixture.screen.getByRole('button', {\n name: new RegExp('^Filter stories by ' + STORY_STATUSES[3].label),\n });\n\n expect(publishedTabButton).toBeTruthy();\n\n await fixture.events.click(publishedTabButton);\n\n const viewPublishedText = fixture.screen.getByText(\n (_, node) =>\n node.innerHTML ===\n STORY_VIEWING_LABELS[STORY_STATUS.PUBLISH](numPublished)\n );\n expect(viewPublishedText).toBeTruthy();\n\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n expect(storyElements.length).toEqual(numPublished);\n });\n });\n\n describe('Creator can search dashboard stories by story names', () => {\n it('should filter stories using the search input', async () => {\n const { stories } = await getStoriesState();\n\n const firstStoryTitle = Object.values(stories)[0].title;\n\n const searchInput = fixture.screen.getByPlaceholderText('Search Stories');\n\n expect(searchInput).toBeTruthy();\n\n await fixture.events.focus(searchInput);\n\n await fixture.events.keyboard.type(firstStoryTitle);\n\n // Wait for the debounce\n await fixture.events.sleep(500);\n\n const storyElements =\n await fixture.screen.findAllByTestId(/^story-context-menu-/);\n\n expect(storyElements.length).toEqual(\n Object.values(stories).filter(({ title }) =>\n title.includes(firstStoryTitle)\n ).length\n );\n });\n\n it('should look at options in search menu and select one with keyboard', async () => {\n const { stories } = await getStoriesState();\n\n const firstStoryTitle = Object.values(stories)[0].title;\n\n const searchInput = fixture.screen.getByPlaceholderText('Search Stories');\n\n expect(searchInput).toBeTruthy();\n\n await fixture.events.focus(searchInput);\n\n await fixture.events.keyboard.type(firstStoryTitle.substring(0, 1)); // get first to characters of title so that other options come up too\n\n // Wait for the debounce\n await fixture.events.sleep(300);\n\n const searchOptions = fixture.screen.getByRole('listbox');\n expect(searchOptions).toBeTruthy();\n\n const activeListItems = within(searchOptions).queryAllByRole('option');\n\n await fixture.events.keyboard.press('down');\n\n expect(activeListItems[0]).toEqual(document.activeElement);\n\n // focus should move to the search input when keydown on 'up' from first list item\n await fixture.events.keyboard.press('up');\n\n expect(searchInput).toEqual(document.activeElement);\n await fixture.events.sleep(300);\n // key down to the bottom of the available search options\n // plus once more beyond available search options to make sure focus stays intact\n for (let iter = 0; iter < activeListItems.length + 1; iter++) {\n // disable eslint to prevent overlapping .act calls\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('down');\n }\n await fixture.events.sleep(300);\n expect(activeListItems[activeListItems.length - 1]).toBe(\n document.activeElement\n );\n\n await fixture.events.keyboard.press('Enter');\n\n const selectedStoryTitle =\n Object.values(stories)[activeListItems.length - 1].title;\n\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n\n expect(storyElements.length).toEqual(\n Object.values(stories).filter(({ title }) =>\n title.includes(selectedStoryTitle)\n ).length\n );\n });\n });\n\n describe('Creator can sort their stories', () => {\n let sortDropdown;\n beforeEach(() => {\n sortDropdown = fixture.screen.getByLabelText(\n 'Choose sort option for display'\n );\n });\n\n const getRenderedStoriesById = () => {\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n const renderedStoriesById = storyElements.map(({ dataset }) =>\n Number(dataset['testid'].split('-').slice(-1)[0])\n );\n return renderedStoriesById;\n };\n\n const getStoriesOrderById = () => getStoriesState();\n\n it('should sort by Date Created', async () => {\n expect(sortDropdown).toBeTruthy();\n\n await fixture.events.click(sortDropdown);\n\n const dateCreated = fixture.screen.getByText(\n new RegExp(`^${STORY_SORT_MENU_ITEMS[1].label}$`)\n );\n\n expect(dateCreated).toBeTruthy();\n\n await fixture.events.click(dateCreated);\n\n const renderedStoriesById = getRenderedStoriesById();\n const { storiesOrderById } = await getStoriesOrderById();\n\n expect(renderedStoriesById).toEqual(storiesOrderById);\n });\n\n it('should sort by Last Modified by default', async () => {\n const { storiesOrderById } = await getStoriesOrderById();\n const renderedStoriesById = getRenderedStoriesById();\n\n expect(renderedStoriesById).toEqual(storiesOrderById);\n });\n\n it('should sort by Name', async () => {\n expect(sortDropdown).toBeTruthy();\n\n await fixture.events.click(sortDropdown);\n\n const name = fixture.screen.getByText(\n new RegExp(`^${STORY_SORT_MENU_ITEMS[0].label}$`)\n );\n\n expect(name).toBeTruthy();\n\n await fixture.events.click(name);\n\n const renderedStoriesById = getRenderedStoriesById();\n const { storiesOrderById } = await getStoriesOrderById();\n expect(renderedStoriesById).toEqual(storiesOrderById);\n });\n\n it('should sort by Created By', async () => {\n expect(sortDropdown).toBeTruthy();\n\n await fixture.events.click(sortDropdown);\n\n const createdBy = fixture.screen.getByText(\n new RegExp(`^${STORY_SORT_MENU_ITEMS[3].label}$`)\n );\n\n expect(createdBy).toBeTruthy();\n\n await fixture.events.click(createdBy);\n\n const renderedStoriesById = getRenderedStoriesById();\n const { storiesOrderById } = await getStoriesOrderById();\n expect(renderedStoriesById).toEqual(storiesOrderById);\n });\n\n it('should filter by author', async () => {\n const originalStoryAuthorsNames = fixture.screen\n .getAllByTestId(/^story-grid-item/)\n .map((storyThumb) => storyThumb.innerText);\n\n // click the author toggle\n const authorDropdown = fixture.screen.getByLabelText(\n 'Filter stories by author'\n );\n expect(authorDropdown).toBeTruthy();\n await fixture.events.click(authorDropdown);\n\n // find all author filters\n const authorSelect = await fixture.screen.findByLabelText(\n /^Option List Selector$/\n );\n expect(authorSelect).toBeTruthy();\n\n // click the first author\n const firstAuthor = within(authorSelect).getAllByRole('option')?.[0];\n expect(firstAuthor).toBeTruthy();\n const firstAuthorName = firstAuthor.innerText;\n await fixture.events.click(firstAuthor);\n\n // Check that not all the stories were from the first author originally\n expect(\n originalStoryAuthorsNames.some((name) => name !== firstAuthorName)\n ).toBeTruthy();\n\n // see that all rendered stories are by the clicked author\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n for (const storyThumb of storyElements) {\n const authorEl = within(storyThumb).getByText(firstAuthorName);\n expect(authorEl).toBeDefined();\n }\n });\n\n it('should filter by category', async () => {\n const { stories } = await getStoriesState();\n let renderedStoriesById = getRenderedStoriesById();\n // click the category dropdown\n const categoryDropdown =\n fixture.screen.getByLabelText('Filter by category');\n expect(categoryDropdown).toBeTruthy();\n await fixture.events.click(categoryDropdown);\n\n // find all category filters\n const categorySelect = await fixture.screen.findByLabelText(\n /^Option List Selector$/\n );\n expect(categorySelect).toBeTruthy();\n\n // click the first category\n const firstCategory = within(categorySelect).getAllByRole('option')?.[0];\n expect(firstCategory).toBeTruthy();\n const firstCategoryName = firstCategory.innerText;\n await fixture.events.click(firstCategory);\n\n // Check that not all the stories have the first category originally\n const found = renderedStoriesById.map(\n (id) => !stories[id].categories.includes(firstCategoryName)\n );\n expect(found.length).toBeGreaterThan(0);\n\n // see that all rendered stories have the selected category\n renderedStoriesById = getRenderedStoriesById();\n renderedStoriesById.every((id) =>\n stories[id].categories.includes(firstCategoryName)\n );\n });\n });\n\n describe('Creator can navigate and use the Dashboard via keyboard', () => {\n let storyCards = [];\n\n beforeEach(async () => {\n storyCards = fixture.screen.getAllByTestId(/story-context-button-/);\n await focusOnGridByKeyboard();\n });\n\n it('should navigate the grid via keyboard', async () => {\n for (let i = 0; i < storyCards.length; i++) {\n const expectedStory = storyCards[i];\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('right');\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n expect(expectedStory).toEqual(document.activeElement);\n }\n });\n\n it('should focus on context menu items via keyboard', async () => {\n const [selectedStory] = storyCards;\n await fixture.events.keyboard.press('right');\n await fixture.events.keyboard.press('tab');\n // we should have focused the first story menu in the grid\n expect(selectedStory).toEqual(document.activeElement);\n\n const [activeStoryContextMenu] =\n fixture.screen.getAllByTestId(/^story-context-menu-/);\n\n await fixture.events.keyboard.press('Enter');\n\n // now the focused item should be the first context menu item\n const [contextMenuList] = within(activeStoryContextMenu).getAllByTestId(\n /context-menu-list/\n );\n await expectAsync(contextMenuList).toHaveNoViolations();\n // it is focused on the link within the list\n const [firstContextMenuItem, secondContextMenuItem] =\n within(contextMenuList).getAllByRole('menuitem');\n\n expect(firstContextMenuItem.innerText).toEqual(\n document.activeElement.innerText\n );\n\n await fixture.events.keyboard.press('down');\n\n expect(secondContextMenuItem.innerText).toEqual(\n document.activeElement.innerText\n );\n });\n\n it('should rename a story via keyboard', async () => {\n await getContextMenuItem('Rename');\n await fixture.events.keyboard.press('Enter');\n await fixture.events.keyboard.press('Backspace');\n await fixture.events.keyboard.type('A New Title');\n await fixture.events.keyboard.press('Enter');\n const firstStory = dashboardGridItems[0];\n const { getByRole } = within(firstStory);\n expect(\n getByRole('heading', { level: 3, name: 'A New Title' })\n ).toBeTruthy();\n });\n\n it('should delete a story via keyboard', async () => {\n let stories = fixture.screen.getAllByTestId(/^story-context-menu-/);\n // count the original number of stories\n const initialNumStories = stories.length;\n\n // focus the delete context menu item of the first story with the keyboard\n await getContextMenuItem('Delete Story');\n\n // delete the story and confirm deletion\n await fixture.events.keyboard.press('Enter');\n const confirmDeleteButton = fixture.screen.getByRole('button', {\n name: /^Confirm deleting story/,\n });\n let limit = 0;\n while (\n !confirmDeleteButton.contains(document.activeElement) &&\n limit < 3\n ) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n limit++;\n }\n\n // confirm deletion\n await fixture.events.keyboard.press('Enter');\n\n // count the new number of stories\n stories = fixture.screen.getAllByTestId(/^story-context-menu-/);\n expect(stories.length).toEqual(initialNumStories - 1);\n });\n\n it('should duplicate a story via keyboard', async () => {\n // count the initial number of stories\n const initialNumStories = dashboardGridItems.length;\n\n //focus the duplicate item of the context menu of the first story\n await getContextMenuItem('Duplicate');\n\n expect(document.activeElement.innerText).toEqual('Duplicate');\n // confirm duplication\n await fixture.events.keyboard.press('Enter');\n\n // count the new number of stories\n const updatedStories = fixture.screen.getAllByTestId(/^story-grid-item/);\n expect(updatedStories.length).toEqual(initialNumStories + 1);\n\n // the copied story is now the first story and contains (Copy)\n const firstStory = updatedStories[0];\n const utils = within(firstStory);\n\n const copiedStory = utils.getByRole('heading', { level: 3 });\n expect(copiedStory.innerText).toContain('(Copy)');\n });\n\n it('should retain focus on menu close', async () => {\n const allItemGridLinks = fixture.screen.getAllByTestId(\n /story-editor-grid-link/\n );\n\n const storyIndex = 0;\n const selectedStory = allItemGridLinks[storyIndex];\n // focus the delete context menu item of the first story with the keyboard\n // test cancelling deletion of the second story (not the default first story)\n // to make sure focus is retained\n await getContextMenuItem('Delete Story', storyIndex);\n\n // delete the story and confirm deletion\n await fixture.events.keyboard.press('Enter');\n const cancelDeleteButton = fixture.screen.getByRole('button', {\n name: /^Cancel/,\n });\n let limit = 0;\n while (\n !cancelDeleteButton.contains(document.activeElement) &&\n limit < 3\n ) {\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('tab');\n limit++;\n }\n\n // confirm deletion\n await fixture.events.keyboard.press('Enter');\n\n // focus should return to the second story\n expect(selectedStory).toEqual(document.activeElement);\n });\n\n it('should exit the grid and re-focus the first item', async () => {\n const allItemGridLinks = fixture.screen.getAllByTestId(\n /story-editor-grid-link/\n );\n\n const firstStory = allItemGridLinks[0];\n const lastStory = allItemGridLinks[allItemGridLinks.length - 1];\n\n for (let i = 0; i < allItemGridLinks.length; i++) {\n const expectedStory = allItemGridLinks[i];\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('right');\n expect(expectedStory).toEqual(document.activeElement);\n }\n expect(lastStory).toEqual(document.activeElement);\n\n const searchInput = fixture.screen.getByPlaceholderText('Search Stories');\n expect(searchInput).toBeTruthy();\n await fixture.events.focus(searchInput);\n\n await focusOnGridByKeyboard();\n await fixture.events.keyboard.press('right');\n expect(firstStory).toEqual(document.activeElement);\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/myStories/karma/myStoriesList.karma.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { within } from '@testing-library/react';\nimport { getRelativeDisplayDate } from '@googleforcreators/date';\n\n/**\n * Internal dependencies\n */\nimport Fixture from '../../../../karma/fixture';\nimport { VIEW_STYLE_LABELS, VIEW_STYLE } from '../../../../constants';\nimport useApi from '../../../api/useApi';\n\ndescribe('CUJ: Creator can view their stories in list view: ', () => {\n let fixture;\n let listViewButton;\n\n beforeEach(async () => {\n fixture = new Fixture();\n await fixture.render();\n\n listViewButton = fixture.screen.getByLabelText(\n new RegExp(`^${VIEW_STYLE_LABELS[VIEW_STYLE.GRID]}$`)\n );\n });\n\n afterEach(() => {\n fixture.restore();\n });\n\n async function getStoriesState() {\n const {\n state: { stories },\n } = await fixture.renderHook(() => useApi());\n\n return stories;\n }\n\n function isElementVisible(element) {\n return Boolean(\n element.offsetWidth ||\n element.offsetHeight ||\n element.getClientRects().length\n );\n }\n\n const clickListView = async () => {\n expect(listViewButton).toBeTruthy();\n\n await fixture.events.click(listViewButton);\n };\n\n const enterListView = async () => {\n expect(listViewButton).toBeTruthy();\n await fixture.events.focus(listViewButton);\n await fixture.events.keyboard.press('Enter');\n };\n\n describe('Creator can see stories in list view', () => {\n it('should switch to List View', async () => {\n await clickListView();\n\n const listViewTable = fixture.screen.getByTestId('story-list-view');\n\n // await expectAsync(listViewTable).toHaveNoViolations();\n\n expect(listViewTable).toBeTruthy();\n\n await fixture.snapshot('List View');\n });\n\n it('should switch to List View and back to Grid View', async () => {\n await clickListView();\n\n const initialGridViewItems =\n fixture.screen.queryAllByTestId(/^story-grid-item/);\n expect(initialGridViewItems.length).toBe(0);\n\n const listViewTable = fixture.screen.getByTestId('story-list-view');\n\n expect(listViewTable).toBeTruthy();\n const gridViewButton = fixture.screen.getByLabelText(\n new RegExp(`^${VIEW_STYLE_LABELS[VIEW_STYLE.LIST]}$`)\n );\n\n await fixture.events.click(gridViewButton);\n\n const storyElements = fixture.screen.getAllByTestId(/^story-grid-item/);\n\n const { storiesOrderById } = await getStoriesState();\n\n expect(storyElements.length).toEqual(storiesOrderById.length);\n\n await fixture.snapshot('Grid View');\n });\n\n it('should Rename a story', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n await clickListView();\n\n // drop the header row using slice\n const rows = fixture.screen.getAllByRole('row').slice(1);\n\n const utils = within(rows[0]);\n\n const titleCell = utils.getByRole('heading', {\n name: storiesSortedByModified[0].title,\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const rename = utils.getByText(/^Rename/);\n\n await fixture.events.click(rename);\n\n const input = utils.getByRole('textbox');\n\n const inputLength = input.value.length;\n\n for (let iter = 0; iter < inputLength; iter++) {\n // disable eslint to prevent overlapping .act calls\n // eslint-disable-next-line no-await-in-loop\n await fixture.events.keyboard.press('Backspace');\n }\n\n await fixture.events.keyboard.type('A New Title');\n\n await fixture.events.keyboard.press('Enter');\n\n await fixture.snapshot('Rename story');\n\n expect(utils.getByText(/^A New Title$/)).toBeTruthy();\n });\n\n it('should Duplicate a story', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n const gridContainer = fixture.screen.getByTestId('dashboard-grid-list');\n\n await fixture.events.focus(gridContainer);\n\n await clickListView();\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n let utils = within(rows[0]);\n\n const titleCell = utils.getByRole('cell', {\n name: storiesSortedByModified[0].title,\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const duplicate = utils.getByText(/^Duplicate/);\n\n await fixture.events.click(duplicate);\n\n await fixture.snapshot('Duplicate story');\n\n // requery rows\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesSortedByModified.length + 1);\n\n utils = within(rows[0]);\n\n const copiedStory = utils.queryAllByText(/Copy/)[0];\n\n expect(copiedStory).toBeTruthy();\n });\n\n it('should Delete a story', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n await clickListView();\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const utils = within(rows[0]);\n\n const titleCell = utils.getByRole('cell', {\n name: storiesSortedByModified[0].title,\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const deleteButton = utils.getByText(/^Delete/);\n\n await fixture.events.click(deleteButton);\n\n const confirmDeleteButton = fixture.screen.getByRole('button', {\n name: /^Confirm deleting/,\n });\n\n await fixture.snapshot('Delete story');\n\n await fixture.events.click(confirmDeleteButton);\n\n // requery rows\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesSortedByModified.length - 1);\n });\n\n it('should not Delete a story if Cancel is clicked in the confirmation modal', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n await clickListView();\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const utils = within(rows[0]);\n\n const titleCell = utils.getByRole('cell', {\n name: storiesSortedByModified[0].title,\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const deleteButton = utils.getByText(/^Delete/);\n\n await fixture.events.click(deleteButton);\n\n const cancel = fixture.screen.getByRole('button', {\n name: /^Cancel deleting story/,\n });\n\n await fixture.events.click(cancel);\n\n // requery rows\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesSortedByModified.length);\n });\n });\n\n describe('Creator should be prevented from performing basic updates on locked stories from dashboard list view', () => {\n it('should not Rename a locked story', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n await clickListView();\n\n // drop the header row using slice\n const rows = fixture.screen.getAllByRole('row').slice(1);\n\n const utils = within(rows[1]);\n\n const titleCell = utils.getByRole('heading', {\n name: new RegExp(`^${storiesSortedByModified[1].title}`),\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const rename = utils.getByText(/^Rename/);\n expect(rename.hasAttribute('disabled')).toBe(true);\n });\n\n it('should not Delete a locked story', async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n const storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n\n await clickListView();\n\n // drop the header row using slice\n const rows = fixture.screen.getAllByRole('row').slice(1);\n\n const utils = within(rows[1]);\n const titleCell = utils.getByRole('heading', {\n name: new RegExp(`^${storiesSortedByModified[1].title}`),\n });\n\n await fixture.events.hover(titleCell);\n\n const moreOptionsButton = utils.getByRole('button', {\n name: /^Context menu for/,\n });\n\n await fixture.events.click(moreOptionsButton);\n\n const deleteButton = utils.getByText(/^Delete/);\n expect(deleteButton.hasAttribute('disabled')).toBe(true);\n });\n });\n\n describe('Creator can sort their stories (last modified / date created / author / title)', () => {\n beforeEach(async () => {\n await enterListView();\n });\n\n it('should sort by Title in List View', async () => {\n // There is a second hidden span with the same text\n const titleHeader = fixture.screen.getAllByText(/^Title/)[0];\n\n await fixture.events.click(titleHeader);\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storieTitlesSortedByTitle = storiesOrderById.map(\n (id) => stories[id].title\n );\n\n // title is the second column\n let rowTitles = rows.map((row) => row.children[1].innerText);\n\n expect(rowTitles).toEqual(storieTitlesSortedByTitle);\n\n // sort by descending\n await fixture.events.click(titleHeader);\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // title is the second column\n rowTitles = rows.map((row) => row.children[1].innerText);\n\n expect(rowTitles).toEqual(storieTitlesSortedByTitle.reverse());\n });\n\n it('should sort by Author in List View', async () => {\n const authorHeader = fixture.screen.getByText(/^Author/);\n\n await fixture.events.click(authorHeader);\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storiesAuthorsSortedByAuthor = storiesOrderById.map(\n (id) => stories[id].author.name\n );\n\n // author is the third column\n let rowAuthors = rows.map((row) => row.children[2].innerText);\n\n expect(rowAuthors).toEqual(storiesAuthorsSortedByAuthor);\n\n // sort by descending\n await fixture.events.click(authorHeader);\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // author is the third column\n rowAuthors = rows.map((row) => row.children[2].innerText);\n\n expect(rowAuthors).toEqual(storiesAuthorsSortedByAuthor.reverse());\n });\n\n it('should sort by Date Created in List View', async () => {\n const dateCreatedHeader = fixture.screen.getByText(/^Date Created/);\n\n await fixture.events.click(dateCreatedHeader);\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storiesDateCreatedSortedByDateCreated = storiesOrderById.map((id) =>\n getRelativeDisplayDate(stories[id].createdGmt)\n );\n\n let rowDateCreatedValues = rows.map((row) => row.children[3].innerText);\n\n expect(rowDateCreatedValues).toEqual(\n storiesDateCreatedSortedByDateCreated\n );\n\n // sort by ascending\n await fixture.events.click(dateCreatedHeader);\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // author is the fourth column\n rowDateCreatedValues = rows.map((row) => row.children[3].innerText);\n\n expect(rowDateCreatedValues).toEqual(\n storiesDateCreatedSortedByDateCreated.reverse()\n );\n });\n\n it('should sort by Last Modified in List View', async () => {\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storieModifiedSortedByModified = storiesOrderById.map((id) =>\n getRelativeDisplayDate(stories[id].modifiedGmt)\n );\n\n // Last Modified is the fifth column\n let rowModifiedValues = rows.map((row) => row.children[4].innerText);\n\n expect(rowModifiedValues).toEqual(storieModifiedSortedByModified);\n\n // sort ascending\n const [table] = fixture.screen.getAllByTestId('story-list-view');\n const utils = within(table);\n const lastModifiedHeader = utils.getByText(/^Last Modified/);\n\n await fixture.events.click(lastModifiedHeader);\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n rowModifiedValues = rows.map((row) => row.children[4].innerText);\n\n expect(rowModifiedValues).toEqual(\n storieModifiedSortedByModified.reverse()\n );\n });\n\n it('should sort by Title in List View with keyboard', async () => {\n // There is a second hidden span with the same text\n const titleHeader = fixture.screen.getAllByText(/^Title/)[0];\n\n await fixture.events.focus(titleHeader);\n await fixture.events.keyboard.press('Enter');\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storieTitlesSortedByTitle = storiesOrderById.map(\n (id) => stories[id].title\n );\n\n // title is the second column\n let rowTitles = rows.map((row) => row.children[1].innerText);\n\n expect(rowTitles).toEqual(storieTitlesSortedByTitle);\n\n // sort by descending\n await fixture.events.keyboard.press('Enter');\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // title is the second column\n rowTitles = rows.map((row) => row.children[1].innerText);\n\n expect(rowTitles).toEqual(storieTitlesSortedByTitle.reverse());\n });\n\n it('should sort by Author in List View with keyboard', async () => {\n const authorHeader = fixture.screen.getByText(/^Author/);\n\n await fixture.events.focus(authorHeader);\n await fixture.events.keyboard.press('Enter');\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storiesAuthorsSortedByAuthor = storiesOrderById.map(\n (id) => stories[id].author.name\n );\n\n // author is the third column\n let rowAuthors = rows.map((row) => row.children[2].innerText);\n\n expect(rowAuthors).toEqual(storiesAuthorsSortedByAuthor);\n\n // sort by descending\n await fixture.events.keyboard.press('Enter');\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // author is the third column\n rowAuthors = rows.map((row) => row.children[2].innerText);\n\n expect(rowAuthors).toEqual(storiesAuthorsSortedByAuthor.reverse());\n });\n\n it('should sort by Date Created in List View with keyboard', async () => {\n const dateCreatedHeader = fixture.screen.getByText(/^Date Created/);\n\n await fixture.events.focus(dateCreatedHeader);\n await fixture.events.keyboard.press('Enter');\n\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storiesDateCreatedSortedByDateCreated = storiesOrderById.map((id) =>\n getRelativeDisplayDate(stories[id].createdGmt)\n );\n\n let rowDateCreatedValues = rows.map((row) => row.children[3].innerText);\n\n expect(rowDateCreatedValues).toEqual(\n storiesDateCreatedSortedByDateCreated\n );\n\n // sort by ascending\n await fixture.events.keyboard.press('Enter');\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n // author is the fourth column\n rowDateCreatedValues = rows.map((row) => row.children[3].innerText);\n\n expect(rowDateCreatedValues).toEqual(\n storiesDateCreatedSortedByDateCreated.reverse()\n );\n });\n\n it('should show default sort by Last Modified in List View with keyboard', async () => {\n // drop the header row using slice\n let rows = fixture.screen.getAllByRole('row').slice(1);\n\n const { stories, storiesOrderById } = await getStoriesState();\n\n expect(rows.length).toEqual(storiesOrderById.length);\n\n const storieModifiedSortedByModified = storiesOrderById.map((id) =>\n getRelativeDisplayDate(stories[id].modifiedGmt)\n );\n\n // Last Modified is the fifth column\n let rowModifiedValues = rows.map((row) => row.children[4].innerText);\n\n expect(rowModifiedValues).toEqual(storieModifiedSortedByModified);\n\n // sort ascending\n const [table] = fixture.screen.getAllByTestId('story-list-view');\n const utils = within(table);\n const lastModifiedHeader = utils.getByText(/^Last Modified/);\n\n await fixture.events.focus(lastModifiedHeader);\n await fixture.events.keyboard.press('Enter');\n\n rows = fixture.screen.getAllByRole('row').slice(1);\n\n rowModifiedValues = rows.map((row) => row.children[4].innerText);\n\n expect(rowModifiedValues).toEqual(\n storieModifiedSortedByModified.reverse()\n );\n });\n });\n\n describe('Creator can navigate list view using keyboard: Tab through each story in the list', () => {\n let storiesSortedByModified = [];\n\n beforeEach(async () => {\n const { stories, storiesOrderById } = await getStoriesState();\n storiesSortedByModified = storiesOrderById.map((id) => stories[id]);\n // switch to list view\n await clickListView();\n\n // place focus on last modified header\n const [table] = fixture.screen.getAllByTestId('story-list-view');\n const utils = within(table);\n const lastModifiedHeader = utils.getByText(/^Last Modified/);\n await fixture.events.focus(lastModifiedHeader);\n });\n\n it('should be able to tab to story title', async () => {\n // tabbing from Last Modified should get us to title\n await fixture.events.keyboard.press('Tab');\n\n const title = await document.activeElement.innerText;\n expect(title).toContain(storiesSortedByModified[0].title);\n });\n\n it('should be able to tab to story menu control', async () => {\n // drop the header row using slice\n const rows = fixture.screen.getAllByRole('row').slice(1);\n const { getByText } = within(rows[0]);\n\n // Rename shouldn't be found until menu is open\n expect(isElementVisible(getByText(/^Rename/))).toBeFalse();\n\n // tabbing from Last Modified should get us to title\n await fixture.events.keyboard.press('Tab');\n\n // tabbing from title should move to menu control\n await fixture.events.keyboard.press('Tab');\n\n // hitting enter should open menu\n await fixture.events.keyboard.press('Enter');\n\n // Rename should be findable\n expect(isElementVisible(getByText(/^Rename/))).toBeTrue();\n });\n\n it('should be able to tab to another story title', async () => {\n // tabbing from Last Modified should get us to title\n await fixture.events.keyboard.press('Tab');\n\n // tabbing from title should move to menu control\n await fixture.events.keyboard.press('Tab');\n\n // tabbing from menu control should move to next story title\n await fixture.events.keyboard.press('Tab');\n\n const title = await document.activeElement.innerText;\n expect(title).toContain(storiesSortedByModified[1].title);\n });\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/shared/bodyViewOptions.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled, { css } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { TranslateWithMarkup, __ } from '@googleforcreators/i18n';\nimport {\n Text,\n TextSize,\n DatalistDropdown,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { StandardViewContentGutter, ViewStyleBar } from '../../../components';\nimport useStoryFilters from '../myStories/filters/useStoryFilters';\nimport SortDropDown from './sortDropDown';\n\nconst FILTER_MAX_WIDTH = 350;\n\nconst DisplayFormatContainer = styled.div`\n display: grid;\n gap: 1rem;\n min-height: 76px;\n grid-template-columns: 1fr auto auto;\n justify-content: start;\n align-items: center;\n margin-top: -10px;\n`;\n\nconst StorySortDropdownContainer = styled.div`\n margin: auto 8px;\n align-self: flex-end;\n`;\n\nconst ControlsContainer = styled.div`\n display: flex;\n flex-wrap: wrap;\n margin: 1rem 0;\n row-gap: 1rem;\n justify-self: end;\n`;\n\nconst BodyViewOptionsHeader = styled.div``;\nconst StyledDatalist = styled(DatalistDropdown)`\n max-width: ${FILTER_MAX_WIDTH}px;\n`;\n\nexport default function BodyViewOptions({\n handleLayoutSelect,\n resultsLabel,\n layoutStyle,\n pageSortOptions = [],\n pageSortDefaultOption,\n showGridToggle,\n showSortDropdown,\n filters = [],\n currentSort,\n handleSortChange,\n}) {\n const { updateFilter } = useStoryFilters(({ actions: { updateFilter } }) => ({\n updateFilter,\n }));\n\n return (\n \n \n \n \n {resultsLabel}\n \n \n {filters?.length\n ? filters.map((filter) => (\n \n {\n updateFilter(filter.key, {\n filterId: id,\n });\n }}\n getOptionsByQuery={filter.query}\n getPrimaryOptions={filter.getPrimaryOptions}\n selectedId={filter.filterId}\n placeholder={filter.placeholder}\n noMatchesFoundLabel={filter.noMatchesFoundLabel}\n searchPlaceholder={filter.searchPlaceholder}\n offsetOverride\n maxWidth={FILTER_MAX_WIDTH}\n containerStyleOverrides={css`\n flex-direction: column;\n `}\n />\n \n ))\n : null}\n {showSortDropdown && (\n \n \n \n )}\n \n {showGridToggle && (\n \n )}\n \n \n );\n}\n\nBodyViewOptions.propTypes = {\n handleLayoutSelect: PropTypes.func,\n layoutStyle: PropTypes.string.isRequired,\n resultsLabel: PropTypes.string.isRequired,\n showGridToggle: PropTypes.bool,\n showSortDropdown: PropTypes.bool,\n filters: PropTypes.array,\n pageSortOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n })\n ),\n pageSortDefaultOption: PropTypes.string,\n currentSort: PropTypes.shape({\n orderby: PropTypes.string,\n order: PropTypes.string,\n }),\n handleSortChange: PropTypes.func,\n};\n" }, { "path": "packages/dashboard/src/app/views/shared/emptyContentMessage.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { DesertColor } from '@googleforcreators/design-system';\n\nconst Message = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 400px;\n margin: 20vh auto;\n\n & > * {\n text-align: center;\n margin: 0 auto;\n }\n\n /* Sometimes children will contain button or anchor as cta. */\n button,\n a {\n margin-top: 48px;\n }\n`;\n\nconst EmptyImage = styled(DesertColor)`\n margin-bottom: 48px;\n`;\nfunction EmptyContentMessage({ children }) {\n return (\n \n \n {children}\n \n );\n}\n\nEmptyContentMessage.propTypes = {\n children: PropTypes.node,\n};\n\nexport default EmptyContentMessage;\n" }, { "path": "packages/dashboard/src/app/views/shared/grid/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n// Foundational styled components that are\n// shared by grid instances to create\n// the final presentation of grid items\n\n// Gradient overlays the grid item poster\nexport const Gradient = styled.div`\n position: absolute;\n bottom: 0;\n height: 67%;\n width: 100%;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n background: ${({ theme }) => theme.colors.gradient.posterOverlay};\n`;\n\n// Holds grid item content\nexport const Scrim = styled.div`\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n background: ${({ theme }) => theme.colors.opacity.black3};\n`;\n\n// Keeps grid item position contained\nexport const Container = styled.div`\n position: relative;\n`;\n\n// Displays grid item image if available\n// as background of grid item area\nexport const Poster = styled.div`\n height: 100%;\n width: 100%;\n object-fit: cover;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n background: ${({ theme }) => theme.colors.gradient.placeholder};\n`;\n" }, { "path": "packages/dashboard/src/app/views/shared/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as BodyViewOptions } from './bodyViewOptions';\nexport { default as EmptyContentMessage } from './emptyContentMessage';\nexport { default as PageHeading } from './pageHeading';\n" }, { "path": "packages/dashboard/src/app/views/shared/pageHeading.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { __ } from '@googleforcreators/i18n';\nimport {\n Display,\n Search,\n TextSize,\n noop,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { NavMenuButton, StandardViewContentGutter } from '../../../components';\n\nconst HeadingContainer = styled(StandardViewContentGutter)`\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n justify-content: space-between;\n margin-bottom: 16px;\n padding-top: 48px;\n border-bottom: 1px solid ${({ theme }) => theme.colors.divider.secondary};\n`;\n\nconst StyledHeadline = styled(Display)`\n display: flex;\n align-items: center;\n margin-right: 28px;\n padding-bottom: 24px;\n white-space: nowrap;\n`;\n\nconst HeadlineFilters = styled.div`\n display: flex;\n align-items: center;\n margin: auto 0 auto 0;\n padding-bottom: 24px;\n`;\n\nconst HeaderSearch = styled.div`\n width: 208px;\n max-width: 208px;\n min-width: 208px;\n margin: auto 0;\n padding-bottom: 24px;\n`;\n\nconst PageHeading = ({\n children,\n heading,\n searchPlaceholder,\n searchOptions = [],\n showSearch,\n handleSearchChange,\n searchValue,\n onClear = noop,\n}) => {\n return (\n \n \n \n {heading}\n \n {children && {children}}\n {showSearch && (\n \n \n \n )}\n \n );\n};\n\nPageHeading.propTypes = {\n children: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.node),\n PropTypes.node,\n ]),\n handleSearchChange: PropTypes.func,\n heading: PropTypes.string.isRequired,\n onClear: PropTypes.func,\n searchOptions: PropTypes.arrayOf(PropTypes.object),\n searchPlaceholder: PropTypes.string,\n searchValue: PropTypes.string,\n showSearch: PropTypes.bool,\n};\n\nexport default PageHeading;\n" }, { "path": "packages/dashboard/src/app/views/shared/sortDropDown.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport { DropDown } from '@googleforcreators/design-system';\nimport { useCallback } from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport { __ } from '@googleforcreators/i18n';\n\n/**\n * Internal dependencies\n */\nimport { DROPDOWN_TYPES } from '../../../constants';\n\nconst StyledDropDown = styled(DropDown)`\n width: 210px;\n`;\n\nfunction SortDropDown({\n pageSortOptions,\n pageSortDefaultOption,\n currentSort,\n handleSortChange,\n}) {\n const _handleSortChange = useCallback(\n (_, orderby) => {\n handleSortChange({ orderby });\n },\n [handleSortChange]\n );\n\n return (\n \n );\n}\n\nSortDropDown.propTypes = {\n pageSortOptions: PropTypes.arrayOf(\n PropTypes.shape({\n value: PropTypes.string,\n label: PropTypes.string,\n })\n ),\n pageSortDefaultOption: PropTypes.string,\n currentSort: PropTypes.shape({\n orderby: PropTypes.string,\n order: PropTypes.string,\n }),\n handleSortChange: PropTypes.func.isRequired,\n};\n\nexport default SortDropDown;\n" }, { "path": "packages/dashboard/src/app/views/shared/stories/emptyContentMessage.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport { EmptyContentMessage } from '..';\n\nexport default {\n title: 'Dashboard/Views/Shared/EmptyContentMessage',\n args: {\n message: 'default content to display',\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n return {args.message};\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/shared/stories/pageHeading.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { PageHeading } from '..';\nimport { NavProvider, LeftRail } from '../../../../components';\n\nexport default {\n title: 'Dashboard/Views/Shared/PageHeading',\n component: PageHeading,\n args: {\n showSearch: false,\n searchValue: 'value',\n heading: 'Dashboard',\n searchPlaceholder: 'Find Stories',\n },\n argTypes: {\n handleSearchChange: {\n action: 'Search with value',\n },\n },\n parameters: {\n controls: {\n exclude: ['searchOptions', 'children', 'onClear'],\n },\n },\n};\n\nconst InnerContent = styled.div`\n background-color: red;\n width: 100%;\n height: 50%;\n`;\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n args.handleSearchChange(value)}\n {...args}\n >\n \n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/app/views/utils/composeTemplateFilter.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_META_DATA_TYPES } from '../constants';\n\n/**\n * Takes an array of template meta data filter entries\n * and composes them into a function that takes a template\n * and returns true if the template satisfies any of the\n * meta data filters.\n *\n * @param {Array} filters filter entries to compose\n * @return {Function} function that takes a template and returns true or false\n */\nfunction composeTemplateFilter(filters) {\n return (template) => {\n return (\n !filters ||\n filters.some((filter) => {\n switch (filter?.type) {\n case TEMPLATE_META_DATA_TYPES.TAG:\n return template.tags\n .map((tag) => tag.toLowerCase())\n .includes(filter.value.toLowerCase());\n\n case TEMPLATE_META_DATA_TYPES.COLOR:\n return template.colors\n .map((color) => color.label.toLowerCase())\n .includes(filter.value.toLowerCase());\n\n case TEMPLATE_META_DATA_TYPES.VERTICAL:\n return template.vertical\n .toLowerCase()\n .includes(filter.value.toLowerCase());\n\n case TEMPLATE_META_DATA_TYPES.TITLE:\n return template.title\n .toLowerCase()\n .includes(filter.value.toLowerCase());\n\n default:\n return true;\n }\n })\n );\n };\n}\n\nexport default composeTemplateFilter;\n" }, { "path": "packages/dashboard/src/app/views/utils/getSearchOptions.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nfunction getSearchOptions(options) {\n return options.reduce((acc, option) => {\n if (!option.title || option?.title.trim().length <= 0) {\n return acc;\n }\n return [\n ...acc,\n {\n label: option.title,\n value: option.title,\n },\n ];\n }, []);\n}\n\nexport default getSearchOptions;\n" }, { "path": "packages/dashboard/src/app/views/utils/getTemplateFilters.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * External dependencies\n */\nimport { uniqueEntriesByKey } from '@googleforcreators/design-system';\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_META_DATA_TYPES } from '../constants';\n\n/**\n * Takes an dictionary of templates and extracts their metadata\n * to return an array of meta data entries compatible with the\n * dashboard header search options\n *\n * @param {Object} templates templates dictionary keyed by id\n * @return {Array} array of entries\n */\nfunction getTemplateFilters(templates) {\n const templatesArr = Object.values(templates);\n\n const colors = templatesArr\n .flatMap((t) => t.colors)\n .map((c) => ({\n label: c.family,\n value: c.family,\n type: TEMPLATE_META_DATA_TYPES.COLOR,\n }));\n\n const tags = templatesArr\n .flatMap((t) => t.tags)\n .map((tag) => ({\n label: tag,\n value: tag,\n type: TEMPLATE_META_DATA_TYPES.TAG,\n }));\n\n const verticals = templatesArr\n .map((t) => t.vertical)\n .map((vertical) => ({\n label: vertical,\n value: vertical,\n type: TEMPLATE_META_DATA_TYPES.VERTICAL,\n }));\n\n const title = templatesArr.map((t) => ({\n label: t.title,\n value: t.title,\n type: TEMPLATE_META_DATA_TYPES.TITLE,\n }));\n\n return [\n ...uniqueEntriesByKey(tags, 'label'),\n ...uniqueEntriesByKey(colors, 'label'),\n ...uniqueEntriesByKey(verticals, 'label'),\n ...uniqueEntriesByKey(title, 'label'),\n ];\n}\n\nexport default getTemplateFilters;\n" }, { "path": "packages/dashboard/src/app/views/utils/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as getSearchOptions } from './getSearchOptions';\nexport { default as getTemplateFilters } from './getTemplateFilters';\nexport { default as composeTemplateFilter } from './composeTemplateFilter';\n" }, { "path": "packages/dashboard/src/app/views/utils/test/composeTemplateFilter.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport composeTemplateFilter from '../composeTemplateFilter';\nimport { TEMPLATE_META_DATA_TYPES } from '../../constants';\n\ndescribe('composeTemplateFilter', () => {\n it('filters a template properly given a set of meta data entries', () => {\n const filter = composeTemplateFilter([\n { label: 'red', value: 'red', type: TEMPLATE_META_DATA_TYPES.COLOR },\n { label: 'red', value: 'red', type: TEMPLATE_META_DATA_TYPES.TAG },\n {\n label: 'Travel',\n value: 'Travel',\n type: TEMPLATE_META_DATA_TYPES.VERTICAL,\n },\n {\n label: 'Travel The World',\n value: 'Travel The World',\n type: TEMPLATE_META_DATA_TYPES.TITLE,\n },\n ]);\n\n // tags filter correctly\n expect(\n filter({\n tags: ['red'],\n colors: [{ label: 'green' }],\n vertical: 'Books',\n title: 'Book Title',\n })\n ).toBeTruthy();\n\n // colors filter correctly\n expect(\n filter({\n tags: ['blue'],\n colors: [{ label: 'red' }],\n vertical: 'Books',\n title: 'Book Title',\n })\n ).toBeTruthy();\n\n // verticals filter correctly\n expect(\n filter({\n tags: ['blue'],\n colors: [{ label: 'blue' }],\n vertical: 'Travel',\n title: 'Travel Title',\n })\n ).toBeTruthy();\n\n // title filter correctly\n expect(\n filter({\n tags: ['blue'],\n colors: [{ label: 'blue' }],\n vertical: 'Books',\n title: 'Travel The World',\n })\n ).toBeTruthy();\n\n // exclusion filters correctly\n expect(\n filter({\n tags: ['blue'],\n colors: [{ label: 'blue' }],\n vertical: 'Books',\n title: 'Book Title',\n })\n ).not.toBeTruthy();\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/utils/test/getSearchOptions.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport getSearchOptions from '../getSearchOptions';\n\nconst initialData = [\n { id: 94, title: 'Maltese Falcon' },\n { id: 65, title: 'Rear Window' },\n { id: 78, title: 'Psycho' },\n { id: 12, title: 'The Birds' },\n { id: 2, title: 'Casa Blanca' },\n { id: 7, title: 'Valley of the Dolls' },\n { id: 8, title: 'Wrath of Khan' },\n { id: 999, noGoodKey: 'Princess Bride' },\n { id: 89, title: '' },\n { id: 876, title: undefined },\n { id: 76, title: null },\n { id: 796, title: false },\n];\n\ndescribe('getSearchOptions', () => {\n it('should shape an array of objects, returning label and value based on title', () => {\n const searchOptions = getSearchOptions(initialData);\n\n expect(searchOptions).toMatchObject([\n { label: 'Maltese Falcon', value: 'Maltese Falcon' },\n { label: 'Rear Window', value: 'Rear Window' },\n { label: 'Psycho', value: 'Psycho' },\n { label: 'The Birds', value: 'The Birds' },\n { label: 'Casa Blanca', value: 'Casa Blanca' },\n { label: 'Valley of the Dolls', value: 'Valley of the Dolls' },\n { label: 'Wrath of Khan', value: 'Wrath of Khan' },\n ]);\n });\n});\n" }, { "path": "packages/dashboard/src/app/views/utils/test/getTemplateFilters.js", "content": "/*\n * Copyright 2021 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n/**\n * Internal dependencies\n */\nimport getTemplateFilters from '../getTemplateFilters';\nimport { TEMPLATE_META_DATA_TYPES } from '../../constants';\n\ndescribe('getTemplateFilters', () => {\n it('returns unique meta data entries', () => {\n const templates = [\n {\n colors: [\n { family: 'blue', label: 'blue' },\n { family: 'green', label: 'green' },\n { family: 'red', label: 'red' },\n ],\n tags: ['Greece', 'Italy', 'Spain'],\n vertical: 'Travel',\n title: 'Travel The World',\n },\n {\n colors: [{ family: 'red', label: 'red' }],\n tags: ['Reading', 'I might like tv better', 'red'],\n vertical: 'Books',\n title: 'All the books',\n },\n ];\n expect(getTemplateFilters(templates)).toStrictEqual([\n { label: 'Greece', value: 'Greece', type: TEMPLATE_META_DATA_TYPES.TAG },\n { label: 'Italy', value: 'Italy', type: TEMPLATE_META_DATA_TYPES.TAG },\n { label: 'Spain', value: 'Spain', type: TEMPLATE_META_DATA_TYPES.TAG },\n {\n label: 'Reading',\n value: 'Reading',\n type: TEMPLATE_META_DATA_TYPES.TAG,\n },\n {\n label: 'I might like tv better',\n value: 'I might like tv better',\n type: TEMPLATE_META_DATA_TYPES.TAG,\n },\n { label: 'red', value: 'red', type: TEMPLATE_META_DATA_TYPES.TAG },\n { label: 'blue', value: 'blue', type: TEMPLATE_META_DATA_TYPES.COLOR },\n { label: 'green', value: 'green', type: TEMPLATE_META_DATA_TYPES.COLOR },\n { label: 'red', value: 'red', type: TEMPLATE_META_DATA_TYPES.COLOR },\n {\n label: 'Travel',\n value: 'Travel',\n type: TEMPLATE_META_DATA_TYPES.VERTICAL,\n },\n {\n label: 'Books',\n value: 'Books',\n type: TEMPLATE_META_DATA_TYPES.VERTICAL,\n },\n {\n label: 'Travel The World',\n value: 'Travel The World',\n type: TEMPLATE_META_DATA_TYPES.TITLE,\n },\n {\n label: 'All the books',\n value: 'All the books',\n type: TEMPLATE_META_DATA_TYPES.TITLE,\n },\n ]);\n });\n});\n" }, { "path": "packages/dashboard/src/components/cardGallery/components.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled, { css } from 'styled-components';\nimport PropTypes from 'prop-types';\nimport { Button, ButtonType } from '@googleforcreators/design-system';\n\nconst pictureCss = css`\n picture {\n display: block;\n & > img {\n display: block;\n height: 100%;\n width: 100%;\n object-fit: fill;\n border-radius: ${({ theme }) => theme.borders.radius.medium};\n border: ${({ theme }) =>\n `1px solid ${theme.colors.border.defaultNormal}`};\n }\n }\n`;\nexport const GalleryContainer = styled.div`\n flex: 1;\n display: flex;\n justify-content: space-between;\n align-items: start;\n`;\n\nexport const DisplayPage = styled.div`\n overflow: hidden;\n width: 38.6%;\n margin-left: 2.1%;\n\n ${pictureCss}\n\n @media screen and (min-width: 1600px) {\n width: 45.2%;\n margin-left: 2.4%;\n }\n`;\n\nDisplayPage.propTypes = {\n $isThreeRows: PropTypes.bool,\n};\n\nexport const Thumbnails = styled.div`\n position: relative;\n display: grid;\n width: 52.3%;\n grid-template-columns: repeat(3, 1fr);\n column-gap: 8px;\n row-gap: 16px;\n margin-right: 16px;\n\n @media screen and (min-width: 1600px) {\n width: 59.3%;\n grid-template-columns: repeat(4, 1fr);\n }\n`;\n\nexport const ThumbnailButton = styled(Button).attrs({\n type: ButtonType.Plain,\n})`\n display: block;\n height: 100%;\n padding: 0;\n border: none;\n background-color: transparent;\n position: relative;\n &:active {\n background-color: transparent;\n }\n ${({ $isSelected, theme }) =>\n $isSelected &&\n css`\n &:after {\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: block;\n top: 0;\n right: 0;\n border-radius: ${theme.borders.radius.medium};\n border: 4px solid ${theme.colors.interactiveBg.active};\n }\n `}\n ${pictureCss};\n`;\nThumbnailButton.propTypes = {\n $isSelected: PropTypes.bool,\n};\n" }, { "path": "packages/dashboard/src/components/cardGallery/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from '@googleforcreators/react';\nimport { __, sprintf } from '@googleforcreators/i18n';\nimport { useGridViewKeys } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport {\n DEFAULT_GRID_IMG_HEIGHT,\n DEFAULT_GRID_IMG_WIDTH,\n} from '../../constants';\nimport {\n GalleryContainer,\n ThumbnailButton,\n Thumbnails,\n DisplayPage,\n} from './components';\n\nfunction getPosterAltCopy(pageNumber) {\n return sprintf(\n /* translators: %s: page number. */\n __('Poster of template page %s', 'web-stories'),\n pageNumber\n );\n}\n\nfunction CardGallery({ galleryPosters, isRTL, galleryLabel }) {\n const [selectedGridItemIndex, setSelectedGridItemIndex] = useState(0);\n const [focusedGridItemIndex, setFocusedGridItemIndex] = useState();\n const containerRef = useRef();\n const gridRef = useRef();\n const postersRef = useRef({});\n\n const handleMiniCardClick = useCallback((index) => {\n setSelectedGridItemIndex(index);\n setFocusedGridItemIndex(index);\n }, []);\n\n const handleGalleryItemFocus = useCallback((index) => {\n setFocusedGridItemIndex(index);\n }, []);\n\n useEffect(() => {\n // Reset state when posters update\n if (galleryPosters) {\n setSelectedGridItemIndex(0);\n setFocusedGridItemIndex();\n }\n }, [galleryPosters]);\n\n useGridViewKeys({\n containerRef,\n gridRef,\n itemRefs: postersRef,\n isRTL,\n currentItemId: focusedGridItemIndex,\n items: galleryPosters,\n });\n\n const GalleryItems = useMemo(() => {\n return galleryPosters.map((poster, index) => {\n const key = `gallery_item_${index}`;\n const pageNumber = index + 1;\n // If there's not a focused index we want to fall back to the selected grid item\n const isFocusIndex = focusedGridItemIndex\n ? focusedGridItemIndex === index\n : selectedGridItemIndex === index;\n\n return (\n {\n postersRef.current[index] = el;\n }}\n onFocus={() => handleGalleryItemFocus(index)}\n >\n handleMiniCardClick(index)}\n aria-label={\n selectedGridItemIndex === index\n ? sprintf(\n /* translators: %s: page number. */\n __('Page %s (current page)', 'web-stories'),\n pageNumber\n )\n : sprintf(\n /* translators: %s: page number. */\n __('Page %s', 'web-stories'),\n pageNumber\n )\n }\n >\n \n \n \n \n \n \n \n );\n });\n }, [\n galleryPosters,\n selectedGridItemIndex,\n focusedGridItemIndex,\n handleGalleryItemFocus,\n handleMiniCardClick,\n ]);\n\n return (\n \n \n {GalleryItems}\n \n \n {galleryPosters[selectedGridItemIndex] && (\n \n \n \n \n \n )}\n \n \n );\n}\n\nCardGallery.propTypes = {\n galleryPosters: PropTypes.arrayOf(\n PropTypes.shape({\n png: PropTypes.string,\n webp: PropTypes.string,\n id: PropTypes.number,\n })\n ).isRequired,\n isRTL: PropTypes.bool,\n galleryLabel: PropTypes.string.isRequired,\n};\n\nexport default CardGallery;\n" }, { "path": "packages/dashboard/src/components/cardGallery/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n/**\n * Internal dependencies\n */\nimport CardGallery from '..';\n\nconst demoPosterGroup = [\n {\n id: 0,\n webp: 'https://placekitten.com/g/200/300',\n png: 'https://placekitten.com/g/200/300',\n },\n {\n id: 1,\n webp: 'https://placekitten.com/g/200/300',\n png: 'https://placekitten.com/g/200/300',\n },\n {\n id: 2,\n webp: 'https://placekitten.com/g/200/300',\n png: 'https://placekitten.com/g/200/300',\n },\n {\n id: 3,\n webp: 'https://placekitten.com/g/200/300',\n png: 'https://placekitten.com/g/200/300',\n },\n];\nexport default {\n title: 'Dashboard/Components/CardGallery',\n component: CardGallery,\n args: {\n isRTL: false,\n galleryLabel: 'my aria label text',\n },\n parameters: {\n controls: {\n exclude: ['galleryPosters'],\n },\n },\n};\n\nconst CardGalleryContainer = styled.div`\n padding: 20px;\n`;\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/components/cardGrid/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { forwardRef } from '@googleforcreators/react';\nimport { themeHelpers } from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { PageSizePropType } from '../../propTypes';\nimport { GRID_SPACING } from '../../constants';\n\nconst DashboardGrid = styled.div`\n display: grid;\n width: 100%;\n grid-column-gap: ${GRID_SPACING.COLUMN_GAP}px;\n grid-row-gap: ${GRID_SPACING.ROW_GAP}px;\n grid-template-columns: ${({ columnWidth }) => `\n repeat(auto-fill, ${columnWidth}px)`};\n grid-template-rows: ${({ columnHeight }) =>\n `minmax(${columnHeight}px, auto)`};\n scroll-margin-top: 30vh;\n\n ${({ theme }) => css`\n &:focus-visible {\n ${themeHelpers.focusCSS(theme.colors.border.focus)};\n }\n `};\n`;\nDashboardGrid.propTypes = {\n columnHeight: PropTypes.number,\n columnWidth: PropTypes.number,\n};\n\nconst CardGrid = forwardRef(function CardGrid(\n { ariaLabel, children, pageSize },\n ref\n) {\n return (\n \n {children}\n \n );\n});\n\nCardGrid.propTypes = {\n ariaLabel: PropTypes.string,\n children: PropTypes.node.isRequired,\n pageSize: PageSizePropType.isRequired,\n};\n\nexport default CardGrid;\n" }, { "path": "packages/dashboard/src/components/cardGrid/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { STORYBOOK_PAGE_SIZE } from '../../../storybookUtils';\nimport { CardGridItem } from '../..';\nimport CardGrid from '..';\n\nexport default {\n title: 'Dashboard/Components/CardGrid',\n component: CardGrid,\n args: {\n message: 'Sample Story Content',\n },\n};\n\nconst Card = styled.div`\n display: flex;\n height: 200px;\n justify-content: center;\n padding: 20px;\n background-color: orange;\n`;\n\nexport const _default = {\n render: function Render(args) {\n const StorybookGridItem = (\n \n {args.message}\n \n );\n\n const itemArray = Array.from({ length: 12 }).fill(StorybookGridItem);\n\n return (\n \n {itemArray.map((gridItem, index) => (\n //eslint-disable-next-line react/no-array-index-key\n
{gridItem}
\n ))}\n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/components/cardGrid/test/card-grid.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../testUtils';\nimport CardGrid from '..';\n\ndescribe('CardGrid', () => {\n it('should render CardGrid', () => {\n renderWithProviders(\n \n
{'Item 1'}
\n
{'Item 2'}
\n
{'Item 3'}
\n
{'Item 4'}
\n
{'Item 5'}
\n \n );\n\n expect(screen.getAllByTestId('test-child')).toHaveLength(5);\n });\n});\n" }, { "path": "packages/dashboard/src/components/cardGridItem/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\nimport PropTypes from 'prop-types';\n\n/**\n * Internal dependencies\n */\nimport { MoreVerticalButton } from '../storyMenu';\n\nconst CardGridItem = styled.div.attrs({ role: 'listitem' })`\n margin: 0;\n width: 100%;\n display: grid;\n grid-template-columns: 100%;\n grid-template-rows: ${({ $posterHeight }) => `${$posterHeight}px auto`};\n\n ${MoreVerticalButton} {\n margin: 12px 0;\n }\n &:hover\n ${MoreVerticalButton},\n &:active\n ${MoreVerticalButton},\n &:focus-within\n ${MoreVerticalButton} {\n opacity: 1;\n }\n &:hover .card_buttons,\n &:active .card_buttons,\n &:focus-within .card_buttons {\n opacity: 1;\n }\n`;\nCardGridItem.propTypes = {\n $posterHeight: PropTypes.number,\n};\n\nexport default CardGridItem;\n" }, { "path": "packages/dashboard/src/components/cardGridItem/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { STORYBOOK_PAGE_SIZE } from '../../../storybookUtils';\nimport { CardGrid, CardGridItem } from '../..';\n\nexport default {\n title: 'Dashboard/Components/CardGridItem',\n component: CardGridItem,\n args: {\n message: 'Sample grid item - anything can go here',\n },\n};\n\nconst Card = styled.div`\n display: flex;\n height: 100%;\n justify-content: center;\n padding: 20px;\n background-color: orange;\n`;\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n {args.message}\n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/components/cardGridItem/test/cardGridItem.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../testUtils';\nimport CardGridItem from '..';\n\ndescribe('CardGridItem', () => {\n it('should render CardGridItem', () => {\n renderWithProviders(\n \n
\n

{'Grid Item Paragraph'}

\n \n
\n \n );\n\n expect(screen.getByText('Grid Item Paragraph')).toBeInTheDocument();\n });\n});\n" }, { "path": "packages/dashboard/src/components/colorList/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { createSolidFromString } from '@googleforcreators/patterns';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { ColorType } from '../types';\n\nconst borderLookup = (color) => ({\n '#fff': `border: solid 1px ${color}`,\n '#ffffff': `border: solid 1px ${color}`,\n white: `border: solid 1px ${color}`,\n '#fef9f1': `border: solid 1px ${color}`,\n '#fff8f2': `border: solid 1px ${color}`,\n '#f9f9f9': `border: solid 1px ${color}`,\n '#fcfcfc': `border: solid 1px ${color}`,\n});\n\nconst ColorContainer = styled.ul`\n display: flex;\n margin: 0;\n`;\n\nconst Color = styled.li`\n ${({ theme, $backgroundColor, color, size, spacing }) => `\n width: ${size}px;\n height: ${size}px;\n border-radius: 50%;\n margin-bottom: 0;\n background-color: rgb(${$backgroundColor});\n ${borderLookup(theme.colors.border.defaultNormal)[color] || ''};\n\n & + & {\n margin-left: ${spacing || 10}px;\n }\n `}\n`;\n\nfunction ColorList({ colors, size, spacing, ...rest }) {\n return (\n \n {colors.map(({ label, color }) => {\n const { r, g, b } = createSolidFromString(color).color;\n const backgroundColor = `${r}, ${g}, ${b}`;\n return (\n \n );\n })}\n \n );\n}\n\nColorList.propTypes = {\n colors: PropTypes.arrayOf(ColorType).isRequired,\n size: PropTypes.number.isRequired,\n spacing: PropTypes.number,\n};\n\nexport default ColorList;\n" }, { "path": "packages/dashboard/src/components/colorList/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport ColorList from '..';\n\nexport default {\n title: 'Dashboard/Components/ColorList',\n component: ColorList,\n args: {\n size: 50,\n spacing: 10,\n },\n parameters: {\n controls: {\n exclude: ['colors'],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n const colors = [\n { label: 'Red', color: 'red' },\n { label: 'Blue', color: 'blue' },\n { label: 'Green', color: 'green' },\n { label: 'White', color: 'white' },\n ];\n\n return ;\n },\n};\n" }, { "path": "packages/dashboard/src/components/contentGutter/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport { PAGE_WRAPPER } from '../../constants';\n\nexport const StandardViewContentGutter = styled.div`\n margin: 0 ${PAGE_WRAPPER.GUTTER}px;\n`;\n" }, { "path": "packages/dashboard/src/components/dialog/dialog.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport PropTypes from 'prop-types';\nimport { useMemo } from '@googleforcreators/react';\nimport { ThemeProvider } from 'styled-components';\nimport {\n Dialog as StyledDialog,\n Button,\n ButtonSize,\n ButtonType,\n theme,\n} from '@googleforcreators/design-system';\n\n/**\n * Dialog is wrapped in a ThemeProvider so that colors can be inverted.\n *\n * @param {boolean} isOpen When true, dialog will be visible - passed to dialog directly\n * @param {Function} onClose Action taken on 'x'/clicking outside of dialog. Default secondary action.\n * @param {Function} onSecondary Action taken on secondary button click when specified.\n * @param {Function} onPrimary Action taken on primary button click.\n * @param {string} primaryText When present, primary button will render.\n * @param {string} secondaryText When present, secondary button will render.\n * @param {Object} primaryRest Unique props needed on primary button, spread on button.\n * @param {Object} secondaryRest Unique props needed on secondary button, spread on button.\n * @param {Object} actions Custom actions object for when the API restrictions of primary and secondary structure are too much.\n * @param {Node} children Contents of dialog\n */\n\nconst Dialog = ({\n onClose,\n onSecondary,\n onPrimary,\n primaryText,\n secondaryText,\n primaryRest,\n secondaryRest,\n actions,\n children,\n ...rest\n}) => {\n const _PrimaryButton = useMemo(\n () =>\n primaryText && (\n onPrimary?.()}\n {...primaryRest}\n >\n {primaryText}\n \n ),\n [primaryText, primaryRest, onPrimary]\n );\n\n const _SecondaryButton = useMemo(\n () =>\n secondaryText && (\n onSecondary?.() || onClose()}\n {...secondaryRest}\n >\n {secondaryText}\n \n ),\n [secondaryText, secondaryRest, onSecondary, onClose]\n );\n\n return (\n \n \n {_SecondaryButton}\n {_PrimaryButton}\n \n )\n }\n >\n {children}\n \n \n );\n};\n\nDialog.propTypes = {\n open: PropTypes.bool,\n onClose: PropTypes.func.isRequired,\n onPrimary: PropTypes.func,\n onSecondary: PropTypes.func,\n primaryText: PropTypes.string,\n primaryRest: PropTypes.object,\n secondaryText: PropTypes.string,\n secondaryRest: PropTypes.object,\n actions: PropTypes.object,\n children: PropTypes.node,\n};\n\nexport default Dialog;\n" }, { "path": "packages/dashboard/src/components/dialog/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default } from './dialog';\n" }, { "path": "packages/dashboard/src/components/dialog/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n Button,\n ButtonAsLink,\n ButtonSize,\n ButtonType,\n Text,\n TextSize,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport Dialog from '../dialog';\n\nexport default {\n title: 'Dashboard/Components/Dialog/Base',\n component: Dialog,\n args: {\n isOpen: true,\n title: 'my dialog title',\n secondaryText: 'cancel action',\n primaryText: 'confirm action',\n },\n argTypes: {\n onClose: {\n action: 'closed',\n },\n onPrimary: {\n action: 'confirmed',\n },\n },\n parameters: {\n controls: {\n include: ['isOpen', 'title', 'secondaryText', 'primaryText'],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n {\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'\n }\n \n \n );\n },\n};\n\nexport const WithCustomAction = {\n render: ({ onClickButton, onConfirmed, ...args }) => {\n return (\n \n \n {'Dismiss'}\n \n \n {'Add to new post'}\n \n \n }\n {...args}\n >\n \n {\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'\n }\n \n \n );\n },\n\n args: {\n isOpen: true,\n title: 'my dialog title',\n href: 'https://example.com',\n },\n\n argTypes: {\n onClose: {\n action: 'closed',\n },\n onClickButton: {\n action: 'closed',\n name: 'dismiss click',\n },\n onConfirmed: {\n action: 'confirmed',\n name: 'confirm click',\n },\n },\n\n parameters: {\n controls: {\n include: [\n 'isOpen',\n 'title',\n 'href',\n 'onClose',\n 'dismiss click',\n 'confirm click',\n ],\n },\n },\n};\n" }, { "path": "packages/dashboard/src/components/fileUpload/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useCallback,\n useEffect,\n useState,\n useRef,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\nimport { __ } from '@googleforcreators/i18n';\nimport {\n ButtonSize,\n ButtonType,\n Button,\n Text,\n themeHelpers,\n} from '@googleforcreators/design-system';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_FILE_UPLOAD_TYPES } from '../../constants';\n\nconst StyledButton = styled(Button)`\n :focus-within {\n ${({ theme }) => themeHelpers.focusCSS(theme.colors.border.focus)}\n }\n`;\n\nconst Input = styled.input(themeHelpers.visuallyHidden);\n\nconst UploadFormArea = styled.div`\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n justify-content: flex-end;\n width: 100%;\n min-height: 153px;\n padding: 40px 0;\n border-radius: 4px;\n border: 1px dashed\n ${({ isDragging, theme }) =>\n isDragging\n ? theme.colors.border.focus\n : theme.colors.border.defaultNormal};\n\n transition: border-color 300ms ease-in;\n`;\n\nconst UploadHelperText = styled(Text.Paragraph)`\n margin: 0 auto 16px;\n padding: 0 20%;\n text-align: center;\n color: ${({ theme }) => theme.colors.fg.tertiary};\n`;\n\nconst LoadingIndicator = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n top: 0;\n width: 100%;\n height: 100%;\n background-color: ${({ theme }) => theme.colors.standard.white};\n opacity: ${({ isLoading }) => (isLoading ? 0.6 : 0)};\n z-index: ${({ isLoading }) => (isLoading ? '100' : '0')};\n pointer-events: none;\n\n transition: opacity ease-in-out 300ms;\n\n p {\n font-style: italic;\n }\n`;\n\nfunction disableDefaults(e) {\n e.preventDefault();\n e.stopPropagation();\n}\n\nconst FileUpload = ({\n id,\n label,\n onSubmit,\n isLoading,\n isMultiple,\n ariaLabel,\n instructionalText = __('You can also drag your file here', 'web-stories'),\n acceptableFormats = DEFAULT_FILE_UPLOAD_TYPES,\n}) => {\n const uploadFileContainer = useRef(null);\n const fileInputRef = useRef(null);\n const [isDragging, setDragging] = useState(false);\n\n const handleUploadFile = useCallback(\n (files) => {\n onSubmit(Object.values(files));\n },\n [onSubmit]\n );\n\n const handleChange = useCallback(\n (e) => {\n disableDefaults(e);\n handleUploadFile(e.target.files);\n fileInputRef.current.value = null;\n },\n [handleUploadFile]\n );\n\n const handleDragDrop = useCallback(\n (e) => {\n disableDefaults(e);\n const files = e.dataTransfer.files;\n if (files) {\n handleUploadFile(files);\n }\n setDragging(false);\n },\n [handleUploadFile]\n );\n\n const handleDrag = useCallback(\n (e) => {\n disableDefaults(e);\n setDragging((prevIsDragging) => !prevIsDragging);\n\n if (isDragging) {\n e.dataTransfer.clearData();\n }\n },\n [isDragging]\n );\n\n useEffect(() => {\n if (!fileInputRef?.current) {\n return () => {};\n }\n\n const input = fileInputRef.current;\n\n input.addEventListener('change', handleChange);\n return () => {\n input.removeEventListener('change', handleChange);\n };\n }, [handleChange]);\n\n return (\n \n \n

{__('Loading…', 'web-stories')}

\n \n {instructionalText}\n\n \n {label}\n \n \n \n );\n};\n\nFileUpload.propTypes = {\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n label: PropTypes.string.isRequired,\n onSubmit: PropTypes.func.isRequired,\n isLoading: PropTypes.bool,\n isMultiple: PropTypes.bool,\n ariaLabel: PropTypes.string,\n acceptableFormats: PropTypes.arrayOf(PropTypes.string),\n instructionalText: PropTypes.string,\n};\n\nexport default FileUpload;\n" }, { "path": "packages/dashboard/src/components/fileUpload/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport styled from 'styled-components';\n\n/**\n * Internal dependencies\n */\nimport FileUpload from '..';\n\nconst Container = styled.div`\n width: 600px;\n`;\nexport default {\n title: 'Dashboard/Components/FileUpload',\n component: FileUpload,\n args: {\n label: 'Upload',\n isLoading: false,\n isMultiple: true,\n instructionalText:\n 'Drag a jpg, png, or static gif in this box. Or click “Upload logo” below.',\n },\n argTypes: {\n onSubmit: { action: 'files uploaded' },\n },\n parameters: {\n controls: {\n exclude: ['id', 'ariaLabel', 'acceptableFormats'],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n return (\n \n \n \n );\n },\n};\n" }, { "path": "packages/dashboard/src/components/fileUpload/test/fileUpload.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { fireEvent, createEvent, screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../testUtils';\nimport FileUpload from '..';\n\ndescribe('FileUpload', () => {\n it('should render upload component by default', () => {\n renderWithProviders(\n \n );\n expect(\n screen.queryByTestId('file-upload-content-container')\n ).not.toBeInTheDocument();\n });\n\n it('should render upload component with loading overlay when isLoading is true', () => {\n renderWithProviders(\n \n );\n expect(screen.getByText(/^Loading/)).toBeInTheDocument();\n });\n\n it('should trigger onSubmit when file is added through input', () => {\n const onSubmitMock = jest.fn();\n\n renderWithProviders(\n \n );\n\n const UploadInput = screen.getByTestId('upload-file-input');\n expect(UploadInput).toBeInTheDocument();\n fireEvent.click(UploadInput);\n fireEvent.change(UploadInput, { target: { files: {} } });\n expect(onSubmitMock).toHaveBeenCalledOnce();\n });\n\n it('should trigger onSubmit when file is dropped in container', () => {\n const onSubmitMock = jest.fn();\n\n const mockFile = new File([''], 'mockfile.png', {\n type: 'image/png',\n });\n renderWithProviders(\n \n );\n\n const DropArea = screen.getByTestId('file-upload-drop-area');\n expect(DropArea).toBeInTheDocument();\n\n const dropEvent = createEvent.drop(DropArea);\n const fileList = [mockFile];\n\n Object.defineProperty(dropEvent, 'dataTransfer', {\n value: {\n files: {\n item: (itemIndex) => fileList[itemIndex],\n length: fileList.length,\n },\n },\n });\n\n fireEvent(DropArea, dropEvent);\n\n expect(onSubmitMock).toHaveBeenCalledOnce();\n });\n});\n" }, { "path": "packages/dashboard/src/components/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { default as CardGallery } from './cardGallery';\nexport { default as CardGrid } from './cardGrid';\nexport { default as CardGridItem } from './cardGridItem';\nexport { default as ColorList } from './colorList';\nexport { StandardViewContentGutter } from './contentGutter';\nexport { default as Dialog } from './dialog';\nexport { default as FileUpload } from './fileUpload';\nexport { default as InlineInputForm } from './inlineInputForm';\nexport { default as Layout, useLayoutContext } from './layout';\nexport {\n AppFrame,\n LeftRail,\n LoadingContainer,\n PageContent,\n NavMenuButton,\n} from './pageStructure';\nexport { default as NavProvider, useNavContext } from './navProvider';\nexport { default as ScrollToTop } from './scrollToTop';\nexport {\n default as StoryMenu,\n MoreVerticalButton,\n CONTEXT_MENU_BUTTON_CLASS,\n} from './storyMenu';\nexport {\n Table,\n TableBody,\n TableCell,\n TableHeader,\n StickyTableHeader,\n TableHeaderCell,\n TablePreviewCell,\n TablePreviewHeaderCell,\n TableTitleCell,\n TableContentCell,\n TableContentHeaderCell,\n TableRow,\n TableTitleHeaderCell,\n TableAuthorHeaderCell,\n TableDateHeaderCell,\n TableStatusHeaderCell,\n TableStatusCell,\n} from './table';\nexport { Tooltip } from './tooltip';\nexport { default as ViewStyleBar } from './viewStyleBar';\n" }, { "path": "packages/dashboard/src/components/inlineInputForm/index.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport {\n useCallback,\n useEffect,\n useRef,\n useState,\n useFocusOut,\n} from '@googleforcreators/react';\nimport PropTypes from 'prop-types';\nimport styled, { css } from 'styled-components';\nimport { Input } from '@googleforcreators/design-system';\n\nconst StyledInput = styled(Input)`\n div {\n height: auto;\n }\n ${({ $isInverted, theme }) =>\n $isInverted &&\n css`\n input {\n color: ${theme.colors.inverted.fg.primary};\n }\n `}\n`;\n\nconst InlineInputForm = ({\n noAutoFocus,\n error,\n id,\n isInverted,\n label,\n onEditCancel,\n onEditComplete,\n placeholder,\n value,\n}) => {\n const inputContainerRef = useRef(null);\n const [newValue, setNewValue] = useState(value);\n\n useEffect(() => {\n // update internal value when `value` prop updates\n setNewValue(value);\n }, [value]);\n\n useFocusOut(inputContainerRef, () => {\n // cancel changes when user focuses away from input\n onEditCancel();\n }, [onEditCancel]);\n\n useEffect(() => {\n if (!noAutoFocus && inputContainerRef.current) {\n inputContainerRef.current.querySelector('input')?.focus();\n }\n }, [noAutoFocus]);\n\n const handleChange = useCallback(\n ({ target }) => {\n setNewValue(target.value);\n },\n [setNewValue]\n );\n\n const handleKeyPress = useCallback(\n ({ nativeEvent }) => {\n if (nativeEvent.keyCode === 13) {\n onEditComplete(newValue);\n } else if (nativeEvent.keyCode === 27) {\n onEditCancel();\n }\n },\n [newValue, onEditComplete, onEditCancel]\n );\n return (\n
\n \n
\n );\n};\n\nInlineInputForm.propTypes = {\n error: PropTypes.string,\n id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n isInverted: PropTypes.bool,\n label: PropTypes.string.isRequired,\n noAutoFocus: PropTypes.bool,\n onEditCancel: PropTypes.func.isRequired,\n onEditComplete: PropTypes.func.isRequired,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n};\n\nexport default InlineInputForm;\n" }, { "path": "packages/dashboard/src/components/inlineInputForm/stories/index.js", "content": "/*\n * Copyright 2022 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Internal dependencies\n */\nimport InlineInputForm from '..';\n\nexport default {\n title: 'Dashboard/Components/InlineInputForm',\n component: InlineInputForm,\n args: {\n error: 'error',\n },\n argTypes: {\n onEditCancel: {\n action: 'onEditCancel',\n },\n onEditComplete: {\n action: 'onEditComplete',\n },\n },\n parameters: {\n controls: {\n include: ['error', 'onEditCancel', 'onEditComplete'],\n },\n },\n};\n\nexport const _default = {\n render: function Render(args) {\n return (\n args.onEditComplete(newValue)}\n value={'some input value'}\n id={'898989'}\n label=\"my hidden input label\"\n {...args}\n />\n );\n },\n};\n" }, { "path": "packages/dashboard/src/components/inlineInputForm/test/inlineInputForm.js", "content": "/*\n * Copyright 2020 Google LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * External dependencies\n */\nimport { fireEvent, screen } from '@testing-library/react';\n\n/**\n * Internal dependencies\n */\nimport { renderWithProviders } from '../../../testUtils';\nimport InlineInputForm from '..';\n\ndescribe('InlineInputForm', () => {\n it('should render a text input field', () => {\n renderWithProviders(\n