-
Notifications
You must be signed in to change notification settings - Fork 2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add premium content button block for login and subscribe buttons (#42715
- Loading branch information
Showing
20 changed files
with
943 additions
and
520 deletions.
There are no files selected for viewing
87 changes: 87 additions & 0 deletions
87
apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/edit.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| // eslint-disable-next-line wpcalypso/import-docblock | ||
| import { | ||
| __experimentalAlignmentHookSettingsProvider as AlignmentHookSettingsProvider, | ||
| InnerBlocks, | ||
| __experimentalBlock as Block, | ||
| } from '@wordpress/block-editor'; | ||
| import { compose } from '@wordpress/compose'; | ||
| import { withDispatch, withSelect } from '@wordpress/data'; | ||
| import { useEffect } from '@wordpress/element'; | ||
| import { __ } from '@wordpress/i18n'; | ||
|
|
||
| const ALLOWED_BLOCKS = [ | ||
| 'core/button', | ||
| 'jetpack/recurring-payments', | ||
| 'premium-content/login-button', | ||
| ]; | ||
|
|
||
| // Inside buttons block alignment options are not supported. | ||
| const alignmentHooksSetting = { | ||
| isEmbedButton: true, | ||
| }; | ||
|
|
||
| function ButtonsEdit( { context, innerBlocks, setRecurringPaymentsPlan } ) { | ||
| const planId = context[ 'premium-content/planId' ]; | ||
|
|
||
| const template = [ | ||
| [ | ||
| 'jetpack/recurring-payments', | ||
| { | ||
| planId, | ||
| submitButtonText: __( 'Subscribe', 'full-site-editing' ), | ||
| }, | ||
| ], | ||
| [ 'premium-content/login-button' ], | ||
| ]; | ||
|
|
||
| useEffect( () => { | ||
| if ( planId ) { | ||
| // Updates the plan on any Recurring Payment inner block. | ||
| setRecurringPaymentsPlan( planId ); | ||
| } | ||
| }, [ planId, innerBlocks ] ); | ||
|
|
||
| return ( | ||
| // eslint-disable-next-line wpcalypso/jsx-classname-namespace | ||
| <Block.div className="wp-block-buttons"> | ||
| <AlignmentHookSettingsProvider value={ alignmentHooksSetting }> | ||
| <InnerBlocks | ||
| allowedBlocks={ ALLOWED_BLOCKS } | ||
| template={ template } | ||
| __experimentalMoverDirection="horizontal" | ||
| /> | ||
| </AlignmentHookSettingsProvider> | ||
| </Block.div> | ||
| ); | ||
| } | ||
|
|
||
| export default compose( [ | ||
| withSelect( ( select, props ) => ( { | ||
| innerBlocks: select( 'core/block-editor' ).getBlock( props.clientId ).innerBlocks, | ||
| } ) ), | ||
| withDispatch( ( dispatch, props, registry ) => ( { | ||
| /** | ||
| * Updates the selected plan on the Recurring Payments inner block. | ||
| * | ||
| * @param planId {int} Recurring Payments plan. | ||
| */ | ||
| setRecurringPaymentsPlan( planId ) { | ||
| const { updateBlockAttributes } = dispatch( 'core/block-editor' ); | ||
| const { getBlock } = registry.select( 'core/block-editor' ); | ||
|
|
||
| const updatePlanAttribute = ( block ) => { | ||
| if ( block.name === 'jetpack/recurring-payments' ) { | ||
| updateBlockAttributes( block.clientId, { planId } ); | ||
| } | ||
|
|
||
| block.innerBlocks.forEach( updatePlanAttribute ); | ||
| }; | ||
|
|
||
| const block = getBlock( props.clientId ); | ||
| updatePlanAttribute( block ); | ||
| }, | ||
| } ) ), | ||
| ] )( ButtonsEdit ); |
36 changes: 36 additions & 0 deletions
36
apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/index.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { button as icon } from '@wordpress/icons'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import edit from './edit'; | ||
| import save from './save'; | ||
|
|
||
| const name = 'premium-content/buttons'; | ||
| const category = 'design'; | ||
|
|
||
| const settings = { | ||
| name, | ||
| category, | ||
| title: __( 'Premium Content buttons', 'full-site-editing' ), | ||
| description: __( | ||
| 'Prompt Premium Content visitors to take action with a group of button-style links.', | ||
| 'full-site-editing' | ||
| ), | ||
| icon, | ||
| supports: { | ||
| align: true, | ||
| alignWide: false, | ||
| lightBlockWrapper: true, | ||
| }, | ||
| keywords: [ __( 'link', 'full-site-editing' ) ], | ||
| edit, | ||
| save, | ||
| context: [ 'premium-content/planId' ], | ||
| }; | ||
|
|
||
| export { name, category, settings }; |
14 changes: 14 additions & 0 deletions
14
apps/full-site-editing/full-site-editing-plugin/premium-content/blocks/buttons/save.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| // eslint-disable-next-line wpcalypso/import-docblock | ||
| import { InnerBlocks } from '@wordpress/block-editor'; | ||
|
|
||
| export default function save() { | ||
| return ( | ||
| // eslint-disable-next-line wpcalypso/jsx-classname-namespace | ||
| <div className="wp-block-buttons"> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| ); | ||
| } |
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
76 changes: 76 additions & 0 deletions
76
...ite-editing/full-site-editing-plugin/premium-content/blocks/logged-out-view/deprecated.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| // eslint-disable-next-line wpcalypso/import-docblock | ||
| import { createBlock } from '@wordpress/blocks'; | ||
| import { InnerBlocks } from '@wordpress/block-editor'; | ||
|
|
||
| const deprecated = [ | ||
| { | ||
| attributes: { | ||
| subscribeButtonText: { | ||
| type: 'string', | ||
| default: 'Subscribe', | ||
| }, | ||
| loginButtonText: { | ||
| type: 'string', | ||
| default: 'Log In', | ||
| }, | ||
| buttonClasses: { | ||
| type: 'string', | ||
| default: '', | ||
| }, | ||
| backgroundButtonColor: { | ||
| type: 'string', | ||
| default: '', | ||
| }, | ||
| textButtonColor: { | ||
| type: 'string', | ||
| default: '', | ||
| }, | ||
| customBackgroundButtonColor: { | ||
| type: 'string', | ||
| default: '', | ||
| }, | ||
| customTextButtonColor: { | ||
| type: 'string', | ||
| default: '', | ||
| }, | ||
| }, | ||
|
|
||
| isEligible: ( { buttonClasses } ) => !! buttonClasses, | ||
|
|
||
| migrate: ( attributes, innerBlocks ) => { | ||
| const buttons = createBlock( 'premium-content/buttons', {}, [ | ||
| createBlock( 'jetpack/recurring-payments', { | ||
| submitButtonText: attributes.subscribeButtonText, | ||
| backgroundButtonColor: attributes.backgroundButtonColor, | ||
| textButtonColor: attributes.textButtonColor, | ||
| customBackgroundButtonColor: attributes.customBackgroundButtonColor, | ||
| customTextButtonColor: attributes.customTextButtonColor, | ||
| } ), | ||
| createBlock( 'premium-content/login-button', { | ||
| text: attributes.loginButtonText, | ||
| backgroundColor: attributes.backgroundButtonColor, | ||
| textColor: attributes.textButtonColor, | ||
| style: { | ||
| color: { | ||
| background: attributes.customBackgroundButtonColor, | ||
| text: attributes.customTextButtonColor, | ||
| }, | ||
| }, | ||
| } ), | ||
| ] ); | ||
| return [ attributes, [ ...innerBlocks, buttons ] ]; | ||
| }, | ||
|
|
||
| save: () => ( | ||
| // eslint-disable-next-line wpcalypso/jsx-classname-namespace | ||
| <div className="wp-block-premium-content-logged-out-view"> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| ), | ||
| }, | ||
| ]; | ||
|
|
||
| export default deprecated; |
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
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
Oops, something went wrong.