Try Legacy widget block #13511
Merged
Try Legacy widget block #13511
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
from
4af57d5 to
35e0180
Compare
|
Awesome work here. What's the plan to move forward here.
And let's get some technical feedback here. |
youknowriad
added
REST API Interaction
afercia
added
the
[Focus] Accessibility (a11y)
9 tasks
I think it should be divided into 3 parts:
The third part although smaller than this PR is still huge, but I don't think there is a possible usable logical division for this part. I agree this provides a good use case for feature flags. Besides conditional JS code, we may also need some conditional PHP code. I'm not sure if feature flags will/should touch PHP logic. Probably for PHP code we can keep it in the plugin without conditions and don't merge it to the core. It will be an additional source of friction if later we need to move some PHP code to core as we will need to carefully select the parts of the code that will be moved. |
|
@jorgefilipecosta I tried it out and am missing all the in-block widget settings. Am I missing something?
|
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
from
35e0180 to
790b2d5
Compare
Hi @mapk, the widget settings at least for the core blocks should just work and appear without problems. I tested in chrome and safari and they are working correctly in my case. |
|
@jorgefilipecosta I've got the docker install of WordPress 5.0.3 running as outlined in the Contributions doc. There are a lot of |
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
2 times, most recently
from
0323d29 to
1fc4c1f
Compare
|
Hi @mapk, It turns out that my WordPress local install was modified with a display: none commented that I need to overwrite here. My last push adds a |
|
I'll leave a few high level design comments here for ya! 1. There's no 'update' feedback for the user.
|
|
2. The two "edit" buttons are a bit awkward.
3. Select to change widget loses settings. |
|
I don't know that we lost any settings when converting core widgets to blocks — what if we didn't include them here, and only used it to display third-party widgets? |
|
For the REST API endpoint, you can cross-reference with some prior art in https://github.com/xwp/wp-js-widgets/blob/develop/php/class-js-widgets-rest-controller.php |
|
Is there any need for the Update button? The Customizer normally does not include it, for example. It just listens to |
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
from
bad0884 to
bcf144c
Compare
youknowriad
approved these changes
Mar 7, 2019
There was a problem hiding this comment.
Do you think it's possible to e2e test this? Otherwise, let's ship to get feedback and iterate.
Ideas:
- Load the preview in an iframe that includes the frontend styles
- Show the preview automatically once the block is unselected
This kind of legacy work can only be properly tested in real usage.
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
from
0cbb272 to
daa8163
Compare
jorgefilipecosta
force-pushed
the
try/legacy-widget-block
branch
from
daa8163 to
a974bba
Compare
|
Thank you all for the reviews. I merge this PR so we can advance with other enhancements and discuss them separately e.g: use iframes to make the previews totally reliable making sure the editor styles are not affected. The block is behind a feature flag and marked as experimental. Feel free to continue to post your comments here, and I will open follow up PR's to address them. |
noisysocks
reviewed
Mar 11, 2019
There was a problem hiding this comment.
Sorry I'm so late to review! Hoping that we can freely iterate on this since it's all behind a feature flag 😅
I focused mainly on the PHP changes. I'm a little confused about the design of the compute_new_widget endpoint as it doesn't, in my mind, cleanly map to the idea of an operation on a resource (the R in REST).
| /** | ||
| * Constructs the controller. | ||
| * | ||
| * @access public |
There was a problem hiding this comment.
I don't think that we usually use @access.
| '/' . $this->rest_base . '/(?P<identifier>[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*)/', | ||
| array( | ||
| 'args' => array( | ||
| 'identifier' => array( |
There was a problem hiding this comment.
identifier feels oddly formal. We use id a lot in other places, including in wp-includes/widgets.php. Up to you!
There was a problem hiding this comment.
Hi @noisysocks,
I used identifier because this field is not the widget id, it may be the widget id for call back widgets after #14395 is landed, or it may be the class name for class widgets.
So in order to differentiate from the widget id I used identifier.
| * | ||
| * @see WP_REST_Controller | ||
| */ | ||
| class WP_REST_Widget_Updater_Controller extends WP_REST_Controller { |
There was a problem hiding this comment.
We're missing unit tests for this controller. WordPress has a really great API for writing REST API tests, check out trunk for examples: https://core.trac.wordpress.org/browser/trunk/tests/phpunit/tests/rest-api?order=name
| } ); | ||
| } | ||
|
|
||
| requestWidgetUpdater( instanceChanges, callback ) { |
There was a problem hiding this comment.
I think this should say requestWidgetUpdate.
| if ( null === $instance ) { | ||
| $instance = array(); | ||
| } | ||
| $id_to_use = $request->get_param( 'id_to_use' ); |
There was a problem hiding this comment.
Why does the client need to provide this? What would be wrong with the server always using -1?
There was a problem hiding this comment.
The server uses this value to compute the id's used in the forms. Most JavaScript widgets have a check and if an id was initialized before they do nothing. So we need a unique id per widget instance if we used -1 all the time most JS widgets would only support a single instance.
| ), | ||
| ), | ||
| array( | ||
| 'methods' => WP_REST_Server::EDITABLE, |
There was a problem hiding this comment.
Does this method make any changes on the server that are visible to future requests? If not, it's considered safe and is more of a GET request than a POST request.
There was a problem hiding this comment.
Initially, I used EDDITABLE because we may have a widget that has side effects (that's unexpected but we never know what plugins will do). With the improvements being made in #14395, for callback widgets now we apply a change so it makes sense to use editable.
|
|
||
| $widget_obj = $wp_widget_factory->widgets[ $widget ]; | ||
|
|
||
| $instance = $request->get_param( 'instance' ); |
There was a problem hiding this comment.
I'm confused: why do we need both instance and instance_changes?
There was a problem hiding this comment.
The instance represents, the previous widget instance normally saved on the database (in our case save as the block attributes). Instance changes represent the fields that are being changed. That's how the widgets work, the update method receives the previous instance and the changes and returns a new instance.
aduth
reviewed
Mar 12, 2019
| @@ -46,6 +46,21 @@ function the_gutenberg_project() { | |||
| <div id="metaboxes" class="hidden"> | |||
| <?php the_block_editor_meta_boxes(); ?> | |||
| </div> | |||
| <?php | |||
| /** | |||
| * Start: Include for phase 2 | |||
There was a problem hiding this comment.
We must find another way to extend this. It's slated for removal in #13569.
There was a problem hiding this comment.
Does it need to occur where it is in the markup here? Or could it be done as hook handlers to admin_print_footer_scripts and admin_footer?
aduth
reviewed
Mar 12, 2019
| @@ -872,34 +872,83 @@ function gutenberg_editor_scripts_and_styles( $hook ) { | |||
| ); | |||
| } | |||
|
|
|||
| /** | |||
There was a problem hiding this comment.
As by the previous note, this function doesn't exist as of #13569.
All new functionality should extend the block editor as if it were any other plugin extending the core block editor.
aduth
reviewed
Mar 12, 2019
| /** | ||
| * Start: Include for phase 2 | ||
| */ | ||
| 'hasPermissionsToManageWidgets' => $has_permissions_to_manage_widgets, |
There was a problem hiding this comment.
It doesn't seem like this should be an editor setting. We have precedent for this sort of permissions check using REST API links.
13 tasks
Tug
added a commit
that referenced
this pull request
Mar 14, 2019
* Add ESNext syntax to meta block tutorial (#13954) * Add ESNext syntax to meta block tutorial * Applied WordPress code styles to the examples * Apply suggestions from code review Co-Authored-By: mkaz <[email protected]> * Editor: RichText: Check for presence of inputType (#13986) * Bump plugin version to 5.1.1 (#13990) * Added a snippet for observing the browser when running e2e tests (#13993) * Added a snippet for observing the browser when running e2e tests * Extract reusable part of Webpack config and put in @wordpress/scripts (#13814) * New build-config package with webpack config. Pull the Gutenberg webpack config into a package so it can be re-used for block/extension development. * Require new build-config package. * Dynamically handle WP externals with a function. Use code from WP Calypso for handling WP externals so we don't have to have the actual list of packages accessible in our webpack configuration. * Use webpack config from build-config package. * Require build-config package. * Adjust file refs for WP packages. * Move main gutenberg entry definition and webpack copy plugin out of build-config. * Add react-dev-utils for formatting webpack compiler messages. * Implement build script using webpack config from build-config. * Adjust output path so build goes to working directory. * Update package name to webpack-config * Apply more tweaks to the way webpack config package is structured * Update the way externals are handled * Add default values for entry and output * Move shared webpack config under @wordpress/scripts package * Improve the way how loaders are handled * Replace GUTENBERG with WP in webpack config env variables Co-Authored-By: gziolo <[email protected]> * Bring back feature flag to webpack config accidentally removed during merge * Add missing dev dependencies for the packages used in webpack config * Fix the list of excluded folders for babel-loader * Use globals instead of imports in tutorials (#13995) * Use globals instead of imports * Update docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md Co-Authored-By: nosolosw <[email protected]> * Update docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md Co-Authored-By: nosolosw <[email protected]> * URL input popover visual cleanup (#13973) * Use chevron instead of ellipsis in url input field options. * Mimic toolbar icon styles for the icons in the URL popover. * Add a left divider before the URL settings toggle * Even up the spacing in the settings panel. * Add periods to code comments. * Update snapshot * Reinstate "underline" in default formats list (#14008) * Upgrade React to 16.8.2: Welcome React Hooks (#13992) * Upgrade React to 16.8.2 * Update package-lock.json file * Expose React Hooks * Revert "Upgrade React to 16.8.2: Welcome React Hooks (#13992)" (#14017) This reverts commit 6f88bec. * Cleanup URL Popover stylesheet. (#14015) As noted in #13973, this stylesheet uses a relatively non-standard SCSS method of nesting some classnames. For instance: `.editor-url-popover { &__settings-toggle { ... } }`. ... instead of: `.editor-url-popover__settings-toggle { ... }` This is different from the conventions used elsewhere in Gutenberg, and is a bit more difficult to follow for that reason. This commit un-nests those styles, and should have no effect on the compiled CSS. * Add a generic block editor module (#13088) * RichText: warn when using inline container (#13921) * RichText: warn when using inline container * Add env check * Update documentation * Try updating the WP database (#14048) * Merge native mobile release v1.0 to master (#14061) * Bump plugin version to 5.1.0-rc.1 * RichText: only ignore input types that insert HTML (#13914) * RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set * Bump plugin version to 5.1.0 * Deprecate RichTextInputEvent on mobile too (#13975) * The undelying RichText component implementation has changed the parameters returned onChange, and we forgot to update the PostTitle component (#13967) * Fixes wrong state comparison (#13987) Upload media progress bar is missing while media is uploading new * Re-add rootTagsToEliminate prop (#14006) * [Mobile]Update PostTitle to apply borders when it is focused (#13970) * Trigger onFocusStatusChange from PostTitle * Fix lint issue * Update post title shadow mechanism Also open inner ref so that focus state can be updated when focus is made programmatically * Update props * Update onRef as ref * Update title padding&margin * Mobile: Rename ref to innerRef on PostTitle (#14024) * Fixes a red screen in mobile. (#14011) * Change background color on image placeholder block (#14033) * Changed upload media icon color * Changed media placeholder background color * Fix post title native syntax (#14041) * Fix unexpected token in native code * Dummy commit to trigger Travis * Include the rnmobile release branch to Travis builds * Mobile: Links UI using BottomSheet component (#13972) * Mobile: Replaced Links UI with bottom-sheet component * Mobile links UI: Removed commented code. * Mobile: Fix lint issues * Mobile Links UI: Remove autofocus on Android. This hides an issue where the modal sometimes will be under the keyboard on Android. * Fixes pasting links. (#14038) * Update post title vertical paddings (#14040) * Add try/catch fallback to plain text for pasteHandler (#14044) * Fix link interface. (#14052) * [Mobile]Fix title padding on Android (#14057) * Remove title vertical paddings for Android * Revert "Remove title vertical paddings for Android" This reverts commit 09f0d35. * Import padding variables * Revert wrong format image color (#14058) * Stop building the mobile release branch on Travis (#14060) * Avoid mutating imported default config in webpack config (#14039) * Make Babel import JSX pragma plugin aware of `wp.element.createElement` (#13809) * Test: Add test which verifies wheter JSX pragma detects WP global * Update packages/babel-plugin-import-jsx-pragma/test/index.js Co-Authored-By: gziolo <[email protected]> * Skip import when the scope variable is already defined * Add failing tests for inner scope variable defined verification * Add import statement when there is any undefined scope variable * Docs: Add details about changes introduced to Babel plugin * Upgrade Jest to version 24 (breaking changes) (#13922) * Upgrade Jest to version 24 (breaking changes) * Update changelog files to list all dependencies upgraded * Downgrade puppeteer to the previous version 1.6.1 * Try to fix failing e2e tests setup * Added clarification in the changelog * Testing: Remove expect-puppeteer import reference * Address issues raised during code review * Codeowners changes for @chrisvanpatten (#14062) * Codeowners changes for @chrisvanpatten * Remove obsolete ghost placeholder for no longer onowned styles * Add repository.directory fields (fixes #13946) (#14059) * Improve default Babel preset to include JSX pragma (#13540) * Include custome JSX pragma support in Babel preset * Stop using Babel tranpiliation for two packages babel-plugin-import-jsx-pragma and postcss-themes * Add engines field to node based packages * Use the block editor store instead of the editor one (#13105) * Docs: release.md: miscellaneous fixes (#14083) * Docs: release.md: misc. fixes * Disable block navigation and document outline items in text mode (#14081) * Use aria-disabled instead of disabled. * Fix unrecognized prop warning. * Disable Document Outline items in text mode. * Improve buttons alignment. * Pass isTextModeEnabled as prop from parent. * Fix selector in document outline. (#14094) * Fix selector in document outline. * Import getBlocks from its new location. * Plugin: Require includes for deprecated `use_block_editor_for_` functions (#14096) * Plugin: Fix 5.1.0 deprecated functions to correct plugin version * Plugin: Require includes for deprecated `use_block_editor_for_` functions * Plugin: Update server blocks script to use core equivalent function (#14097) `gutenberg_prepare_blocks_for_js` was deprecated in Gutenberg 5.0 * Correct visual error in the quote block icon (#14091) Fixes #13659. The current quote block icon appears to have some over-simplified edges. This replaces it with a crisper version. * Try: Add a subtle animation to the is-active indicator for sidebar tabs (#13956) * Add subtle animation to the is-active indicator for sidebar tabs * Re-instate the empty border, to prevent browser defaults from kicking in. * Remove extra 1px of empty space * Focus state cleanup for tab buttons Allow them to inherit the box shadow (used for the active tab) Use the usual standard dotted outline instead of a solid one. * Add a pseudoclass to ensure the active border appears in Windows High Contrast Mode. * Fix typo. This should match the value from `/packages/edit-post/src/components/sidebar/settings-header/style.scss` * Plugin: Remove vendor script registration (#13573) * chore: Fix: FormToggle docs documents props the component does not uses (#14099) * Babel Plugin Import JSX Pragma: Remove import visitor (#14106) Props to @aduth for coding this optimization. * Add: Block specific toolbar button sample to the format api tutorial (#14113) ## Description This PR updates the format API tutorial (toolbar button section) to include a sample of a button that only renders on a certain block. Answers a question posted on #14104. Closes: #14104 ## How has this been tested? I pasted the sample code on the browser console and verified it works as expected. * Use the editor settings to pass a mediaUpload handler (#14115) * Use the editor settings to pass a mediaUpload handler * Update media block snapshots * Block Editor: Consider RECEIVE_BLOCKS as non-persistent change (#14108) * Block Editor: Consider RECEIVE_BLOCKS as non-persistent change * Block Editor: Compare last action in reducer enhancer only if non-ignored * Plugin: Remove PHP functions slated for removal in 5.2 (#14090) * Plugin: Remove PHP functions slated for removal in 5.2 * Documentation: Update FAQ to avoid reference to deprecated function * Paste: ignore Google Docs UID tag (#14138) * Fix typos in copy-guide.md, readme.md and scripts.md. (#14089) * Separate the block editor shortcuts from the post editor shortcuts (#14116) * Fix: FocalPointPicker renders unlabelled input fields (#14152) * Testing: Remove unnecessary Enzyme React 16 workarounds (#14156) * Testing: Bump `enzyme-adapter-react-16` to 1.10.0 * Testing: Avoid unforwarded Button mock No longer necessary with native support for forwardRef in Enzyme * Testing: Un-skip BlockControls snapshot test * Plugin: Preserve inline scripts in Gutenberg override (#13581) * Plugin: Preserve inline scripts in Gutenberg override * Plugin: Restore storageKey assignment for persistence migration * Refactor to remove usage of post related effects in packages/editor. (#13716) This pull is the first step in moving away from the lingering usage of effects in various data stores among packages. This pull specifically deals with post related effects in the @wordpress/editor package (`core/editor` store). * Add array-callback-return rule; Fix current code breaking the rule. (#14154) ## Description Adds a rule to make sure Array functions that iterate on the array and should return something contain the return statement, otherwise, a forEach should probably be used instead. A case like this was fixed at #13953. In PR #13953 @aduth suggested the implementation of a lint rule to catch these cases. While trying to implement the rule and researching the best ways to do it, I noticed a rule like that already existed in the community and this PR is enabling it. We are also changing the code to respect the new rule no observable changes should be expected. ## How has this been tested? Observe the tests pass. Do some smoke testing, adding blocks, uploading files, and verify everything still works as before. * Update text displayed when an embed can't be previewed (#13715) * Update text displayed when an embed can't be previewed * Add translator note for update to embedded content np preview message * Fix: Image that is uploaded to an existing gallery does not appear in the edit gallery view (#12435) * RichText: fix wordwise selection on Windows (#14184) * RichText: fix wordwise selection on Windows * Fix crtl ctrl typo. * Add docs * Chore: Update: Code Quality: Remove some editor store references from block-editor (#14161) We missed to update the editor references from selectPreviousBlock, and selectNextBlock. ## Tests I added multiple blocks, I verified that when I remove a block the previous block still gets selected. * Framework: Update package-lock.json for new Enzyme adapter (#14192) * Notices: Remove inaccurate createNotice sole argument feature (#14177) * New package to auto-generate public API documentation (#13329) * Update nosolosw notifs (#14196) * Make IconButton able to be referenced. (#14163) * Make IconButton able to get referenced. * Components: Forward IconButton ref as stateless function * Components: Restore IconButton aria-pressed prop pass-through * Paste: preserve empty table cells (#14137) * Update Codeowners, add mkaz to docgen (#14198) * Plugin: Remove wp-editor-font stylesheet override (#14176) * Bring i18n functionality up to date (#12559) * Plugin: Add Text Domain to plugin headers * Bring i18n functionality up to date * Plugin: Set Gutenberg script translations as default domain Filter loading behavior to load from plugin translation files * Testing: Update gutenberg_override_script per localization changes * Plugin: Provide second argument for set script translations Technically optional, only after WP5.1+, which is newer than the current minimum version supported by Gutenberg * Fix: deleting the last block triggers a focus loss. (#14189) ## Description This PR fixes a problem: if the post contains one block and it is removed the focus is lost. This is a regression that happened when removeBlocks action was refactored to be a generator. We had an effect that inserts the default block during remove blocks action when certain conditions are met, this effect stopped working. This PR removes the effect and makes sure everything is handled by the removeBlocks action creator. End to end test available at #14191. ## How has this been tested? I created a new post. I wrote something in a paragraph I removed the paragraph using the remove button in the side menu and I verified the default block was added. * Clarify the block editor settings from the post editor settings (#14082) * Add repository.directory linting rule (fixes #13947) (#14200) * Add repository.directory rule to npm-package-json-lint-config (fix #13947) * Fix lock file (props @aduth) * Fix rule, update changelogs * Add PR reference * Add directory field to packages/docgen * Apply changes suggested by @ntwb * Update CHANGELOG.md * Plugin: Remove deprecated `_wpLoadGutenbergEditor`, `gutenberg` theme supports (#14144) * Plugin: Remove deprecated `gutenberg` theme supports * Plugin: Remove deprecated `_wpLoadGutenbergEditor` * Bump plugin version to 5.2.0-rc.1 (#14210) * Packages: Add missing expect-pupeteer dependency to e2e-tests package (#14212) * Lowercase Block Editor to block editor as per the core spelling Best Practices (#14205) ## Description I've updated all references to Block Editor to be lowercase as they aren't proper nouns. This conforms to the core spelling Best Practices; “block editor” or “block-based editor” | “Block Editor” or “Gutenberg” | When referring to the new editor. Reference - https://make.wordpress.org/core/handbook/best-practices/spelling/ Also ties back to the original discussion around the capitalization convention here; #12856 Previously opened #14203 to handle the Classic Editor changes. ## How has this been tested? Only tested that it didn't break anything. ## Types of changes Mostly comment changes, there was one string change and a couple translator comment changes. ## Checklist: - [x] My code is tested. - [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ --> - [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ --> - [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ --> - [x] I've included developer documentation if appropriate. <!-- Handbook: https://wordpress.org/gutenberg/handbook/designers-developers/ --> * Babel Preset Default: Avoid disabling regenerator option (#14130) * Babel Preset Default: Remove redundant (defaulted) corejs option * Scripts: Assign Babel runtime regenerator as externals in Webpack config * Babel Preset Default: Avoid disabling regenerator option * Testing: Await E2E promise interactions (#14219) * Testing: Await E2E promise interactions * Testing: Disable animations on every admin screen * Testing: Refactor reusable block management to compare before/after entry count * Lowercase classic editor when not in reference to the plugin. (#14203) * Lowercase classic editor when not in reference to the plugin. * Reverted heading to use capitalized as the heading choice throughout uses full capitalization style on headings so went back to make consistent as @torres126 recommended. Also updated the snap file to resolve the Travis CI error. * Missed saving README.md where the revert on headding capitalization was in my editor. * Fix: Calendar block: Always show current month for non post types on the editor (#13873) * Fix allowed_block_types regression (#14229) * Fix: Latest posts: Title is clickable across the full width of the row (#14109) ## Description The title in latest posts block was clickable across the full width of the row, making it easy to click on the title by mistake. This problem only affects the editor on the front end things worked as expected. ## How has this been tested? I added the latest posts block. I verified that the title is only clickable if the mouse is above the title and not above any part of its row. ## Screenshots <!-- if applicable --> Before:  After:  * Blocks: Regenerate RSS, Search block fixtures (#14122) * Component: date-time: Remove comparison to now when testing getMomentDate (#14230) * RichText: Fix undo after pattern (#13917) * Fix undo after pattern * Update e2e test * RichText: don't use DOM to add line padding (#13850) * RichText: don't use DOM to add line padding * Clean up * Keep track of user inserted line breaks * Mark isEditableTree param unstable * Use a central script instead of one per package to generate docs (#14216) * Update: Use escape key press instead of mouse movement to show block toolbar (#14247) This PR updates our end to end tests to use escape key press instead of mouse movement to show the block toolbar. The PR follows a suggestion by @aduth in #14191 (comment) ## How has this been tested? We only need to make sure end 2 end tests pass * Switch the Travis badge from travis-ci.org to travis-ci.com. (#14250) * Update the npm packages release process (#14136) * Update plugin version to 5.2 (#14255) * chore(release): publish - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] * Update the package changelogs after the npm release * Add clickBlockToolbarButton end to end test util (#14254) This PR adds an end 2 end test util that allows clicking in a block toolbar button and refactors existing code to use it. ## How has this been tested? We only need to verify that the end 2 end tests pass. * element: set up autogenerated API docs (#14269) * Testing: Trash existing posts as admin user (#14244) * escape-html: set up autogenerated API docs (#14268) * html-entities: set up auto-generated API docs (#14267) * keycodes: set up auto-generated API docs (#14265) * Use currentColor for fill of placeholder icon—ensures icon contrasts with background color of block (#14257) * a11y: set up auto-generated API docs (#14288) * blob: set up auto-generated API docs (#14286) * block-library: set up auto-generated API docs (#14282) * compose: set up auto-generated API docs (#14278) * dom: set up auto-generated API docs (#14273) * i18n: set up auto-generated API docs (#14266) * Clarify that we should rebase the branch when preparing the npm release branches (#14260) * autop: set up auto-generated API docs (#14287) * dom-ready: set up autogenerated API docs (#14272) * block-editor: set up auto-generated API docs (#14285) * Adding an e2e test verifying simple keyboard navigation through blocks (#13455) * Adding an e2e test verifying simple keyboard navigation through blocks (Issue #12392) using bug resolved in #11773 as the basis for the steps * Moving `navigateToContentEditorTop`, `tabThroughParagraphBlock`, `tabThroughBlockMoverControl` and `tabThroughBlockToolbar` to the parent scope. Using pressKeyWithModifier within navigateToContentEditorTop. * Add nested blocks inside cover block (#13822) * rich-text: set up autogenerated API docs (#14220) * Add link to WordPress Support documentation (#14316) * Remove users documentation (#14318) * Fix the double dash issue (#14321) The double dash was being converted to a single dash (–) * docgen: Generate package docs in parallel (#14295) * Add new actions for invalidating resolution caches (#14225) * add new actions for invalidating resolution caches * use path array for omit * clarify logic * CC-BY-3.0 is not GPLv2 compatible. (#14329) * blocks: set up auto-generated API docs (#14279) * deprecated: set up auto-generated API docs (#14275) * priority-queue: set-up auto-generated API docs (#14262) * shortcode: set up autogenerated API docs (#14218) * viewport: set up autogenerated API docs in README (#14214) * url: set up autogenerated API docs (#14217) * redux-routine: set up autogenerated API docs (#14228) * date: set up auto-generated API docs (#14276) * block-serialization-default-parser: set up auto-generated API docs (#14280) * RichText: collapse toolbar (#14233) * RichText: collapse toolbar * Move inline image * Add balanced margin * Add tooltip * Update e2e test * Update e2e test * Remove RichTextInserterItem * Ensure there are fills before rendering * Make toggle button bigger * Use clickBlockToolbarButton * Fix e2e test * RichText: fix br padding in multiline and nesting (#14315) * RichText: fix br padding in multiline and nesting * Add e2e test * Docs: Release: Suggest lighter SVN checkout (#14259) * plugins: set up auto-generated API docs (#14263) * Move the block components to the block editor module (#14112) * wordcount: set up autogenerated API docs (#14213) * Update packages used by eslint plugin to remove warnings (#14077) * Update packages used by eslint plugin to remove warnings * Manually modify package-lock.json Props @gziolo. * Specify React version in eslint-plugin-react settings * Fix react/jsx-no-target lint errors * Try Legacy widget block (#13511) ## Description Implements: #4770 This PR is a **proof of concept** of a legacy widget block. A block that allows existing WordPress widgets to be added as Gutenberg blocks. The design is similar to the one proposed by @melchoyce in #4770 (comment) (option 1). Although it seems option two was preferred, it would require to expose each widget as a block similar to what embeds do, and it would increase the technical complexity and make testing/debugging harder, so I preferred to use option 1 for now. I will gladly iterate on the UX after this proof of concept gets more stable. ## Some technical details The available widgets are preloaded to Gutenberg similar to what happens with page templates. ### REST-API user story I want to able to pass a widget identifier to an endpoint, pass the existing widget attributes and the changes the user is making if any, and receive from the rest API, the sanitized new widget attributes ready to save and an HTML form that allows the user to edit the widget in the new state. ### REST-API endpoint A very simple REST-API endpoint was implemented. The endpoint receives the previous instance of a widget (previous attributes) the changed instance of a widget (changed attributes if any) and returns the new instance of the widget and the HTML form that allows editing this widget. There are two ajax-admin endpoints save-widget and update-widget. It looks like each one has specificities that make using it here complex. The ajax admin code would probably require some changes to be used here. Our use case is straightforward from the backend perspective as the widget does not need to be saved anywhere, and the widget is not associated with any widget area. The most straightforward approach seemed to be using a very simple endpoint. If I missed something and adapting existing endpoints is simpler feel free to comment, and I will have a look. ### Block Architecture The edit component of the block handles the start placeholder that allows selecting a widget, and the tab mechanism that allows switching between edit and preview. The preview is done using the ServerSideRender component. The edit is done using two components: **WidgetEditHandler:** Is responsible for server communication using the endpoint we created, and for keeping the required local state for the edition. Renders an update button, when pressed we retrieve from the dom the changed fields (using a method provided by WidgetEditDomManager) issues a request to the server and updates the legacy widget instance attribute with the server answer. **WidgetEditDomManager:** Component responsible for rendering the starting dom for a widget. After the first render React never rerenders the component again, the content rendered by this component is then managed by the scripts the widgets may implement. When a new instance of the form HTML is received we manually update the dom changing .widget-content (like the customizer and the widget screen) do. This component provides a method that returns an object with the widget changed attributes. When this component is mounted it triggers a widget-added event when a new update happens and the dom is changed by the component widget-update jQuery event is triggered. On front end widget are rendered with a simple call to [the_widget](https://codex.wordpress.org/Function_Reference/the_widget). ## Screenshots <!-- if applicable -->   ## Known problems - The block is not aware of any change inside the widget until the update button is pressed. This replicates the save button on the widgets screen. But it is annoying if we change something on the widget and go to the widget preview right away our changes are not reflected in the preview. Having an explicit update, makes testing and debugging easier, we may than explore other approaches e.g.: also save when preview happens, save on blur events, etc. - The text widget that contains TinyMCE crashes and fails to init. It calls wp.editor.initialize to reference TinyMCE and on Gutenberg, wp.editor is our editor module. This problem may have happened with meta boxes if it was solved probably the same approach may be applied. - The widget design may be affected by CSS that exists in Gutenberg, so the design of the widgets does not look the same. Ideally, Gutenberg CSS would not affect the widgets but as they are on the same page that's not the case. - Some third-party widgets using don't initialize correctly. That happens because the dom of the editor is not equal to the dom of the customizer and/or the widget screen. Some JS widgets use click events on the widgets screen to initialize while on Gutenberg these events don't happen, some check if they are on the customizer page (body contains customizer classes) before handling widget-updated events. Normally adapting a widget that does not initialize correctly is a matter of changing a very simple condition on the plugin. * Update changelog for esling-plugin (#14339) * Add ability to transform [video] shortcodes to video block (#14042) * CSS to remove the clipping of the toolbar in RTL languages (#14088) * added the more tag via the old editor's image (#14173) * Seimplify hierarchical term selector strings. (#13938) * Add: End to end test to make sure when all blocks get removed the default block appender gets inserter and selected (#14191) * Fix the Deprecated Blocks link (#14355) The *Deprecated Blocks link* was pointing to the wrong URL. * Added testcases for isKeyboardEvent in keycodes module (#14073) * Added testcases for isKeyboardEvent in keycodes module * Fixed assertion checks and updated attachEventListeners function * Added testcases for isKeyboardEvent in keycodes module * Fixed assertion checks and updated attachEventListeners function * Fix: Quote to heading transform (#14348) * Latest Comments block: use align supports flag + code cleanup (#11411) * ToggleControl allows setting custom classes (#13804) * ToggleControl allows setting custom classes Related Issue: #11349 This pull request fixes the "ToggleControl does not allow setting custom classes" problem. This lets the user to add a custom classname on the element, just like in TextControl. * Update README of toggle-control Add property className and its description * Update packages/components/src/toggle-control/README.md Formatted style of README Co-Authored-By: AmartyaU <[email protected]> * Edited text of button to be actionable (#14347) * Block library: Remove all test snapshots for blocks (#14349) * Fix: Inserter impossible to collapse panels while searching. (#13884) * Make taxonomies test relieable. (#14340) * edit-post: set up autogenerated API docs (#14271) * Plugin: Remove postinstall step (#14353) * Plugin: Remove postinstall step * Framework: Run build for JS unit tests Assumed previously relied on postinstall * Add check to the merge function in headings and paragraph blocks (#13981) If trying to merge a blank heading or paragraph, if this check isn't performed, the result is the string 'Null' appearing in the text. * Update internationalization process with complete updated example. (#13909) * Update internationalization process with complete updated example. * Minor edits * Update i18n package documentation Updates with links to expanded section in Gutenberg Handbook Fixes instructions to use wp-cli which is the recommended tool for creating pot files, and po2json to convert the format. * Apply suggestions from code review Co-Authored-By: mkaz <[email protected]> * Remove duplicate documentation, just link to Handbook * Batch of changes from reviews props @swisspiddy * :shakes-fist-at-whitespace: * Updates to include full .pot and .po files per @nosolosw review * Add JSON translation example * Fix syntax to make gutenberg build in this branch * E2E Test Utils: Add missing babel/runtime dependency (#14374) * Build: Only prompt clean if unclean (#14352) * Remove unused mobile stylesheets * Port editor refactoring for mobile * fix names (#14382) * Add withRegistry HigherOrderComponent (#14370) * Fix block validation error message (#13499) * Rename variable to make code more clear * Fix display of expected and actual block HTML The variable were in the wrong order, making the message confusing. It would show the actual HTML as the expected HTML and visa versa. * Change wording to be more clear Expected & Actual were confusing words to use in this content. This change makes the message actually reflect what the values are. * Regenerate docs * Fix: Global inserter does not validates block insert restrictions (#14020) * Teach build and start commands to use Webpack default if none is provided (#13877) * Use a default webpack config if none is provided * Extract webpack utils from build command * Update start command * Add docs * Add Webpack documentation * Add example of how to overwrite the default plugins * Do not export hasWebpackConfig as it is not used anywhere else. * Always pass webpack CLI args to command * Update README * Remove section on extending the default webpack config file * Simplify array passing Co-Authored-By: nosolosw <[email protected]> * Simplify pushing to array Co-Authored-By: nosolosw <[email protected]> * Fix externals docs * Use webpack instead of Webpack * Add Changelog entry * RichText: Fix prepareEditableTree (#14284) * Fix use of __experimentalCreatePrepareEditableTree without __experimentalCreateOnChangeEditableValue * Add unit tests * Add module entry point to notices package.json file (#14388) * Plugin: Remove PHP functions slated for 5.3 removal (#14380) * Make @wordpress/edit-post compatible with native * Unify styles for UnsupportedBlock after sass build default imports is fixed on native * Remove scss variables and colors import after fixing sass build in gb-mobile * RichText: change value to have separate keys for line and object formats (#13948) * Add objects and lineFormats * Update RichText * Fix image toolbar * Update format placeholder * lineFormat => lines * concatPair => mergePair * Update selectedFormat checks * Add some extra info to create docs * Move create docs inline * Merge lines and objects * Fix typos * Add getActiveObject unit tests * Update docs * Rebase * Adjust unstableToDom arguments * Remove normaliseFormats from list functions * Update native files * Update native file * Remove code formatting for mobile * RichText: try alternative list shortcuts (to tab) (#14343) * RichText: try alternative list shortcuts * Try tooltips * Change tooltips to use text * Add inline comments * Add e2e test * Rebase * Remove unused styles classes. (#14338) * [Mobile]Fix placeholder position of block appender (#14386) * Fix placeholder position of block appender * Remove unused import * Change import position * Remove unused import in css file * Remove extra container view * Update travis.yml from master branch to fix CI issues * [Mobile]Update caret position on insert link (#14317) * Update selection on text change if needed * Update caret position when editing the link * Revert putting the caret at end when we transform the selected text into link * Fix source map paths published to npm (#14409) * Components: update Button readme to add design guidelines (#14194) These changes add design documentation. Co-Authored-By: kjellr <[email protected]> * Remove export from syntax still a proposal * Update README.md
|
@jorgefilipecosta It is a real shame that this PR doesn't use WP-API's existing widget's endpoint that can be found https://github.com/WP-API/wp-api-menus-widgets-endpoints/blob/master/lib/class-wp-rest-widgets-controller.php |
This was referenced Mar 20, 2019
youknowriad
pushed a commit
that referenced
this pull request
Mar 20, 2019
## Description Implements: #4770 This PR is a **proof of concept** of a legacy widget block. A block that allows existing WordPress widgets to be added as Gutenberg blocks. The design is similar to the one proposed by @melchoyce in #4770 (comment) (option 1). Although it seems option two was preferred, it would require to expose each widget as a block similar to what embeds do, and it would increase the technical complexity and make testing/debugging harder, so I preferred to use option 1 for now. I will gladly iterate on the UX after this proof of concept gets more stable. ## Some technical details The available widgets are preloaded to Gutenberg similar to what happens with page templates. ### REST-API user story I want to able to pass a widget identifier to an endpoint, pass the existing widget attributes and the changes the user is making if any, and receive from the rest API, the sanitized new widget attributes ready to save and an HTML form that allows the user to edit the widget in the new state. ### REST-API endpoint A very simple REST-API endpoint was implemented. The endpoint receives the previous instance of a widget (previous attributes) the changed instance of a widget (changed attributes if any) and returns the new instance of the widget and the HTML form that allows editing this widget. There are two ajax-admin endpoints save-widget and update-widget. It looks like each one has specificities that make using it here complex. The ajax admin code would probably require some changes to be used here. Our use case is straightforward from the backend perspective as the widget does not need to be saved anywhere, and the widget is not associated with any widget area. The most straightforward approach seemed to be using a very simple endpoint. If I missed something and adapting existing endpoints is simpler feel free to comment, and I will have a look. ### Block Architecture The edit component of the block handles the start placeholder that allows selecting a widget, and the tab mechanism that allows switching between edit and preview. The preview is done using the ServerSideRender component. The edit is done using two components: **WidgetEditHandler:** Is responsible for server communication using the endpoint we created, and for keeping the required local state for the edition. Renders an update button, when pressed we retrieve from the dom the changed fields (using a method provided by WidgetEditDomManager) issues a request to the server and updates the legacy widget instance attribute with the server answer. **WidgetEditDomManager:** Component responsible for rendering the starting dom for a widget. After the first render React never rerenders the component again, the content rendered by this component is then managed by the scripts the widgets may implement. When a new instance of the form HTML is received we manually update the dom changing .widget-content (like the customizer and the widget screen) do. This component provides a method that returns an object with the widget changed attributes. When this component is mounted it triggers a widget-added event when a new update happens and the dom is changed by the component widget-update jQuery event is triggered. On front end widget are rendered with a simple call to [the_widget](https://codex.wordpress.org/Function_Reference/the_widget). ## Screenshots <!-- if applicable -->   ## Known problems - The block is not aware of any change inside the widget until the update button is pressed. This replicates the save button on the widgets screen. But it is annoying if we change something on the widget and go to the widget preview right away our changes are not reflected in the preview. Having an explicit update, makes testing and debugging easier, we may than explore other approaches e.g.: also save when preview happens, save on blur events, etc. - The text widget that contains TinyMCE crashes and fails to init. It calls wp.editor.initialize to reference TinyMCE and on Gutenberg, wp.editor is our editor module. This problem may have happened with meta boxes if it was solved probably the same approach may be applied. - The widget design may be affected by CSS that exists in Gutenberg, so the design of the widgets does not look the same. Ideally, Gutenberg CSS would not affect the widgets but as they are on the same page that's not the case. - Some third-party widgets using don't initialize correctly. That happens because the dom of the editor is not equal to the dom of the customizer and/or the widget screen. Some JS widgets use click events on the widgets screen to initialize while on Gutenberg these events don't happen, some check if they are on the customizer page (body contains customizer classes) before handling widget-updated events. Normally adapting a widget that does not initialize correctly is a matter of changing a very simple condition on the plugin.
youknowriad
pushed a commit
that referenced
this pull request
Mar 20, 2019
## Description Implements: #4770 This PR is a **proof of concept** of a legacy widget block. A block that allows existing WordPress widgets to be added as Gutenberg blocks. The design is similar to the one proposed by @melchoyce in #4770 (comment) (option 1). Although it seems option two was preferred, it would require to expose each widget as a block similar to what embeds do, and it would increase the technical complexity and make testing/debugging harder, so I preferred to use option 1 for now. I will gladly iterate on the UX after this proof of concept gets more stable. ## Some technical details The available widgets are preloaded to Gutenberg similar to what happens with page templates. ### REST-API user story I want to able to pass a widget identifier to an endpoint, pass the existing widget attributes and the changes the user is making if any, and receive from the rest API, the sanitized new widget attributes ready to save and an HTML form that allows the user to edit the widget in the new state. ### REST-API endpoint A very simple REST-API endpoint was implemented. The endpoint receives the previous instance of a widget (previous attributes) the changed instance of a widget (changed attributes if any) and returns the new instance of the widget and the HTML form that allows editing this widget. There are two ajax-admin endpoints save-widget and update-widget. It looks like each one has specificities that make using it here complex. The ajax admin code would probably require some changes to be used here. Our use case is straightforward from the backend perspective as the widget does not need to be saved anywhere, and the widget is not associated with any widget area. The most straightforward approach seemed to be using a very simple endpoint. If I missed something and adapting existing endpoints is simpler feel free to comment, and I will have a look. ### Block Architecture The edit component of the block handles the start placeholder that allows selecting a widget, and the tab mechanism that allows switching between edit and preview. The preview is done using the ServerSideRender component. The edit is done using two components: **WidgetEditHandler:** Is responsible for server communication using the endpoint we created, and for keeping the required local state for the edition. Renders an update button, when pressed we retrieve from the dom the changed fields (using a method provided by WidgetEditDomManager) issues a request to the server and updates the legacy widget instance attribute with the server answer. **WidgetEditDomManager:** Component responsible for rendering the starting dom for a widget. After the first render React never rerenders the component again, the content rendered by this component is then managed by the scripts the widgets may implement. When a new instance of the form HTML is received we manually update the dom changing .widget-content (like the customizer and the widget screen) do. This component provides a method that returns an object with the widget changed attributes. When this component is mounted it triggers a widget-added event when a new update happens and the dom is changed by the component widget-update jQuery event is triggered. On front end widget are rendered with a simple call to [the_widget](https://codex.wordpress.org/Function_Reference/the_widget). ## Screenshots <!-- if applicable -->   ## Known problems - The block is not aware of any change inside the widget until the update button is pressed. This replicates the save button on the widgets screen. But it is annoying if we change something on the widget and go to the widget preview right away our changes are not reflected in the preview. Having an explicit update, makes testing and debugging easier, we may than explore other approaches e.g.: also save when preview happens, save on blur events, etc. - The text widget that contains TinyMCE crashes and fails to init. It calls wp.editor.initialize to reference TinyMCE and on Gutenberg, wp.editor is our editor module. This problem may have happened with meta boxes if it was solved probably the same approach may be applied. - The widget design may be affected by CSS that exists in Gutenberg, so the design of the widgets does not look the same. Ideally, Gutenberg CSS would not affect the widgets but as they are on the same page that's not the case. - Some third-party widgets using don't initialize correctly. That happens because the dom of the editor is not equal to the dom of the customizer and/or the widget screen. Some JS widgets use click events on the widgets screen to initialize while on Gutenberg these events don't happen, some check if they are on the customizer page (body contains customizer classes) before handling widget-updated events. Normally adapting a widget that does not initialize correctly is a matter of changing a very simple condition on the plugin.
Tug
added a commit
that referenced
this pull request
Mar 21, 2019
* Bump plugin version to 5.1.0-rc.1 * RichText: only ignore input types that insert HTML (#13914) * RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set * Bump plugin version to 5.1.0 * Deprecate RichTextInputEvent on mobile too (#13975) * The undelying RichText component implementation has changed the parameters returned onChange, and we forgot to update the PostTitle component (#13967) * Fixes wrong state comparison (#13987) Upload media progress bar is missing while media is uploading new * Re-add rootTagsToEliminate prop (#14006) * [Mobile]Update PostTitle to apply borders when it is focused (#13970) * Trigger onFocusStatusChange from PostTitle * Fix lint issue * Update post title shadow mechanism Also open inner ref so that focus state can be updated when focus is made programmatically * Update props * Update onRef as ref * Update title padding&margin * Mobile: Rename ref to innerRef on PostTitle (#14024) * Fixes a red screen in mobile. (#14011) * Change background color on image placeholder block (#14033) * Changed upload media icon color * Changed media placeholder background color * Fix post title native syntax (#14041) * Fix unexpected token in native code * Dummy commit to trigger Travis * Include the rnmobile release branch to Travis builds * Mobile: Links UI using BottomSheet component (#13972) * Mobile: Replaced Links UI with bottom-sheet component * Mobile links UI: Removed commented code. * Mobile: Fix lint issues * Mobile Links UI: Remove autofocus on Android. This hides an issue where the modal sometimes will be under the keyboard on Android. * Fixes pasting links. (#14038) * Update post title vertical paddings (#14040) * Add try/catch fallback to plain text for pasteHandler (#14044) * Fix link interface. (#14052) * [Mobile]Fix title padding on Android (#14057) * Remove title vertical paddings for Android * Revert "Remove title vertical paddings for Android" This reverts commit 09f0d35. * Import padding variables * Revert wrong format image color (#14058) * Stop building the mobile release branch on Travis (#14060) * [Native mobile] Bring release v1.0.1 back to "mobile develop" (#14075) * Don't allow placeholder to moves once we tap on it (#14066) * Use platform based SCSS vars for block minHeight (#14070) * Rnmobile/refactor rich text sizing code (#14164) * Make richText height changes contained to the rich text block. * Remove commented out code. * Remove aztec height from state. * Allow minHeight to be optional. * Remove minHeight from postTitle. * Remove minHeight on heading block. * Mobile: Fix pasting in header (#14118) * Fixes pasting in heading blocks. * Fixed an issue with a missing constant. * Removes some code that was added back as part of a merge conflict. * Re-adds some code removed by mistake. * Mobile: Fix links ui on landscape iOS v2 (#14240) * RNMobile: Adding original versin of keyboard-avoiding-view (to be modified) * Modified keyboard-avoiding-view to work well with bottom-sheets. * Mobile: Avoid adding empty link to text. (#14270) * Mobile Links UI: Avoid creating link with empty url field * Mobile Links UI: Using URL Keyboard type for url field * Fix lint issues * Avoid to reset html to empty string if block is heading and platform is android (#14301) * Avoid to reset html to empty string if block is heading on android platform * Send empty tag flag from heading block to RichText * Set minHeight based on fontSize or style. (#14344) * Set minHeight based on fontSize or style. * Only use the styles to set the min-height. * Remove unused styles classes. (#14338) * [Mobile]Fix placeholder position of block appender (#14386) * Fix placeholder position of block appender * Remove unused import * Change import position * Remove unused import in css file * Remove extra container view * Update travis.yml from master branch to fix CI issues * [Mobile]Update caret position on insert link (#14317) * Update selection on text change if needed * Update caret position when editing the link * Revert putting the caret at end when we transform the selected text into link * Get the last master changes into the mobile develop branch (#14375) * Add ESNext syntax to meta block tutorial (#13954) * Add ESNext syntax to meta block tutorial * Applied WordPress code styles to the examples * Apply suggestions from code review Co-Authored-By: mkaz <[email protected]> * Editor: RichText: Check for presence of inputType (#13986) * Bump plugin version to 5.1.1 (#13990) * Added a snippet for observing the browser when running e2e tests (#13993) * Added a snippet for observing the browser when running e2e tests * Extract reusable part of Webpack config and put in @wordpress/scripts (#13814) * New build-config package with webpack config. Pull the Gutenberg webpack config into a package so it can be re-used for block/extension development. * Require new build-config package. * Dynamically handle WP externals with a function. Use code from WP Calypso for handling WP externals so we don't have to have the actual list of packages accessible in our webpack configuration. * Use webpack config from build-config package. * Require build-config package. * Adjust file refs for WP packages. * Move main gutenberg entry definition and webpack copy plugin out of build-config. * Add react-dev-utils for formatting webpack compiler messages. * Implement build script using webpack config from build-config. * Adjust output path so build goes to working directory. * Update package name to webpack-config * Apply more tweaks to the way webpack config package is structured * Update the way externals are handled * Add default values for entry and output * Move shared webpack config under @wordpress/scripts package * Improve the way how loaders are handled * Replace GUTENBERG with WP in webpack config env variables Co-Authored-By: gziolo <[email protected]> * Bring back feature flag to webpack config accidentally removed during merge * Add missing dev dependencies for the packages used in webpack config * Fix the list of excluded folders for babel-loader * Use globals instead of imports in tutorials (#13995) * Use globals instead of imports * Update docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md Co-Authored-By: nosolosw <[email protected]> * Update docs/designers-developers/developers/tutorials/metabox/meta-block-3-add.md Co-Authored-By: nosolosw <[email protected]> * URL input popover visual cleanup (#13973) * Use chevron instead of ellipsis in url input field options. * Mimic toolbar icon styles for the icons in the URL popover. * Add a left divider before the URL settings toggle * Even up the spacing in the settings panel. * Add periods to code comments. * Update snapshot * Reinstate "underline" in default formats list (#14008) * Upgrade React to 16.8.2: Welcome React Hooks (#13992) * Upgrade React to 16.8.2 * Update package-lock.json file * Expose React Hooks * Revert "Upgrade React to 16.8.2: Welcome React Hooks (#13992)" (#14017) This reverts commit 6f88bec. * Cleanup URL Popover stylesheet. (#14015) As noted in #13973, this stylesheet uses a relatively non-standard SCSS method of nesting some classnames. For instance: `.editor-url-popover { &__settings-toggle { ... } }`. ... instead of: `.editor-url-popover__settings-toggle { ... }` This is different from the conventions used elsewhere in Gutenberg, and is a bit more difficult to follow for that reason. This commit un-nests those styles, and should have no effect on the compiled CSS. * Add a generic block editor module (#13088) * RichText: warn when using inline container (#13921) * RichText: warn when using inline container * Add env check * Update documentation * Try updating the WP database (#14048) * Merge native mobile release v1.0 to master (#14061) * Bump plugin version to 5.1.0-rc.1 * RichText: only ignore input types that insert HTML (#13914) * RichText: only ignore input types that insert HTML * Mark RichTextInputEvent as unstable * Use Set * Bump plugin version to 5.1.0 * Deprecate RichTextInputEvent on mobile too (#13975) * The undelying RichText component implementation has changed the parameters returned onChange, and we forgot to update the PostTitle component (#13967) * Fixes wrong state comparison (#13987) Upload media progress bar is missing while media is uploading new * Re-add rootTagsToEliminate prop (#14006) * [Mobile]Update PostTitle to apply borders when it is focused (#13970) * Trigger onFocusStatusChange from PostTitle * Fix lint issue * Update post title shadow mechanism Also open inner ref so that focus state can be updated when focus is made programmatically * Update props * Update onRef as ref * Update title padding&margin * Mobile: Rename ref to innerRef on PostTitle (#14024) * Fixes a red screen in mobile. (#14011) * Change background color on image placeholder block (#14033) * Changed upload media icon color * Changed media placeholder background color * Fix post title native syntax (#14041) * Fix unexpected token in native code * Dummy commit to trigger Travis * Include the rnmobile release branch to Travis builds * Mobile: Links UI using BottomSheet component (#13972) * Mobile: Replaced Links UI with bottom-sheet component * Mobile links UI: Removed commented code. * Mobile: Fix lint issues * Mobile Links UI: Remove autofocus on Android. This hides an issue where the modal sometimes will be under the keyboard on Android. * Fixes pasting links. (#14038) * Update post title vertical paddings (#14040) * Add try/catch fallback to plain text for pasteHandler (#14044) * Fix link interface. (#14052) * [Mobile]Fix title padding on Android (#14057) * Remove title vertical paddings for Android * Revert "Remove title vertical paddings for Android" This reverts commit 09f0d35. * Import padding variables * Revert wrong format image color (#14058) * Stop building the mobile release branch on Travis (#14060) * Avoid mutating imported default config in webpack config (#14039) * Make Babel import JSX pragma plugin aware of `wp.element.createElement` (#13809) * Test: Add test which verifies wheter JSX pragma detects WP global * Update packages/babel-plugin-import-jsx-pragma/test/index.js Co-Authored-By: gziolo <[email protected]> * Skip import when the scope variable is already defined * Add failing tests for inner scope variable defined verification * Add import statement when there is any undefined scope variable * Docs: Add details about changes introduced to Babel plugin * Upgrade Jest to version 24 (breaking changes) (#13922) * Upgrade Jest to version 24 (breaking changes) * Update changelog files to list all dependencies upgraded * Downgrade puppeteer to the previous version 1.6.1 * Try to fix failing e2e tests setup * Added clarification in the changelog * Testing: Remove expect-puppeteer import reference * Address issues raised during code review * Codeowners changes for @chrisvanpatten (#14062) * Codeowners changes for @chrisvanpatten * Remove obsolete ghost placeholder for no longer onowned styles * Add repository.directory fields (fixes #13946) (#14059) * Improve default Babel preset to include JSX pragma (#13540) * Include custome JSX pragma support in Babel preset * Stop using Babel tranpiliation for two packages babel-plugin-import-jsx-pragma and postcss-themes * Add engines field to node based packages * Use the block editor store instead of the editor one (#13105) * Docs: release.md: miscellaneous fixes (#14083) * Docs: release.md: misc. fixes * Disable block navigation and document outline items in text mode (#14081) * Use aria-disabled instead of disabled. * Fix unrecognized prop warning. * Disable Document Outline items in text mode. * Improve buttons alignment. * Pass isTextModeEnabled as prop from parent. * Fix selector in document outline. (#14094) * Fix selector in document outline. * Import getBlocks from its new location. * Plugin: Require includes for deprecated `use_block_editor_for_` functions (#14096) * Plugin: Fix 5.1.0 deprecated functions to correct plugin version * Plugin: Require includes for deprecated `use_block_editor_for_` functions * Plugin: Update server blocks script to use core equivalent function (#14097) `gutenberg_prepare_blocks_for_js` was deprecated in Gutenberg 5.0 * Correct visual error in the quote block icon (#14091) Fixes #13659. The current quote block icon appears to have some over-simplified edges. This replaces it with a crisper version. * Try: Add a subtle animation to the is-active indicator for sidebar tabs (#13956) * Add subtle animation to the is-active indicator for sidebar tabs * Re-instate the empty border, to prevent browser defaults from kicking in. * Remove extra 1px of empty space * Focus state cleanup for tab buttons Allow them to inherit the box shadow (used for the active tab) Use the usual standard dotted outline instead of a solid one. * Add a pseudoclass to ensure the active border appears in Windows High Contrast Mode. * Fix typo. This should match the value from `/packages/edit-post/src/components/sidebar/settings-header/style.scss` * Plugin: Remove vendor script registration (#13573) * chore: Fix: FormToggle docs documents props the component does not uses (#14099) * Babel Plugin Import JSX Pragma: Remove import visitor (#14106) Props to @aduth for coding this optimization. * Add: Block specific toolbar button sample to the format api tutorial (#14113) ## Description This PR updates the format API tutorial (toolbar button section) to include a sample of a button that only renders on a certain block. Answers a question posted on #14104. Closes: #14104 ## How has this been tested? I pasted the sample code on the browser console and verified it works as expected. * Use the editor settings to pass a mediaUpload handler (#14115) * Use the editor settings to pass a mediaUpload handler * Update media block snapshots * Block Editor: Consider RECEIVE_BLOCKS as non-persistent change (#14108) * Block Editor: Consider RECEIVE_BLOCKS as non-persistent change * Block Editor: Compare last action in reducer enhancer only if non-ignored * Plugin: Remove PHP functions slated for removal in 5.2 (#14090) * Plugin: Remove PHP functions slated for removal in 5.2 * Documentation: Update FAQ to avoid reference to deprecated function * Paste: ignore Google Docs UID tag (#14138) * Fix typos in copy-guide.md, readme.md and scripts.md. (#14089) * Separate the block editor shortcuts from the post editor shortcuts (#14116) * Fix: FocalPointPicker renders unlabelled input fields (#14152) * Testing: Remove unnecessary Enzyme React 16 workarounds (#14156) * Testing: Bump `enzyme-adapter-react-16` to 1.10.0 * Testing: Avoid unforwarded Button mock No longer necessary with native support for forwardRef in Enzyme * Testing: Un-skip BlockControls snapshot test * Plugin: Preserve inline scripts in Gutenberg override (#13581) * Plugin: Preserve inline scripts in Gutenberg override * Plugin: Restore storageKey assignment for persistence migration * Refactor to remove usage of post related effects in packages/editor. (#13716) This pull is the first step in moving away from the lingering usage of effects in various data stores among packages. This pull specifically deals with post related effects in the @wordpress/editor package (`core/editor` store). * Add array-callback-return rule; Fix current code breaking the rule. (#14154) ## Description Adds a rule to make sure Array functions that iterate on the array and should return something contain the return statement, otherwise, a forEach should probably be used instead. A case like this was fixed at #13953. In PR #13953 @aduth suggested the implementation of a lint rule to catch these cases. While trying to implement the rule and researching the best ways to do it, I noticed a rule like that already existed in the community and this PR is enabling it. We are also changing the code to respect the new rule no observable changes should be expected. ## How has this been tested? Observe the tests pass. Do some smoke testing, adding blocks, uploading files, and verify everything still works as before. * Update text displayed when an embed can't be previewed (#13715) * Update text displayed when an embed can't be previewed * Add translator note for update to embedded content np preview message * Fix: Image that is uploaded to an existing gallery does not appear in the edit gallery view (#12435) * RichText: fix wordwise selection on Windows (#14184) * RichText: fix wordwise selection on Windows * Fix crtl ctrl typo. * Add docs * Chore: Update: Code Quality: Remove some editor store references from block-editor (#14161) We missed to update the editor references from selectPreviousBlock, and selectNextBlock. ## Tests I added multiple blocks, I verified that when I remove a block the previous block still gets selected. * Framework: Update package-lock.json for new Enzyme adapter (#14192) * Notices: Remove inaccurate createNotice sole argument feature (#14177) * New package to auto-generate public API documentation (#13329) * Update nosolosw notifs (#14196) * Make IconButton able to be referenced. (#14163) * Make IconButton able to get referenced. * Components: Forward IconButton ref as stateless function * Components: Restore IconButton aria-pressed prop pass-through * Paste: preserve empty table cells (#14137) * Update Codeowners, add mkaz to docgen (#14198) * Plugin: Remove wp-editor-font stylesheet override (#14176) * Bring i18n functionality up to date (#12559) * Plugin: Add Text Domain to plugin headers * Bring i18n functionality up to date * Plugin: Set Gutenberg script translations as default domain Filter loading behavior to load from plugin translation files * Testing: Update gutenberg_override_script per localization changes * Plugin: Provide second argument for set script translations Technically optional, only after WP5.1+, which is newer than the current minimum version supported by Gutenberg * Fix: deleting the last block triggers a focus loss. (#14189) ## Description This PR fixes a problem: if the post contains one block and it is removed the focus is lost. This is a regression that happened when removeBlocks action was refactored to be a generator. We had an effect that inserts the default block during remove blocks action when certain conditions are met, this effect stopped working. This PR removes the effect and makes sure everything is handled by the removeBlocks action creator. End to end test available at #14191. ## How has this been tested? I created a new post. I wrote something in a paragraph I removed the paragraph using the remove button in the side menu and I verified the default block was added. * Clarify the block editor settings from the post editor settings (#14082) * Add repository.directory linting rule (fixes #13947) (#14200) * Add repository.directory rule to npm-package-json-lint-config (fix #13947) * Fix lock file (props @aduth) * Fix rule, update changelogs * Add PR reference * Add directory field to packages/docgen * Apply changes suggested by @ntwb * Update CHANGELOG.md * Plugin: Remove deprecated `_wpLoadGutenbergEditor`, `gutenberg` theme supports (#14144) * Plugin: Remove deprecated `gutenberg` theme supports * Plugin: Remove deprecated `_wpLoadGutenbergEditor` * Bump plugin version to 5.2.0-rc.1 (#14210) * Packages: Add missing expect-pupeteer dependency to e2e-tests package (#14212) * Lowercase Block Editor to block editor as per the core spelling Best Practices (#14205) ## Description I've updated all references to Block Editor to be lowercase as they aren't proper nouns. This conforms to the core spelling Best Practices; “block editor” or “block-based editor” | “Block Editor” or “Gutenberg” | When referring to the new editor. Reference - https://make.wordpress.org/core/handbook/best-practices/spelling/ Also ties back to the original discussion around the capitalization convention here; #12856 Previously opened #14203 to handle the Classic Editor changes. ## How has this been tested? Only tested that it didn't break anything. ## Types of changes Mostly comment changes, there was one string change and a couple translator comment changes. ## Checklist: - [x] My code is tested. - [x] My code follows the WordPress code style. <!-- Check code: `npm run lint`, Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/javascript/ --> - [x] My code follows the accessibility standards. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/coding-standards/accessibility-coding-standards/ --> - [x] My code has proper inline documentation. <!-- Guidelines: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/javascript/ --> - [x] I've included developer documentation if appropriate. <!-- Handbook: https://wordpress.org/gutenberg/handbook/designers-developers/ --> * Babel Preset Default: Avoid disabling regenerator option (#14130) * Babel Preset Default: Remove redundant (defaulted) corejs option * Scripts: Assign Babel runtime regenerator as externals in Webpack config * Babel Preset Default: Avoid disabling regenerator option * Testing: Await E2E promise interactions (#14219) * Testing: Await E2E promise interactions * Testing: Disable animations on every admin screen * Testing: Refactor reusable block management to compare before/after entry count * Lowercase classic editor when not in reference to the plugin. (#14203) * Lowercase classic editor when not in reference to the plugin. * Reverted heading to use capitalized as the heading choice throughout uses full capitalization style on headings so went back to make consistent as @torres126 recommended. Also updated the snap file to resolve the Travis CI error. * Missed saving README.md where the revert on headding capitalization was in my editor. * Fix: Calendar block: Always show current month for non post types on the editor (#13873) * Fix allowed_block_types regression (#14229) * Fix: Latest posts: Title is clickable across the full width of the row (#14109) ## Description The title in latest posts block was clickable across the full width of the row, making it easy to click on the title by mistake. This problem only affects the editor on the front end things worked as expected. ## How has this been tested? I added the latest posts block. I verified that the title is only clickable if the mouse is above the title and not above any part of its row. ## Screenshots <!-- if applicable --> Before:  After:  * Blocks: Regenerate RSS, Search block fixtures (#14122) * Component: date-time: Remove comparison to now when testing getMomentDate (#14230) * RichText: Fix undo after pattern (#13917) * Fix undo after pattern * Update e2e test * RichText: don't use DOM to add line padding (#13850) * RichText: don't use DOM to add line padding * Clean up * Keep track of user inserted line breaks * Mark isEditableTree param unstable * Use a central script instead of one per package to generate docs (#14216) * Update: Use escape key press instead of mouse movement to show block toolbar (#14247) This PR updates our end to end tests to use escape key press instead of mouse movement to show the block toolbar. The PR follows a suggestion by @aduth in #14191 (comment) ## How has this been tested? We only need to make sure end 2 end tests pass * Switch the Travis badge from travis-ci.org to travis-ci.com. (#14250) * Update the npm packages release process (#14136) * Update plugin version to 5.2 (#14255) * chore(release): publish - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] - @wordpress/[email protected] * Update the package changelogs after the npm release * Add clickBlockToolbarButton end to end test util (#14254) This PR adds an end 2 end test util that allows clicking in a block toolbar button and refactors existing code to use it. ## How has this been tested? We only need to verify that the end 2 end tests pass. * element: set up autogenerated API docs (#14269) * Testing: Trash existing posts as admin user (#14244) * escape-html: set up autogenerated API docs (#14268) * html-entities: set up auto-generated API docs (#14267) * keycodes: set up auto-generated API docs (#14265) * Use currentColor for fill of placeholder icon—ensures icon contrasts with background color of block (#14257) * a11y: set up auto-generated API docs (#14288) * blob: set up auto-generated API docs (#14286) * block-library: set up auto-generated API docs (#14282) * compose: set up auto-generated API docs (#14278) * dom: set up auto-generated API docs (#14273) * i18n: set up auto-generated API docs (#14266) * Clarify that we should rebase the branch when preparing the npm release branches (#14260) * autop: set up auto-generated API docs (#14287) * dom-ready: set up autogenerated API docs (#14272) * block-editor: set up auto-generated API docs (#14285) * Adding an e2e test verifying simple keyboard navigation through blocks (#13455) * Adding an e2e test verifying simple keyboard navigation through blocks (Issue #12392) using bug resolved in #11773 as the basis for the steps * Moving `navigateToContentEditorTop`, `tabThroughParagraphBlock`, `tabThroughBlockMoverControl` and `tabThroughBlockToolbar` to the parent scope. Using pressKeyWithModifier within navigateToContentEditorTop. * Add nested blocks inside cover block (#13822) * rich-text: set up autogenerated API docs (#14220) * Add link to WordPress Support documentation (#14316) * Remove users documentation (#14318) * Fix the double dash issue (#14321) The double dash was being converted to a single dash (–) * docgen: Generate package docs in parallel (#14295) * Add new actions for invalidating resolution caches (#14225) * add new actions for invalidating resolution caches * use path array for omit * clarify logic * CC-BY-3.0 is not GPLv2 compatible. (#14329) * blocks: set up auto-generated API docs (#14279) * deprecated: set up auto-generated API docs (#14275) * priority-queue: set-up auto-generated API docs (#14262) * shortcode: set up autogenerated API docs (#14218) * viewport: set up autogenerated API docs in README (#14214) * url: set up autogenerated API docs (#14217) * redux-routine: set up autogenerated API docs (#14228) * date: set up auto-generated API docs (#14276) * block-serialization-default-parser: set up auto-generated API docs (#14280) * RichText: collapse toolbar (#14233) * RichText: collapse toolbar * Move inline image * Add balanced margin * Add tooltip * Update e2e test * Update e2e test * Remove RichTextInserterItem * Ensure there are fills before rendering * Make toggle button bigger * Use clickBlockToolbarButton * Fix e2e test * RichText: fix br padding in multiline and nesting (#14315) * RichText: fix br padding in multiline and nesting * Add e2e test * Docs: Release: Suggest lighter SVN checkout (#14259) * plugins: set up auto-generated API docs (#14263) * Move the block components to the block editor module (#14112) * wordcount: set up autogenerated API docs (#14213) * Update packages used by eslint plugin to remove warnings (#14077) * Update packages used by eslint plugin to remove warnings * Manually modify package-lock.json Props @gziolo. * Specify React version in eslint-plugin-react settings * Fix react/jsx-no-target lint errors * Try Legacy widget block (#13511) ## Description Implements: #4770 This PR is a **proof of concept** of a legacy widget block. A block that allows existing WordPress widgets to be added as Gutenberg blocks. The design is similar to the one proposed by @melchoyce in #4770 (comment) (option 1). Although it seems option two was preferred, it would require to expose each widget as a block similar to what embeds do, and it would increase the technical complexity and make testing/debugging harder, so I preferred to use option 1 for now. I will gladly iterate on the UX after this proof of concept gets more stable. ## Some technical details The available widgets are preloaded to Gutenberg similar to what happens with page templates. ### REST-API user story I want to able to pass a widget identifier to an endpoint, pass the existing widget attributes and the changes the user is making if any, and receive from the rest API, the sanitized new widget attributes ready to save and an HTML form that allows the user to edit the widget in the new state. ### REST-API endpoint A very simple REST-API endpoint was implemented. The endpoint receives the previous instance of a widget (previous attributes) the changed instance of a widget (changed attributes if any) and returns the new instance of the widget and the HTML form that allows editing this widget. There are two ajax-admin endpoints save-widget and update-widget. It looks like each one has specificities that make using it here complex. The ajax admin code would probably require some changes to be used here. Our use case is straightforward from the backend perspective as the widget does not need to be saved anywhere, and the widget is not associated with any widget area. The most straightforward approach seemed to be using a very simple endpoint. If I missed something and adapting existing endpoints is simpler feel free to comment, and I will have a look. ### Block Architecture The edit component of the block handles the start placeholder that allows selecting a widget, and the tab mechanism that allows switching between edit and preview. The preview is done using the ServerSideRender component. The edit is done using two components: **WidgetEditHandler:** Is responsible for server communication using the endpoint we created, and for keeping the required local state for the edition. Renders an update button, when pressed we retrieve from the dom the changed fields (using a method provided by WidgetEditDomManager) issues a request to the server and updates the legacy widget instance attribute with the server answer. **WidgetEditDomManager:** Component responsible for rendering the starting dom for a widget. After the first render React never rerenders the component again, the content rendered by this component is then managed by the scripts the widgets may implement. When a new instance of the form HTML is received we manually update the dom changing .widget-content (like the customizer and the widget screen) do. This component provides a method that returns an object with the widget changed attributes. When this component is mounted it triggers a widget-added event when a new update happens and the dom is changed by the component widget-update jQuery event is triggered. On front end widget are rendered with a simple call to [the_widget](https://codex.wordpress.org/Function_Reference/the_widget). ## Screenshots <!-- if applicable -->   ## Known problems - The block is not aware of any change inside the widget until the update button is pressed. This replicates the save button on the widgets screen. But it is annoying if we change something on the widget and go to the widget preview right away our changes are not reflected in the preview. Having an explicit update, makes testing and debugging easier, we may than explore other approaches e.g.: also save when preview happens, save on blur events, etc. - The text widget that contains TinyMCE crashes and fails to init. It calls wp.editor.initialize to reference TinyMCE and on Gutenberg, wp.editor is our editor module. This problem may have happened with meta boxes if it was solved probably the same approach may be applied. - The widget design may be affected by CSS that exists in Gutenberg, so the design of the widgets does not look the same. Ideally, Gutenberg CSS would not affect the widgets but as they are on the same page that's not the case. - Some third-party widgets using don't initialize correctly. That happens because the dom of the editor is not equal to the dom of the customizer and/or the widget screen. Some JS widgets use click events on the widgets screen to initialize while on Gutenberg these events don't happen, some check if they are on the customizer page (body contains customizer classes) before handling widget-updated events. Normally adapting a widget that does not initialize correctly is a matter of changing a very simple condition on the plugin. * Update changelog for esling-plugin (#14339) * Add ability to transform [video] shortcodes to video block (#14042) * CSS to remove the clipping of the toolbar in RTL languages (#14088) * added the more tag via the old editor's image (#14173) * Seimplify hierarchical term selector strings. (#13938) * Add: End to end test to make sure when all blocks get removed the default block appender gets inserter and selected (#14191) * Fix the Deprecated Blocks link (#14355) The *Deprecated Blocks link* was pointing to the wrong URL. * Added testcases for isKeyboardEvent in keycodes module (#14073) * Added testcases for isKeyboardEvent in keycodes module * Fixed assertion checks and updated attachEventListeners function * Added testcases for isKeyboardEvent in keycodes module * Fixed assertion checks and updated attachEventListeners function * Fix: Quote to heading transform (#14348) * Latest Comments block: use align supports flag + code cleanup (#11411) * ToggleControl allows setting custom classes (#13804) * ToggleControl allows setting custom classes Related Issue: #11349 This pull request fixes the "ToggleControl does not allow setting custom classes" problem. This lets the user to add a custom classname on the element, just like in TextControl. * Update README of toggle-control Add property className and its description * Update packages/components/src/toggle-control/README.md Formatted style of README Co-Authored-By: AmartyaU <[email protected]> * Edited text of button to be actionable (#14347) * Block library: Remove all test snapshots for blocks (#14349) * Fix: Inserter impossible to collapse panels while searching. (#13884) * Make taxonomies test relieable. (#14340) * edit-post: set up autogenerated API docs (#14271) * Plugin: Remove postinstall step (#14353) * Plugin: Remove postinstall step * Framework: Run build for JS unit tests Assumed previously relied on postinstall * Add check to the merge function in headings and paragraph blocks (#13981) If trying to merge a blank heading or paragraph, if this check isn't performed, the result is the string 'Null' appearing in the text. * Update internationalization process with complete updated example. (#13909) * Update internationalization process with complete updated example. * Minor edits * Update i18n package documentation Updates with links to expanded section in Gutenberg Handbook Fixes instructions to use wp-cli which is the recommended tool for creating pot files, and po2json to convert the format. * Apply suggestions from code review Co-Authored-By: mkaz <[email protected]> * Remove duplicate documentation, just link to Handbook * Batch of changes from reviews props @swisspiddy * :shakes-fist-at-whitespace: * Updates to include full .pot and .po files per @nosolosw review * Add JSON translation example * Fix syntax to make gutenberg build in this branch * E2E Test Utils: Add missing babel/runtime dependency (#14374) * Build: Only prompt clean if unclean (#14352) * Remove unused mobile stylesheets * Port editor refactoring for mobile * fix names (#14382) * Add withRegistry HigherOrderComponent (#14370) * Fix block validation error message (#13499) * Rename variable to make code more clear * Fix display of expected and actual block HTML The variable were in the wrong order, making the message confusing. It would show the actual HTML as the expected HTML and visa versa. * Change wording to be more clear Expected & Actual were confusing words to use in this content. This change makes the message actually reflect what the values are. * Regenerate docs * Fix: Global inserter does not validates block insert restrictions (#14020) * Teach build and start commands to use Webpack default if none is provided (#13877) * Use a default webpack config if none is provided * Extract webpack utils from build command * Update start command * Add docs * Add Webpack documentation * Add example of how to overwrite the default plugins * Do not export hasWebpackConfig as it is not used anywhere else. * Always pass webpack CLI args to command * Update README * Remove section on extending the default webpack config file * Simplify array passing Co-Authored-By: nosolosw <[email protected]> * Simplify pushing to array Co-Authored-By: nosolosw <[email protected]> * Fix externals docs * Use webpack instead of Webpack * Add Changelog entry * RichText: Fix prepareEditableTree (#14284) * Fix use of __experimentalCreatePrepareEditableTree without __experimentalCreateOnChangeEditableValue * Add unit tests * Add module entry point to notices package.json file (#14388) * Plugin: Remove PHP functions slated for 5.3 removal (#14380) * Make @wordpress/edit-post compatible with native * Unify styles for UnsupportedBlock after sass build default imports is fixed on native * Remove scss variables and colors import after fixing sass build in gb-mobile * RichText: change value to have separate keys for line and object formats (#13948) * Add objects and lineFormats * Update RichText * Fix image toolbar * Update format placeholder * lineFormat => lines * concatPair => mergePair * Update selectedFormat checks * Add some extra info to create docs * Move create docs inline * Merge lines and objects * Fix typos * Add getActiveObject unit tests * Update docs * Rebase * Adjust unstableToDom arguments * Remove normaliseFormats from list functions * Update native files * Update native file * Remove code formatting for mobile * RichText: try alternative list shortcuts (to tab) (#14343) * RichText: try alternative list shortcuts * Try tooltips * Change tooltips to use text * Add inline comments * Add e2e test * Rebase * Remove unused styles classes. (#14338) * [Mobile]Fix placeholder position of block appender (#14386) * Fix placeholder position of block appender * Remove unused import * Change import position * Remove unused import in css file * Remove extra container view * Update travis.yml from master branch to fix CI issues * [Mobile]Update caret position on insert link (#14317) * Update selection on text change if needed * Update caret position when editing the link * Revert putting the caret at end when we transform the selected text into link * Fix source map paths published to npm (#14409) * Components: update Button readme to add design guidelines (#14194) These changes add design documentation. Co-Authored-By: kjellr <[email protected]> * Remove export from syntax still a proposal * Update README.md * [RNmobile] Bring Placeholder text back working on Heading blocks (#14404) * Remove the temporary fix for heading issue on Android, and let's pass the `tagName` value down to the Native wrapper * Do not pass the `tagName` prop to AztecView * The heading block now uses a minHeight defined in variables.scss, in the outer mobile project. This is a fix for an ugly rendering issue we're seeing with the placeholder when starting wrinting text. * Add missing file from the prev commit * Remove import of variaboe.scss since it's not required an explict import anymore after latest changes to GB. * Add disableEditingMenu prop to manage showing editing menu on iOS (#14435) * Fix merge errors * Update README.md * Fix tab linting error in scss * [React Native] request cancel image upload (#14391) * added hook blocks.onRemoveBlockCheckUpload called in componentWillUnmount to make sure to cancel upload if block is deleted * removed unused import * moving bridge-specific code to Image component - if the filter exists and returns true, the upload cancellation will be requested * using hook actions instead of filters * Fix lint errors * Investigate travis error * Line modifications for packages/block-editor/src/index.js * Fix circle dependency * Update README.md * Revert travis logging
|
a lot of widgets will not work because of a lot of factors... so will this idea be implemented or revoked? |
|
Hi @spacedmonkey and @alexvornoffice thank you for sharing your thoughts.
This PR had a very specific need for an endpoint that executed the widget update logic without changing anything in the database and that also returned the HTML form. It also needs to access widgets that are installed but for which no instance is currently using them. During the research I did it seemed the endpoint you suggested would not cover these needs.
Most widgets not working fall into two categories:
Both these problems will be mitigated as soon as we use the block in the widget screen itself. Because the dom will be more similar and because the checks depending on the screen will continue to verify. That said this solution is far from perfect and we are improving it. If someone has an idea for a better/more reliable approach we can give a try, we are totally open to alternatives. |
|
@jorgefilipecosta So this API is not designed to a the canonical REST API for Widget to create / edit / delete / get them? It only does 2 very limited things? Then why name widgets? This stops us using that namespace for a real CRUD api latest. Creating api that have limited / confusing use seems unwise. REST api, should implement all methods where possible. |
|
Just wanted to mention based on my reading, I don't think it'll work for registering a widget instance. ie |
aduth
reviewed
Dec 3, 2019
| className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` } | ||
| onClick={ this.switchToEdit } | ||
| > | ||
| <span>{ __( 'Edit' ) }</span> |
There was a problem hiding this comment.
What is the purpose of the span here and in the button below?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Implements: #4770
This PR is a proof of concept of a legacy widget block. A block that allows existing WordPress widgets to be added as Gutenberg blocks.
The design is similar to the one proposed by @melchoyce in #4770 (comment) (option 1). Although it seems option two was preferred, it would require to expose each widget as a block similar to what embeds do, and it would increase the technical complexity and make testing/debugging harder, so I preferred to use option 1 for now. I will gladly iterate on the UX after this proof of concept gets more stable.
Some technical details
The available widgets are preloaded to Gutenberg similar to what happens with page templates.
REST-API user story
I want to able to pass a widget identifier to an endpoint, pass the existing widget attributes and the changes the user is making if any, and receive from the rest API, the sanitized new widget attributes ready to save and an HTML form that allows the user to edit the widget in the new state.
REST-API endpoint
A very simple REST-API endpoint was implemented. The endpoint receives the previous instance of a widget (previous attributes) the changed instance of a widget (changed attributes if any) and returns the new instance of the widget and the HTML form that allows editing this widget.
There are two ajax-admin endpoints save-widget and update-widget. It looks like each one has specificities that make using it here complex. The ajax admin code would probably require some changes to be used here. Our use case is straightforward from the backend perspective as the widget does not need to be saved anywhere, and the widget is not associated with any widget area. The most straightforward approach seemed to be using a very simple endpoint. If I missed something and adapting existing endpoints is simpler feel free to comment, and I will have a look.
Block Architecture
The edit component of the block handles the start placeholder that allows selecting a widget, and the tab mechanism that allows switching between edit and preview.
The preview is done using the ServerSideRender component.
The edit is done using two components:
WidgetEditHandler: Is responsible for server communication using the endpoint we created, and for keeping the required local state for the edition. Renders an update button, when pressed we retrieve from the dom the changed fields (using a method provided by WidgetEditDomManager) issues a request to the server and updates the legacy widget instance attribute with the server answer.
WidgetEditDomManager: Component responsible for rendering the starting dom for a widget. After the first render React never rerenders the component again, the content rendered by this component is then managed by the scripts the widgets may implement. When a new instance of the form HTML is received we manually update the dom changing .widget-content (like the customizer and the widget screen) do. This component provides a method that returns an object with the widget changed attributes. When this component is mounted it triggers a widget-added event when a new update happens and the dom is changed by the component widget-update jQuery event is triggered.
On front end widget are rendered with a simple call to the_widget.
Screenshots
Known problems
The block is not aware of any change inside the widget until the update button is pressed. This replicates the save button on the widgets screen. But it is annoying if we change something on the widget and go to the widget preview right away our changes are not reflected in the preview. Having an explicit update, makes testing and debugging easier, we may than explore other approaches e.g.: also save when preview happens, save on blur events, etc.
The text widget that contains TinyMCE crashes and fails to init. It calls wp.editor.initialize to reference TinyMCE and on Gutenberg, wp.editor is our editor module. This problem may have happened with meta boxes if it was solved probably the same approach may be applied.
The widget design may be affected by CSS that exists in Gutenberg, so the design of the widgets does not look the same. Ideally, Gutenberg CSS would not affect the widgets but as they are on the same page that's not the case.
Some third-party widgets using don't initialize correctly. That happens because the dom of the editor is not equal to the dom of the customizer and/or the widget screen. Some JS widgets use click events on the widgets screen to initialize while on Gutenberg these events don't happen, some check if they are on the customizer page (body contains customizer classes) before handling widget-updated events. Normally adapting a widget that does not initialize correctly is a matter of changing a very simple condition on the plugin.