Package: wagtail-webstories-editor
wagtail-webstories-editorIntegrate Google Web Stories Editor in Wagtail Projects.This is an effort to integrate the standalone version
ofWeb Stories for WordPress plugininto wagtail.Table of ContentsOverviewFeaturesInstallationUsageSettingsIntegrating with Pages for links and SEOExample ProjectOverviewThis package bringsWeb Stories for WordPress pluginto Wagtail
by providing integrations with the Wagtail Admin, mainly by use of custom snippet viewsetsFeaturesEditor for creating webstories. The editor brings most features provided by
theWeb Stories for WordPressDashboard for listing and managing storiesSettings interface for configuring web stories settings including:Google Analytics IntegrationSetting publisher logosOpt-in to use Google Cache for videosIntegration withWagtail Imagesto use the Wagtail image chooser
andWagtail Mediato use it'sMedia ChoosersforAudioandVideoOn top of the features provided by the Editor and Dashboard, the package uses most of
theSnippets Optional Featuresto enable the
following features:Making WebStories previewable using the wagtailPreviewableMixinSaving revisions for WebStories usingRevisionMixinSaving draft changes for WebStories usingDraftStateMixinLocking WebStories usingLockableMixinEnabling workflows for WebStories usingWorkflowMixinInstallationpipinstallwagtail-webstories-editorThe following dependencies will be installed as well if not yet installed:django-filterwagtailmediaUsageAdd the following to yourINSTALLED_APPSif not yet added:INSTALLED_APPS=[..."wagtail_webstories_editor","wagtail.api.v2","wagtailmedia","django_filters","wagtail.contrib.settings","django.contrib.sitemaps",...]Run migrationspythonmanage.pymigratewagtail_webstories_editorYou also need to enableWagtail's APIfor images, documents, and media. To do, you can follow the steps below:Make surewagtail.api.v2is added to your installed appsCreate anapi.pywhere you will configure your endpoints to expose .The package adds a few custom functions to the
default provided Images, Documents, and Media ViewSet classes to build compatibility with WebStoriesapiCallbacks.
You can import them and use them as below:# api.pyfromwagtail.api.v2.routerimportWagtailAPIRouterfromwagtail_webstories_editor.api_viewsetsimport(CustomImagesAPIViewSet,CustomMediaAPIViewSet,CustomDocumentAPIViewSet)api_router=WagtailAPIRouter('wagtailapi')api_router.register_endpoint('images',CustomImagesAPIViewSet)api_router.register_endpoint("media",CustomMediaAPIViewSet)api_router.register_endpoint('documents',CustomDocumentAPIViewSet)Next, register the URLs so Django can route requests into the API:# urls.pyfrom.apiimportapi_routerurlpatterns=[...path('api/v2/',api_router.urls),...# Ensure that the api_router line appears above the default Wagtail page serving routere_path(r'^',include(wagtail_urls)),]If everything went ok, a newWeb Storiesmenu item will be to your Wagtail Admin MenuClick to show the WebStories dashboardCreate a new WebStoryAccess WebStories SettingsSettingsWAGTAIL_WEBSTORIES_EDITOR_LISTING_PAGE_MODEL: Model for your WebStories listing Page. This will be used to generate
urls for individual stories, since stories are saved as snippets and not Wagtail Pages. See below for detailsIntegrating with Wagtail pages for story links and SEOWebStories uses Wagtail Snippets to integrate the Editor and Dashboard. The settings component uses Wagtail Site
Settings.To get links for individual WebStories on publishing, you can create a listing page and tell the WebStories package
about it. The package provides an abstract page that you could inherit from:# app/models.pyfromwagtail_webstories_editor.modelsimportAbstractWebStoryListPageclassWebStoryListPage(AbstractWebStoryListPage):passand then in yoursettings.py, tell webstories about the page class:# settings.pyWAGTAIL_WEBSTORIES_EDITOR_LISTING_PAGE_MODEL="app.WebStoryListPage"Ideally you should createonly oneinstance of this WebStoryListPage in your Wagtail Project. If you create multiple,
the first one to be queried will be usedTheAbstractWebStoryListPageadds a few functionalities to help working with WebStories:By using Wagtail'sRoutablePageMixin, Web
Stories will be served to users using sub-urls from the listing pageBy extendingget_sitemap_urlsmethod of the Wagtail's Page model, we are able to add all the urls ofliveWebStories to Wagtail's autogenerated sitemap, and thus making sure your Web Stories are well indexed for SEOExample ProjectYou can find a complete example project showing how to use this package in thesandboxfolder